This commit is contained in:
Vanessa 2023-03-20 21:02:37 +08:00
parent 91457dc2cd
commit 9cae635647
3 changed files with 17 additions and 10 deletions

View file

@ -44,7 +44,7 @@ export const insertHTML = (html: string, protyle: IProtyle, isBlock = false,
blockElement.setAttribute("updated", dayjs().format("YYYYMMDDHHmmss")); blockElement.setAttribute("updated", dayjs().format("YYYYMMDDHHmmss"));
updateTransaction(protyle, id, blockElement.outerHTML, oldHTML); updateTransaction(protyle, id, blockElement.outerHTML, oldHTML);
setTimeout(() => { setTimeout(() => {
scrollCenter(protyle, blockElement); scrollCenter(protyle, blockElement, false, "smooth");
}, Constants.TIMEOUT_BLOCKLOAD); }, Constants.TIMEOUT_BLOCKLOAD);
return; return;
} }

View file

@ -78,7 +78,7 @@ export const pasteText = (protyle: IProtyle, textPlain: string, nodeElement: Ele
processRender(protyle.wysiwyg.element); processRender(protyle.wysiwyg.element);
highlightRender(protyle.wysiwyg.element); highlightRender(protyle.wysiwyg.element);
filterClipboardHint(protyle, textPlain); filterClipboardHint(protyle, textPlain);
scrollCenter(protyle); scrollCenter(protyle, undefined, false, "smooth");
}; };
export const paste = async (protyle: IProtyle, event: (ClipboardEvent | DragEvent) & { target: HTMLElement }) => { export const paste = async (protyle: IProtyle, event: (ClipboardEvent | DragEvent) & { target: HTMLElement }) => {
@ -262,7 +262,7 @@ export const paste = async (protyle: IProtyle, event: (ClipboardEvent | DragEven
processRender(protyle.wysiwyg.element); processRender(protyle.wysiwyg.element);
highlightRender(protyle.wysiwyg.element); highlightRender(protyle.wysiwyg.element);
filterClipboardHint(protyle, response.data); filterClipboardHint(protyle, response.data);
scrollCenter(protyle); scrollCenter(protyle, undefined, false, "smooth");
}); });
return; return;
} else if (files && files.length > 0) { } else if (files && files.length > 0) {
@ -285,5 +285,5 @@ export const paste = async (protyle: IProtyle, event: (ClipboardEvent | DragEven
processRender(protyle.wysiwyg.element); processRender(protyle.wysiwyg.element);
highlightRender(protyle.wysiwyg.element); highlightRender(protyle.wysiwyg.element);
} }
scrollCenter(protyle); scrollCenter(protyle, undefined, false, "smooth");
}; };

View file

@ -38,14 +38,18 @@ export const highlightById = (protyle: IProtyle, id: string, top = false) => {
} }
}; };
export const scrollCenter = (protyle: IProtyle, nodeElement?: Element, top = false) => { export const scrollCenter = (protyle: IProtyle, nodeElement?: Element, top = false, behavior: ScrollBehavior = "auto") => {
if (!top && getSelection().rangeCount > 0 && hasClosestBlock(getSelection().getRangeAt(0).startContainer)) { if (!top && getSelection().rangeCount > 0 && hasClosestBlock(getSelection().getRangeAt(0).startContainer)) {
const editorElement = protyle.contentElement; const editorElement = protyle.contentElement;
const cursorTop = getSelectionPosition(editorElement).top - editorElement.getBoundingClientRect().top; const cursorTop = getSelectionPosition(editorElement).top - editorElement.getBoundingClientRect().top;
let top = 0
if (cursorTop < 0) { if (cursorTop < 0) {
editorElement.scrollTop = editorElement.scrollTop + cursorTop; top = editorElement.scrollTop + cursorTop;
} else if (cursorTop > editorElement.clientHeight - 74) { // 74 = 移动端底部 + 段落块高度 } else if (cursorTop > editorElement.clientHeight - 74) { // 74 = 移动端底部 + 段落块高度
editorElement.scrollTop = editorElement.scrollTop + (cursorTop + 74 - editorElement.clientHeight); top = editorElement.scrollTop + (cursorTop + 74 - editorElement.clientHeight);
}
if (top !== 0) {
editorElement.scroll({top, behavior});
} }
return; return;
} }
@ -64,12 +68,15 @@ export const scrollCenter = (protyle: IProtyle, nodeElement?: Element, top = fal
parentNodeElement = parentNodeElement.parentElement; parentNodeElement = parentNodeElement.parentElement;
} }
if (top) { if (top) {
protyle.contentElement.scrollTop = offsetTop - 32; protyle.contentElement.scroll({top: offsetTop - 32, behavior});
return; return;
} }
if (protyle.contentElement.scrollTop > offsetTop - 32) { if (protyle.contentElement.scrollTop > offsetTop - 32) {
protyle.contentElement.scrollTop = offsetTop - 32; protyle.contentElement.scroll({top: offsetTop - 32, behavior});
} else if (protyle.contentElement.scrollTop + protyle.contentElement.clientHeight < offsetTop + nodeElement.clientHeight - 32) { } else if (protyle.contentElement.scrollTop + protyle.contentElement.clientHeight < offsetTop + nodeElement.clientHeight - 32) {
protyle.contentElement.scrollTop = offsetTop + nodeElement.clientHeight - 32 - protyle.contentElement.clientHeight; protyle.contentElement.scroll({
top: offsetTop + nodeElement.clientHeight - 32 - protyle.contentElement.clientHeight,
behavior
});
} }
}; };