fix: show editor mode shortcut tooltip
This commit is contained in:
1 parent
466a969912
commit
db1854e6be
3 files changed
+37
-18
No files matched your search
@@ -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}
|
||||
|
||||
@@ -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 />
|
||||
</>
|
||||
)}
|
||||
|
||||
@@ -3045,6 +3045,7 @@ export const WorkspaceApp = ({
|
||||
replaceFocusToken={noteReplaceFocusToken}
|
||||
saveAndSyncToken={noteSaveAndSyncToken}
|
||||
editorModeToggleToken={noteEditorModeToggleToken}
|
||||
shortcutSettings={shortcutSettings}
|
||||
onSyncRequested={syncMemosManually}
|
||||
documentActionRequest={memoDocumentActionRequest}
|
||||
onDocumentActionConsumed={(requestId) => {
|
||||
|
||||
Reference in new issue
Block a user