diff --git a/app/src/mobile/util/keyboardToolbar.ts b/app/src/mobile/util/keyboardToolbar.ts index 50cb2c13a..9440849aa 100644 --- a/app/src/mobile/util/keyboardToolbar.ts +++ b/app/src/mobile/util/keyboardToolbar.ts @@ -1,17 +1,12 @@ import {listIndent, listOutdent} from "../../protyle/wysiwyg/list"; -import {hasClosestBlock, hasClosestByMatchTag} from "../../protyle/util/hasClosest"; +import {hasClosestBlock, hasClosestByClassName, hasClosestByMatchTag} from "../../protyle/util/hasClosest"; import {insertEmptyBlock} from "../../block/util"; import {moveToDown, moveToUp} from "../../protyle/wysiwyg/move"; import {Constants} from "../../constants"; import {focusByRange, getSelectionPosition} from "../../protyle/util/selection"; export const showKeyboardToolbar = (bottom = 0) => { - if (getSelection().rangeCount === 0) { - return; - } - const range = getSelection().getRangeAt(0); - if (!window.siyuan.mobile.editor || - !window.siyuan.mobile.editor.protyle.wysiwyg.element.contains(range.startContainer)) { + if (getSelection().rangeCount === 0 || window.siyuan.config.editor.readOnly || window.siyuan.config.readonly) { return; } const toolbarElement = document.getElementById("keyboardToolbar"); @@ -21,6 +16,11 @@ export const showKeyboardToolbar = (bottom = 0) => { toolbarElement.classList.remove("fn__none"); toolbarElement.style.bottom = bottom + "px"; + const range = getSelection().getRangeAt(0); + if (!window.siyuan.mobile.editor || + !window.siyuan.mobile.editor.protyle.wysiwyg.element.contains(range.startContainer)) { + return; + } setTimeout(() => { const contentElement = window.siyuan.mobile.editor.protyle.contentElement; const cursorTop = getSelectionPosition(contentElement).top - contentElement.getBoundingClientRect().top; @@ -35,28 +35,17 @@ export const showKeyboardToolbar = (bottom = 0) => { }, Constants.TIMEOUT_TRANSITION); }; -export const renderKeyboardToolbar = (protyle: IProtyle, range: Range) => { - const toolbarElement = document.getElementById("keyboardToolbar"); - const inlineHTML = ` - - - - - - - - - - - - - - - - - -`; - const html = ` +let renderKeyboardToolbarTimeout: number; +export const renderKeyboardToolbar = () => { + clearTimeout(renderKeyboardToolbarTimeout) + renderKeyboardToolbarTimeout = window.setTimeout(() => { + if (getSelection().rangeCount === 0 || window.siyuan.config.editor.readOnly || window.siyuan.config.readonly) { + return; + } + const range = getSelection().getRangeAt(0); + let html = "" + if (hasClosestByClassName(range.startContainer, "protyle-wysiwyg", true)) { + html = ` @@ -70,12 +59,36 @@ export const renderKeyboardToolbar = (protyle: IProtyle, range: Range) => { `; - toolbarElement.innerHTML = `
-
${html}
-
${inlineHTML}
+ } + const selectText = range.toString(); + console.log(range) + document.getElementById("keyboardToolbar").innerHTML = `
+
${html}
+
+ + + + + + + + + + + + + + + + + + + +
`; + }, 620) // 需等待 range 更新 }; export const hideKeyboardToolbar = () => { @@ -87,29 +100,10 @@ export const hideKeyboard = () => { (document.activeElement as HTMLElement).blur(); }; -const disabledKeyboardToolbar = () => { - document.querySelectorAll("#keyboardToolbar button").forEach(item => { - if (item.getAttribute("data-type") !== "all") { - item.setAttribute("disabled", "disabled"); - } - }); -}; - -const enKeyboardToolbar = () => { - document.querySelectorAll("#keyboardToolbar button").forEach(item => { - item.removeAttribute("disabled"); - }); -}; - export const initKeyboardToolbar = () => { - window.addEventListener("focus", (event) => { - const target = event.target as HTMLElement; - if (["INPUT", "TEXTAREA"].includes(target.tagName)) { - disabledKeyboardToolbar(); - } else if (target.classList.contains("protyle-wysiwyg")) { - enKeyboardToolbar(); - } - }, true); + document.addEventListener("selectionchange", () => { + renderKeyboardToolbar() + }, false); const toolbarElement = document.getElementById("keyboardToolbar"); toolbarElement.addEventListener("click", (event) => { diff --git a/app/src/protyle/toolbar/index.ts b/app/src/protyle/toolbar/index.ts index 4c02db5ee..e512e028c 100644 --- a/app/src/protyle/toolbar/index.ts +++ b/app/src/protyle/toolbar/index.ts @@ -68,7 +68,7 @@ export class Toolbar { public render(protyle: IProtyle, range: Range, event?: KeyboardEvent) { this.range = range; let nodeElement = hasClosestBlock(range.startContainer); - if (!nodeElement || protyle.disabled) { + if (isMobile() || !nodeElement || protyle.disabled) { this.element.classList.add("fn__none"); return; } diff --git a/app/src/protyle/wysiwyg/index.ts b/app/src/protyle/wysiwyg/index.ts index c8f08896d..8ea603f5c 100644 --- a/app/src/protyle/wysiwyg/index.ts +++ b/app/src/protyle/wysiwyg/index.ts @@ -51,8 +51,6 @@ import {getAllModels} from "../../layout/getAll"; import {pushBack} from "../../util/backForward"; import {openAsset, openBy, openFileById} from "../../editor/util"; import {openGlobalSearch} from "../../search/util"; -/// #else -import {renderKeyboardToolbar} from "../../mobile/util/keyboardToolbar"; /// #endif import {BlockPanel} from "../../block/Panel"; import {isCtrl, openByMobile} from "../util/compatibility"; @@ -1902,8 +1900,6 @@ export class WYSIWYG { } else { hideElements(["toolbar"], protyle); } - /// #else - renderKeyboardToolbar(protyle, newRange); /// #endif if (!protyle.wysiwyg.element.querySelector(".protyle-wysiwyg--select")) { countSelectWord(newRange, protyle.block.rootID);