diff --git a/app/src/protyle/ui/initUI.ts b/app/src/protyle/ui/initUI.ts index 572a51bca..166b0634d 100644 --- a/app/src/protyle/ui/initUI.ts +++ b/app/src/protyle/ui/initUI.ts @@ -8,6 +8,10 @@ import {fetchPost} from "../../util/fetch"; import {lineNumberRender} from "../render/highlightRender"; import {hideMessage, showMessage} from "../../dialog/message"; import {genUUID} from "../../util/genID"; +import {getContenteditableElement, getLastBlock} from "../wysiwyg/getBlock"; +import {genEmptyElement} from "../../block/util"; +import {transaction} from "../wysiwyg/transaction"; +import {focusByRange} from "../util/selection"; export const initUI = (protyle: IProtyle) => { protyle.contentElement = document.createElement("div"); @@ -91,6 +95,48 @@ export const initUI = (protyle: IProtyle) => { }); }, Constants.TIMEOUT_LOAD); }, {passive: false}); + protyle.contentElement.addEventListener("click", (event: MouseEvent & { target: HTMLElement }) => { + // wysiwyg 元素下方点击无效果 https://github.com/siyuan-note/siyuan/issues/12009 + if (protyle.disabled || + (!event.target.classList.contains("protyle-content") && !event.target.classList.contains("protyle-wysiwyg"))) { + return + } + const lastRect = protyle.wysiwyg.element.lastElementChild.getBoundingClientRect(); + const range = document.createRange(); + if (event.y > lastRect.bottom) { + const lastEditElement = getContenteditableElement(getLastBlock(protyle.wysiwyg.element.lastElementChild)); + if (!lastEditElement || + (protyle.wysiwyg.element.lastElementChild.getAttribute("data-type") !== "NodeParagraph" && protyle.wysiwyg.element.getAttribute("data-doc-type") !== "NodeListItem") || + (protyle.wysiwyg.element.lastElementChild.getAttribute("data-type") === "NodeParagraph" && getContenteditableElement(lastEditElement).innerHTML !== "")) { + const emptyElement = genEmptyElement(false, false); + protyle.wysiwyg.element.insertAdjacentElement("beforeend", emptyElement); + transaction(protyle, [{ + action: "insert", + data: emptyElement.outerHTML, + id: emptyElement.getAttribute("data-node-id"), + previousID: emptyElement.previousElementSibling.getAttribute("data-node-id"), + parentID: protyle.block.parentID + }], [{ + action: "delete", + id: emptyElement.getAttribute("data-node-id") + }]); + const emptyEditElement = getContenteditableElement(emptyElement) as HTMLInputElement; + range.selectNodeContents(emptyEditElement); + range.collapse(true); + focusByRange(range); + // 需等待 range 更新再次进行渲染 + if (protyle.options.render.breadcrumb) { + setTimeout(() => { + protyle.breadcrumb.render(protyle); + }, Constants.TIMEOUT_TRANSITION); + } + } else if (lastEditElement) { + range.selectNodeContents(lastEditElement); + range.collapse(false); + focusByRange(range); + } + } + }); }; export const addLoading = (protyle: IProtyle, msg?: string) => { diff --git a/app/src/protyle/wysiwyg/index.ts b/app/src/protyle/wysiwyg/index.ts index 4de0f96e1..a85dfa710 100644 --- a/app/src/protyle/wysiwyg/index.ts +++ b/app/src/protyle/wysiwyg/index.ts @@ -2515,44 +2515,6 @@ export class WYSIWYG { return; } - // 点击空白 - if (event.target.contains(this.element) && this.element.lastElementChild && !protyle.disabled) { - const lastRect = this.element.lastElementChild.getBoundingClientRect(); - if (event.y > lastRect.bottom) { - const lastEditElement = getContenteditableElement(getLastBlock(this.element.lastElementChild)); - if (!lastEditElement || - (this.element.lastElementChild.getAttribute("data-type") !== "NodeParagraph" && protyle.wysiwyg.element.getAttribute("data-doc-type") !== "NodeListItem") || - (this.element.lastElementChild.getAttribute("data-type") === "NodeParagraph" && getContenteditableElement(lastEditElement).innerHTML !== "")) { - const emptyElement = genEmptyElement(false, false); - this.element.insertAdjacentElement("beforeend", emptyElement); - transaction(protyle, [{ - action: "insert", - data: emptyElement.outerHTML, - id: emptyElement.getAttribute("data-node-id"), - previousID: emptyElement.previousElementSibling.getAttribute("data-node-id"), - parentID: protyle.block.parentID - }], [{ - action: "delete", - id: emptyElement.getAttribute("data-node-id") - }]); - const emptyEditElement = getContenteditableElement(emptyElement) as HTMLInputElement; - range.selectNodeContents(emptyEditElement); - range.collapse(true); - focusByRange(range); - // 需等待 range 更新再次进行渲染 - if (protyle.options.render.breadcrumb) { - setTimeout(() => { - protyle.breadcrumb.render(protyle); - }, Constants.TIMEOUT_TRANSITION); - } - } else if (lastEditElement) { - range.selectNodeContents(lastEditElement); - range.collapse(false); - focusByRange(range); - } - } - } - setTimeout(() => { // 选中后,在选中的文字上点击需等待 range 更新 let newRange = getEditorRange(this.element);