✨ fix https://github.com/siyuan-note/siyuan/issues/7553

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 = `<button data-type="indent"><svg><use xlink:href="#iconBack"></use></svg></button>
-<button data-type="indent"><svg><use xlink:href="#iconRef"></use></svg></button>
-<button data-type="block-ref"<use xlink:href="#iconRef"></use></svg></button>
-<button data-type="a"><svg><use xlink:href="#iconLink"></use></svg></button>
-<button data-type="text"><svg><use xlink:href="#iconFont"></use></svg></button>
-<button data-type="strong"><svg><use xlink:href="#iconBold"></use></svg></button>
-<button data-type="em"><svg><use xlink:href="#iconItalic"></use></svg></button>
-<button data-type="u"><svg><use xlink:href="#iconUnderline"></use></svg></button>
-<button data-type="s"><svg><use xlink:href="#iconStrike"></use></svg></button>
-<button data-type="mark"><svg><use xlink:href="#iconMark"></use></svg></button>
-<button data-type="sup"><svg><use xlink:href="#iconSup"></use></svg></button>
-<button data-type="sub"><svg><use xlink:href="#iconSub"></use></svg></button>
-<button data-type="clear"><svg><use xlink:href="#iconClear"></use></svg></button>
-<button data-type="code"><svg><use xlink:href="#iconInlineCode"></use></svg></button>
-<button data-type="kbd"<use xlink:href="#iconKeymap"></use></svg></button>
-<button data-type="tag"><svg><use xlink:href="#iconTags"></use></svg></button>
-<button data-type="inline-math"><svg><use xlink:href="#iconMath"></use></svg></button>
-<button data-type="inline-memo"><svg><use xlink:href="#iconM"></use></svg></button>
-<button data-type="indent"><svg><use xlink:href="#iconClose"></use></svg></button>`;
-    const html = `<button data-type="add"><svg><use xlink:href="#iconAdd"></use></svg></button>
+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 = `<button data-type="add"><svg><use xlink:href="#iconAdd"></use></svg></button>
 <button data-type="indent"><svg class="keyboard__svg--big"><use xlink:href="#iconBIU"></use></svg></button>
 <button data-type="indent"><svg><use xlink:href="#iconTrashcan"></use></svg></button>
 <span class="keyboard__split"></span>
@@ -70,12 +59,36 @@ export const renderKeyboardToolbar = (protyle: IProtyle, range: Range) => {
 <button data-type="redo"><svg><use xlink:href="#iconUp"></use></svg></button>
 <button data-type="redo"><svg><use xlink:href="#iconDown"></use></svg></button>
 `;
-    toolbarElement.innerHTML = `<div class="fn__flex-1">
-    <div class="keyboard__dynamic">${html}</div>
-    <div class="fn__none keyboard__dynamic">${inlineHTML}</div>
+        }
+        const selectText = range.toString();
+        console.log(range)
+        document.getElementById("keyboardToolbar").innerHTML = `<div class="fn__flex-1">
+    <div class="${selectText ? "fn__none " : ""}keyboard__dynamic">${html}</div>
+    <div class="${selectText ? "" : "fn__none "}keyboard__dynamic">
+        <button data-type="indent"><svg><use xlink:href="#iconBack"></use></svg></button>
+        <button data-type="indent"><svg><use xlink:href="#iconRef"></use></svg></button>
+        <button data-type="block-ref"<use xlink:href="#iconRef"></use></svg></button>
+        <button data-type="a"><svg><use xlink:href="#iconLink"></use></svg></button>
+        <button data-type="text"><svg><use xlink:href="#iconFont"></use></svg></button>
+        <button data-type="strong"><svg><use xlink:href="#iconBold"></use></svg></button>
+        <button data-type="em"><svg><use xlink:href="#iconItalic"></use></svg></button>
+        <button data-type="u"><svg><use xlink:href="#iconUnderline"></use></svg></button>
+        <button data-type="s"><svg><use xlink:href="#iconStrike"></use></svg></button>
+        <button data-type="mark"><svg><use xlink:href="#iconMark"></use></svg></button>
+        <button data-type="sup"><svg><use xlink:href="#iconSup"></use></svg></button>
+        <button data-type="sub"><svg><use xlink:href="#iconSub"></use></svg></button>
+        <button data-type="clear"><svg><use xlink:href="#iconClear"></use></svg></button>
+        <button data-type="code"><svg><use xlink:href="#iconInlineCode"></use></svg></button>
+        <button data-type="kbd"<use xlink:href="#iconKeymap"></use></svg></button>
+        <button data-type="tag"><svg><use xlink:href="#iconTags"></use></svg></button>
+        <button data-type="inline-math"><svg><use xlink:href="#iconMath"></use></svg></button>
+        <button data-type="inline-memo"><svg><use xlink:href="#iconM"></use></svg></button>
+        <button data-type="indent"><svg><use xlink:href="#iconClose"></use></svg></button>
+    </div>
 </div>
 <span class="keyboard__split"></span>
 <button data-type="done"><svg style="width: 36px"><use xlink:href="#iconKeyboardHide"></use></svg></button>`;
+    }, 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) => {

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;
         }

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);