From 8a4ba4bee12e35111b896e201f87af6eab1df71c Mon Sep 17 00:00:00 2001
From: Jinjing <6427696+AmethystLiang@users.noreply.github.com>
Date: Mon, 18 May 2026 21:08:02 -0700
Subject: [PATCH] fix: support rich markdown diff review (#2302)

---
 .../src/components/editor/EditorPanel.tsx     | 39 ++++++++++---------
 .../components/editor/EditorPanelHeader.tsx   |  4 +-
 .../components/editor/EditorPanelShell.tsx    |  2 +-
 .../editor/markdown-preview-controls.test.ts  |  4 +-
 .../editor/markdown-preview-controls.ts       |  8 ++--
 5 files changed, 29 insertions(+), 28 deletions(-)

diff --git a/src/renderer/src/components/editor/EditorPanel.tsx b/src/renderer/src/components/editor/EditorPanel.tsx
index 053d0614c..237e5c76c 100644
--- a/src/renderer/src/components/editor/EditorPanel.tsx
+++ b/src/renderer/src/components/editor/EditorPanel.tsx
@@ -174,24 +174,6 @@ function EditorPanelInner({
   )
   useEditorCmdSaveRequest({ activeFile, openFiles, fileContents, handleSave })
 
-  const handleEditorToggleChange = useCallback(
-    (next: EditorToggleValue): void => {
-      const fileId = activeFile?.id
-      if (!fileId) {
-        return
-      }
-      if (next === 'changes') {
-        setEditorViewMode(fileId, 'changes')
-        return
-      }
-      setEditorViewMode(fileId, 'edit')
-      if (next !== 'edit') {
-        setMarkdownViewMode(fileId, next)
-      }
-    },
-    [activeFile?.id, setEditorViewMode, setMarkdownViewMode]
-  )
-
   const handleCopyPath = useCallback(async (): Promise<void> => {
     if (!activeFile) {
       return
@@ -234,7 +216,7 @@ function EditorPanelInner({
       sourceGroupId
     })
   }
-  const handleOpenDiffTargetFile = (): void => {
+  const handleOpenDiffTargetFile = (preferredMarkdownViewMode?: 'rich'): void => {
     if (!model.openFileState.canOpen) {
       return
     }
@@ -246,6 +228,25 @@ function EditorPanelInner({
       language: detectLanguage(activeFile.relativePath),
       mode: 'edit'
     })
+    if (preferredMarkdownViewMode) {
+      setEditorViewMode(activeFile.filePath, 'edit')
+      setMarkdownViewMode(activeFile.filePath, preferredMarkdownViewMode)
+    }
+  }
+  const handleEditorToggleChange = (next: EditorToggleValue): void => {
+    const fileId = activeFile.id
+    if (activeFile.mode === 'diff' && model.isMarkdown && next === 'rich') {
+      handleOpenDiffTargetFile('rich')
+      return
+    }
+    if (next === 'changes') {
+      setEditorViewMode(fileId, 'changes')
+      return
+    }
+    setEditorViewMode(fileId, 'edit')
+    if (next !== 'edit') {
+      setMarkdownViewMode(fileId, next)
+    }
   }
   const handleOpenMarkdownPreview = (): void => {
     openMarkdownPreview({
diff --git a/src/renderer/src/components/editor/EditorPanelHeader.tsx b/src/renderer/src/components/editor/EditorPanelHeader.tsx
index e9e63339b..3034e2378 100644
--- a/src/renderer/src/components/editor/EditorPanelHeader.tsx
+++ b/src/renderer/src/components/editor/EditorPanelHeader.tsx
@@ -61,7 +61,7 @@ type EditorPanelHeaderProps = {
   sideBySide: boolean
   openFileState: EditorHeaderOpenFileState
   onCopyPath: () => void
-  onOpenDiffTargetFile: () => void
+  onOpenDiffTargetFile: (preferredMarkdownViewMode?: 'rich') => void
   onOpenPreviewToSide: () => void
   onOpenMarkdownPreview: () => void
   onOpenContainingFolder: () => void
@@ -187,7 +187,7 @@ export function EditorPanelHeader({
               <button
                 type="button"
                 className="p-1 rounded hover:bg-accent text-muted-foreground hover:text-foreground transition-colors flex-shrink-0 disabled:opacity-50 disabled:hover:bg-transparent disabled:hover:text-muted-foreground"
-                onClick={onOpenDiffTargetFile}
+                onClick={() => onOpenDiffTargetFile(isMarkdown ? 'rich' : undefined)}
                 aria-label="Open file"
                 disabled={!openFileState.canOpen}
               >
diff --git a/src/renderer/src/components/editor/EditorPanelShell.tsx b/src/renderer/src/components/editor/EditorPanelShell.tsx
index 19c73ebb5..3bacfff0d 100644
--- a/src/renderer/src/components/editor/EditorPanelShell.tsx
+++ b/src/renderer/src/components/editor/EditorPanelShell.tsx
@@ -29,7 +29,7 @@ type EditorPanelShellProps = {
   renameError: string | null
   disableRenameBrowse: boolean
   onCopyPath: () => void
-  onOpenDiffTargetFile: () => void
+  onOpenDiffTargetFile: (preferredMarkdownViewMode?: 'rich') => void
   onOpenPreviewToSide: () => void
   onOpenMarkdownPreview: () => void
   onOpenContainingFolder: () => void
diff --git a/src/renderer/src/components/editor/markdown-preview-controls.test.ts b/src/renderer/src/components/editor/markdown-preview-controls.test.ts
index 8b62ef83f..1102a15d6 100644
--- a/src/renderer/src/components/editor/markdown-preview-controls.test.ts
+++ b/src/renderer/src/components/editor/markdown-preview-controls.test.ts
@@ -18,14 +18,14 @@ describe('getMarkdownViewModes', () => {
     ).toEqual(['source', 'rich'])
   })
 
-  it('offers source and preview for single-file markdown diffs', () => {
+  it('offers source and rich for single-file markdown diffs', () => {
     expect(
       getMarkdownViewModes({
         language: 'markdown',
         mode: 'diff',
         diffSource: 'unstaged'
       })
-    ).toEqual(['source', 'preview'])
+    ).toEqual(['source', 'rich'])
   })
 
   it('does not offer preview for mermaid edit tabs', () => {
diff --git a/src/renderer/src/components/editor/markdown-preview-controls.ts b/src/renderer/src/components/editor/markdown-preview-controls.ts
index 2d8232099..2f017759d 100644
--- a/src/renderer/src/components/editor/markdown-preview-controls.ts
+++ b/src/renderer/src/components/editor/markdown-preview-controls.ts
@@ -6,10 +6,7 @@ type MarkdownPreviewTarget = Pick<OpenFile, 'mode' | 'diffSource'> & {
 }
 
 const MARKDOWN_EDIT_VIEW_MODES = ['source', 'rich'] as const satisfies readonly MarkdownViewMode[]
-const MARKDOWN_DIFF_VIEW_MODES = [
-  'source',
-  'preview'
-] as const satisfies readonly MarkdownViewMode[]
+const MARKDOWN_DIFF_VIEW_MODES = ['source', 'rich'] as const satisfies readonly MarkdownViewMode[]
 const MERMAID_VIEW_MODES = ['source', 'rich'] as const satisfies readonly MarkdownViewMode[]
 const CSV_VIEW_MODES = ['source', 'rich'] as const satisfies readonly MarkdownViewMode[]
 const NOTEBOOK_VIEW_MODES = ['source', 'rich'] as const satisfies readonly MarkdownViewMode[]
@@ -70,6 +67,9 @@ export function getMarkdownViewModes(target: MarkdownPreviewTarget): readonly Ma
 }
 
 export function getDefaultMarkdownViewMode(target: MarkdownPreviewTarget): MarkdownViewMode {
+  if (target.language === 'markdown' && target.mode === 'diff') {
+    return 'source'
+  }
   const modes = getMarkdownViewModes(target)
   return modes.includes('rich') ? 'rich' : 'source'
 }