feat: add default-previewer-max-width setting to control the maximum width of the previewer

src/renderer/components/DefaultPreviewerRender.ce.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="{'markdown-view': true, presentation}">
+  <div :class="{'markdown-view': true, presentation}" :style="{'--markdown-body-max-width': markdownBodyMaxWidth}">
     <article ref="refView" class="markdown-body" @dblclick.capture="handleDbClick" @click.capture="handleClick" @contextmenu.capture="handleContextMenu">
       <Render :content="renderContent" />
     </article>
@@ -9,12 +9,13 @@
 <script lang="ts" setup>
 import { debounce } from 'lodash-es'
 import { computed, defineComponent, h, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import { triggerHook } from '@fe/core/hook'
+import { triggerHook, registerHook, removeHook } from '@fe/core/hook'
 import { registerAction, removeAction } from '@fe/core/action'
 import { CtrlCmd } from '@fe/core/keybinding'
 import { toUri, isOutOfRepo } from '@fe/services/document'
 import * as renderer from '@fe/services/renderer'
 import { getContextMenuItems, getRenderIframe, scrollTopTo } from '@fe/services/view'
+import { getSetting } from '@fe/services/setting'
 import { useContextMenu } from '@fe/support/ui/context-menu'
 import { DOM_ATTR_NAME } from '@fe/support/args'
 import { getLogger, sleep } from '@fe/utils'
@@ -52,6 +53,8 @@ const fileUri = computed(() => toUri(currentFile.value))
 const refView = ref<HTMLElement | null>(null)
 const renderContent = ref()
 
+const markdownBodyMaxWidth = ref(getMarkdownBodyMaxWidth())
+
 let renderCount = 0
 let renderEnv: RenderEnv | null = null
 let updateRender = debounce(render, 25)
@@ -221,6 +224,23 @@ async function refresh () {
   triggerHook('VIEW_AFTER_REFRESH')
 }
 
+function getMarkdownBodyMaxWidth () {
+  const val = getSetting('view.default-previewer-max-width', 1024)
+  if (val < 10) {
+    return '1024px'
+  }
+
+  if (val <= 100) {
+    return `${val}%`
+  }
+
+  return `${val}px`
+}
+
+function updateMarkdownBodyMaxWidth () {
+  markdownBodyMaxWidth.value = getMarkdownBodyMaxWidth()
+}
+
 onMounted(() => {
   nextTick(renderDebounce)
   triggerHook('VIEW_MOUNTED')
@@ -239,6 +259,8 @@ onMounted(() => {
     forUser: true
   })
 
+  registerHook('SETTING_CHANGED', updateMarkdownBodyMaxWidth)
+
   window.addEventListener('keydown', keydownHandler, true)
 })
 
@@ -250,6 +272,7 @@ onBeforeUnmount(() => {
   removeAction('view.get-content-html')
   removeAction('view.get-view-dom')
   removeAction('view.get-render-env')
+  removeHook('SETTING_CHANGED', updateMarkdownBodyMaxWidth)
   window.removeEventListener('keydown', keydownHandler, true)
 })
 
@@ -423,7 +446,7 @@ body.find-in-preview-highlight ::selection {
 
 @media screen {
   .markdown-view  .markdown-body {
-    max-width: 1024px;
+    max-width: var(--markdown-body-max-width, 1024px);
     margin: 0 auto;
     color: var(--g-color-0);
     margin-top: 1em;

src/renderer/others/setting-schema.ts

@@ -70,6 +70,17 @@ const schema: SettingSchema = ({
       group: 'appearance',
       required: true,
     },
+    'view.default-previewer-max-width': {
+      defaultValue: 1024,
+      title: 'T_setting-panel.schema.view.default-previewer-max-width',
+      type: 'number',
+      format: 'number',
+      group: 'appearance',
+      required: true,
+      description: 'T_setting-panel.schema.view.default-previewer-max-width-desc',
+      minimum: 10,
+      maximum: Number.MAX_SAFE_INTEGER,
+    },
     'updater.source': {
       defaultValue: 'auto',
       title: 'T_setting-panel.schema.updater.source',
@@ -366,7 +377,7 @@ const schema: SettingSchema = ({
       defaultValue: 3044,
       title: 'T_setting-panel.schema.server.port',
       description: 'T_setting-panel.schema.server.port-desc',
-      type: 'number',
+      type: 'integer',
       format: 'number',
       group: 'other',
       required: true,

src/renderer/types.ts

@@ -351,6 +351,7 @@ export interface BuildInSettings {
   'render.multimd-rowspan': boolean,
   'render.multimd-headerless': boolean,
   'render.multimd-multibody': boolean,
+  'view.default-previewer-max-width': number,
   'assets.path-type': 'relative' | 'absolute' | 'auto',
   'plugin.image-hosting-picgo.server-url': string,
   'plugin.image-hosting-picgo.enable-paste-image': boolean,

src/share/i18n/languages/en.ts

@@ -410,6 +410,10 @@ const data = {
         'multimd-headerless': '[markdown-it-multimd-table]: Enable headerless syntax',
         'multimd-multibody': '[markdown-it-multimd-table]: Enable multibody syntax',
       },
+      'view': {
+        'default-previewer-max-width': 'Previewer Max Width',
+        'default-previewer-max-width-desc': '≤ 100 means percentage, > 100 means pixels',
+      },
       'theme': 'Theme',
       'language': 'Language',
       'custom-css': 'Custom CSS',

src/share/i18n/languages/zh-CN.ts

@@ -401,6 +401,10 @@ const data: BaseLanguage = {
         'multimd-headerless': '[markdown-it-multimd-table]: 启用 headerless 语法',
         'multimd-multibody': '[markdown-it-multimd-table]: 启用 multibody 语法',
       },
+      'view': {
+        'default-previewer-max-width': '预览区最大宽度',
+        'default-previewer-max-width-desc': '≤ 100 为百分比，> 100 为像素',
+      },
       'theme': '主题',
       'language': '语言',
       'custom-css': '自定义 CSS',

src/share/i18n/languages/zh-TW.ts

@@ -401,6 +401,10 @@ const data: BaseLanguage = {
         'multimd-headerless': '[markdown-it-multimd-table]: 啟用 headerless 語法',
         'multimd-multibody': '[markdown-it-multimd-table]: 啟用 multibody 語法',
       },
+      'view': {
+        'default-previewer-max-width': '預覽區最大寬度',
+        'default-previewer-max-width-desc': '≤ 100 為百分比，> 100 為像素',
+      },
       'theme': '主題',
       'language': '語言',
       'custom-css': '自訂 CSS',