🎨 fix #11549

siyuan-note · May 29, 2024 · 750303d · 750303d
1 parent a48854a
commit 750303d
Show file tree

Hide file tree

Showing 15 changed files with 36 additions and 30 deletions.
diff --git a/app/src/block/Panel.ts b/app/src/block/Panel.ts
@@ -9,13 +9,13 @@ import {openNewWindowById} from "../window/openNewWindow";
 /// #endif
 /// #if !MOBILE
 import {moveResize} from "../dialog/moveResize";
+import {openFileById} from "../editor/util";
 /// #endif
 import {fetchPost} from "../util/fetch";
 import {showMessage} from "../dialog/message";
 import {App} from "../index";
 import {isMobile} from "../util/functions";
 import {resize} from "../protyle/util/resize";
-import {openFileById} from "../editor/util";
 
 export class BlockPanel {
     public element: HTMLElement;
@@ -120,11 +120,13 @@ export class BlockPanel {
                         openNewWindowById(this.nodeIds[0]);
                         /// #endif
                     } else if (type === "stickTab") {
+                        /// #if !BROWSER
                         openFileById({
                             app: options.app,
                             id: this.nodeIds[0],
                             action: this.editors[0].protyle.block.rootID !== this.nodeIds[0] ? [Constants.CB_GET_ALL] : [Constants.CB_GET_CONTEXT],
                         });
+                        /// #endif
                     }
                     event.preventDefault();
                     event.stopPropagation();

diff --git a/app/src/card/openCard.ts b/app/src/card/openCard.ts
@@ -174,7 +174,6 @@ export const bindCardEvent = async (options: {
         action: [Constants.CB_GET_ALL],
         render: {
             background: false,
-            title: false,
             gutter: true,
             breadcrumbDocName: true,
         },

diff --git a/app/src/dialog/processSystem.ts b/app/src/dialog/processSystem.ts
@@ -56,7 +56,7 @@ export const reloadSync = (app: App, data: { upsertRootIDs: string[], removeRoot
                 id: window.siyuan.mobile.editor.protyle.block.rootID
             }, (response) => {
                 setTitle(response.data.name);
-                (document.getElementById("toolbarName") as HTMLInputElement).value = response.data.name === window.siyuan.languages.untitled ? "" : response.data.name;
+                window.siyuan.mobile.editor.protyle.title.setTitle(response.data.name);
             });
         }
     }

diff --git a/app/src/history/diff.ts b/app/src/history/diff.ts
@@ -50,7 +50,6 @@ const renderCompare = (app: App, element: HTMLElement) => {
             action: [Constants.CB_GET_HISTORY],
             render: {
                 background: false,
-                title: false,
                 gutter: false,
                 breadcrumb: false,
                 breadcrumbDocName: false,
@@ -66,7 +65,6 @@ const renderCompare = (app: App, element: HTMLElement) => {
             },
             render: {
                 background: false,
-                title: false,
                 gutter: false,
                 breadcrumb: false,
                 breadcrumbDocName: false,

diff --git a/app/src/history/doc.ts b/app/src/history/doc.ts
@@ -116,7 +116,6 @@ export const openDocHistory = (options: {
         action: [Constants.CB_GET_HISTORY],
         render: {
             background: false,
-            title: false,
             gutter: false,
             breadcrumb: false,
             breadcrumbDocName: false,

diff --git a/app/src/history/history.ts b/app/src/history/history.ts
@@ -471,7 +471,6 @@ const bindEvent = (app: App, element: Element, dialog?: Dialog) => {
         action: [Constants.CB_GET_HISTORY],
         render: {
             background: false,
-            title: false,
             gutter: false,
             breadcrumb: false,
             breadcrumbDocName: false,

diff --git a/app/src/layout/dock/Backlink.ts b/app/src/layout/dock/Backlink.ts
@@ -450,7 +450,6 @@ export class Backlink extends Model {
                     backlinkData: isMention ? response.data.backmentions : response.data.backlinks,
                     render: {
                         background: false,
-                        title: false,
                         gutter: true,
                         scroll: false,
                         breadcrumb: false,

diff --git a/app/src/mobile/editor.ts b/app/src/mobile/editor.ts
@@ -58,6 +58,7 @@ export const openMobileFileById = (app: App, id: string, action = [Constants.CB_
             action,
             render: {
                 scroll: true,
+                title: true,
                 background: true,
                 gutter: true,
             },
@@ -67,6 +68,7 @@ export const openMobileFileById = (app: App, id: string, action = [Constants.CB_
             }
         };
         if (window.siyuan.mobile.editor) {
+            window.siyuan.mobile.editor.protyle.title.element.removeAttribute("data-render");
             pushBack();
             addLoading(window.siyuan.mobile.editor.protyle);
             if (window.siyuan.mobile.editor.protyle.block.rootID !== data.data.rootID) {
@@ -105,7 +107,6 @@ export const openMobileFileById = (app: App, id: string, action = [Constants.CB_
         } else {
             window.siyuan.mobile.editor = new Protyle(app, document.getElementById("editor"), protyleOptions);
         }
-        (document.getElementById("toolbarName") as HTMLInputElement).value = data.data.rootTitle === window.siyuan.languages.untitled ? "" : data.data.rootTitle;
         setEditor();
         closePanel();
     });

diff --git a/app/src/mobile/util/MobileBackFoward.ts b/app/src/mobile/util/MobileBackFoward.ts
@@ -44,7 +44,7 @@ const focusStack = (backStack: IBackStack) => {
             id: backStack.id,
         }, (response) => {
             setTitle(response.data.name);
-            (document.getElementById("toolbarName") as HTMLInputElement).value = response.data.name === window.siyuan.languages.untitled ? "" : response.data.name;
+            protyle.title.setTitle(response.data.name);
             protyle.background.render(response.data.ial, protyle.block.rootID);
             protyle.wysiwyg.renderCustom(response.data.ial);
         });

diff --git a/app/src/protyle/header/Title.ts b/app/src/protyle/header/Title.ts
@@ -37,6 +37,7 @@ export class Title {
         if (window.siyuan.config.editor.displayBookmarkIcon) {
             this.element.classList.add("protyle-wysiwyg--attr");
         }
+        /// #if !MOBILE
         // 标题内需要一个空格，避免首次加载出现`请输入文档名`干扰
         this.element.innerHTML = `<span aria-label="${isMac() ? window.siyuan.languages.gutterTip2 : window.siyuan.languages.gutterTip2.replace("⇧", "Shift+")}" data-position="right" class="protyle-title__icon ariaLabel"><svg><use xlink:href="#iconFile"></use></svg></span>
 <div contenteditable="true" spellcheck="${window.siyuan.config.editor.spellcheck}" class="protyle-title__input" data-tip="${window.siyuan.languages._kernel[16]}"> </div><div class="protyle-attr"></div>`;
@@ -248,6 +249,9 @@ export class Title {
             }).element);
             window.siyuan.menus.menu.popup({x: event.clientX, y: event.clientY});
         });
+        /// #else
+        this.element.innerHTML = '<div class="protyle-attr"></div>';
+        /// #endif
         this.element.querySelector(".protyle-attr").addEventListener("click", (event: MouseEvent & {
             target: HTMLElement
         }) => {
@@ -282,13 +286,20 @@ export class Title {
     }
 
     public setTitle(title: string) {
+        /// #if MOBILE
+        const inputElement = document.getElementById("toolbarName") as HTMLInputElement;
+        if (code160to32(title) !== code160to32(inputElement.value)) {
+            inputElement.value = title === window.siyuan.languages.untitled ? "" : title;
+        }
+        /// #else
         if (code160to32(title) !== code160to32(this.editElement.textContent)) {
             this.editElement.textContent = title === window.siyuan.languages.untitled ? "" : title;
         }
+        /// #endif
     }
 
     public render(protyle: IProtyle, response: IWebSocketData) {
-        if (this.editElement.getAttribute("data-render") === "true") {
+        if (this.element.getAttribute("data-render") === "true") {
             return false;
         }
         this.element.setAttribute("data-node-id", protyle.block.rootID);
@@ -297,7 +308,7 @@ export class Title {
         }
         protyle.background?.render(response.data.ial, protyle.block.rootID);
         protyle.wysiwyg.renderCustom(response.data.ial);
-        this.editElement.setAttribute("data-render", "true");
+        this.element.setAttribute("data-render", "true");
         this.setTitle(response.data.ial.title);
         let nodeAttrHTML = "";
         if (response.data.ial.bookmark) {
@@ -327,7 +338,7 @@ export class Title {
             this.element.querySelector(".protyle-attr").insertAdjacentHTML("beforeend", `<div class="protyle-attr--refcount popover__block" data-defids='${JSON.stringify([protyle.block.rootID])}' data-id='${JSON.stringify(response.data.refIDs)}'>${response.data.refCount}</div>`);
         }
         // 存在设置新建文档名模板，不能使用 Untitled 进行判断，https://ld246.com/article/1649301009888
-        if (new Date().getTime() - dayjs(response.data.id.split("-")[0]).toDate().getTime() < 2000) {
+        if (this.editElement && new Date().getTime() - dayjs(response.data.id.split("-")[0]).toDate().getTime() < 2000) {
             const range = this.editElement.ownerDocument.createRange();
             range.selectNodeContents(this.editElement);
             focusByRange(range);

diff --git a/app/src/protyle/index.ts b/app/src/protyle/index.ts
@@ -23,10 +23,10 @@ import {
 } from "./wysiwyg/transaction";
 import {fetchPost} from "../util/fetch";
 /// #if !MOBILE
-import {Title} from "./header/Title";
 import {updatePanelByEditor} from "../editor/util";
 import {setPanelFocus} from "../layout/util";
 /// #endif
+import {Title} from "./header/Title";
 import {Background} from "./header/Background";
 import {onGet, setReadonlyByConfig} from "./util/onGet";
 import {reloadProtyle} from "./util/reload";
@@ -77,11 +77,9 @@ export class Protyle {
         if (mergedOptions.render.breadcrumb) {
             this.protyle.breadcrumb = new Breadcrumb(this.protyle);
         }
-        /// #if !MOBILE
         if (mergedOptions.render.title) {
             this.protyle.title = new Title(this.protyle);
         }
-        /// #endif
         if (mergedOptions.render.background) {
             this.protyle.background = new Background(this.protyle);
         }
@@ -178,7 +176,8 @@ export class Protyle {
                                 }
                             }
                             if (this.protyle.options.render.title && this.protyle.block.parentID === data.data.id) {
-                                if (getSelection().rangeCount > 0 && this.protyle.title.editElement.contains(getSelection().getRangeAt(0).startContainer)) {
+                                if (!document.body.classList.contains("body--blur") && getSelection().rangeCount > 0 &&
+                                    this.protyle.title.editElement?.contains(getSelection().getRangeAt(0).startContainer)) {
                                     // 标题编辑中的不用更新 https://github.com/siyuan-note/siyuan/issues/6565
                                 } else {
                                     this.protyle.title.setTitle(data.data.title);

diff --git a/app/src/protyle/util/onGet.ts b/app/src/protyle/util/onGet.ts
@@ -290,10 +290,9 @@ export const disabledProtyle = (protyle: IProtyle) => {
     window.siyuan.menus.menu.remove();
     hideElements(["gutter", "toolbar", "select", "hint", "util"], protyle);
     protyle.disabled = true;
-    if (protyle.title) {
-        const titleElement = protyle.title.element.querySelector(".protyle-title__input") as HTMLElement;
-        titleElement.setAttribute("contenteditable", "false");
-        titleElement.style.userSelect = "text";
+    if (protyle.title && protyle.title.editElement) {
+        protyle.title.editElement.setAttribute("contenteditable", "false");
+        protyle.title.editElement.style.userSelect = "text";
     }
     /// #if MOBILE
     document.getElementById("toolbarName").setAttribute("readonly", "readonly");
@@ -351,10 +350,9 @@ export const enableProtyle = (protyle: IProtyle) => {
     }
     // 用于区分移动端样式
     protyle.wysiwyg.element.setAttribute("data-readonly", "false");
-    if (protyle.title) {
-        const titleElement = protyle.title.element.querySelector(".protyle-title__input") as HTMLElement;
-        titleElement.setAttribute("contenteditable", "true");
-        titleElement.style.userSelect = "";
+    if (protyle.title && protyle.title.editElement) {
+        protyle.title.editElement.setAttribute("contenteditable", "true");
+        protyle.title.editElement.style.userSelect = "";
     }
     if (protyle.background) {
         protyle.background.element.classList.add("protyle-background--enable");

diff --git a/app/src/protyle/util/reload.ts b/app/src/protyle/util/reload.ts
@@ -16,7 +16,7 @@ export const reloadProtyle = (protyle: IProtyle, focus: boolean, updateReadonly?
         protyle.wysiwyg.element.classList.remove("protyle-wysiwyg--attr");
     }
     if (protyle.title) {
-        protyle.title.editElement.removeAttribute("data-render");
+        protyle.title.element.removeAttribute("data-render");
         protyle.title.element.setAttribute("spellcheck", window.siyuan.config.editor.spellcheck.toString());
         if (window.siyuan.config.editor.displayBookmarkIcon) {
             protyle.title.element.classList.add("protyle-wysiwyg--attr");

diff --git a/app/src/protyle/wysiwyg/keydown.ts b/app/src/protyle/wysiwyg/keydown.ts
@@ -248,8 +248,8 @@ export const keydown = (protyle: IProtyle, editorElement: HTMLElement) => {
                                 previousElement = foldElement;
                             }
                         }
-                    } else if (protyle.title && (protyle.wysiwyg.element.firstElementChild.getAttribute("data-eof") === "1" ||
-                        protyle.contentElement.scrollTop === 0)) {
+                    } else if (protyle.title && protyle.title.editElement &&
+                        (protyle.wysiwyg.element.firstElementChild.getAttribute("data-eof") === "1" || protyle.contentElement.scrollTop === 0)) {
                         protyle.title.editElement.focus();
                     } else if (protyle.contentElement.scrollTop !== 0) {
                         protyle.contentElement.scrollTop = 0;
@@ -636,7 +636,8 @@ export const keydown = (protyle: IProtyle, editorElement: HTMLElement) => {
                     (!firstEditElement && nodeElement.isSameNode(protyle.wysiwyg.element.firstElementChild))) {
                     // 不能用\n判断，否则文字过长折行将错误 https://github.com/siyuan-note/siyuan/issues/6156
                     if (getSelectionPosition(nodeElement, range).top - protyle.wysiwyg.element.getBoundingClientRect().top < 40 || nodeElement.classList.contains("av")) {
-                        if (protyle.title && (protyle.wysiwyg.element.firstElementChild.getAttribute("data-eof") === "1" ||
+                        if (protyle.title && protyle.title.editElement &&
+                            (protyle.wysiwyg.element.firstElementChild.getAttribute("data-eof") === "1" ||
                             protyle.contentElement.scrollTop === 0)) {
                             protyle.title.editElement.focus();
                         } else {

diff --git a/app/src/util/highlightById.ts b/app/src/util/highlightById.ts
@@ -32,7 +32,7 @@ export const highlightById = (protyle: IProtyle, id: string, top = false) => {
         bgFade(nodeElement);
         return nodeElement;// 仅配合前进后退使用
     }
-    if (id === protyle.block.rootID && protyle.options.render.title) {
+    if (id === protyle.block.rootID && protyle.options.render.title && protyle.title.editElement) {
         bgFade(protyle.title.editElement);
         return protyle.title.editElement;
     }