💄 fix https://github.com/siyuan-note/siyuan/issues/5182

app/appearance/langs/en_US.json

@@ -1,4 +1,5 @@
 {
+  "adaptiveWidth": "Adaptive Width",
   "tabLimit": "Tab Limit",
   "tabLimit1": "Sort by opening time, close the earliest opened tab",
   "pasteEscaped": "Paste escaped text",

app/appearance/langs/es_ES.json

@@ -1,4 +1,5 @@
 {
+  "adaptiveWidth": "Ancho adaptable",
   "tabLimit": "Límite de la pestaña",
   "tabLimit1": "Ordenar por hora de apertura, cerrar la primera pestaña abierta",
   "pasteEscaped": "Pegar texto escapado",

app/appearance/langs/fr_FR.json

@@ -1,4 +1,5 @@
 {
+  "adaptiveWidth": "Largeur adaptative",
   "tabLimit": "Nombre maximum d'onglets ouverts",
   "tabLimit1": "Trier par heure d'ouverture, fermer le premier onglet ouvert",
   "pasteEscaped": "Coller le texte échappé",

app/appearance/langs/zh_CHT.json

@@ -1,4 +1,5 @@
 {
+  "adaptiveWidth": "自適應寬度",
   "tabLimit": "頁簽打開最大數量",
   "tabLimit1": "按照打開時間排序，關閉最早打開的頁簽",
   "pasteEscaped": "粘貼轉義文本",

app/appearance/langs/zh_CN.json

@@ -1,4 +1,5 @@
 {
+  "fullWidth": "自适应宽度",
   "tabLimit": "页签打开最大数量",
   "tabLimit1": "按照打开时间排序，关闭最早打开的页签",
   "pasteEscaped": "粘贴转义文本",

app/src/assets/scss/_protyle.scss

@@ -331,6 +331,7 @@
     display: flex;
     position: absolute;
     height: 80px;
+    transition: left .15s cubic-bezier(0, 0, .2, 1) 0ms;
 
     .protyle-icons {
       position: initial;
@@ -347,6 +348,7 @@
   margin: 34px 16px 0 24px;
   position: relative;
   font-size: 16px;
+  transition: margin .15s cubic-bezier(0, 0, .2, 1) 0ms;
 
   &:hover .protyle-title__icon {
     opacity: 1;

app/src/assets/scss/_wysiwyg.scss

@@ -1,6 +1,7 @@
 .protyle-wysiwyg {
   padding: 34px 16px 16px 24px;
   cursor: text;
+  transition: padding .15s cubic-bezier(0, 0, .2, 1) 0ms;
 
   &:focus {
     outline: none;

app/src/config/editor.ts

@@ -2,13 +2,20 @@ import {getAllModels} from "../layout/getAll";
 import {setInlineStyle} from "../util/assets";
 import {fetchPost} from "../util/fetch";
 import {confirmDialog} from "../dialog/confirmDialog";
+import {setPadding} from "../protyle/ui/initUI";
 
 export const editor = {
     element: undefined as Element,
     genHTML: () => {
         let fontFamilyHTML = "";
         fontFamilyHTML = '<select id="fontFamily" class="b3-select fn__flex-center fn__size200"></select>';
-        return `
+        return `<label class="fn__flex b3-label">
+    <div class="fn__flex-1">
+        ${window.siyuan.languages.fullWidth}
+    </div>
+    <span class="fn__space"></span>
+    <input class="b3-switch fn__flex-center" id="fullWidth" type="checkbox"${window.siyuan.config.editor.fullWidth ? " checked" : ""}/>
+</label>
 <label class="fn__flex b3-label">
     <div class="fn__flex-1">
         ${window.siyuan.languages.md12}
@@ -146,6 +153,7 @@ export const editor = {
 
         const setEditor = () => {
             fetchPost("/api/setting/setEditor", {
+                fullWidth: (editor.element.querySelector("#fullWidth") as HTMLInputElement).checked,
                 displayBookmarkIcon: (editor.element.querySelector("#displayBookmarkIcon") as HTMLInputElement).checked,
                 displayNetImgMark: (editor.element.querySelector("#displayNetImgMark") as HTMLInputElement).checked,
                 codeSyntaxHighlightLineNum: (editor.element.querySelector("#codeSyntaxHighlightLineNum") as HTMLInputElement).checked,
@@ -186,6 +194,7 @@ export const editor = {
         window.siyuan.config.editor = editor;
         getAllModels().editor.forEach((item) => {
             item.editor.reload();
+            setPadding(item.editor.protyle);
         });
         setInlineStyle();
     }

app/src/config/search.ts

@@ -11,7 +11,7 @@ const getLang = (keys: string[]) => {
 export const initConfigSearch = (element: HTMLElement) => {
     const configIndex = [
         // 编辑器
-        getLang(["config",
+        getLang(["config", "fullWidth",
             "editor", "md2", "md3", "md12", "md16", "md27", "md28", "md29", "md30", "md31", "md32", "md33", "md34", "md39",
             "fontSizeTip", "fontSize", "font", "font1", "generateHistory", "generateHistoryInterval",
             "historyRetentionDays", "historyRetentionDaysTip", "clearHistory"

app/src/constants.ts

@@ -36,6 +36,7 @@ export abstract class Constants {
     public static readonly SIZE_GET_MAX = 102400;
     public static readonly SIZE_UNDO = 64;
     public static readonly SIZE_TITLE = 512;
+    public static readonly SIZE_EDITOR_WIDTH = 760;
 
     // ws callback
     public static readonly CB_MOUNT_HELP = "cb-mount-help";

app/src/protyle/ui/initUI.ts

@@ -2,6 +2,7 @@ import {setEditMode} from "../util/setEditMode";
 import {lineNumberRender} from "../markdown/highlightRender";
 import {scrollEvent} from "../scroll/event";
 import {isMobile} from "../../util/functions";
+import {Constants} from "../../constants";
 
 export const initUI = (protyle: IProtyle) => {
     protyle.contentElement = document.createElement("div");
@@ -46,8 +47,18 @@ export const addLoading = (protyle: IProtyle) => {
 };
 
 export const setPadding = (protyle: IProtyle) => {
-    const min16 = protyle.element.clientWidth > 888 ? 96 : 16;
-    const min24 = protyle.element.clientWidth > 888 ? 96 : 24;
+    let min16 = 16;
+    let min24 = 24;
+    if (!isMobile()) {
+        const padding = (protyle.element.clientWidth - Constants.SIZE_EDITOR_WIDTH) / 2
+        if (!window.siyuan.config.editor.fullWidth && padding > 96) {
+            min16 = padding
+            min24 = padding
+        } else if (protyle.element.clientWidth > Constants.SIZE_EDITOR_WIDTH) {
+            min16 = 96
+            min24 = 96
+        }
+    }
     if (protyle.options.render.background && protyle.options.render.title) {
         protyle.background.element.lastElementChild.setAttribute("style", `left:${min16}px`);
         protyle.title.element.style.margin = `16px ${min16}px 0 ${min24}px`;

app/src/types/index.d.ts

@@ -177,6 +177,7 @@ declare interface IExport {
 }
 
 declare interface IEditor {
+    fullWidth: boolean;
     fontSize: number;
     generateHistoryInterval: number;
     historyRetentionDays: number;