From d4b75b268aa8bf733a994941e2c3b98cbcaa94a2 Mon Sep 17 00:00:00 2001 From: Greg Haynes Date: Sun, 12 Jul 2026 15:46:03 -0700 Subject: [PATCH] feat(files): expose markdown preview toggle (#2152) * fix(files): expose markdown preview toggle * fix(files): sync markdown preview icon state --- .../ui/src/components/views/FilesView.tsx | 132 ++++++++++++------ packages/ui/src/lib/i18n/messages/en.ts | 2 + packages/ui/src/lib/i18n/messages/es.ts | 2 + packages/ui/src/lib/i18n/messages/fr.ts | 2 + packages/ui/src/lib/i18n/messages/ja.ts | 2 + packages/ui/src/lib/i18n/messages/ko.ts | 2 + packages/ui/src/lib/i18n/messages/pl.ts | 2 + packages/ui/src/lib/i18n/messages/pt-BR.ts | 2 + packages/ui/src/lib/i18n/messages/uk.ts | 2 + packages/ui/src/lib/i18n/messages/zh-CN.ts | 2 + packages/ui/src/lib/i18n/messages/zh-TW.ts | 2 + 11 files changed, 110 insertions(+), 42 deletions(-) diff --git a/packages/ui/src/components/views/FilesView.tsx b/packages/ui/src/components/views/FilesView.tsx index 1b1d0498..8097bc12 100644 --- a/packages/ui/src/components/views/FilesView.tsx +++ b/packages/ui/src/components/views/FilesView.tsx @@ -3302,18 +3302,35 @@ export const FilesView: React.FC = ({ mode = 'full' }) => { /> )} - {(isMarkdown || isHtmlFile(selectedFile?.path ?? '')) && ( - { - if (isHtmlFile(selectedFile?.path ?? '')) { - saveHtmlViewMode(getHtmlViewMode() === 'preview' ? 'edit' : 'preview'); - } else { - saveMdViewMode(getMdViewMode() === 'preview' ? 'edit' : 'preview'); - } - }} - /> - )} + {isMarkdown && ( + withTooltip( + t(getMdViewMode() === 'preview' ? 'filesView.editor.switchToEditMode' : 'filesView.editor.switchToPreviewMode'), + + ) + )} + + {isHtmlFile(selectedFile?.path ?? '') && ( + { + saveHtmlViewMode(getHtmlViewMode() === 'preview' ? 'edit' : 'preview'); + }} + /> + )} {isMarkdown && getMdViewMode() === 'preview' && showMessageTTSButtons && ( @@ -3713,38 +3730,69 @@ export const FilesView: React.FC = ({ mode = 'full' }) => {
{selectedFile && !isSearchOpen && !(settingsExpandedEditorToolbar && !isMobile) && ( -
setIsFloatingToolbarOpen(true)} - onMouseLeave={() => { - if (toolbarDropdownOpenCountRef.current > 0) return; - setIsFloatingToolbarOpen(false); +
{ + if (isMarkdown) return; + setIsFloatingToolbarOpen(true); + }} + onMouseLeave={() => { + if (toolbarDropdownOpenCountRef.current > 0) return; + setIsFloatingToolbarOpen(false); }} > - {isFloatingToolbarOpen ? ( - renderFloatingFileControls() - ) : ( - - - - - - - {t('filesView.editor.controlsTitle')} - - )} -
- )} + {isFloatingToolbarOpen ? ( + renderFloatingFileControls() + ) : ( +
+ {isMarkdown ? ( + + + + + + + + {t(getMdViewMode() === 'preview' ? 'filesView.editor.switchToEditMode' : 'filesView.editor.switchToPreviewMode')} + + + ) : null} + + + + + + + {t('filesView.editor.controlsTitle')} + +
+ )} +
+ )} {!selectedFile ? (
{t('filesView.editor.pickFileFromTree')}
diff --git a/packages/ui/src/lib/i18n/messages/en.ts b/packages/ui/src/lib/i18n/messages/en.ts index 1b251f85..82bb614a 100644 --- a/packages/ui/src/lib/i18n/messages/en.ts +++ b/packages/ui/src/lib/i18n/messages/en.ts @@ -1166,6 +1166,8 @@ export const dict = { 'filesView.editor.enableLineWrap': 'Enable line wrap', 'filesView.editor.findInFile': 'Find in file', 'filesView.editor.goToLine': 'Go to line', + 'filesView.editor.switchToEditMode': 'Switch to edit mode', + 'filesView.editor.switchToPreviewMode': 'Switch to preview mode', 'filesView.editor.switchToTextView': 'Switch to Text View', 'filesView.editor.switchToTreeView': 'Switch to Tree View', 'filesView.toast.copyFailed': 'Copy failed', diff --git a/packages/ui/src/lib/i18n/messages/es.ts b/packages/ui/src/lib/i18n/messages/es.ts index ecf5750b..7dd88fed 100644 --- a/packages/ui/src/lib/i18n/messages/es.ts +++ b/packages/ui/src/lib/i18n/messages/es.ts @@ -1132,6 +1132,8 @@ export const dict: Record = { "filesView.editor.enableLineWrap": "Activar ajuste de línea", "filesView.editor.findInFile": "Buscar en el archivo", "filesView.editor.goToLine": "Ir a línea", + "filesView.editor.switchToEditMode": "Cambiar al modo de edición", + "filesView.editor.switchToPreviewMode": "Cambiar al modo de vista previa", "filesView.editor.switchToTextView": "Cambiar a vista de texto", "filesView.editor.switchToTreeView": "Cambiar a vista de árbol", "filesView.toast.copyFailed": "No se pudo copiar", diff --git a/packages/ui/src/lib/i18n/messages/fr.ts b/packages/ui/src/lib/i18n/messages/fr.ts index ddee9d53..2b3d5ef9 100644 --- a/packages/ui/src/lib/i18n/messages/fr.ts +++ b/packages/ui/src/lib/i18n/messages/fr.ts @@ -995,6 +995,8 @@ export const dict = { 'filesView.editor.enableLineWrap': 'Activer le retour à la ligne', 'filesView.editor.findInFile': 'Rechercher dans le fichier', 'filesView.editor.goToLine': 'Aller à la ligne', + 'filesView.editor.switchToEditMode': 'Passer en mode édition', + 'filesView.editor.switchToPreviewMode': 'Passer en mode aperçu', 'filesView.editor.switchToTextView': 'Passer à l\'affichage texte', 'filesView.editor.switchToTreeView': 'Passer à l\'arborescence', 'filesView.toast.copyFailed': 'Échec de la copie', diff --git a/packages/ui/src/lib/i18n/messages/ja.ts b/packages/ui/src/lib/i18n/messages/ja.ts index 50416869..8b8911e1 100644 --- a/packages/ui/src/lib/i18n/messages/ja.ts +++ b/packages/ui/src/lib/i18n/messages/ja.ts @@ -1162,6 +1162,8 @@ export const dict: Record = { 'filesView.editor.enableLineWrap': '行の折り返しを有効にする', 'filesView.editor.findInFile': 'ファイル内を検索', 'filesView.editor.goToLine': '指定行に移動', + 'filesView.editor.switchToEditMode': '編集モードに切り替え', + 'filesView.editor.switchToPreviewMode': 'プレビューモードに切り替え', 'filesView.editor.switchToTextView': 'テキストビューに切り替え', 'filesView.editor.switchToTreeView': 'ツリービューに切り替え', 'filesView.toast.copyFailed': 'コピーに失敗しました', diff --git a/packages/ui/src/lib/i18n/messages/ko.ts b/packages/ui/src/lib/i18n/messages/ko.ts index b11dd011..84c669a1 100644 --- a/packages/ui/src/lib/i18n/messages/ko.ts +++ b/packages/ui/src/lib/i18n/messages/ko.ts @@ -1169,6 +1169,8 @@ export const dict: Record = { 'filesView.editor.enableLineWrap': '줄 바꿈 켜기', 'filesView.editor.findInFile': '파일에서 찾기', 'filesView.editor.goToLine': '줄로 이동', + 'filesView.editor.switchToEditMode': '편집 모드로 전환', + 'filesView.editor.switchToPreviewMode': '미리보기 모드로 전환', 'filesView.editor.switchToTextView': '텍스트 보기로 전환', 'filesView.editor.switchToTreeView': '트리 보기로 전환', 'filesView.toast.copyFailed': '복사 실패', diff --git a/packages/ui/src/lib/i18n/messages/pl.ts b/packages/ui/src/lib/i18n/messages/pl.ts index 5325b0d9..ab29f5b7 100644 --- a/packages/ui/src/lib/i18n/messages/pl.ts +++ b/packages/ui/src/lib/i18n/messages/pl.ts @@ -1653,6 +1653,8 @@ export const dict: Record = { 'filesView.editor.fullscreen': 'Pełny ekran', 'filesView.editor.goToLine': 'Przejdź do linii', 'filesView.editor.htmlPreviewTitle': 'Podgląd HTML', + 'filesView.editor.switchToEditMode': 'Przełącz na tryb edycji', + 'filesView.editor.switchToPreviewMode': 'Przełącz na tryb podglądu', 'filesView.diagram.closeDiagramView': 'Zamknij widok diagramu', 'filesView.diagram.saveDiagram': 'Zapisz diagram', 'filesView.editor.imageAltFallback': 'Obraz', diff --git a/packages/ui/src/lib/i18n/messages/pt-BR.ts b/packages/ui/src/lib/i18n/messages/pt-BR.ts index f57b394c..54a54ac9 100644 --- a/packages/ui/src/lib/i18n/messages/pt-BR.ts +++ b/packages/ui/src/lib/i18n/messages/pt-BR.ts @@ -1132,6 +1132,8 @@ export const dict: Record = { "filesView.editor.enableLineWrap": "Ativar ajuste de linha", "filesView.editor.findInFile": "Buscar no arquivo", "filesView.editor.goToLine": "Ir para linha", + "filesView.editor.switchToEditMode": "Alternar para o modo de edição", + "filesView.editor.switchToPreviewMode": "Alternar para o modo de visualização", "filesView.editor.switchToTextView": "Alternar para visualização de texto", "filesView.editor.switchToTreeView": "Alternar para visualização em árvore", "filesView.toast.copyFailed": "Não foi possível copiar", diff --git a/packages/ui/src/lib/i18n/messages/uk.ts b/packages/ui/src/lib/i18n/messages/uk.ts index d9ae8a87..463432e2 100644 --- a/packages/ui/src/lib/i18n/messages/uk.ts +++ b/packages/ui/src/lib/i18n/messages/uk.ts @@ -1132,6 +1132,8 @@ export const dict: Record = { "filesView.editor.enableLineWrap": "Увімкнути перенос рядків", "filesView.editor.findInFile": "Знайти у файлі", "filesView.editor.goToLine": "Перейти до рядка", + "filesView.editor.switchToEditMode": "Перемкнутися в режим редагування", + "filesView.editor.switchToPreviewMode": "Перемкнутися в режим попереднього перегляду", "filesView.editor.switchToTextView": "Перемкнутися на текстовий перегляд", "filesView.editor.switchToTreeView": "Перейти до перегляду дерева", "filesView.toast.copyFailed": "Помилка копіювання", diff --git a/packages/ui/src/lib/i18n/messages/zh-CN.ts b/packages/ui/src/lib/i18n/messages/zh-CN.ts index 928eb16f..24fce483 100644 --- a/packages/ui/src/lib/i18n/messages/zh-CN.ts +++ b/packages/ui/src/lib/i18n/messages/zh-CN.ts @@ -1132,6 +1132,8 @@ export const dict: Record = { 'filesView.editor.enableLineWrap': '开启自动换行', 'filesView.editor.findInFile': '文件内查找', 'filesView.editor.goToLine': '跳转到行', + 'filesView.editor.switchToEditMode': '切换到编辑模式', + 'filesView.editor.switchToPreviewMode': '切换到预览模式', 'filesView.editor.switchToTextView': '切换到文本视图', 'filesView.editor.switchToTreeView': '切换到树视图', 'filesView.toast.copyFailed': '复制失败', diff --git a/packages/ui/src/lib/i18n/messages/zh-TW.ts b/packages/ui/src/lib/i18n/messages/zh-TW.ts index e2b99900..73df1af0 100644 --- a/packages/ui/src/lib/i18n/messages/zh-TW.ts +++ b/packages/ui/src/lib/i18n/messages/zh-TW.ts @@ -1143,6 +1143,8 @@ export const dict: Record = { 'filesView.editor.enableLineWrap': '開啟自動換行', 'filesView.editor.findInFile': '檔案內尋找', 'filesView.editor.goToLine': '跳轉到行', + 'filesView.editor.switchToEditMode': '切換到編輯模式', + 'filesView.editor.switchToPreviewMode': '切換到預覽模式', 'filesView.editor.switchToTextView': '切換到文字檢視', 'filesView.editor.switchToTreeView': '切換到樹狀檢視', 'filesView.toast.copyFailed': '複製失敗',