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

app/src/protyle/preview/index.ts

@@ -18,6 +18,7 @@ import {processRender} from "../util/processCode";
 import {highlightRender} from "../render/highlightRender";
 import {speechRender} from "../render/speechRender";
 import {avRender} from "../render/av/render";
+import {getPadding} from "../ui/initUI";
 
 export class Preview {
     public element: HTMLElement;
@@ -33,10 +34,6 @@ export class Preview {
         if (protyle.options.classes.preview) {
             previewElement.classList.add(protyle.options.classes.preview);
         }
-        if (protyle.wysiwyg.element.style.padding) {
-            previewElement.style.padding = protyle.wysiwyg.element.style.padding;
-        }
-
         const actions = protyle.options.preview.actions;
         const actionElement = document.createElement("div");
         actionElement.className = "protyle-preview__action";
@@ -49,7 +46,7 @@ export class Preview {
             }
             switch (action) {
                 case "desktop":
-                    actionHtml.push(`<button type="button"${protyle.wysiwyg.element.style.padding ? ' class="protyle-preview__action--current"' : ""} data-type="desktop">Desktop</button>`);
+                    actionHtml.push('<button type="button" class="protyle-preview__action--current" data-type="desktop">Desktop</button>');
                     break;
                 case "tablet":
                     actionHtml.push('<button type="button" data-type="tablet">Tablet</button>');
@@ -153,6 +150,11 @@ export class Preview {
         if (this.element.style.display === "none") {
             return;
         }
+        if (this.element.querySelector('.protyle-preview__action [data-type="desktop"]')?.classList.contains("protyle-preview__action--current")) {
+            const padding = getPadding(protyle);
+            this.previewElement.style.padding = `${padding.top}px ${padding.left}px ${padding.bottom}px ${padding.right}px`;
+        }
+
         let loadingElement = this.element.querySelector(".fn__loading");
         if (!loadingElement) {
             this.element.insertAdjacentHTML("beforeend", `<div style="flex-direction: column;" class="fn__loading">

app/src/protyle/ui/initUI.ts

@@ -10,7 +10,7 @@ import {lineNumberRender} from "../render/highlightRender";
 export const initUI = (protyle: IProtyle) => {
     protyle.contentElement = document.createElement("div");
     protyle.contentElement.className = "protyle-content";
-    protyle.contentElement.innerHTML = "<div class=\"protyle-top\"></div>";
+    protyle.contentElement.innerHTML = '<div class="protyle-top"></div>';
     if (protyle.options.render.background) {
         protyle.contentElement.firstElementChild.appendChild(protyle.background.element);
     }
@@ -108,39 +108,13 @@ export const setPadding = (protyle: IProtyle) => {
         };
     }
     const oldLeft = parseInt(protyle.wysiwyg.element.style.paddingLeft);
-    let left = 16;
+    const padding = getPadding(protyle);
-    let right = 24;
+    const left = padding.left;
-    if (!isMobile()) {
+    const right = padding.right;
-        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;
-            }
-            padding = Math.ceil(padding);
-            left = padding;
-            right = padding;
-        } else if (protyle.element.clientWidth > Constants.SIZE_EDITOR_WIDTH) {
-            left = 96;
-            right = 96;
-        }
-    }
-    let bottomHeight = "16px";
-    if (protyle.options.typewriterMode) {
-        if (isMobile()) {
-            bottomHeight = window.innerHeight / 5 + "px";
-        } else {
-            bottomHeight = protyle.element.clientHeight / 2 + "px";
-        }
-    }
     if (protyle.options.backlinkData) {
         protyle.wysiwyg.element.style.padding = `4px ${left}px 4px ${right}px`;
     } else {
-        protyle.wysiwyg.element.style.padding = `16px ${left}px ${bottomHeight} ${right}px`;
+        protyle.wysiwyg.element.style.padding = `${padding.top}px ${left}px ${padding.bottom}px ${right}px`;
     }
     if (protyle.options.render.background) {
         protyle.background.element.querySelector(".protyle-background__ia").setAttribute("style", `margin-left:${left}px;margin-right:${left}px`);
@@ -162,3 +136,38 @@ export const setPadding = (protyle: IProtyle) => {
         padding: Math.abs(oldLeft - parseInt(protyle.wysiwyg.element.style.paddingLeft))
     };
 };
+
+export const getPadding = (protyle: IProtyle) => {
+    let left = 16;
+    let right = 24;
+    let bottom = 16;
+    if (protyle.options.typewriterMode) {
+        if (isMobile()) {
+            bottom = window.innerHeight / 5;
+        } else {
+            bottom = protyle.element.clientHeight / 2;
+        }
+    }
+    if (!isMobile()) {
+        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;
+            }
+            padding = Math.ceil(padding);
+            left = padding;
+            right = padding;
+        } else if (protyle.element.clientWidth > Constants.SIZE_EDITOR_WIDTH) {
+            left = 96;
+            right = 96;
+        }
+    }
+    return {
+        left, right, bottom, top: 16
+    }
+}