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

app/appearance/icons/ant/icon.js

@@ -349,7 +349,10 @@ document.body.insertAdjacentHTML('afterbegin', `<svg style="position: absolute;
     <path d="M29.93 26.114c-0.8-1.868-1.894-3.462-3.24-4.804l-0-0c-1.342-1.345-2.937-2.438-4.706-3.203l-0.098-0.038c-0.016-0.008-0.032-0.012-0.048-0.020 2.505-1.809 4.133-4.756 4.133-8.080 0-5.508-4.462-9.97-9.97-9.97s-9.97 4.462-9.97 9.97c0 3.325 1.628 6.271 4.133 8.084-0.016 0.008-0.032 0.012-0.048 0.020-1.801 0.76-3.417 1.849-4.804 3.24-1.345 1.342-2.438 2.937-3.203 4.706l-0.038 0.098c-0.714 1.636-1.146 3.538-1.186 5.537l-0 0.015c-0 0.002-0 0.005-0 0.008 0 0.178 0.144 0.322 0.322 0.322 0 0 0 0 0 0h2.412c0.177 0 0.318-0.141 0.322-0.314 0.080-3.104 1.327-6.010 3.53-8.213 2.279-2.279 5.307-3.534 8.531-3.534s6.251 1.254 8.531 3.534c2.203 2.203 3.449 5.11 3.53 8.213 0.004 0.177 0.145 0.314 0.322 0.314h2.412c0 0 0 0 0 0 0.178 0 0.322-0.144 0.322-0.322 0-0.003-0-0.006-0-0.008v0c-0.040-1.922-0.438-3.791-1.186-5.556zM16 16.884c-1.845 0-3.582-0.72-4.888-2.026s-2.026-3.043-2.026-4.888c0-1.845 0.72-3.582 2.026-4.888s3.043-2.026 4.888-2.026 3.582 0.72 4.888 2.026 2.026 3.043 2.026 4.888c0 1.845-0.72 3.582-2.026 4.888s-3.043 2.026-4.888 2.026z"></path>
   </symbol>
   <symbol id="iconLock" viewBox="0 0 32 32">
-    <path d="M28.8 14.080h-2.72v-8.96c0-2.828-2.292-5.12-5.12-5.12h-9.92c-2.828 0-5.12 2.292-5.12 5.12v8.96h-2.72c-0.708 0-1.28 0.572-1.28 1.28v15.36c0 0.708 0.572 1.28 1.28 1.28h25.6c0.708 0 1.28-0.572 1.28-1.28v-15.36c0-0.708-0.572-1.28-1.28-1.28zM8.8 5.12c0-1.236 1.004-2.24 2.24-2.24h9.92c1.236 0 2.24 1.004 2.24 2.24v8.96h-14.4v-8.96zM27.2 29.12h-22.4v-12.16h22.4v12.16zM14.88 23.56v2.12c0 0.176 0.144 0.32 0.32 0.32h1.6c0.176 0 0.32-0.144 0.32-0.32v-2.12c0.487-0.353 0.8-0.92 0.8-1.56 0-1.061-0.86-1.92-1.92-1.92s-1.92 0.86-1.92 1.92c0 0.64 0.313 1.207 0.795 1.556l0.006 0.004z"></path>
+    <path d="M28 14.2h-2.55v-8.4c0-2.651-2.149-4.8-4.8-4.8h-9.3c-2.651 0-4.8 2.149-4.8 4.8v8.4h-2.55c-0.664 0-1.2 0.536-1.2 1.2v14.4c0 0.664 0.536 1.2 1.2 1.2h24c0.664 0 1.2-0.536 1.2-1.2v-14.4c0-0.664-0.536-1.2-1.2-1.2zM9.25 5.8c0-1.159 0.941-2.1 2.1-2.1h9.3c1.159 0 2.1 0.941 2.1 2.1v8.4h-13.5v-8.4zM26.5 28.3h-21v-11.4h21v11.4zM14.95 23.087v1.988c0 0.165 0.135 0.3 0.3 0.3h1.5c0.165 0 0.3-0.135 0.3-0.3v-1.988c0.457-0.331 0.75-0.862 0.75-1.462 0-0.994-0.806-1.8-1.8-1.8s-1.8 0.806-1.8 1.8c0 0.6 0.294 1.132 0.745 1.459l0.005 0.004z"></path>
+  </symbol>
+  <symbol id="iconUnlock" viewBox="0 0 32 32">
+    <path d="M28 14.2h-18.75v-8.4c0-1.159 0.941-2.1 2.1-2.1h9.3c1.159 0 2.1 0.941 2.1 2.1v2.55c0 0.165 0.135 0.3 0.3 0.3h2.1c0.165 0 0.3-0.135 0.3-0.3v-2.55c0-2.651-2.149-4.8-4.8-4.8h-9.3c-2.651 0-4.8 2.149-4.8 4.8v8.4h-2.55c-0.664 0-1.2 0.536-1.2 1.2v14.4c0 0.664 0.536 1.2 1.2 1.2h24c0.664 0 1.2-0.536 1.2-1.2v-14.4c0-0.664-0.536-1.2-1.2-1.2zM26.5 28.3h-21v-11.4h21v11.4zM14.95 23.087v1.988c0 0.165 0.135 0.3 0.3 0.3h1.5c0.165 0 0.3-0.135 0.3-0.3v-1.988c0.457-0.331 0.75-0.862 0.75-1.462 0-0.994-0.806-1.8-1.8-1.8s-1.8 0.806-1.8 1.8c0 0.6 0.294 1.132 0.745 1.459l0.005 0.004z"></path>
   </symbol>
   <symbol id="iconEmbed" viewBox="0 0 32 32">
     <path d="M31.714 26h-31.429c-0.157 0-0.286 0.129-0.286 0.286v2c0 0.157 0.129 0.286 0.286 0.286h31.429c0.157 0 0.286-0.129 0.286-0.286v-2c0-0.157-0.129-0.286-0.286-0.286zM31.714 3.429h-31.429c-0.157 0-0.286 0.129-0.286 0.286v2c0 0.157 0.129 0.286 0.286 0.286h31.429c0.157 0 0.286-0.129 0.286-0.286v-2c0-0.157-0.129-0.286-0.286-0.286zM28 21.286c0.314 0 0.571-0.257 0.571-0.571v-9.429c0-0.314-0.257-0.571-0.571-0.571h-24c-0.314 0-0.571 0.257-0.571 0.571v9.429c0 0.314 0.257 0.571 0.571 0.571h24zM6 13.286h20v5.429h-20v-5.429z"></path>

app/appearance/icons/ant/icon.json

@@ -2,5 +2,5 @@
   "name": "ant",
   "author": "Vanessa",
   "url": "https://github.com/Vanessa219",
-  "version": "1.22.0"
+  "version": "1.23.0"
 }

app/appearance/icons/index.html

@@ -640,6 +640,12 @@
         </svg>
         iconRefresh
     </div>
+    <div>
+        <svg>
+            <use xlink:href="#iconUnlock"></use>
+        </svg>
+        iconUnlock
+    </div>
     <div>
         <svg>
             <use xlink:href="#iconLock"></use>

app/appearance/icons/material/icon.js

@@ -341,7 +341,10 @@ document.body.insertAdjacentHTML('afterbegin', `<svg style="position: absolute;
     <path d="M16 4.364v-4.364l5.818 5.818-5.818 5.818v-4.364c-4.815 0-8.727 3.913-8.727 8.727 0 1.469 0.364 2.865 1.018 4.073l-2.124 2.124c-1.135-1.789-1.804-3.913-1.804-6.196 0-6.429 5.207-11.636 11.636-11.636zM16 24.727c4.815 0 8.727-3.913 8.727-8.727 0-1.469-0.364-2.865-1.018-4.073l2.124-2.124c1.135 1.789 1.804 3.913 1.804 6.196 0 6.429-5.207 11.636-11.636 11.636v4.364l-5.818-5.818 5.818-5.818v4.364z"></path>
   </symbol>
   <symbol id="iconLock" viewBox="0 0 32 32">
-    <path d="M25.143 10.667h-1.524v-3.048c0-4.206-3.413-7.619-7.619-7.619s-7.619 3.413-7.619 7.619v3.048h-1.524c-1.676 0-3.048 1.371-3.048 3.048v15.238c0 1.676 1.371 3.048 3.048 3.048h18.286c1.676 0 3.048-1.371 3.048-3.048v-15.238c0-1.676-1.371-3.048-3.048-3.048zM11.428 7.619c0-2.53 2.042-4.571 4.571-4.571s4.571 2.042 4.571 4.571v3.048h-9.143v-3.048zM25.143 28.952h-18.286v-15.238h18.286v15.238zM16 24.381c1.676 0 3.048-1.371 3.048-3.048s-1.371-3.048-3.048-3.048-3.048 1.371-3.048 3.048 1.371 3.048 3.048 3.048z"></path>
+    <path d="M7.357 31q-1.179 0-2.018-0.839t-0.839-2.018v-14.286q0-1.179 0.839-2.018t2.018-0.839h1.429v-2.857q0-2.964 2.089-5.054t5.054-2.089 5.054 2.089 2.089 5.054v2.857h1.429q1.179 0 2.018 0.839t0.839 2.018v14.286q0 1.179-0.839 2.018t-2.018 0.839h-17.143zM7.357 28.143h17.143v-14.286h-17.143v14.286zM15.929 23.857q1.179 0 2.018-0.839t0.839-2.018-0.839-2.018-2.018-0.839-2.018 0.839-0.839 2.018 0.839 2.018 2.018 0.839zM11.643 11h8.571v-2.857q0-1.786-1.25-3.036t-3.036-1.25-3.036 1.25-1.25 3.036v2.857zM7.357 28.143v0z"></path>
+  </symbol>
+  <symbol id="iconUnlock" viewBox="0 0 32 32">
+    <path d="M7.357 28.143h17.143v-14.286h-17.143v14.286zM15.929 23.857q1.179 0 2.018-0.839t0.839-2.018-0.839-2.018-2.018-0.839-2.018 0.839-0.839 2.018 0.839 2.018 2.018 0.839zM7.357 28.143v0zM7.357 31q-1.179 0-2.018-0.839t-0.839-2.018v-14.286q0-1.179 0.839-2.018t2.018-0.839h10v-2.857q0-2.964 2.089-5.054t5.054-2.089 5.054 2.089 2.089 5.054h-2.857q0-1.786-1.25-3.036t-3.036-1.25-3.036 1.25-1.25 3.036v2.857h4.286q1.179 0 2.018 0.839t0.839 2.018v14.286q0 1.179-0.839 2.018t-2.018 0.839h-17.143z"></path>
   </symbol>
   <symbol id="iconAccount" viewBox="0 0 32 32">
     <path d="M16 4c2.2 0 4 1.8 4 4s-1.8 4-4 4-4-1.8-4-4 1.8-4 4-4zM16 22c5.4 0 11.6 2.58 12 4v2h-24v-1.98c0.4-1.44 6.6-4.020 12-4.020zM16 0c-4.42 0-8 3.58-8 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zM16 18c-5.34 0-16 2.68-16 8v6h32v-6c0-5.32-10.66-8-16-8z"></path>

app/appearance/icons/material/icon.json

@@ -2,5 +2,5 @@
   "name": "material",
   "author": "Vanessa",
   "url": "https://github.com/Vanessa219",
-  "version": "1.22.0"
+  "version": "1.23.0"
 }

app/src/assets/template/mobile/index.tpl

@@ -19,9 +19,6 @@
     <svg id="toolbarSync" class="toolbar__icon fn__none">
         <use xlink:href="#iconCloudSucc"></use>
     </svg>
-    <svg id="toolbarEdit" class="toolbar__icon fn__hidden">
-        <use xlink:href="#iconEdit"></use>
-    </svg>
     <svg id="toolbarMore" class="toolbar__icon">
         <use xlink:href="#iconMore"></use>
     </svg>

app/src/block/Panel.ts

@@ -175,9 +175,6 @@ export class BlockPanel {
                 },
                 typewriterMode: false,
                 after: (editor) => {
-                    if (window.siyuan.config.readonly || window.siyuan.config.editor.readOnly) {
-                        disabledProtyle(editor.protyle);
-                    }
                     editorElement.addEventListener("mouseleave", () => {
                         hideElements(["gutter"], editor.protyle);
                     });

app/src/boot/globalEvent/keydown.ts

@@ -1033,7 +1033,7 @@ export const windowKeyDown = (app: App, event: KeyboardEvent) => {
     }
     if (matchHotKey(window.siyuan.config.keymap.general.editMode.custom, event)) {
         event.preventDefault();
-        editor.setReadonly();
+        editor.setReadonly(!window.siyuan.config.editor.readOnly);
         return;
     }
     if (matchHotKey(window.siyuan.config.keymap.general.lockScreen.custom, event)) {

app/src/card/makeCard.ts

@@ -183,7 +183,7 @@ export const quickMakeCard = (protyle: IProtyle, nodeElement: Element[]) => {
         }
         item.classList.remove("protyle-wysiwyg--select");
         ids.push(item.getAttribute("data-node-id"));
-        if ((item.getAttribute("custom-riff-decks") || "").indexOf(Constants.QUICK_DECK_ID) === -1) {
+        if ((item.getAttribute(Constants.CUSTOM_RIFF_DECKS) || "").indexOf(Constants.QUICK_DECK_ID) === -1) {
             isRemove = false;
         }
     });

app/src/card/openCard.ts

@@ -133,9 +133,6 @@ export const bindCardEvent = (options: {
     if (window.siyuan.mobile) {
         window.siyuan.mobile.popEditor = editor;
     }
-    if (window.siyuan.config.editor.readOnly) {
-        disabledProtyle(editor.protyle);
-    }
     if (options.blocks.length > 0) {
         fetchPost("/api/filetree/getDoc", {
             id: options.blocks[index].blockID,

app/src/card/viewCards.ts

@@ -65,9 +65,6 @@ export const viewCards = (app: App, deckID: string, title: string, deckType: "Tr
             if (window.siyuan.mobile) {
                 window.siyuan.mobile.popEditor = edit;
             }
-            if (window.siyuan.config.editor.readOnly) {
-                disabledProtyle(edit.protyle);
-            }
             getArticle(edit, dialog.element.querySelector(".b3-list-item--focus")?.getAttribute("data-id"));
         }
         const previousElement = dialog.element.querySelector('[data-type="previous"]');

app/src/config/editor.ts

@@ -5,13 +5,11 @@ import {confirmDialog} from "../dialog/confirmDialog";
 import {setPadding} from "../protyle/ui/initUI";
 import {reloadProtyle} from "../protyle/util/reload";
 import {updateHotkeyTip} from "../protyle/util/compatibility";
+import {Constants} from "../constants";
 
 export const editor = {
     element: undefined as Element,
-    setReadonly: (readOnly?: boolean) => {
+    setReadonly: (readOnly: boolean) => {
-        if (typeof readOnly === "undefined") {
-            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;
         fetchPost("/api/setting/setEditor", window.siyuan.config.editor);
     },
@@ -44,7 +42,8 @@ export const editor = {
 </label>
 <label class="fn__flex b3-label">
     <div class="fn__flex-1">
-        ${window.siyuan.languages.editReadonly}
+        ${window.siyuan.languages.editReadonly} 
+        ${updateHotkeyTip(window.siyuan.config.keymap.general.editMode.custom)}
         <div class="b3-label__text">${window.siyuan.languages.editReadonlyTip}</div>
     </div>
     <span class="fn__space"></span>
@@ -345,7 +344,7 @@ export const editor = {
         getAllModels().editor.forEach((item) => {
             reloadProtyle(item.editor.protyle, false);
             setPadding(item.editor.protyle);
-            let isFullWidth = item.editor.protyle.wysiwyg.element.getAttribute("custom-sy-fullwidth");
+            let isFullWidth = item.editor.protyle.wysiwyg.element.getAttribute(Constants.CUSTOM_SY_FULLWIDTH);
             if (!isFullWidth) {
                 isFullWidth = window.siyuan.config.editor.fullWidth ? "true" : "false";
             }

app/src/constants.ts

@@ -39,6 +39,12 @@ export abstract class Constants {
     public static readonly SIYUAN_EXPORT_PREVENT: string = "siyuan-export-prevent";
     public static readonly SIYUAN_AUTO_LAUNCH: string = "siyuan-auto-launch";
 
+    // custom
+    public static readonly CUSTOM_SY_READONLY: string = "custom-sy-readonly";
+    public static readonly CUSTOM_SY_FULLWIDTH: string = "custom-sy-fullwidth";
+    public static readonly CUSTOM_REMINDER_WECHAT: string = "custom-reminder-wechat";
+    public static readonly CUSTOM_RIFF_DECKS: string = "custom-riff-decks";
+
     // size
     public static readonly SIZE_LINK_TEXT_MAX: number = 24;
     public static readonly SIZE_TOOLBAR_HEIGHT: number = isMobile() ? 0 : 32;
@@ -99,7 +105,6 @@ export abstract class Constants {
         en_US: "20210808180117-6v0mkxr",
         fr_FR: "20210808180117-6v0mkxr",
     };
-
     public static readonly QUICK_DECK_ID = "20230218211946-2kw8jgx";
 
     public static readonly KEYCODELIST: { [key: number]: string } = {

app/src/editor/index.ts

@@ -53,10 +53,6 @@ export class Editor extends Model {
             scrollAttr: options.scrollAttr,
             typewriterMode: true,
             after: (editor) => {
-                if (window.siyuan.config.readonly || window.siyuan.config.editor.readOnly) {
-                    disabledProtyle(editor.protyle);
-                }
-
                 if (window.siyuan.editorIsFullscreen) {
                     editor.protyle.element.classList.add("fullscreen");
                     setPadding(editor.protyle);

app/src/editor/rename.ts

@@ -44,7 +44,7 @@ export const rename = (options: {
     type: "notebook" | "file"
     range?: Range,
 }) => {
-    if (window.siyuan.config.editor.readOnly || window.siyuan.config.readonly) {
+    if (window.siyuan.config.readonly) {
         return;
     }
     const dialog = new Dialog({

app/src/index.ts

@@ -23,7 +23,6 @@ import {
 import {initMessage} from "./dialog/message";
 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";
 import {loadPlugins} from "./plugin/loader";
@@ -64,7 +63,6 @@ export class App {
                                 break;
                             case "readonly":
                                 window.siyuan.config.editor.readOnly = data.data;
-                                updateEditModeElement();
                                 hideAllElements(["util"]);
                                 break;
                             case "progress":

app/src/layout/Wnd.ts

@@ -409,7 +409,7 @@ export class Wnd {
         }
     }
 
-    public switchTab(target: HTMLElement, pushBack = false, update = true) {
+    public switchTab(target: HTMLElement, pushBack = false, update = true, resize = true) {
         setPanelFocus(this.headersElement.parentElement.parentElement);
         let currentTab: Tab;
         this.children.forEach((item) => {
@@ -485,7 +485,7 @@ export class Wnd {
                     focus: true,
                     pushBackStack: pushBack,
                     reload: false,
-                    resize: true,
+                    resize,
                 });
             }
         } else {
@@ -494,7 +494,7 @@ export class Wnd {
                 focus: false,
                 pushBackStack: false,
                 reload: false,
-                resize: true,
+                resize,
             });
         }
     }
@@ -750,7 +750,7 @@ export class Wnd {
                             }
                         });
                         if (latestHeadElement && !closeAll) {
-                            this.switchTab(latestHeadElement, true);
+                            this.switchTab(latestHeadElement, true, true, false);
                         }
                     }
                     if (animate) {

app/src/layout/topBar.ts

@@ -21,19 +21,6 @@ import {needSubscribe} from "../util/needSubscribe";
 import * as dayjs from "dayjs";
 import {commandPanel} from "../plugin/commandPanel";
 
-export const updateEditModeElement = () => {
-    const target = document.querySelector("#barReadonly");
-    if (window.siyuan.config.editor.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");
-    }
-};
-
 export const initBar = (app: App) => {
     const toolbarElement = document.getElementById("toolbar");
     toolbarElement.innerHTML = `
@@ -61,9 +48,6 @@ export const initBar = (app: App) => {
 <div id="barZoom" class="toolbar__item b3-tooltips b3-tooltips__sw${(window.siyuan.storage[Constants.LOCAL_ZOOM] === 1 || isBrowser()) ? " fn__none" : ""}" aria-label="${window.siyuan.languages.zoom}">
     <svg><use xlink:href="#iconZoom${window.siyuan.storage[Constants.LOCAL_ZOOM] > 1 ? "In" : "Out"}"></use></svg>
 </div>
-<div id="barReadonly" class="toolbar__item b3-tooltips b3-tooltips__sw${window.siyuan.config.readonly ? " fn__none" : ""}${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${window.siyuan.config.readonly ? " fn__none" : ""}" 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>
@@ -128,10 +112,6 @@ export const initBar = (app: App) => {
                 workspaceMenu(app, target.getBoundingClientRect());
                 event.stopPropagation();
                 break;
-            } else if (targetId === "barReadonly") {
-                editor.setReadonly();
-                event.stopPropagation();
-                break;
             } else if (targetId === "barMode") {
                 if (!window.siyuan.menus.menu.element.classList.contains("fn__none") &&
                     window.siyuan.menus.menu.element.getAttribute("data-name") === "barmode") {

app/src/menus/commonMenuItem.ts

@@ -33,7 +33,7 @@ const bindAttrInput = (inputElement: HTMLInputElement, id: string) => {
 export const openWechatNotify = (nodeElement: Element) => {
     const id = nodeElement.getAttribute("data-node-id");
     const range = getEditorRange(nodeElement);
-    const reminder = nodeElement.getAttribute("custom-reminder-wechat");
+    const reminder = nodeElement.getAttribute(Constants.CUSTOM_REMINDER_WECHAT);
     let reminderFormat = "";
     if (reminder) {
         reminderFormat = dayjs(reminder).format("YYYY-MM-DDTHH:mm");
@@ -68,7 +68,7 @@ export const openWechatNotify = (nodeElement: Element) => {
         }
         btnsElement[1].setAttribute("disabled", "disabled");
         fetchPost("/api/block/setBlockReminder", {id, timed: "0"}, () => {
-            nodeElement.removeAttribute("custom-reminder-wechat");
+            nodeElement.removeAttribute(Constants.CUSTOM_REMINDER_WECHAT);
             dialog.destroy();
         });
     });
@@ -85,7 +85,7 @@ export const openWechatNotify = (nodeElement: Element) => {
             btnsElement[2].setAttribute("disabled", "disabled");
             const timed = dayjs(date).format("YYYYMMDDHHmmss");
             fetchPost("/api/block/setBlockReminder", {id, timed}, () => {
-                nodeElement.setAttribute("custom-reminder-wechat", timed);
+                nodeElement.setAttribute(Constants.CUSTOM_REMINDER_WECHAT, timed);
                 dialog.destroy();
             });
         } else {
@@ -98,7 +98,7 @@ export const openFileWechatNotify = (protyle: IProtyle) => {
     fetchPost("/api/block/getDocInfo", {
         id: protyle.block.rootID
     }, (response) => {
-        const reminder = response.data.ial["custom-reminder-wechat"];
+        const reminder = response.data.ial[Constants.CUSTOM_REMINDER_WECHAT];
         let reminderFormat = "";
         if (reminder) {
             reminderFormat = dayjs(reminder).format("YYYY-MM-DDTHH:mm");
@@ -155,10 +155,10 @@ export const openFileAttr = (attrs: IObject, focusName = "bookmark") => {
     let hasAV = false;
     const range = getSelection().rangeCount > 0 ? getSelection().getRangeAt(0) : null;
     Object.keys(attrs).forEach(item => {
-        if ("custom-riff-decks" === item || item.startsWith("custom-sy-")) {
+        if (Constants.CUSTOM_RIFF_DECKS === item || item.startsWith("custom-sy-")) {
             return;
         }
-        if (item === "custom-reminder-wechat") {
+        if (item === Constants.CUSTOM_REMINDER_WECHAT) {
             notifyHTML = `<label class="b3-label b3-label--noborder">
     ${window.siyuan.languages.wechatReminder}
     <div class="fn__hr"></div>

app/src/mobile/editor.ts

@@ -69,12 +69,6 @@ export const openMobileFileById = (app: App, id: string, action = [Constants.CB_
                 typewriterMode: true,
                 preview: {
                     actions: ["mp-wechat", "zhihu"]
-                },
-                after: (editor) => {
-                    // protyle 仅初始化一次，后续更新时会对 url 等再次复制
-                    if (window.siyuan.config.readonly || window.siyuan.config.editor.readOnly) {
-                        disabledProtyle(editor.protyle);
-                    }
                 }
             });
         }

app/src/mobile/settings/editor.ts

@@ -17,6 +17,7 @@ const setEditor = (modelMainElement: Element) => {
     window.siyuan.config.editor.dynamicLoadBlocks = dynamicLoadBlocks;
     window.siyuan.config.editor.justify = (modelMainElement.querySelector("#justify") as HTMLInputElement).checked;
     window.siyuan.config.editor.rtl = (modelMainElement.querySelector("#rtl") as HTMLInputElement).checked;
+    window.siyuan.config.editor.readOnly = (modelMainElement.querySelector("#readOnly") as HTMLInputElement).checked;
     window.siyuan.config.editor.displayBookmarkIcon = (modelMainElement.querySelector("#displayBookmarkIcon") as HTMLInputElement).checked;
     window.siyuan.config.editor.displayNetImgMark = (modelMainElement.querySelector("#displayNetImgMark") as HTMLInputElement).checked;
     window.siyuan.config.editor.codeSyntaxHighlightLineNum = (modelMainElement.querySelector("#codeSyntaxHighlightLineNum") as HTMLInputElement).checked;
@@ -65,6 +66,14 @@ export const initEditor = () => {
     <span class="fn__space"></span>
     <input class="b3-switch fn__flex-center" id="rtl" type="checkbox"${window.siyuan.config.editor.rtl ? " checked" : ""}/>
 </label>
+<label class="fn__flex b3-label">
+    <div class="fn__flex-1">
+        ${window.siyuan.languages.editReadonly}
+        <div class="b3-label__text">${window.siyuan.languages.editReadonlyTip}</div>
+    </div>
+    <span class="fn__space"></span>
+    <input class="b3-switch fn__flex-center" id="readOnly" type="checkbox"${window.siyuan.config.editor.readOnly ? " checked" : ""}/>
+</label>
 <label class="fn__flex b3-label">
     <div class="fn__flex-1">
         ${window.siyuan.languages.md12}

app/src/mobile/util/MobileBackFoward.ts

@@ -90,7 +90,14 @@ const focusStack = (backStack: IBackStack) => {
         if (getResponse.data.isSyncing) {
             disabledForeverProtyle(protyle);
         } else {
-            if (protyle.disabled) {
+            let readOnly = window.siyuan.config.readonly ? "true" : "false";
+            if (readOnly === "false") {
+                readOnly = protyle.wysiwyg.element.getAttribute(Constants.CUSTOM_SY_READONLY);
+                if (!readOnly) {
+                    readOnly = window.siyuan.config.editor.readOnly ? "true" : "false";
+                }
+            }
+            if (readOnly === "true") {
                 disabledProtyle(protyle);
             } else {
                 enableProtyle(protyle);

app/src/mobile/util/initFramework.ts

@@ -105,35 +105,9 @@ export const initFramework = (app: App) => {
     document.getElementById("toolbarMore").addEventListener("click", () => {
         popMenu();
     });
-    const editElement = document.getElementById("toolbarEdit");
-    if (window.siyuan.config.readonly) {
-        editElement.classList.add("fn__none");
-    }
-    const inputElement = document.getElementById("toolbarName") as HTMLInputElement;
-    const editIconElement = editElement.querySelector("use");
-    if (window.siyuan.config.readonly || window.siyuan.config.editor.readOnly) {
-        inputElement.readOnly = true;
-        editIconElement.setAttribute("xlink:href", "#iconPreview");
-    } else {
-        inputElement.readOnly = false;
-        editIconElement.setAttribute("xlink:href", "#iconEdit");
-    }
-    editElement.addEventListener(getEventName(), () => {
-        window.siyuan.config.editor.readOnly = !window.siyuan.config.editor.readOnly;
-        fetchPost("/api/setting/setEditor", window.siyuan.config.editor);
-    });
     document.getElementById("toolbarSync").addEventListener(getEventName(), () => {
         syncGuide(app);
     });
-    if (isIPhone() && !window.siyuan.config.readonly && !window.siyuan.config.editor.readOnly) {
-        // 不知道为什么 iPhone 中如果是编辑状态，点击文档后无法点击标题
-        setTimeout(() => {
-            editElement.dispatchEvent(new CustomEvent(getEventName()));
-            setTimeout(() => {
-                editElement.dispatchEvent(new CustomEvent(getEventName()));
-            }, Constants.TIMEOUT_INPUT);
-        }, Constants.TIMEOUT_INPUT);
-    }
     document.getElementById("modelClose").addEventListener("click", () => {
         closeModel();
     });
@@ -171,7 +145,7 @@ const initEditorName = () => {
     const inputElement = document.getElementById("toolbarName") as HTMLInputElement;
     inputElement.setAttribute("placeholder", window.siyuan.languages._kernel[16]);
     inputElement.addEventListener("blur", () => {
-        if (window.siyuan.config.readonly || window.siyuan.config.editor.readOnly || window.siyuan.mobile.editor.protyle.disabled) {
+        if (inputElement.getAttribute("readonly") === "readonly") {
             return;
         }
         if (!validateName(inputElement.value)) {

app/src/mobile/util/keyboardToolbar.ts

@@ -291,8 +291,8 @@ const renderKeyboardToolbar = () => {
     clearTimeout(renderKeyboardToolbarTimeout);
     renderKeyboardToolbarTimeout = window.setTimeout(() => {
         if (getSelection().rangeCount === 0 ||
-            window.siyuan.config.editor.readOnly ||
             window.siyuan.config.readonly ||
+            document.getElementById("toolbarName").getAttribute("readonly") === "readonly" ||
             window.screen.height - window.innerHeight < 160 ||  // reloadSync 会导致 selectionchange，从而导致键盘没有弹起的情况下出现工具栏
             !document.activeElement || (
                 document.activeElement &&
@@ -492,7 +492,7 @@ export const initKeyboardToolbar = () => {
     toolbarElement.addEventListener("click", (event) => {
         const target = event.target as HTMLElement;
         const slashBtnElement = hasClosestByClassName(event.target as HTMLElement, "keyboard__slash-item");
-        const protyle = getCurrentEditor().protyle;
+        const protyle = getCurrentEditor()?.protyle;
         if (slashBtnElement && !slashBtnElement.getAttribute("data-type")) {
             const dataValue = decodeURIComponent(slashBtnElement.getAttribute("data-value"));
             protyle.hint.fill(dataValue, protyle, false);   // 点击后 range 会改变
@@ -544,7 +544,7 @@ export const initKeyboardToolbar = () => {
             }
             return;
         }
-        if (window.siyuan.config.readonly || window.siyuan.config.editor.readOnly || !getCurrentEditor()) {
+        if (window.siyuan.config.readonly || !protyle || protyle.disabled) {
             return;
         }
         if (type === "undo") {

app/src/mobile/util/onMessage.ts

@@ -3,18 +3,6 @@ import {processSync, progressLoading, progressStatus, reloadSync, transactionErr
 import {Constants} from "../../constants";
 import {App} from "../../index";
 
-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 = (app: App, data: IWebSocketData) => {
     if (data) {
         switch (data.cmd) {
@@ -23,7 +11,6 @@ export const onMessage = (app: App, data: IWebSocketData) => {
                 break;
             case "readonly":
                 window.siyuan.config.editor.readOnly = data.data;
-                processReadonly();
                 break;
             case"progress":
                 progressLoading(data);

app/src/mobile/util/setEmpty.ts

@@ -8,7 +8,6 @@ import {App} from "../../index";
 
 export const setEmpty = (app: App) => {
     document.getElementById("toolbarName").classList.add("fn__hidden");
-    document.getElementById("toolbarEdit").classList.add("fn__hidden");
     document.getElementById("editor").classList.add("fn__none");
     const emptyElement = document.getElementById("empty");
     emptyElement.classList.remove("fn__none");
@@ -83,7 +82,6 @@ export const setEmpty = (app: App) => {
 
 export const setEditor = () => {
     document.getElementById("toolbarName").classList.remove("fn__hidden");
-    document.getElementById("toolbarEdit").classList.remove("fn__hidden");
     document.getElementById("editor").classList.remove("fn__none");
     document.getElementById("empty").classList.add("fn__none");
 };

app/src/protyle/breadcrumb/index.ts

@@ -46,6 +46,8 @@ export class Breadcrumb {
             '<div class="protyle-breadcrumb__bar"></div>'}
 <span class="protyle-breadcrumb__space"></span>
 <button class="protyle-breadcrumb__icon fn__none" data-type="exit-focus">${window.siyuan.languages.exitFocus}</button>
+<button class="block__icon block__icon--show fn__flex-center" data-type="readonly"><svg><use xlink:href="#iconUnlock"></use></svg></button>
+<span class="fn__space"></span>
 <button class="block__icon block__icon--show fn__flex-center" data-type="a" data-position="right" aria-label="${window.siyuan.languages.gutterTip2}"><svg><use xlink:href="#iconFile"></use></svg></button>
 <span class="fn__space"></span>
 <button class="block__icon block__icon--show fn__flex-center" data-type="more"><svg><use xlink:href="#iconMore"></use></svg></button>
@@ -104,6 +106,14 @@ export class Breadcrumb {
                     event.stopPropagation();
                     event.preventDefault();
                     break;
+                } else if (type === "readonly") {
+                    fetchPost("/api/attr/setBlockAttrs", {
+                        id: protyle.block.rootID,
+                        attrs: {[Constants.CUSTOM_SY_READONLY]: target.querySelector("use").getAttribute("xlink:href") === "#iconUnlock" ? "true" : "false"}
+                    });
+                    event.stopPropagation();
+                    event.preventDefault();
+                    break;
                 } else if (type === "exit-focus") {
                     zoomOut({protyle, id: protyle.block.rootID, focusId: protyle.block.id});
                     event.stopPropagation();
@@ -364,7 +374,7 @@ export class Breadcrumb {
                     }
                 }).element);
             }
-            if (window.siyuan.menus.menu.element.childElementCount > 0) {
+            if (window.siyuan.menus.menu.element.lastElementChild.childElementCount > 0) {
                 window.siyuan.menus.menu.append(new MenuItem({type: "separator"}).element);
             }
             window.siyuan.menus.menu.append(new MenuItem({
@@ -423,9 +433,46 @@ export class Breadcrumb {
                 type: "submenu",
                 submenu: editSubmenu
             }).element);
+            const isCustomReadonly = protyle.wysiwyg.element.getAttribute(Constants.CUSTOM_SY_READONLY);
+            window.siyuan.menus.menu.append(new MenuItem({
+                label: window.siyuan.languages.editReadonly,
+                icon: "iconLock",
+                type: "submenu",
+                submenu: [{
+                    iconHTML: "",
+                    current: isCustomReadonly === "true",
+                    label: window.siyuan.languages.enable,
+                    click() {
+                        fetchPost("/api/attr/setBlockAttrs", {
+                            id: protyle.block.rootID,
+                            attrs: {[Constants.CUSTOM_SY_READONLY]: "true"}
+                        });
+                    }
+                }, {
+                    iconHTML: "",
+                    current: isCustomReadonly === "false",
+                    label: window.siyuan.languages.disable,
+                    click() {
+                        fetchPost("/api/attr/setBlockAttrs", {
+                            id: protyle.block.rootID,
+                            attrs: {[Constants.CUSTOM_SY_READONLY]: "false"}
+                        });
+                    }
+                }, {
+                    iconHTML: "",
+                    current: !isCustomReadonly,
+                    label: window.siyuan.languages.default,
+                    click() {
+                        fetchPost("/api/attr/setBlockAttrs", {
+                            id: protyle.block.rootID,
+                            attrs: {[Constants.CUSTOM_SY_READONLY]: ""}
+                        });
+                    }
+                }]
+            }).element);
             /// #if !MOBILE
             if (!protyle.disabled) {
-                const isCustomFullWidth = protyle.wysiwyg.element.getAttribute("custom-sy-fullwidth");
+                const isCustomFullWidth = protyle.wysiwyg.element.getAttribute(Constants.CUSTOM_SY_FULLWIDTH);
                 window.siyuan.menus.menu.append(new MenuItem({
                     label: window.siyuan.languages.fullWidth,
                     type: "submenu",
@@ -436,7 +483,7 @@ export class Breadcrumb {
                         click() {
                             fetchPost("/api/attr/setBlockAttrs", {
                                 id: protyle.block.rootID,
-                                attrs: {"custom-sy-fullwidth": "true"}
+                                attrs: {[Constants.CUSTOM_SY_FULLWIDTH]: "true"}
                             });
                         }
                     }, {
@@ -446,7 +493,7 @@ export class Breadcrumb {
                         click() {
                             fetchPost("/api/attr/setBlockAttrs", {
                                 id: protyle.block.rootID,
-                                attrs: {"custom-sy-fullwidth": "false"}
+                                attrs: {[Constants.CUSTOM_SY_FULLWIDTH]: "false"}
                             });
                         }
                     }, {
@@ -456,7 +503,7 @@ export class Breadcrumb {
                         click() {
                             fetchPost("/api/attr/setBlockAttrs", {
                                 id: protyle.block.rootID,
-                                attrs: {"custom-sy-fullwidth": ""}
+                                attrs: {[Constants.CUSTOM_SY_FULLWIDTH]: ""}
                             });
                         }
                     }]

app/src/protyle/header/Title.ts

@@ -299,8 +299,8 @@ export class Title {
             return false;
         }
         this.element.setAttribute("data-node-id", protyle.block.rootID);
-        if (response.data.ial["custom-riff-decks"]) {
+        if (response.data.ial[Constants.CUSTOM_RIFF_DECKS]) {
-            this.element.setAttribute("custom-riff-decks", response.data.ial["custom-riff-decks"]);
+            this.element.setAttribute(Constants.CUSTOM_RIFF_DECKS, response.data.ial[Constants.CUSTOM_RIFF_DECKS]);
         }
         protyle.background?.render(response.data.ial, protyle.block.rootID);
         protyle.wysiwyg.renderCustom(response.data.ial);

app/src/protyle/header/openTitleMenu.ts

@@ -122,7 +122,7 @@ export const openTitleMenu = (protyle: IProtyle, position: {
                 if (!titleElement) {
                     titleElement = document.createElement("div");
                     titleElement.setAttribute("data-node-id", protyle.block.rootID);
-                    titleElement.setAttribute("custom-riff-decks", response.data.ial["custom-riff-decks"]);
+                    titleElement.setAttribute(Constants.CUSTOM_RIFF_DECKS, response.data.ial[Constants.CUSTOM_RIFF_DECKS]);
                 }
                 quickMakeCard(protyle, [titleElement]);
             }

app/src/protyle/index.ts

@@ -117,10 +117,12 @@ export class Protyle {
                             });
                             break;
                         case "readonly":
-                            if (data.data) {
+                            if (!this.protyle.wysiwyg.element.getAttribute(Constants.CUSTOM_SY_READONLY)) {
-                                disabledProtyle(this.protyle);
+                                if (data.data) {
-                            } else {
+                                    disabledProtyle(this.protyle);
-                                enableProtyle(this.protyle);
+                                } else {
+                                    enableProtyle(this.protyle);
+                                }
                             }
                             break;
                         case "heading2doc":

app/src/protyle/scroll/saveScroll.ts

@@ -72,10 +72,8 @@ export const getDocByScroll = (options: {
                 protyle: options.protyle,
                 action: actions,
                 scrollAttr: options.scrollAttr,
+                afterCB: options.cb
             });
-            if (options.cb) {
-                options.cb();
-            }
         });
         return;
     }
@@ -89,9 +87,7 @@ export const getDocByScroll = (options: {
             protyle: options.protyle,
             action: actions,
             scrollAttr: options.scrollAttr,
+            afterCB: options.cb
         });
-        if (options.cb) {
-            options.cb();
-        }
     });
 };

app/src/protyle/ui/initUI.ts

@@ -124,7 +124,7 @@ export const setPadding = (protyle: IProtyle) => {
     let min24 = 24;
     if (!isMobile()) {
         let padding = (protyle.element.clientWidth - Constants.SIZE_EDITOR_WIDTH) / 2;
-        let isFullWidth = protyle.wysiwyg.element.getAttribute("custom-sy-fullwidth");
+        let isFullWidth = protyle.wysiwyg.element.getAttribute(Constants.CUSTOM_SY_FULLWIDTH);
         if (!isFullWidth) {
             isFullWidth = window.siyuan.config.editor.fullWidth ? "true" : "false";
         }

app/src/protyle/util/onGet.ts

@@ -232,7 +232,14 @@ const setHTML = (options: {
             protyle.breadcrumb.element.nextElementSibling.textContent = "";
         }
         protyle.element.removeAttribute("disabled-forever");
-        if (window.siyuan.config.readonly || window.siyuan.config.editor.readOnly) {
+        let readOnly = window.siyuan.config.readonly ? "true" : "false";
+        if (readOnly === "false") {
+            readOnly = protyle.wysiwyg.element.getAttribute(Constants.CUSTOM_SY_READONLY);
+            if (!readOnly) {
+                readOnly = window.siyuan.config.editor.readOnly ? "true" : "false";
+            }
+        }
+        if (readOnly === "true") {
             disabledProtyle(protyle);
         } else {
             enableProtyle(protyle);
@@ -305,6 +312,9 @@ export const disabledProtyle = (protyle: IProtyle) => {
         titleElement.setAttribute("contenteditable", "false");
         titleElement.style.userSelect = "text";
     }
+    /// #if MOBILE
+    document.getElementById("toolbarName").setAttribute("readonly", "readonly");
+    /// #endif
     if (protyle.background) {
         protyle.background.element.classList.remove("protyle-background--enable");
         protyle.background.element.classList.remove("protyle-background--mobileshow");
@@ -317,6 +327,7 @@ export const disabledProtyle = (protyle: IProtyle) => {
     protyle.wysiwyg.element.querySelectorAll('[contenteditable="true"][spellcheck]').forEach(item => {
         item.setAttribute("contenteditable", "false");
     });
+    protyle.breadcrumb.element.parentElement.querySelector('[data-type="readonly"] use').setAttribute("xlink:href", "#iconLock");
 };
 
 /** 解除编辑器禁用 */
@@ -328,6 +339,7 @@ export const enableProtyle = (protyle: IProtyle) => {
     if (isMobile()) {
         // Android 端空块输入法弹出会收起 https://ld246.com/article/1689713888289
         // iPhone，iPad 端 protyle.wysiwyg.element contenteditable 为 true 时，输入会在块中间插入 span 导致保存失败 https://ld246.com/article/1643473862873/comment/1643813765839#comments
+        document.getElementById("toolbarName").removeAttribute("readonly");
     } else {
         protyle.wysiwyg.element.setAttribute("contenteditable", "true");
         protyle.wysiwyg.element.style.userSelect = "";
@@ -345,6 +357,7 @@ export const enableProtyle = (protyle: IProtyle) => {
             item.setAttribute("contenteditable", "true");
         }
     });
+    protyle.breadcrumb.element.parentElement.querySelector('[data-type="readonly"] use').setAttribute("xlink:href", "#iconUnlock");
 };
 
 

app/src/protyle/util/paste.ts

@@ -224,7 +224,7 @@ export const paste = async (protyle: IProtyle, event: (ClipboardEvent | DragEven
         tempElement.querySelectorAll("[data-node-id]").forEach((e) => {
             const newId = Lute.NewNodeID();
             e.setAttribute("data-node-id", newId);
-            e.removeAttribute("custom-riff-decks");
+            e.removeAttribute(Constants.CUSTOM_RIFF_DECKS);
             e.classList.remove("protyle-wysiwyg--select", "protyle-wysiwyg--hl");
             e.setAttribute("updated", newId.split("-")[0]);
             isBlock = true;

app/src/protyle/util/reload.ts

@@ -32,8 +32,8 @@ export const reloadProtyle = (protyle: IProtyle, focus: boolean) => {
                 refTreeID: protyle.block.rootID,
                 keyword: isMention ? inputsElement[1].value : inputsElement[0].value
             }, response => {
-                protyle.options.backlinkData = isMention ? response.data.backmentions : response.data.backlinks,
+                protyle.options.backlinkData = isMention ? response.data.backmentions : response.data.backlinks;
-                    renderBacklink(protyle, protyle.options.backlinkData);
+                renderBacklink(protyle, protyle.options.backlinkData);
             });
         }
     } else {

app/src/protyle/wysiwyg/index.ts

@@ -108,7 +108,7 @@ export class WYSIWYG {
     }
 
     public renderCustom(ial: IObject) {
-        let isFullWidth = ial["custom-sy-fullwidth"];
+        let isFullWidth = ial[Constants.CUSTOM_SY_FULLWIDTH];
         if (!isFullWidth) {
             isFullWidth = window.siyuan.config.editor.fullWidth ? "true" : "false";
         }

app/src/protyle/wysiwyg/keydown.ts

@@ -1064,7 +1064,7 @@ export const keydown = (protyle: IProtyle, editorElement: HTMLElement) => {
             event.stopPropagation();
             return true;
         }
-        if (matchHotKey(window.siyuan.config.keymap.editor.general.rename.custom, event)) {
+        if (matchHotKey(window.siyuan.config.keymap.editor.general.rename.custom, event) && !protyle.disabled) {
             if (selectText === "") {
                 fetchPost("/api/block/getDocInfo", {
                     id: protyle.block.rootID

app/src/protyle/wysiwyg/transaction.ts

@@ -7,7 +7,7 @@ import {processRender} from "../util/processCode";
 import {highlightRender} from "../render/highlightRender";
 import {hasClosestBlock, hasClosestByAttribute} from "../util/hasClosest";
 import {setFold, zoomOut} from "../../menus/protyle";
-import {onGet} from "../util/onGet";
+import {disabledProtyle, enableProtyle, onGet} from "../util/onGet";
 /// #if !MOBILE
 import {getAllModels} from "../../layout/getAll";
 /// #endif
@@ -492,21 +492,32 @@ export const onTransaction = (protyle: IProtyle, operation: IOperation, isUndo:
                 if (refElement) {
                     nodeAttrHTML += refElement.outerHTML;
                 }
-                if (data.new["custom-riff-decks"] && data.new["custom-riff-decks"] !== data.old["custom-riff-decks"]) {
+                if (data.new[Constants.CUSTOM_RIFF_DECKS] && data.new[Constants.CUSTOM_RIFF_DECKS] !== data.old[Constants.CUSTOM_RIFF_DECKS]) {
                     protyle.title.element.style.animation = "addCard 450ms linear";
-                    protyle.title.element.setAttribute("custom-riff-decks", data.new["custom-riff-decks"]);
+                    protyle.title.element.setAttribute(Constants.CUSTOM_RIFF_DECKS, data.new[Constants.CUSTOM_RIFF_DECKS]);
                     setTimeout(() => {
                         protyle.title.element.style.animation = "";
                     }, 450);
-                } else if (!data.new["custom-riff-decks"]) {
+                } else if (!data.new[Constants.CUSTOM_RIFF_DECKS]) {
-                    protyle.title.element.removeAttribute("custom-riff-decks");
+                    protyle.title.element.removeAttribute(Constants.CUSTOM_RIFF_DECKS);
                 }
                 protyle.title.element.querySelector(".protyle-attr").innerHTML = nodeAttrHTML;
             }
             protyle.wysiwyg.renderCustom(attrsResult);
-            if (data.new["custom-sy-fullwidth"] !== data.old["custom-sy-fullwidth"]) {
+            if (data.new[Constants.CUSTOM_SY_FULLWIDTH] !== data.old[Constants.CUSTOM_SY_FULLWIDTH]) {
                 setPadding(protyle);
             }
+            if (data.new[Constants.CUSTOM_SY_READONLY] !== data.old[Constants.CUSTOM_SY_READONLY]) {
+                let customReadOnly = data.new[Constants.CUSTOM_SY_READONLY];
+                if (!customReadOnly) {
+                    customReadOnly = window.siyuan.config.editor.readOnly ? "true" : "false";
+                }
+                if (customReadOnly === "true") {
+                    disabledProtyle(protyle);
+                } else {
+                    enableProtyle(protyle);
+                }
+            }
             if (data.new.icon !== data.old.icon) {
                 /// #if MOBILE
                 if (window.siyuan.mobile.editor.protyle.background.ial.icon !== data.new.icon) {
@@ -530,12 +541,12 @@ export const onTransaction = (protyle: IProtyle, operation: IOperation, isUndo:
             Object.keys(data.old).forEach(key => {
                 item.removeAttribute(key);
             });
-            if (data.new.style && data.new["custom-riff-decks"] && data.new["custom-riff-decks"] !== data.old["custom-riff-decks"]) {
+            if (data.new.style && data.new[Constants.CUSTOM_RIFF_DECKS] && data.new[Constants.CUSTOM_RIFF_DECKS] !== data.old[Constants.CUSTOM_RIFF_DECKS]) {
                 data.new.style += ";animation:addCard 450ms linear";
             }
             Object.keys(data.new).forEach(key => {
                 item.setAttribute(key, data.new[key]);
-                if (key === "custom-riff-decks" && data.new["custom-riff-decks"] !== data.old["custom-riff-decks"]) {
+                if (key === Constants.CUSTOM_RIFF_DECKS && data.new[Constants.CUSTOM_RIFF_DECKS] !== data.old[Constants.CUSTOM_RIFF_DECKS]) {
                     item.style.animation = "addCard 450ms linear";
                     setTimeout(() => {
                         item.style.animation = "";

app/src/search/util.ts

@@ -255,9 +255,6 @@ export const genSearch = (app: App, config: ISearchOption, element: Element, clo
             breadcrumbDocName: true
         },
     });
-    if (window.siyuan.config.editor.readOnly) {
-        disabledProtyle(edit.protyle);
-    }
     if (closeCB) {
         if (data.layout === 1) {
             if (data.col) {

app/src/util/escape.ts

@@ -12,5 +12,5 @@ export const escapeAttr = (html: string) => {
 
 export const escapeAriaLabel = (html: string) => {
     return html.replace(/"/g, """).replace(/'/g, "'")
-        .replace(/</g, "&amp;lt;");
+        .replace(/</g, "&amp;lt;").replace(/&lt;/g, "&amp;lt;");
 };