🐛 fix https://github.com/siyuan-note/siyuan/issues/8229

app/src/asset/index.ts

@@ -503,7 +503,7 @@ export class Asset extends Model {
                 /// #if !BROWSER
                 setModelsHash();
                 /// #endif
-            }, Constants.TIMEOUT_BLOCKLOAD);
+            }, Constants.TIMEOUT_LOAD);
             /// #endif
         }
     }

app/src/constants.ts

@@ -85,10 +85,9 @@ export abstract class Constants {
 
     // timeout
     public static readonly TIMEOUT_DBLCLICK = 190;
-    public static readonly TIMEOUT_SEARCH = 300;
     public static readonly TIMEOUT_INPUT = 256;
-    public static readonly TIMEOUT_BLOCKLOAD = 300;
+    public static readonly TIMEOUT_LOAD = 300;
-    public static readonly TIMEOUT_TRANSITION = 150;
+    public static readonly TIMEOUT_TRANSITION = 300;
 
     // id
     public static readonly HELP_PATH = {

app/src/editor/util.ts

@@ -434,48 +434,56 @@ const newTab = (options: IOpenFileOptions) => {
     return tab;
 };
 
-export const updatePanelByEditor = (protyle?: IProtyle, focus = true, pushBackStack = false, reload = false) => {
+export const updatePanelByEditor = (options: {
+    protyle?: IProtyle,
+    focus: boolean,
+    pushBackStack: boolean,
+    reload: boolean,
+    resize: boolean
+}) => {
     let title = window.siyuan.languages.siyuanNote;
-    if (protyle && protyle.path) {
+    if (options.protyle && options.protyle.path) {
         // https://ld246.com/article/1637636106054/comment/1641485541929#comments
-        if (protyle.element.classList.contains("fn__none") ||
+        if (options.protyle.element.classList.contains("fn__none") ||
-            (!hasClosestByClassName(protyle.element, "layout__wnd--active") &&
+            (!hasClosestByClassName(options.protyle.element, "layout__wnd--active") &&
                 document.querySelector(".layout__wnd--active")  // https://github.com/siyuan-note/siyuan/issues/4414
             )
         ) {
             return;
         }
-        title = protyle.title.editElement.textContent;
+        title = options.protyle.title.editElement.textContent;
-        resize(protyle);
+        if (options.resize) {
+            resize(options.protyle);
+        }
         if (focus) {
-            if (protyle.toolbar.range) {
+            if (options.protyle.toolbar.range) {
-                focusByRange(protyle.toolbar.range);
+                focusByRange(options.protyle.toolbar.range);
-                countSelectWord(protyle.toolbar.range, protyle.block.rootID);
+                countSelectWord(options.protyle.toolbar.range, options.protyle.block.rootID);
-                if (pushBackStack && protyle.preview.element.classList.contains("fn__none")) {
+                if (options.pushBackStack && options.protyle.preview.element.classList.contains("fn__none")) {
-                    pushBack(protyle, protyle.toolbar.range);
+                    pushBack(options.protyle, options.protyle.toolbar.range);
                 }
             } else {
-                focusBlock(protyle.wysiwyg.element.firstElementChild);
+                focusBlock(options.protyle.wysiwyg.element.firstElementChild);
-                if (pushBackStack && protyle.preview.element.classList.contains("fn__none")) {
+                if (options.pushBackStack && options.protyle.preview.element.classList.contains("fn__none")) {
-                    pushBack(protyle, undefined, protyle.wysiwyg.element.firstElementChild);
+                    pushBack(options.protyle, undefined, options.protyle.wysiwyg.element.firstElementChild);
                 }
-                countBlockWord([], protyle.block.rootID);
+                countBlockWord([], options.protyle.block.rootID);
             }
         }
-        if (window.siyuan.config.fileTree.alwaysSelectOpenedFile && protyle) {
+        if (window.siyuan.config.fileTree.alwaysSelectOpenedFile && options.protyle) {
             const fileModel = getDockByType("file")?.data.file;
             if (fileModel instanceof Files) {
-                const target = fileModel.element.querySelector(`li[data-path="${protyle.path}"]`);
+                const target = fileModel.element.querySelector(`li[data-path="${options.protyle.path}"]`);
                 if (!target || (target && !target.classList.contains("b3-list-item--focus"))) {
-                    fileModel.selectItem(protyle.notebookId, protyle.path);
+                    fileModel.selectItem(options.protyle.notebookId, options.protyle.path);
                 }
             }
         }
     }
     // 切换页签或关闭所有页签时，需更新对应的面板
     const models = getAllModels();
-    updateOutline(models, protyle, reload);
+    updateOutline(models, options.protyle, options.reload);
-    updateBacklinkGraph(models, protyle);
+    updateBacklinkGraph(models, options.protyle);
     setTitle(title);
 };
 

app/src/layout/Tab.ts

@@ -102,7 +102,7 @@ export class Tab {
                         (event.clientX < 0 || event.clientY < 0 || event.clientX > window.innerWidth || event.clientY > window.innerHeight)) {
                         openNewWindow(this);
                     }
-                }, Constants.TIMEOUT_BLOCKLOAD); // 等待主进程发送关闭消息
+                }, Constants.TIMEOUT_LOAD); // 等待主进程发送关闭消息
                 /// #endif
                 window.siyuan.dragElement = undefined;
                 if (event.dataTransfer.dropEffect === "none") {

app/src/layout/Wnd.ts

@@ -484,10 +484,22 @@ export class Wnd {
             }
             // focusin 触发前，layout__wnd--active 和 tab 已设置，需在调用里面更新
             if (update) {
-                updatePanelByEditor(currentTab.model.editor.protyle, true, pushBack);
+                updatePanelByEditor({
+                    protyle: currentTab.model.editor.protyle,
+                    focus: true,
+                    pushBackStack: pushBack,
+                    reload: false,
+                    resize: true,
+                });
             }
         } else {
-            updatePanelByEditor(undefined, false);
+            updatePanelByEditor({
+                protyle: undefined,
+                focus: false,
+                pushBackStack: false,
+                reload: false,
+                resize: true,
+            });
         }
     }
 
@@ -685,12 +697,24 @@ export class Wnd {
                     // 关闭分屏页签后光标消失
                     const editors = getAllModels().editor;
                     if (editors.length === 0) {
-                        updatePanelByEditor();
+                        updatePanelByEditor({
+                            protyle: undefined,
+                            focus: true,
+                            pushBackStack: false,
+                            reload: false,
+                            resize: true,
+                        });
                     } else {
                         editors.forEach(item => {
                             if (!item.element.classList.contains("fn__none")) {
                                 setPanelFocus(item.parent.parent.headersElement.parentElement.parentElement);
-                                updatePanelByEditor(item.editor.protyle, true, true);
+                                updatePanelByEditor({
+                                    protyle: item.editor.protyle,
+                                    focus: true,
+                                    pushBackStack: true,
+                                    reload: false,
+                                    resize: true,
+                                });
                                 return;
                             }
                         });
@@ -719,7 +743,7 @@ export class Wnd {
                         item.headElement.setAttribute("style", "max-width: 0px;");
                         setTimeout(() => {
                             item.headElement.remove();
-                        }, Constants.TIMEOUT_TRANSITION);
+                        }, 200);
                     } else {
                         item.headElement.remove();
                     }

app/src/layout/dock/Backlink.ts

@@ -641,6 +641,6 @@ export class Backlink extends Model {
         setTimeout(() => {
             this.tree.element.scrollTop = this.status[this.blockId].scrollTop;
             this.mTree.element.scrollTop = this.status[this.blockId].mScrollTop;
-        }, Constants.TIMEOUT_BLOCKLOAD);
+        }, Constants.TIMEOUT_LOAD);
     }
 }

app/src/layout/util.ts

@@ -400,7 +400,7 @@ export const JSONToLayout = (app: App, isStart: boolean) => {
                 action: idZoomIn.isZoomIn ? [Constants.CB_GET_ALL, Constants.CB_GET_FOCUS] : [Constants.CB_GET_FOCUS, Constants.CB_GET_CONTEXT],
                 zoomIn: idZoomIn.isZoomIn
             });
-        }, Constants.TIMEOUT_BLOCKLOAD);
+        }, Constants.TIMEOUT_LOAD);
     }
 };
 

app/src/mobile/menu/search.ts

@@ -242,7 +242,7 @@ const updateSearchResult = (config: ISearchOption, element: Element) => {
                 }
             });
         }
-    }, Constants.TIMEOUT_SEARCH);
+    }, Constants.TIMEOUT_INPUT);
 };
 
 const initSearchEvent = (element: Element, config: ISearchOption) => {

app/src/protyle/export/util.ts

@@ -69,7 +69,7 @@ export const exportImage = (id: string) => {
                     });
                 });
             });
-        }, Constants.TIMEOUT_TRANSITION);
+        }, Constants.TIMEOUT_LOAD);
     });
     const previewElement = exportDialog.element.querySelector("#preview") as HTMLElement;
     const foldElement = (exportDialog.element.querySelector("#keepFold") as HTMLInputElement);

app/src/protyle/header/Title.ts

@@ -60,7 +60,13 @@ export class Title {
         this.editElement.addEventListener("click", () => {
             if (protyle.model) {
                 setPanelFocus(protyle.model.element.parentElement.parentElement);
-                updatePanelByEditor(protyle, false);
+                updatePanelByEditor({
+                    protyle: protyle,
+                    focus: false,
+                    pushBackStack: false,
+                    reload: false,
+                    resize: false,
+                });
             }
             protyle.toolbar?.element.classList.add("fn__none");
         });

app/src/protyle/index.ts

@@ -116,7 +116,13 @@ export class Protyle {
                                 /// #if !MOBILE
                                 if (data.cmd === "heading2doc") {
                                     // 文档标题互转后，需更新大纲
-                                    updatePanelByEditor(this.protyle, false, false, true);
+                                    updatePanelByEditor({
+                                        protyle: this.protyle,
+                                        focus: false,
+                                        pushBackStack: false,
+                                        reload: true,
+                                        resize: false
+                                    });
                                 }
                                 /// #endif
                             }
@@ -200,7 +206,13 @@ export class Protyle {
                     if (mergedOptions.action?.includes(Constants.CB_GET_FOCUS)) {
                         setPanelFocus(this.protyle.model.element.parentElement.parentElement);
                     }
-                    updatePanelByEditor(this.protyle, false);
+                    updatePanelByEditor({
+                        protyle: this.protyle,
+                        focus: false,
+                        pushBackStack: false,
+                        reload: false,
+                        resize: false
+                    });
                     /// #endif
                 }
 
@@ -217,7 +229,13 @@ export class Protyle {
                             return;
                         }
                         setPanelFocus(this.protyle.model.element.parentElement.parentElement);
-                        updatePanelByEditor(this.protyle, false);
+                        updatePanelByEditor({
+                            protyle: this.protyle,
+                            focus: false,
+                            pushBackStack: false,
+                            reload: false,
+                            resize: false,
+                        });
                     } else {
                         // 悬浮层应移除其余面板高亮，否则按键会被面板监听到
                         document.querySelectorAll(".layout__tab--active").forEach(item => {

app/src/protyle/markdown/mermaidRender.ts

@@ -73,7 +73,7 @@ const initMermaid = (mermaidElements: Element[]) => {
         renderElement.textContent = Lute.UnEscapeHTMLStr(item.getAttribute("data-content"));
         setTimeout(() => {
             mermaid.init(undefined, renderElement);
-        }, Constants.TIMEOUT_BLOCKLOAD * index);
+        }, Constants.TIMEOUT_LOAD * index);
         item.setAttribute("data-render", "true");
         renderElement.setAttribute("contenteditable", "false");
         if (!item.textContent.endsWith(Constants.ZWSP)) {

app/src/protyle/scroll/event.ts

@@ -55,7 +55,7 @@ export const scrollEvent = (protyle: IProtyle, element: HTMLElement) => {
                     inputElement.value = response.data;
                     protyle.scroll.element.setAttribute("aria-label", `Blocks ${response.data}/${protyle.block.blockCount}`);
                 });
-            }, Constants.TIMEOUT_BLOCKLOAD);
+            }, Constants.TIMEOUT_LOAD);
         }
         if (protyle.wysiwyg.element.getAttribute("data-top") || protyle.block.showAll ||
             (protyle.scroll && protyle.scroll.element.classList.contains("fn__none")) || !protyle.scroll ||

app/src/protyle/toolbar/index.ts

@@ -988,7 +988,7 @@ export class Toolbar {
             }
             setTimeout(() => {
                 addScript("stage/protyle/js/html2canvas.min.js?v=1.4.1", "protyleHtml2canvas").then(() => {
-                    window.html2canvas(renderElement).then((canvas) => {
+                    window.html2canvas(renderElement, {useCORS: true}).then((canvas) => {
                         canvas.toBlob((blob: Blob) => {
                             const formData = new FormData();
                             formData.append("file", blob);
@@ -1000,7 +1000,7 @@ export class Toolbar {
                         });
                     });
                 });
-            }, Constants.TIMEOUT_TRANSITION);
+            }, Constants.TIMEOUT_LOAD);
         };
         headerElement.addEventListener("mousedown", (event: MouseEvent) => {
             if (hasClosestByClassName(event.target as HTMLElement, "block__icon")) {

app/src/protyle/ui/initUI.ts

@@ -78,7 +78,7 @@ export const addLoading = (protyle: IProtyle) => {
         if (protyle.element.getAttribute("data-loading") !== "finished") {
             protyle.element.insertAdjacentHTML("beforeend", '<div style="background-color: var(--b3-theme-background)" class="fn__loading wysiwygLoading"><img width="48px" src="/stage/loading-pure.svg"></div>');
         }
-    }, Constants.TIMEOUT_BLOCKLOAD);
+    }, Constants.TIMEOUT_LOAD);
 };
 
 export const removeLoading = (protyle: IProtyle) => {

app/src/protyle/util/editorCommonEvent.ts

@@ -855,13 +855,19 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
                 onGet(getResponse, protyle);
                 /// #if !MOBILE
                 // 文档标题互转后，需更新大纲
-                updatePanelByEditor(protyle, false, false, true);
+                updatePanelByEditor({
+                    protyle,
+                    focus: false,
+                    pushBackStack: false,
+                    reload: true,
+                    resize: false,
+                });
                 /// #endif
                 // 文档标题互转后，编辑区会跳转到开头 https://github.com/siyuan-note/siyuan/issues/2939
                 setTimeout(() => {
                     protyle.contentElement.scrollTop = scrollTop;
                     protyle.scroll.lastScrollTop = scrollTop - 1;
-                }, Constants.TIMEOUT_BLOCKLOAD);
+                }, Constants.TIMEOUT_LOAD);
             });
             targetElement.classList.remove("dragover__bottom", "dragover__top");
         } else if (!window.siyuan.dragElement && (event.dataTransfer.types[0] === "Files" || event.dataTransfer.types.includes("text/html"))) {

app/src/protyle/util/insertHTML.ts

@@ -51,7 +51,7 @@ export const insertHTML = (html: string, protyle: IProtyle, isBlock = false,
         updateTransaction(protyle, id, blockElement.outerHTML, oldHTML);
         setTimeout(() => {
             scrollCenter(protyle, blockElement, false, "smooth");
-        }, Constants.TIMEOUT_BLOCKLOAD);
+        }, Constants.TIMEOUT_LOAD);
         return;
     }
 

app/src/protyle/util/onGet.ts

@@ -220,7 +220,7 @@ const setHTML = (options: {
             // 减少抖动 https://ld246.com/article/1654263598088
             setTimeout(() => {
                 focusElement.scrollIntoView();
-            }, Constants.TIMEOUT_BLOCKLOAD);
+            }, Constants.TIMEOUT_LOAD);
         } else {
             focusBlock(protyle.wysiwyg.element.firstElementChild);
             /// #if !MOBILE

app/src/protyle/util/resize.ts

@@ -1,33 +1,36 @@
 import {hideElements} from "../ui/hideElements";
 import {setPadding} from "../ui/initUI";
 import {hasClosestBlock} from "./hasClosest";
+import {Constants} from "../../constants";
 
 export const resize = (protyle: IProtyle) => {
     hideElements(["gutter"], protyle);
     setPadding(protyle);
-    if (typeof echarts !== "undefined") {
+    setTimeout(() => {
-        protyle.wysiwyg.element.querySelectorAll('[data-subtype="echarts"], [data-subtype="mindmap"]').forEach((chartItem: HTMLElement) => {
+        if (typeof echarts !== "undefined") {
-            const chartInstance = echarts.getInstanceById(chartItem.firstElementChild.nextElementSibling.getAttribute("_echarts_instance_"));
+            protyle.wysiwyg.element.querySelectorAll('[data-subtype="echarts"], [data-subtype="mindmap"]').forEach((chartItem: HTMLElement) => {
-            if (chartInstance) {
+                const chartInstance = echarts.getInstanceById(chartItem.firstElementChild.nextElementSibling.getAttribute("_echarts_instance_"));
-                chartInstance.resize();
+                if (chartInstance) {
+                    chartInstance.resize();
+                }
+            });
+        }
+        // 保持光标位置不变 https://ld246.com/article/1673704873983/comment/1673765814595#comments
+        if (protyle.toolbar.range) {
+            let rangeRect = protyle.toolbar.range.getBoundingClientRect();
+            if (rangeRect.height === 0) {
+                const blockElement = hasClosestBlock(protyle.toolbar.range.startContainer);
+                if (blockElement) {
+                    rangeRect = blockElement.getBoundingClientRect();
+                }
             }
-        });
+            if (rangeRect.height === 0) {
-    }
+                return;
-    // 保持光标位置不变 https://ld246.com/article/1673704873983/comment/1673765814595#comments
+            }
-    if (protyle.toolbar.range) {
+            const protyleRect = protyle.element.getBoundingClientRect();
-        let rangeRect = protyle.toolbar.range.getBoundingClientRect();
+            if (protyleRect.top + 30 > rangeRect.top || protyleRect.bottom < rangeRect.bottom) {
-        if (rangeRect.height === 0) {
+                protyle.toolbar.range.startContainer.parentElement.scrollIntoView(protyleRect.top > rangeRect.top);
-            const blockElement = hasClosestBlock(protyle.toolbar.range.startContainer);
-            if (blockElement) {
-                rangeRect = blockElement.getBoundingClientRect();
             }
         }
-        if (rangeRect.height === 0) {
+    }, Constants.TIMEOUT_TRANSITION);   // 等待 setPadding 动画结束
-            return;
-        }
-        const protyleRect = protyle.element.getBoundingClientRect();
-        if (protyleRect.top + 30 > rangeRect.top || protyleRect.bottom < rangeRect.bottom) {
-            protyle.toolbar.range.startContainer.parentElement.scrollIntoView(protyleRect.top > rangeRect.top);
-        }
-    }
 };

app/src/search/util.ts

@@ -1054,7 +1054,7 @@ const inputEvent = (element: Element, config: ISearchOption, inputTimeout: numbe
                 loadingElement.classList.add("fn__none");
             });
         }
-    }, Constants.TIMEOUT_SEARCH);
+    }, Constants.TIMEOUT_INPUT);
     return inputTimeout;
 };
 

app/src/util/backForward.ts

@@ -151,7 +151,7 @@ const focusStack = async (stack: IBackStack) => {
             setTimeout(() => {
                 // 图片、视频等加载完成后再定位
                 scrollCenter(stack.protyle, blockElement, true);
-            }, Constants.TIMEOUT_BLOCKLOAD);
+            }, Constants.TIMEOUT_LOAD);
         });
         return true;
     }