🎨 resize

app/src/block/Panel.ts

@@ -15,6 +15,7 @@ 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";
 
 export class BlockPanel {
     public element: HTMLElement;
@@ -130,7 +131,7 @@ export class BlockPanel {
         moveResize(this.element, (type: string) => {
             if (type !== "move") {
                 this.editors.forEach(item => {
-                    setPadding(item.protyle);
+                    resize(item.protyle);
                 });
             }
             const pinElement = this.element.firstElementChild.querySelector('[data-type="pin"]');

app/src/boot/globalEvent/keydown.ts

@@ -245,7 +245,6 @@ const editKeydown = (app: App, event: KeyboardEvent) => {
     }
     if (matchHotKey(window.siyuan.config.keymap.editor.general.fullscreen.custom, event)) {
         fullscreen(protyle.element);
-        setPadding(protyle);
         event.preventDefault();
         return true;
     }

app/src/config/editor.ts

@@ -6,6 +6,7 @@ import {setPadding} from "../protyle/ui/initUI";
 import {reloadProtyle} from "../protyle/util/reload";
 import {updateHotkeyTip} from "../protyle/util/compatibility";
 import {Constants} from "../constants";
+import {resize} from "../protyle/util/resize";
 
 export const editor = {
     element: undefined as Element,
@@ -343,11 +344,14 @@ export const editor = {
         window.siyuan.config.editor = editorData;
         getAllModels().editor.forEach((item) => {
             reloadProtyle(item.editor.protyle, false);
-            setPadding(item.editor.protyle);
             let isFullWidth = item.editor.protyle.wysiwyg.element.getAttribute(Constants.CUSTOM_SY_FULLWIDTH);
             if (!isFullWidth) {
                 isFullWidth = window.siyuan.config.editor.fullWidth ? "true" : "false";
             }
+            if (isFullWidth === "true" && item.editor.protyle.contentElement.getAttribute("data-fullwidth") === "true") {
+                return;
+            }
+            resize(item.editor.protyle);
             if (isFullWidth === "true") {
                 item.editor.protyle.contentElement.setAttribute("data-fullwidth", "true");
             } else {

app/src/editor/index.ts

@@ -8,6 +8,7 @@ import {setModelsHash} from "../window/setHeader";
 /// #endif
 import {countBlockWord} from "../layout/status";
 import {App} from "../index";
+import {resize} from "../protyle/util/resize";
 
 export class Editor extends Model {
     public element: HTMLElement;
@@ -58,7 +59,7 @@ export class Editor extends Model {
                     getAllModels().editor.forEach(item => {
                         if (!editor.protyle.element.isSameNode(item.element) && item.element.classList.contains("fullscreen")) {
                             item.element.classList.remove("fullscreen");
-                            setPadding(item.editor.protyle);
+                            resize(item.editor.protyle);
                         }
                     });
                 }

app/src/editor/util.ts

@@ -328,12 +328,12 @@ const switchEditor = (editor: Editor, options: IOpenFileOptions, allModels: IMod
     allModels.editor.forEach((item) => {
         if (!item.element.isSameNode(editor.element) && window.siyuan.editorIsFullscreen && item.element.classList.contains("fullscreen")) {
             item.element.classList.remove("fullscreen");
-            setPadding(item.editor.protyle);
+            resize(item.editor.protyle);
         }
     });
     if (window.siyuan.editorIsFullscreen) {
         editor.element.classList.add("fullscreen");
-        setPadding(editor.editor.protyle);
+        resize(editor.editor.protyle);
     }
     if (options.keepCursor) {
         editor.parent.headElement.setAttribute("keep-cursor", options.id);

app/src/protyle/breadcrumb/action.ts

@@ -7,6 +7,7 @@ import {Constants} from "../../constants";
 import {hideAllElements, hideElements} from "../ui/hideElements";
 import {hasClosestByClassName} from "../util/hasClosest";
 import {reloadProtyle} from "../util/reload";
+import {resize} from "../util/resize";
 
 export const netImg2LocalAssets = (protyle: IProtyle) => {
     if (protyle.element.querySelector(".wysiwygLoading")) {
@@ -73,11 +74,11 @@ export const fullscreen = (element: Element, btnElement?: Element) => {
         if (window.siyuan.editorIsFullscreen) {
             if (!element.isSameNode(item.element) && item.element.classList.contains("fullscreen")) {
                 item.element.classList.remove("fullscreen");
-                setPadding(item.editor.protyle);
+                resize(item.editor.protyle);
             }
         } else if (item.element.classList.contains("fullscreen")) {
             item.element.classList.remove("fullscreen");
-            setPadding(item.editor.protyle);
+            resize(item.editor.protyle);
         }
     });
     /// #endif

app/src/protyle/breadcrumb/index.ts

@@ -405,7 +405,6 @@ export class Breadcrumb {
                 label: window.siyuan.languages.fullscreen,
                 click: () => {
                     fullscreen(protyle.element);
-                    setPadding(protyle);
                 }
             }).element);
             /// #endif

app/src/protyle/index.ts

@@ -301,7 +301,7 @@ export class Protyle {
             });
             /// #endif
         }
-        setPadding(this.protyle);
+        resize(this.protyle);
         // 需等待 getDoc 完成后再执行，否则在无页签的时候 updatePanelByEditor 会执行2次
         // 只能用 focusin，否则点击表格无法执行
         this.protyle.wysiwyg.element.addEventListener("focusin", () => {

app/src/protyle/ui/initUI.ts

@@ -118,26 +118,31 @@ export const removeLoading = (protyle: IProtyle) => {
 
 export const setPadding = (protyle: IProtyle) => {
     if (protyle.options.action.includes(Constants.CB_GET_HISTORY)) {
-        return;
+        return {
+            width: 0,
+            padding: 0
+        };
     }
-    let min16 = 16;
+    const oldLeft = parseInt(protyle.wysiwyg.element.style.paddingLeft)
-    let min24 = 24;
+    let left = 16;
+    let right = 24;
     if (!isMobile()) {
-        let padding = (protyle.element.clientWidth - Constants.SIZE_EDITOR_WIDTH) / 2;
         let isFullWidth = protyle.wysiwyg.element.getAttribute(Constants.CUSTOM_SY_FULLWIDTH);
         if (!isFullWidth) {
             isFullWidth = window.siyuan.config.editor.fullWidth ? "true" : "false";
         }
+        let padding = (protyle.element.clientWidth - Constants.SIZE_EDITOR_WIDTH) / 2;
         if (isFullWidth === "false" && padding > 96) {
             if (padding > Constants.SIZE_EDITOR_WIDTH) {
                 // 超宽屏调整 https://ld246.com/article/1668266637363
                 padding = protyle.element.clientWidth * .382 / 1.382;
             }
-            min16 = padding;
+            padding = Math.ceil(padding);
-            min24 = padding;
+            left = padding;
+            right = padding;
         } else if (protyle.element.clientWidth > Constants.SIZE_EDITOR_WIDTH) {
-            min16 = 96;
+            left = 96;
-            min24 = 96;
+            right = 96;
         }
     }
     let bottomHeight = "16px";
@@ -149,37 +154,28 @@ export const setPadding = (protyle: IProtyle) => {
         }
     }
     if (protyle.options.backlinkData) {
-        if ((min16 === min24 && protyle.wysiwyg.element.style.padding === `4px ${min16}px`) ||
+        protyle.wysiwyg.element.style.padding = `4px ${left}px 4px ${right}px`;
-            (min16 !== min24 && protyle.wysiwyg.element.style.padding === `4px ${min16}px 4px ${min24}px`)) {
-            return true;
-        }
-        protyle.wysiwyg.element.style.padding = `4px ${min16}px 4px ${min24}px`;
     } else {
-        // https://github.com/siyuan-note/siyuan/issues/8859
+        protyle.wysiwyg.element.style.padding = `16px ${left}px ${bottomHeight} ${right}px`;
-        if ((min16 === min24 && protyle.wysiwyg.element.style.padding === `16px ${min16}px ${bottomHeight}`) ||
-            (min16 !== min24 && protyle.wysiwyg.element.style.padding === `16px ${min16}px ${bottomHeight} ${min24}px`)) {
-            return true;
-        }
-        protyle.wysiwyg.element.style.padding = `16px ${min16}px ${bottomHeight} ${min24}px`;
     }
     if (protyle.options.render.background) {
-        protyle.background.element.lastElementChild.setAttribute("style", `left:${min16}px`);
+        protyle.background.element.lastElementChild.setAttribute("style", `left:${left}px`);
-        protyle.background.element.querySelector(".protyle-background__img .protyle-icons").setAttribute("style", `right:${min16}px`);
+        protyle.background.element.querySelector(".protyle-background__img .protyle-icons").setAttribute("style", `right:${left}px`);
     }
     if (protyle.options.render.title) {
-        protyle.title.element.style.margin = `16px ${min16}px 0 ${min24}px`;
+        protyle.title.element.style.margin = `16px ${left}px 0 ${right}px`;
-    }
-    if (window.siyuan.config.editor.codeSyntaxHighlightLineNum) {
-        setTimeout(() => { // https://github.com/siyuan-note/siyuan/issues/5612
-            protyle.wysiwyg.element.querySelectorAll('.code-block [contenteditable="true"]').forEach((block: HTMLElement) => {
-                lineNumberRender(block);
-            });
-        }, 300);
     }
     if (window.siyuan.config.editor.displayBookmarkIcon) {
         const editorAttrElement = document.getElementById("editorAttr");
         if (editorAttrElement) {
-            editorAttrElement.innerHTML = `.protyle-wysiwyg--attr .b3-tooltips:after { max-width: ${protyle.wysiwyg.element.clientWidth - min16 - min24}px; }`;
+            editorAttrElement.innerHTML = `.protyle-wysiwyg--attr .b3-tooltips:after { max-width: ${protyle.wysiwyg.element.clientWidth - left - right}px; }`;
         }
     }
+    const oldWidth = protyle.wysiwyg.element.getAttribute("data-realwidth");
+    const newWidth = protyle.wysiwyg.element.clientWidth - parseInt(protyle.wysiwyg.element.style.paddingLeft) - parseInt(protyle.wysiwyg.element.style.paddingRight)
+    protyle.wysiwyg.element.setAttribute("data-realwidth", newWidth.toString());
+    return {
+        width: Math.abs(parseInt(oldWidth) - newWidth),
+        padding: Math.abs(oldLeft - parseInt(protyle.wysiwyg.element.style.paddingLeft))
+    };
 };

app/src/protyle/util/resize.ts

@@ -2,14 +2,15 @@ import {hideElements} from "../ui/hideElements";
 import {setPadding} from "../ui/initUI";
 import {hasClosestBlock} from "./hasClosest";
 import {Constants} from "../../constants";
+import {lineNumberRender} from "../render/highlightRender";
 
 export const resize = (protyle: IProtyle) => {
     hideElements(["gutter"], protyle);
-    if (setPadding(protyle)) {
+    const abs = setPadding(protyle);
-        return;
+    const MIN_ABS = 4;
-    }
     // 不能 clearTimeout，否则 split 时左侧无法 resize
-    window.setTimeout(() => {
+    setTimeout(() => {
+        if (abs.width > MIN_ABS || isNaN(abs.width)) {
             if (typeof echarts !== "undefined") {
                 protyle.wysiwyg.element.querySelectorAll('[data-subtype="echarts"], [data-subtype="mindmap"]').forEach((chartItem: HTMLElement) => {
                     const chartInstance = echarts.getInstanceById(chartItem.firstElementChild.nextElementSibling.getAttribute("_echarts_instance_"));
@@ -18,19 +19,11 @@ export const resize = (protyle: IProtyle) => {
                     }
                 });
             }
-        protyle.wysiwyg.element.querySelectorAll(".av").forEach((item: HTMLElement) => {
+            if (window.siyuan.config.editor.codeSyntaxHighlightLineNum) {
-            item.style.width = item.parentElement.clientWidth + "px";
+                protyle.wysiwyg.element.querySelectorAll('.code-block [contenteditable="true"]').forEach((block: HTMLElement) => {
-            if (item.getAttribute("data-render") === "true") {
+                    lineNumberRender(block);
-                const paddingLeft = item.parentElement.style.paddingLeft;
-                const paddingRight = item.parentElement.style.paddingRight;
-                const avHeaderElement = item.firstElementChild.firstElementChild as HTMLElement;
-                avHeaderElement.style.paddingLeft = paddingLeft;
-                avHeaderElement.style.paddingRight = paddingRight;
-                const avBodyElement = item.querySelector(".av__scroll").firstElementChild as HTMLElement;
-                avBodyElement.style.paddingLeft = paddingLeft;
-                avBodyElement.style.paddingRight = paddingRight;
-            }
                 });
+            }
             // 保持光标位置不变 https://ld246.com/article/1673704873983/comment/1673765814595#comments
             if (!protyle.disabled && protyle.toolbar.range) {
                 let rangeRect = protyle.toolbar.range.getBoundingClientRect();
@@ -48,5 +41,21 @@ export const resize = (protyle: IProtyle) => {
                     protyle.toolbar.range.startContainer.parentElement.scrollIntoView(protyleRect.top > rangeRect.top);
                 }
             }
+        }
+        if (abs.padding > MIN_ABS || abs.width > MIN_ABS || isNaN(abs.padding)) {
+            protyle.wysiwyg.element.querySelectorAll(".av").forEach((item: HTMLElement) => {
+                item.style.width = item.parentElement.clientWidth + "px";
+                if (item.getAttribute("data-render") === "true") {
+                    const paddingLeft = item.parentElement.style.paddingLeft;
+                    const paddingRight = item.parentElement.style.paddingRight;
+                    const avHeaderElement = item.firstElementChild.firstElementChild as HTMLElement;
+                    avHeaderElement.style.paddingLeft = paddingLeft;
+                    avHeaderElement.style.paddingRight = paddingRight;
+                    const avBodyElement = item.querySelector(".av__scroll").firstElementChild as HTMLElement;
+                    avBodyElement.style.paddingLeft = paddingLeft;
+                    avBodyElement.style.paddingRight = paddingRight;
+                }
+            });
+        }
     }, Constants.TIMEOUT_TRANSITION);   // 等待 setPadding 动画结束
 };

app/src/protyle/util/setEditMode.ts

@@ -2,6 +2,7 @@ import {setPadding} from "../ui/initUI";
 import {hideElements} from "../ui/hideElements";
 import {getAllModels} from "../../layout/getAll";
 import {updateOutline} from "../../editor/util";
+import {resize} from "./resize";
 
 export const setEditMode = (protyle: IProtyle, type: TEditorMode) => {
     if (type === "preview") {
@@ -17,11 +18,9 @@ export const setEditMode = (protyle: IProtyle, type: TEditorMode) => {
         }
         protyle.preview.render(protyle);
     } else if (type === "wysiwyg") {
-        setPadding(protyle);
         if (!protyle.contentElement.classList.contains("fn__none")) {
             return;
         }
-
         protyle.preview.element.classList.add("fn__none");
         protyle.contentElement.classList.remove("fn__none");
         if (protyle.options.render.scroll) {
@@ -34,6 +33,7 @@ export const setEditMode = (protyle: IProtyle, type: TEditorMode) => {
         /// #if !MOBILE
         updateOutline(getAllModels(), protyle, true);
         /// #endif
+        resize(protyle);
     }
     hideElements(["gutter", "toolbar", "select", "hint", "util"], protyle);
 };

app/src/protyle/wysiwyg/index.ts

@@ -120,14 +120,14 @@ export class WYSIWYG {
         const ialKeys = Object.keys(ial);
         for (let i = 0; i < this.element.attributes.length; i++) {
             const oldKey = this.element.attributes[i].nodeName;
-            if (!["type", "class", "spellcheck", "contenteditable", "data-doc-type", "style", "scroll"].includes(oldKey) &&
+            if (!["type", "class", "spellcheck", "contenteditable", "data-doc-type", "style", "scroll", "data-realwidth"].includes(oldKey) &&
                 !ialKeys.includes(oldKey)) {
                 this.element.removeAttribute(oldKey);
                 i--;
             }
         }
         ialKeys.forEach((key: string) => {
-            if (!["title-img", "title", "updated", "icon", "id", "type", "class", "spellcheck", "contenteditable", "data-doc-type", "style"].includes(key)) {
+            if (!["title-img", "title", "updated", "icon", "id", "type", "class", "spellcheck", "contenteditable", "data-doc-type", "style", "data-realwidth"].includes(key)) {
                 this.element.setAttribute(key, ial[key]);
             }
         });

app/src/protyle/wysiwyg/transaction.ts

@@ -19,6 +19,7 @@ import {reloadProtyle} from "../util/reload";
 import {countBlockWord} from "../../layout/status";
 import {needLogin, needSubscribe} from "../../util/needSubscribe";
 import {setPadding} from "../ui/initUI";
+import {resize} from "../util/resize";
 
 const removeTopElement = (updateElement: Element, protyle: IProtyle) => {
     // 移动到其他文档中，该块需移除
@@ -505,7 +506,7 @@ export const onTransaction = (protyle: IProtyle, operation: IOperation, isUndo:
             }
             protyle.wysiwyg.renderCustom(attrsResult);
             if (data.new[Constants.CUSTOM_SY_FULLWIDTH] !== data.old[Constants.CUSTOM_SY_FULLWIDTH]) {
-                setPadding(protyle);
+                resize(protyle);
             }
             if (data.new[Constants.CUSTOM_SY_READONLY] !== data.old[Constants.CUSTOM_SY_READONLY]) {
                 let customReadOnly = data.new[Constants.CUSTOM_SY_READONLY];

app/src/search/util.ts

@@ -31,6 +31,7 @@ import {
     renderPreview,
     toggleAssetHistory
 } from "./assets";
+import {resize} from "../protyle/util/resize";
 
 const toggleReplaceHistory = (replaceHistoryElement: Element, historyElement: Element, replaceInputElement: HTMLInputElement) => {
     if (replaceHistoryElement.classList.contains("fn__none")) {
@@ -320,7 +321,7 @@ export const genSearch = (app: App, config: ISearchOption, element: Element, clo
             window.siyuan.storage[Constants.LOCAL_SEARCHKEYS][direction === "lr" ? (closeCB ? "col" : "colTab") : (closeCB ? "row" : "rowTab")] = nextElement[direction === "lr" ? "clientWidth" : "clientHeight"] + "px";
             setStorageVal(Constants.LOCAL_SEARCHKEYS, window.siyuan.storage[Constants.LOCAL_SEARCHKEYS]);
             if (direction === "lr") {
-                setPadding(edit.protyle);
+                resize(edit.protyle);
             }
         };
     });
@@ -589,7 +590,7 @@ export const genSearch = (app: App, config: ISearchOption, element: Element, clo
                                 } else {
                                     edit.protyle.element.classList.add("fn__flex-1");
                                 }
-                                setPadding(edit.protyle);
+                                resize(edit.protyle);
                                 if (isPopover) {
                                     localData.layout = 0;
                                 } else {
@@ -610,7 +611,7 @@ export const genSearch = (app: App, config: ISearchOption, element: Element, clo
                                 } else {
                                     edit.protyle.element.classList.add("fn__flex-1");
                                 }
-                                setPadding(edit.protyle);
+                                resize(edit.protyle);
                                 if (isPopover) {
                                     localData.layout = 1;
                                 } else {