From db1854e6be75feccbedebaf9a23530f05d8fc22c Mon Sep 17 00:00:00 2001
From: tianma-if <yingwaizhiying@gmail.com>
Date: Thu, 20 Aug 2026 16:33:58 +0800
Subject: [PATCH] fix: show editor mode shortcut tooltip

---
 apps/web/src/components/EditorPane.tsx    |  4 ++
 apps/web/src/components/EditorToolbar.tsx | 50 +++++++++++++++--------
 apps/web/src/components/WorkspaceApp.tsx  |  1 +
 3 files changed, 37 insertions(+), 18 deletions(-)

diff --git a/apps/web/src/components/EditorPane.tsx b/apps/web/src/components/EditorPane.tsx
index 836794c7..7d01242a 100644
--- a/apps/web/src/components/EditorPane.tsx
+++ b/apps/web/src/components/EditorPane.tsx
@@ -128,6 +128,7 @@ import {
   getNotebookMoveOptions,
   type EditorContentAlignment,
   type MemoDocumentActionRequest,
+  type ShortcutSettings,
 } from "@/lib/app-helpers";
 import { copyEditorToWeChat, copyMarkdownToWeChat } from "@/lib/wechat-copy";
 import { ThemeBlock } from "./ThemeBlock";
@@ -632,6 +633,7 @@ type EditorPaneProps = {
   replaceFocusToken: number;
   saveAndSyncToken: number;
   editorModeToggleToken: number;
+  shortcutSettings: ShortcutSettings;
   onSyncRequested: () => Promise<void>;
   documentActionRequest?: MemoDocumentActionRequest | null;
   onDocumentActionConsumed?: (requestId: number) => void;
@@ -702,6 +704,7 @@ const RichEditorPane = ({
   replaceFocusToken,
   saveAndSyncToken,
   editorModeToggleToken,
+  shortcutSettings,
   onSyncRequested,
   documentActionRequest,
   onDocumentActionConsumed,
@@ -4127,6 +4130,7 @@ const RichEditorPane = ({
             readOnly={effectiveReadOnly}
             markdownMode={useMarkdownSourceEditor}
             onMarkdownModeChange={handleMarkdownModeChange}
+            markdownModeShortcut={shortcutSettings.toggleEditorMode}
             onPickAttachment={() => fileInputRef.current?.click()}
             onPickExternalLink={openExternalLinkDialog}
             externalLinkActive={externalLinkActive}
diff --git a/apps/web/src/components/EditorToolbar.tsx b/apps/web/src/components/EditorToolbar.tsx
index 41e22214..12012584 100644
--- a/apps/web/src/components/EditorToolbar.tsx
+++ b/apps/web/src/components/EditorToolbar.tsx
@@ -22,7 +22,7 @@ import {
 import { cn } from "@/lib/utils";
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@/components/ui/select";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
-import { getActiveBlockValue } from "@/lib/app-helpers";
+import { formatShortcutBinding, getActiveBlockValue, type ShortcutBinding } from "@/lib/app-helpers";
 import { CODE_BLOCK_LANGUAGES, getCodeBlockLanguageValue } from "@/lib/code-block";
 import { EditorTableMenu } from "@/components/EditorTableMenu";
 
@@ -118,6 +118,7 @@ export const EditorToolbar = ({
   readOnly,
   markdownMode = false,
   onMarkdownModeChange,
+  markdownModeShortcut,
   onPickAttachment,
   onPickExternalLink,
   onPickNoteLink,
@@ -127,6 +128,7 @@ export const EditorToolbar = ({
   readOnly: boolean;
   markdownMode?: boolean;
   onMarkdownModeChange?: () => void;
+  markdownModeShortcut?: ShortcutBinding;
   onPickAttachment?: () => void;
   /** Insert or edit an external hyperlink (not a note reference). */
   onPickExternalLink?: () => void;
@@ -134,6 +136,7 @@ export const EditorToolbar = ({
   externalLinkActive?: boolean;
 }) => {
   const { t } = useTranslation();
+  const markdownModeShortcutLabel = markdownModeShortcut ? formatShortcutBinding(markdownModeShortcut) : null;
   const editorReady = isToolbarEditorReady(editor);
   const disabled = readOnly || !editorReady;
   const blockValue = getActiveBlockValue(editor);
@@ -215,23 +218,34 @@ export const EditorToolbar = ({
         >
           {onMarkdownModeChange && (
             <>
-              <button
-                className={cn(
-                  "flex h-8 shrink-0 items-center rounded-md border px-2.5 text-xs font-medium transition disabled:pointer-events-none disabled:opacity-40",
-                  markdownMode
-                    ? "border-emerald-200 bg-emerald-50 text-emerald-800"
-                    : "border-slate-200 bg-white text-slate-700 hover:bg-slate-50"
-                )}
-                type="button"
-                title={markdownMode ? t("editorToolbar.richText") : t("editorToolbar.markdown")}
-                aria-label={markdownMode ? t("editorToolbar.richText") : t("editorToolbar.markdown")}
-                aria-pressed={markdownMode}
-                disabled={readOnly}
-                onMouseDown={(event) => event.preventDefault()}
-                onClick={onMarkdownModeChange}
-              >
-                {markdownMode ? t("editorToolbar.switchToRichText") : t("editorToolbar.switchToMarkdown")}
-              </button>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <button
+                    className={cn(
+                      "flex h-8 shrink-0 items-center rounded-md border px-2.5 text-xs font-medium transition disabled:pointer-events-none disabled:opacity-40",
+                      markdownMode
+                        ? "border-emerald-200 bg-emerald-50 text-emerald-800"
+                        : "border-slate-200 bg-white text-slate-700 hover:bg-slate-50"
+                    )}
+                    type="button"
+                    aria-label={markdownMode ? t("editorToolbar.richText") : t("editorToolbar.markdown")}
+                    aria-pressed={markdownMode}
+                    disabled={readOnly}
+                    onMouseDown={(event) => event.preventDefault()}
+                    onClick={onMarkdownModeChange}
+                  >
+                    {markdownMode ? t("editorToolbar.switchToRichText") : t("editorToolbar.switchToMarkdown")}
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent side="bottom" className="flex items-center gap-2">
+                  <span>{markdownMode ? t("editorToolbar.richText") : t("editorToolbar.markdown")}</span>
+                  {markdownModeShortcutLabel && (
+                    <kbd className="rounded border border-white/20 bg-white/10 px-1.5 py-0.5 font-mono text-[10px] leading-none">
+                      {markdownModeShortcutLabel}
+                    </kbd>
+                  )}
+                </TooltipContent>
+              </Tooltip>
               <ToolbarDivider />
             </>
           )}
diff --git a/apps/web/src/components/WorkspaceApp.tsx b/apps/web/src/components/WorkspaceApp.tsx
index ed8495c1..baeaa5a3 100644
--- a/apps/web/src/components/WorkspaceApp.tsx
+++ b/apps/web/src/components/WorkspaceApp.tsx
@@ -3045,6 +3045,7 @@ export const WorkspaceApp = ({
                     replaceFocusToken={noteReplaceFocusToken}
                     saveAndSyncToken={noteSaveAndSyncToken}
                     editorModeToggleToken={noteEditorModeToggleToken}
+                    shortcutSettings={shortcutSettings}
                     onSyncRequested={syncMemosManually}
                     documentActionRequest={memoDocumentActionRequest}
                     onDocumentActionConsumed={(requestId) => {