🎨 fix https://github.com/siyuan-note/siyuan/issues/7555

app/src/config/editor.ts

@@ -9,20 +9,10 @@ import {updateHotkeyTip} from "../protyle/util/compatibility";
 export const editor = {
     element: undefined as Element,
     setReadonly: (readOnly?: boolean) => {
-        const target = document.querySelector("#barReadonly");
         if (typeof readOnly === "undefined") {
-            readOnly = target.getAttribute("aria-label") === `${window.siyuan.languages.use} ${window.siyuan.languages.editReadonly} ${updateHotkeyTip(window.siyuan.config.keymap.general.editMode.custom)}`;
+            readOnly =  document.querySelector("#barReadonly").getAttribute("aria-label") === `${window.siyuan.languages.use} ${window.siyuan.languages.editReadonly} ${updateHotkeyTip(window.siyuan.config.keymap.general.editMode.custom)}`;
         }
         window.siyuan.config.editor.readOnly = readOnly;
-        if (readOnly) {
-            target.classList.add("toolbar__item--active");
-            target.setAttribute("aria-label", `${window.siyuan.languages.use} ${window.siyuan.languages.editMode} ${updateHotkeyTip(window.siyuan.config.keymap.general.editMode.custom)}`);
-            target.querySelector("use").setAttribute("xlink:href", "#iconPreview");
-        } else {
-            target.classList.remove("toolbar__item--active");
-            target.setAttribute("aria-label", `${window.siyuan.languages.use} ${window.siyuan.languages.editReadonly} ${updateHotkeyTip(window.siyuan.config.keymap.general.editMode.custom)}`);
-            target.querySelector("use").setAttribute("xlink:href", "#iconEdit");
-        }
         fetchPost("/api/setting/setEditor", window.siyuan.config.editor);
     },
     genHTML: () => {

app/src/index.ts

@@ -24,6 +24,7 @@ import {initMessage} from "./dialog/message";
 import {resizeDrag} from "./layout/util";
 import {getAllTabs} from "./layout/getAll";
 import {getLocalStorage} from "./protyle/util/compatibility";
+import {updateEditModeElement} from "./layout/topBar";
 
 class App {
     constructor() {
@@ -45,6 +46,10 @@ class App {
                 msgCallback: (data) => {
                     if (data) {
                         switch (data.cmd) {
+                            case "readonly":
+                                window.siyuan.config.editor.readOnly = data.data;
+                                updateEditModeElement();
+                                break;
                             case "progress":
                                 progressLoading(data);
                                 break;

app/src/mobile/util/initFramework.ts

@@ -110,19 +110,8 @@ export const initFramework = () => {
         editIconElement.setAttribute("xlink:href", "#iconEdit");
     }
     editElement.addEventListener(getEventName(), () => {
-        const isReadonly = editIconElement.getAttribute("xlink:href") === "#iconEdit";
+        window.siyuan.config.editor.readOnly = editIconElement.getAttribute("xlink:href") === "#iconEdit";
-        window.siyuan.config.editor.readOnly = isReadonly;
+        fetchPost("/api/setting/setEditor", window.siyuan.config.editor);
-        fetchPost("/api/setting/setEditor", window.siyuan.config.editor, () => {
-            if (!isReadonly) {
-                enableProtyle(window.siyuan.mobile.editor.protyle);
-                inputElement.readOnly = false;
-                editIconElement.setAttribute("xlink:href", "#iconEdit");
-            } else {
-                disabledProtyle(window.siyuan.mobile.editor.protyle);
-                inputElement.readOnly = true;
-                editIconElement.setAttribute("xlink:href", "#iconPreview");
-            }
-        });
     });
     if (navigator.userAgent.indexOf("iPhone") > -1 && !window.siyuan.config.readonly && !window.siyuan.config.editor.readOnly) {
         // 不知道为什么 iPhone 中如果是编辑状态，点击文档后无法点击标题

app/src/mobile/util/onMessage.ts

@@ -2,9 +2,25 @@ import {openMobileFileById} from "../editor";
 import {processSync, progressLoading, progressStatus, transactionError} from "../../dialog/processSystem";
 import {Constants} from "../../constants";
 
+const processReadonly = () => {
+    const inputElement = document.getElementById("toolbarName") as HTMLInputElement;
+    const editIconElement = document.querySelector("#toolbarEdit use");
+    if (!window.siyuan.config.editor.readOnly) {
+        inputElement.readOnly = false;
+        editIconElement.setAttribute("xlink:href", "#iconEdit");
+    } else {
+        inputElement.readOnly = true;
+        editIconElement.setAttribute("xlink:href", "#iconPreview");
+    }
+};
+
 export const onMessage = (data: IWebSocketData) => {
     if (data) {
         switch (data.cmd) {
+            case "readonly":
+                window.siyuan.config.editor.readOnly = data.data;
+                processReadonly();
+                break;
             case"progress":
                 progressLoading(data);
                 break;

app/src/util/onGetConfig.ts

@@ -1,6 +1,5 @@
-import {openSearch} from "../search/spread";
 import {exportLayout, JSONToLayout, resetLayout, resizeDrag, resizeTabs} from "../layout/util";
-import {hotKey2Electron, setStorageVal, updateHotkeyTip} from "../protyle/util/compatibility";
+import {hotKey2Electron, setStorageVal} from "../protyle/util/compatibility";
 /// #if !BROWSER
 import {dialog, getCurrentWindow} from "@electron/remote";
 import {ipcRenderer, OpenDialogReturnValue, webFrame} from "electron";
@@ -14,23 +13,17 @@ import {appearance} from "../config/appearance";
 import {globalShortcut} from "./globalShortcut";
 import {fetchPost} from "./fetch";
 import {mountHelp} from "./mount";
-import {MenuItem} from "../menus/Menu";
+import {addGA, initAssets, setInlineStyle} from "./assets";
-import {addGA, initAssets, setInlineStyle, setMode} from "./assets";
 import {renderSnippet} from "../config/util/snippets";
 import {openFileById} from "../editor/util";
 import {focusByRange} from "../protyle/util/selection";
-import {exitSiYuan, processSync} from "../dialog/processSystem";
+import {exitSiYuan} from "../dialog/processSystem";
-import {openSetting} from "../config";
 import {getSearch, isWindow} from "./functions";
 import {initStatus} from "../layout/status";
-import {syncGuide} from "../sync/syncGuide";
 import {showMessage} from "../dialog/message";
-import {editor} from "../config/editor";
-import {goBack, goForward} from "./backForward";
 import {replaceLocalPath} from "../editor/rename";
-import {workspaceMenu} from "../menus/workspace";
-import {getWorkspaceName} from "./noRelyPCFunction";
 import {setTabPosition} from "../window/setHeader";
+import {initBar} from "../layout/topBar";
 
 const matchKeymap = (keymap: Record<string, IKeymapItem>, key1: "general" | "editor", key2?: "general" | "insert" | "heading" | "list" | "table") => {
     if (key1 === "general") {
@@ -182,110 +175,6 @@ export const onGetConfig = (isStart: boolean) => {
     addGA();
 };
 
-export const initBar = () => {
-    const toolbarElement = document.getElementById("toolbar");
-    toolbarElement.innerHTML = `
-<div id="barWorkspace" class="toolbar__item">
-    <span class="toolbar__text">${getWorkspaceName()}</span>
-    <svg class="toolbar__svg"><use xlink:href="#iconDown"></use></svg>
-</div>
-<div id="barSync" class="toolbar__item b3-tooltips b3-tooltips__se" aria-label="${window.siyuan.config.sync.stat || (window.siyuan.languages.syncNow + " " + updateHotkeyTip(window.siyuan.config.keymap.general.syncNow.custom))}">
-    <svg><use xlink:href="#iconCloudSucc"></use></svg>
-</div>
-<button id="barBack" data-menu="true" class="toolbar__item toolbar__item--disabled b3-tooltips b3-tooltips__se" aria-label="${window.siyuan.languages.goBack} ${updateHotkeyTip(window.siyuan.config.keymap.general.goBack.custom)}">
-    <svg><use xlink:href="#iconBack"></use></svg>
-</button>
-<button id="barForward" data-menu="true" class="toolbar__item toolbar__item--disabled b3-tooltips b3-tooltips__se" aria-label="${window.siyuan.languages.goForward} ${updateHotkeyTip(window.siyuan.config.keymap.general.goForward.custom)}">
-    <svg><use xlink:href="#iconForward"></use></svg>
-</button>
-<div class="fn__flex-1 fn__ellipsis" id="drag"><span class="fn__none">开发版，使用前请进行备份 Development version, please backup before use</span></div>
-<div id="toolbarVIP" class="fn__flex"></div>
-<div id="barSearch" class="toolbar__item b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.globalSearch} ${updateHotkeyTip(window.siyuan.config.keymap.general.globalSearch.custom)}">
-    <svg><use xlink:href="#iconSearch"></use></svg>
-</div>
-<div id="barReadonly" class="toolbar__item b3-tooltips b3-tooltips__sw${window.siyuan.config.editor.readOnly ? " toolbar__item--active" : ""}" aria-label="${window.siyuan.languages.use} ${window.siyuan.config.editor.readOnly ? window.siyuan.languages.editMode : window.siyuan.languages.editReadonly} ${updateHotkeyTip(window.siyuan.config.keymap.general.editMode.custom)}">
-    <svg><use xlink:href="#icon${window.siyuan.config.editor.readOnly ? "Preview" : "Edit"}"></use></svg>
-</div>
-<div id="barMode" class="toolbar__item b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.appearanceMode}">
-    <svg><use xlink:href="#icon${window.siyuan.config.appearance.modeOS ? "Mode" : (window.siyuan.config.appearance.mode === 0 ? "Light" : "Dark")}"></use></svg>
-</div>
-<div class="fn__flex" id="windowControls"></div>`;
-    processSync();
-    toolbarElement.addEventListener("click", (event: MouseEvent) => {
-        let target = event.target as HTMLElement;
-        while (!target.classList.contains("toolbar")) {
-            if (target.id === "barBack") {
-                goBack();
-                event.stopPropagation();
-                break;
-            } else if (target.id === "barForward") {
-                goForward();
-                event.stopPropagation();
-                break;
-            } else if (target.id === "barSync") {
-                syncGuide(target);
-                event.stopPropagation();
-                break;
-            } else if (target.id === "barWorkspace") {
-                workspaceMenu(target.getBoundingClientRect());
-                event.stopPropagation();
-                break;
-            } else if (target.id === "barReadonly") {
-                editor.setReadonly();
-                event.stopPropagation();
-                break;
-            } else if (target.id === "barMode") {
-                if (!window.siyuan.menus.menu.element.classList.contains("fn__none") &&
-                    window.siyuan.menus.menu.element.getAttribute("data-name") === "barmode") {
-                    window.siyuan.menus.menu.remove();
-                    return;
-                }
-                window.siyuan.menus.menu.remove();
-                window.siyuan.menus.menu.element.setAttribute("data-name", "barmode");
-                window.siyuan.menus.menu.append(new MenuItem({
-                    label: window.siyuan.languages.themeLight,
-                    icon: "iconLight",
-                    current: window.siyuan.config.appearance.mode === 0 && !window.siyuan.config.appearance.modeOS,
-                    click: () => {
-                        setMode(0);
-                    }
-                }).element);
-                window.siyuan.menus.menu.append(new MenuItem({
-                    label: window.siyuan.languages.themeDark,
-                    current: window.siyuan.config.appearance.mode === 1 && !window.siyuan.config.appearance.modeOS,
-                    icon: "iconDark",
-                    click: () => {
-                        setMode(1);
-                    }
-                }).element);
-                window.siyuan.menus.menu.append(new MenuItem({
-                    label: window.siyuan.languages.themeOS,
-                    current: window.siyuan.config.appearance.modeOS,
-                    icon: "iconMode",
-                    click: () => {
-                        setMode(2);
-                    }
-                }).element);
-                const rect = target.getBoundingClientRect();
-                window.siyuan.menus.menu.popup({x: rect.right, y: rect.bottom}, true);
-                event.stopPropagation();
-                break;
-            } else if (target.id === "toolbarVIP") {
-                const dialogSetting = openSetting();
-                dialogSetting.element.querySelector('.b3-tab-bar [data-name="account"]').dispatchEvent(new CustomEvent("click"));
-                event.stopPropagation();
-                break;
-            } else if (target.id === "barSearch") {
-                openSearch(window.siyuan.config.keymap.general.globalSearch.custom);
-                event.stopPropagation();
-                break;
-            }
-            target = target.parentElement;
-        }
-    });
-    setProxy();
-};
-
 const winOnFocus = () => {
     if (getSelection().rangeCount > 0) {
         const range = getSelection().getRangeAt(0);