🎨 https://github.com/siyuan-note/siyuan/issues/8023

app/src/index.ts

@@ -26,6 +26,7 @@ import {getAllTabs} from "./layout/getAll";
 import {getLocalStorage} from "./protyle/util/compatibility";
 import {updateEditModeElement} from "./layout/topBar";
 import {getSearch} from "./util/functions";
+import {hideAllElements} from "./protyle/ui/hideElements";
 
 class App {
     constructor() {
@@ -50,6 +51,7 @@ class App {
                             case "readonly":
                                 window.siyuan.config.editor.readOnly = data.data;
                                 updateEditModeElement();
+                                hideAllElements(["util"]);
                                 break;
                             case "progress":
                                 progressLoading(data);

app/src/mobile/util/initFramework.ts

@@ -115,7 +115,7 @@ export const initFramework = () => {
         editIconElement.setAttribute("xlink:href", "#iconEdit");
     }
     editElement.addEventListener(getEventName(), () => {
-        window.siyuan.config.editor.readOnly = editIconElement.getAttribute("xlink:href") === "#iconEdit";
+        window.siyuan.config.editor.readOnly = !window.siyuan.config.editor.readOnly;
         fetchPost("/api/setting/setEditor", window.siyuan.config.editor);
     });
     document.getElementById("toolbarSync").addEventListener(getEventName(), () => {

app/src/protyle/toolbar/index.ts

@@ -879,17 +879,17 @@ export class Toolbar {
     <span class="fn__flex-1"></span>
     <button data-type="refresh" class="block__icon b3-tooltips b3-tooltips__nw${(isPin && !this.subElement.querySelector('[data-type="refresh"]').classList.contains("block__icon--active")) ? "" : " block__icon--active"}${types.includes("NodeBlockQueryEmbed") ? " fn__none" : ""}" aria-label="${window.siyuan.languages.refresh}"><svg><use xlink:href="#iconRefresh"></use></svg></button>
     <span class="fn__space"></span>
-    <button data-type="before" class="block__icon b3-tooltips b3-tooltips__nw" aria-label="${window.siyuan.languages["insert-before"]}"><svg><use xlink:href="#iconBefore"></use></svg></button>
+    <button data-type="before" class="block__icon b3-tooltips b3-tooltips__nw${protyle.disabled ? " fn__none" : ""}" aria-label="${window.siyuan.languages["insert-before"]}"><svg><use xlink:href="#iconBefore"></use></svg></button>
-    <span class="fn__space"></span>
+    <span class="fn__space${protyle.disabled ? " fn__none" : ""}"></span>
-    <button data-type="after" class="block__icon b3-tooltips b3-tooltips__nw" aria-label="${window.siyuan.languages["insert-after"]}"><svg><use xlink:href="#iconAfter"></use></svg></button>
+    <button data-type="after" class="block__icon b3-tooltips b3-tooltips__nw${protyle.disabled ? " fn__none" : ""}" aria-label="${window.siyuan.languages["insert-after"]}"><svg><use xlink:href="#iconAfter"></use></svg></button>
-    <span class="fn__space"></span>
+    <span class="fn__space${protyle.disabled ? " fn__none" : ""}"></span>
     <button data-type="export" class="block__icon b3-tooltips b3-tooltips__nw" aria-label="${window.siyuan.languages.export} ${window.siyuan.languages.image}"><svg><use xlink:href="#iconImage"></use></svg></button>
     <span class="fn__space"></span>
     <button data-type="pin" class="block__icon b3-tooltips b3-tooltips__nw${isPin ? " block__icon--active" : ""}" aria-label="${window.siyuan.languages.pin}"><svg><use xlink:href="#iconPin"></use></svg></button>
     <span class="fn__space"></span>
     <button data-type="close" class="block__icon b3-tooltips b3-tooltips__nw" aria-label="${window.siyuan.languages.close}"><svg style="width: 10px"><use xlink:href="#iconClose"></use></svg></button>
 </div>
-<textarea spellcheck="false" class="b3-text-field b3-text-field--text fn__block" placeholder="${placeholder}" style="${isMobile() ? "" : "width:" + Math.max(480, renderElement.clientWidth * 0.7) + "px"};max-height:50vh"></textarea></div>`;
+<textarea ${protyle.disabled ? " readonly" : ""} spellcheck="false" class="b3-text-field b3-text-field--text fn__block" placeholder="${placeholder}" style="${isMobile() ? "" : "width:" + Math.max(480, renderElement.clientWidth * 0.7) + "px"};max-height:50vh"></textarea></div>`;
         const autoHeight = () => {
             textElement.style.height = textElement.scrollHeight + "px";
             if (isMobile()) {
@@ -1091,7 +1091,7 @@ export class Toolbar {
             }
         });
         this.subElementCloseCB = () => {
-            if (!renderElement.parentElement) {
+            if (!renderElement.parentElement || protyle.disabled) {
                 return;
             }
             let inlineLastNode: Element;
@@ -1204,8 +1204,10 @@ export class Toolbar {
         } else {
             autoHeight();
         }
+        if (!protyle.disabled) {
             textElement.select();
         }
+    }
 
     public showCodeLanguage(protyle: IProtyle, languageElement: HTMLElement) {
         const nodeElement = hasClosestBlock(languageElement);

app/src/protyle/ui/hideElements.ts

@@ -1,3 +1,9 @@
+/// #if MOBILE
+import {getCurrentEditor} from "../../mobile/editor";
+/// #else
+import {getAllModels} from "../../layout/getAll";
+/// #endif
+
 // "gutter", "toolbar", "select", "hint", "util", "dialog"
 export const hideElements = (panels: string[], protyle?: IProtyle, focusHide = false) => {
     if (!protyle) {
@@ -44,7 +50,7 @@ export const hideElements = (panels: string[], protyle?: IProtyle, focusHide = f
     }
 };
 
-// "toolbar", "pdfutil", "gutter"
+// "toolbar", "pdfutil", "gutter", "util"
 export const hideAllElements = (types: string[]) => {
     if (types.includes("toolbar")) {
         document.querySelectorAll(".protyle-toolbar").forEach((item: HTMLElement) => {
@@ -52,6 +58,24 @@ export const hideAllElements = (types: string[]) => {
             item.style.display = "";
         });
     }
+    if (types.includes("util")) {
+        /// #if MOBILE
+        const editor = getCurrentEditor()
+        editor.protyle.toolbar.subElement.classList.add("fn__none");
+        if (editor.protyle.toolbar.subElementCloseCB) {
+            editor.protyle.toolbar.subElementCloseCB();
+            editor.protyle.toolbar.subElementCloseCB = undefined;
+        }
+        /// #else
+        getAllModels().editor.forEach(item => {
+            item.editor.protyle.toolbar.subElement.classList.add("fn__none");
+            if (item.editor.protyle.toolbar.subElementCloseCB) {
+                item.editor.protyle.toolbar.subElementCloseCB();
+                item.editor.protyle.toolbar.subElementCloseCB = undefined;
+            }
+        })
+        /// #endif
+    }
     if (types.includes("pdfutil")) {
         document.querySelectorAll(".pdf__util").forEach(item => {
             item.classList.add("fn__none");

app/src/protyle/wysiwyg/index.ts

@@ -185,7 +185,7 @@ export class WYSIWYG {
         /// #endif
     }
 
-    private emojiToMd(element:HTMLElement) {
+    private emojiToMd(element: HTMLElement) {
         element.querySelectorAll(".emoji").forEach((item: HTMLElement) => {
             item.outerHTML = `:${item.getAttribute("alt")}:`;
         });
@@ -1208,12 +1208,12 @@ export class WYSIWYG {
                 return false;
             }
             protyle.toolbar.range = getEditorRange(protyle.element);
-            if (target.tagName === "SPAN" && !protyle.disabled) { // https://ld246.com/article/1665141518103
+            if (target.tagName === "SPAN") { // https://ld246.com/article/1665141518103
                 const types = protyle.toolbar.getCurrentType(protyle.toolbar.range);
                 if (types.length > 0) {
                     removeSearchMark(target);
                 }
-                if (types.includes("block-ref")) {
+                if (types.includes("block-ref") && !protyle.disabled) {
                     refMenu(protyle, target);
                     // 阻止 popover
                     target.setAttribute("prevent-popover", "true");
@@ -1221,16 +1221,16 @@ export class WYSIWYG {
                         target.removeAttribute("prevent-popover");
                     }, 620);
                     return false;
-                } else if (types.includes("file-annotation-ref")) {
+                } else if (types.includes("file-annotation-ref") && !protyle.disabled) {
                     protyle.toolbar.showFileAnnotationRef(protyle, target);
                     return false;
-                } else if (types.includes("tag")) {
+                } else if (types.includes("tag") && !protyle.disabled) {
                     tagMenu(protyle, target);
                     return false;
                 } else if (types.includes("inline-memo")) {
                     protyle.toolbar.showRender(protyle, target);
                     return false;
-                } else if (types.includes("a")) {
+                } else if (types.includes("a") && !protyle.disabled) {
                     linkMenu(protyle, target);
                     if (window.siyuan.config.editor.floatWindowMode === 0 &&
                         target.getAttribute("data-href")?.startsWith("siyuan://blocks")) {