From 1bcee47ec648c9f562be6502e3a05becc62ae855 Mon Sep 17 00:00:00 2001
From: apple <245524539+apples-kksk@users.noreply.github.com>
Date: Sun, 10 May 2026 14:59:51 +0800
Subject: [PATCH 1/2] Add markdown formatter toolbar action

---
 src/cloud/components/Editor/EditorToolbar.tsx | 49 +++++++++++++++++++
 src/cloud/lib/editor/formatMarkdown.ts        | 39 +++++++++++++++
 src/cloud/lib/i18n/enUS.ts                    |  1 +
 src/cloud/lib/i18n/fr.ts                      |  1 +
 src/cloud/lib/i18n/ja.ts                      |  1 +
 src/cloud/lib/i18n/types.ts                   |  1 +
 src/cloud/lib/i18n/zhCN.ts                    |  1 +
 typings/prettier.d.ts                         | 12 +++++
 8 files changed, 105 insertions(+)
 create mode 100644 src/cloud/lib/editor/formatMarkdown.ts
 create mode 100644 typings/prettier.d.ts

diff --git a/src/cloud/components/Editor/EditorToolbar.tsx b/src/cloud/components/Editor/EditorToolbar.tsx
index d6c7d5d1c9..e3936a8f6b 100644
--- a/src/cloud/components/Editor/EditorToolbar.tsx
+++ b/src/cloud/components/Editor/EditorToolbar.tsx
@@ -13,6 +13,7 @@ import {
   mdiPageNextOutline,
   mdiMathIntegralBox,
   mdiCodeBrackets,
+  mdiFormatTextWrappingWrap,
 } from '@mdi/js'
 import { Position } from 'codemirror'
 import EditorToolButton from './EditorToolButton'
@@ -26,6 +27,7 @@ import {
 } from '../../lib/utils/events'
 import { useI18n } from '../../lib/hooks/useI18n'
 import { lngKeys } from '../../lib/i18n/types'
+import { formatMarkdown } from '../../lib/editor/formatMarkdown'
 
 interface EditorToolbarProps {
   editorRef?: React.MutableRefObject<CodeMirror.Editor | null>
@@ -205,6 +207,47 @@ const EditorToolbar = ({ editorRef }: EditorToolbarProps) => {
     }
   }, [applyItalicStyle])
 
+  const formatEditorContent = useCallback(() => {
+    if (editorRef == null || editorRef.current == null) {
+      return
+    }
+
+    const editor = editorRef.current
+    const hasSelection = editor.somethingSelected()
+    const from = hasSelection ? editor.getCursor('from') : { line: 0, ch: 0 }
+    const lastLine = editor.lineCount() - 1
+    const to = hasSelection
+      ? editor.getCursor('to')
+      : { line: lastLine, ch: (editor.getLine(lastLine) || '').length }
+    const source = editor.getRange(from, to, '\n')
+
+    if (source.trim() === '') {
+      return
+    }
+
+    const fromOffset = editor.indexFromPos(from)
+    const cursorOffset = Math.max(
+      0,
+      editor.indexFromPos(editor.getCursor()) - fromOffset
+    )
+
+    try {
+      const result = formatMarkdown(source, cursorOffset)
+
+      if (result.formatted === source) {
+        return
+      }
+
+      editor.operation(() => {
+        editor.replaceRange(result.formatted, from, to, source)
+        editor.setCursor(editor.posFromIndex(fromOffset + result.cursorOffset))
+      })
+      editor.focus()
+    } catch (error) {
+      console.warn('Unable to format markdown content', error)
+    }
+  }, [editorRef])
+
   return (
     <StyledEditorToolList>
       <EditorHeaderToolDropdown
@@ -243,6 +286,12 @@ const EditorToolbar = ({ editorRef }: EditorToolbarProps) => {
         style={{ marginRight: 20 }}
         onClick={() => onFormatCallback('taskList')}
       />
+      <EditorToolButton
+        path={mdiFormatTextWrappingWrap}
+        tooltip={translate(lngKeys.EditorToolbarTooltipFormat)}
+        style={{ marginRight: 20 }}
+        onClick={formatEditorContent}
+      />
       <EditorToolButton
         path={mdiFormatBold}
         tooltip={translate(lngKeys.EditorToolbarTooltipBold)}
diff --git a/src/cloud/lib/editor/formatMarkdown.ts b/src/cloud/lib/editor/formatMarkdown.ts
new file mode 100644
index 0000000000..68b1af3f6b
--- /dev/null
+++ b/src/cloud/lib/editor/formatMarkdown.ts
@@ -0,0 +1,39 @@
+import prettier from 'prettier/standalone'
+import parserMarkdown from 'prettier/parser-markdown'
+
+export type MarkdownFormatResult = {
+  formatted: string
+  cursorOffset: number
+}
+
+export function formatMarkdown(
+  source: string,
+  cursorOffset: number
+): MarkdownFormatResult {
+  const result = prettier.formatWithCursor(source, {
+    parser: 'markdown',
+    plugins: [parserMarkdown],
+    proseWrap: 'always',
+    printWidth: 80,
+    cursorOffset,
+  })
+
+  return keepOriginalFinalNewline(source, result.formatted, result.cursorOffset)
+}
+
+function keepOriginalFinalNewline(
+  source: string,
+  formatted: string,
+  cursorOffset: number
+): MarkdownFormatResult {
+  if (/\r?\n$/.test(source) || !/\r?\n$/.test(formatted)) {
+    return { formatted, cursorOffset }
+  }
+
+  const stripped = formatted.replace(/\r?\n$/, '')
+
+  return {
+    formatted: stripped,
+    cursorOffset: Math.min(cursorOffset, stripped.length),
+  }
+}
diff --git a/src/cloud/lib/i18n/enUS.ts b/src/cloud/lib/i18n/enUS.ts
index 3555a126ec..10f4f3adbd 100644
--- a/src/cloud/lib/i18n/enUS.ts
+++ b/src/cloud/lib/i18n/enUS.ts
@@ -331,6 +331,7 @@ const enTranslation: TranslationSource = {
   [lngKeys.EditorToolbarTooltipList]: 'Add a bulleted list',
   [lngKeys.EditorToolbarTooltipNumberedList]: 'Add a numbered list',
   [lngKeys.EditorToolbarTooltipTaskList]: 'Add a task list',
+  [lngKeys.EditorToolbarTooltipFormat]: 'Format document',
   [lngKeys.EditorToolbarTooltipBold]: 'Add bold text',
   [lngKeys.EditorToolbarTooltipItalic]: 'Add italic text',
   [lngKeys.EditorToolbarTooltipCode]: 'Insert code',
diff --git a/src/cloud/lib/i18n/fr.ts b/src/cloud/lib/i18n/fr.ts
index fabf363f58..ace912c31b 100644
--- a/src/cloud/lib/i18n/fr.ts
+++ b/src/cloud/lib/i18n/fr.ts
@@ -330,6 +330,7 @@ const frTranslation: TranslationSource = {
   [lngKeys.EditorToolbarTooltipList]: 'Insérér une liste à puces',
   [lngKeys.EditorToolbarTooltipNumberedList]: 'Insérér une liste numérique',
   [lngKeys.EditorToolbarTooltipTaskList]: 'Insérer une liste de tâches',
+  [lngKeys.EditorToolbarTooltipFormat]: 'Formater le document',
   [lngKeys.EditorToolbarTooltipBold]: 'Ajouter un texte en gras',
   [lngKeys.EditorToolbarTooltipItalic]: 'Ajouter un texte en italique',
   [lngKeys.EditorToolbarTooltipCode]: 'Insérer du code',
diff --git a/src/cloud/lib/i18n/ja.ts b/src/cloud/lib/i18n/ja.ts
index ec0187cef9..8142243a90 100644
--- a/src/cloud/lib/i18n/ja.ts
+++ b/src/cloud/lib/i18n/ja.ts
@@ -312,6 +312,7 @@ const jpTranslation: TranslationSource = {
   [lngKeys.EditorToolbarTooltipList]: '箇条書き',
   [lngKeys.EditorToolbarTooltipNumberedList]: '番号リスト',
   [lngKeys.EditorToolbarTooltipTaskList]: 'タスクリスト',
+  [lngKeys.EditorToolbarTooltipFormat]: '文書を整形',
   [lngKeys.EditorToolbarTooltipBold]: '太文字',
   [lngKeys.EditorToolbarTooltipItalic]: 'イタリック',
   [lngKeys.EditorToolbarTooltipCode]: 'コード',
diff --git a/src/cloud/lib/i18n/types.ts b/src/cloud/lib/i18n/types.ts
index 5d52ebd00c..aa6450aeec 100644
--- a/src/cloud/lib/i18n/types.ts
+++ b/src/cloud/lib/i18n/types.ts
@@ -366,6 +366,7 @@ export enum lngKeys {
   EditorToolbarTooltipList = 'editor.toolbar.tooltips.list',
   EditorToolbarTooltipNumberedList = 'editor.toolbar.tooltips.numberedlist',
   EditorToolbarTooltipTaskList = 'editor.toolbar.tooltips.tasklist',
+  EditorToolbarTooltipFormat = 'editor.toolbar.tooltips.format',
   EditorToolbarTooltipBold = 'editor.toolbar.tooltips.bold',
   EditorToolbarTooltipItalic = 'editor.toolbar.tooltips.italic',
   EditorToolbarTooltipCode = 'editor.toolbar.tooltips.code',
diff --git a/src/cloud/lib/i18n/zhCN.ts b/src/cloud/lib/i18n/zhCN.ts
index 7405ab8e72..d88952861c 100644
--- a/src/cloud/lib/i18n/zhCN.ts
+++ b/src/cloud/lib/i18n/zhCN.ts
@@ -292,6 +292,7 @@ const zhTranslation: TranslationSource = {
   [lngKeys.EditorToolbarTooltipList]: '添加项目符号列表',
   [lngKeys.EditorToolbarTooltipNumberedList]: '添加编号列表',
   [lngKeys.EditorToolbarTooltipTaskList]: '添加任务列表',
+  [lngKeys.EditorToolbarTooltipFormat]: '格式化文档',
   [lngKeys.EditorToolbarTooltipBold]: '添加粗体文本',
   [lngKeys.EditorToolbarTooltipItalic]: '添加斜体文本',
   [lngKeys.EditorToolbarTooltipCode]: '插入代码',
diff --git a/typings/prettier.d.ts b/typings/prettier.d.ts
new file mode 100644
index 0000000000..bf4dc0c1dc
--- /dev/null
+++ b/typings/prettier.d.ts
@@ -0,0 +1,12 @@
+declare module 'prettier/standalone' {
+  import prettier from 'prettier'
+
+  export default prettier
+}
+
+declare module 'prettier/parser-markdown' {
+  import { Plugin } from 'prettier'
+
+  const parserMarkdown: Plugin
+  export default parserMarkdown
+}

From 8fca5fae63f6759e1a1d1d6d8c368b2902b14ca4 Mon Sep 17 00:00:00 2001
From: apple <245524539+apples-kksk@users.noreply.github.com>
Date: Sun, 10 May 2026 15:00:17 +0800
Subject: [PATCH 2/2] Add markdown content formatter

---
 src/cloud/components/Editor/EditorToolbar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/cloud/components/Editor/EditorToolbar.tsx b/src/cloud/components/Editor/EditorToolbar.tsx
index e3936a8f6b..089bd88c6c 100644
--- a/src/cloud/components/Editor/EditorToolbar.tsx
+++ b/src/cloud/components/Editor/EditorToolbar.tsx
@@ -239,7 +239,7 @@ const EditorToolbar = ({ editorRef }: EditorToolbarProps) => {
       }
 
       editor.operation(() => {
-        editor.replaceRange(result.formatted, from, to, source)
+        editor.replaceRange(result.formatted, from, to, '+format')
         editor.setCursor(editor.posFromIndex(fromOffset + result.cursorOffset))
       })
       editor.focus()