Merge pull request #3 from aolyang/add-keymap-info

Add keymap information to tooltip
tiptiz · Dec 13, 2024 · 957d8a0 · 957d8a0
2 parents b871190 + aa94e65
commit 957d8a0
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 17 deletions.
diff --git a/example/src/components/toolbars/ToolbarAlign.svelte b/example/src/components/toolbars/ToolbarAlign.svelte
@@ -16,10 +16,17 @@
         if (ctx.isTextAlign === align) chain.unsetTextAlign().run()
         else chain.setTextAlign(align).run()
     }
+
+    const keymap = {
+        "Align left": "Mod+Shift+l",
+        "Align center": "Mod+Shift+e",
+        "Align right": "Mod+Shift+r",
+        "Align justify": "Mod+Shift+j"
+    }
 </script>
 
 {#each aligns as align}
-    <Tooltip label={$t(`Align ${align}`)}>
+    <Tooltip label={$t(`Align ${align}`) + ` (${keymap[`Align ${align}`]})`}>
         <SvgAlign class={ctx.isTextAlign === align ? "active" : ""}
                   {align}
                   onclick={() => handleAlign(align)}/>

diff --git a/example/src/components/toolbars/ToolbarIndent.svelte b/example/src/components/toolbars/ToolbarIndent.svelte
@@ -15,12 +15,17 @@
     const handleIndentDec = () => {
         ctx.editor.chain().focus().outdent().run()
     }
+
+    const keymap = {
+        "Increase indent": "Mod+]",
+        "Decrease indent": "Mod+["
+    }
 </script>
 
-<Tooltip label={$t("Increase indent")}>
+<Tooltip label={$t("Increase indent") + ` (${keymap["Increase indent"]})`}>
     <SvgIndentInc onclick={handleIndentInc}/>
 </Tooltip>
-<Tooltip label={$t("Decrease indent")}>
+<Tooltip label={$t("Decrease indent") + ` (${keymap["Decrease indent"]})`}>
     <SvgIndentDec onclick={handleIndentDec}/>
 </Tooltip>
 

diff --git a/example/src/components/toolbars/ToolbarList.svelte b/example/src/components/toolbars/ToolbarList.svelte
@@ -26,20 +26,28 @@
         const target = ctx.isBulletList ? "listItem" : "taskItem"
         ctx.editor.chain().focus().liftListItem(target).run()
     }
+
+    const keymap = {
+        "Select list": "Mod+Shift+8",
+        "Insert task list": "Mod+Shift+9",
+        "Break list": "Enter",
+        "Sink list item": "Tab",
+        "Lift list item": "Shift Tab"
+    }
 </script>
 
-<Tooltip label={$t("Select list")}>
+<Tooltip label={$t("Select list") + ` (${keymap["Select list"]})`}>
     <SelectListType/>
 </Tooltip>
-<Tooltip label={$t("Insert task list")}>
+<Tooltip label={$t("Insert task list") + ` (${keymap["Insert task list"]})`}>
     <SvgTaskList class={ctx.isTaskList ? "active" : ""} onclick={toggleTaskList}/>
 </Tooltip>
-<Tooltip label={$t("Break list")}>
+<Tooltip label={$t("Break list") + ` (${keymap["Break list"]})`}>
     <SvgListBreak onclick={breakList}/>
 </Tooltip>
-<Tooltip label={$t("Sink list item")}>
+<Tooltip label={$t("Sink list item") + ` (${keymap["Sink list item"]})`}>
     <SvgListIndent onclick={sinkList}/>
 </Tooltip>
-<Tooltip label={$t("Lift list item")}>
+<Tooltip label={$t("Lift list item") + ` (${keymap["Lift list item"]})`}>
     <SvgListOutdent onclick={liftList}/>
 </Tooltip>
diff --git a/example/src/components/toolbars/ToolbarMarks.svelte b/example/src/components/toolbars/ToolbarMarks.svelte
@@ -32,23 +32,32 @@
 
     const toggleSup = () => ctx.editor.chain().focus().toggleSuperscript().run()
     const toggleSub = () => ctx.editor.chain().focus().toggleSubscript().run()
+
+    const keymap = {
+        "Bold": "Mod+B",
+        "Italic": "Mod+I",
+        "Strikethrough": "Mod+Shift+S",
+        "Underline": "Mod+U",
+        "Superscript": "Mod+.",
+        "Subscript": "Mod+,"
+    }
 </script>
 
-<Tooltip label={$t("Bold")}>
+<Tooltip label={$t("Bold") + ` (${keymap["Bold"]})`}>
     <SvgBold class={ctx.isBold ? "active" : ""} onclick={toggleBold}/>
 </Tooltip>
-<Tooltip label={$t("Italic")}>
+<Tooltip label={$t("Italic") + ` (${keymap["Italic"]})`}>
     <SvgItalic class={ctx.isItalic ? "active" : ""} onclick={toggleItalic}/>
 </Tooltip>
-<Tooltip label={$t("Strikethrough")}>
+<Tooltip label={$t("Strikethrough") + ` (${keymap["Strikethrough"]})`}>
     <SvgStrike class={ctx.isStrike ? "active" : ""} onclick={toggleStrike}/>
 </Tooltip>
-<Tooltip label={$t("Underline")}>
+<Tooltip label={$t("Underline") + ` (${keymap["Underline"]})`}>
     <SvgUnderline class={ctx.isUnderline ? "active" : ""} onclick={handleToggle("underline")}/>
 </Tooltip>
-<Tooltip label={$t("Superscript")}>
+<Tooltip label={$t("Superscript") + ` (${keymap["Superscript"]})`}>
     <SvgSuperscript class={ctx.isSup ? "active" : "" } onclick={toggleSup}/>
 </Tooltip>
-<Tooltip label={$t("Subscript")}>
+<Tooltip label={$t("Subscript") + ` (${keymap["Subscript"]})`}>
     <SvgSubscript class={ctx.isSub ? "active" : "" } onclick={toggleSub}/>
 </Tooltip>
diff --git a/example/src/components/toolbars/ToolbarOthers.svelte b/example/src/components/toolbars/ToolbarOthers.svelte
@@ -20,16 +20,21 @@
             ctx.editor.chain().focus().toggleMark("code").run()
         }
     }
+
+    const keymap = {
+        "Blockquote": "Mod+Shift+B",
+        "Toggle/Insert code block": "Mod+Shift+C"
+    }
 </script>
 
 <SelectHorizontalRules/>
-<Tooltip label={$t("Blockquote")}>
+<Tooltip label={$t("Blockquote") + ` (${keymap["Blockquote"]})`}>
     <SvgBlockquote class={ctx.isBlockquote ? "active" : ""} onclick={blockquote}/>
 </Tooltip>
 <Tooltip label={$t("Pick a emoji")}>
     <SelectEmojis/>
 </Tooltip>
-<Tooltip label={$t("Toggle/Insert code block")}>
+<Tooltip label={$t("Toggle/Insert code block") + ` (${keymap["Toggle/Insert code block"]})`}>
     <SvgCodeBlock class={ctx.isCodeBlock ? "active" : ""} onclick={addCodeBlock}/>
 </Tooltip>
 <Tooltip label={$t("Insert image")}>

diff --git a/example/src/components/toolbars/ToolbarTextStyle.svelte b/example/src/components/toolbars/ToolbarTextStyle.svelte
@@ -24,6 +24,10 @@
 
         editor.chain().focus().setFontSize(`${newSize}px`).run()
     }
+
+    const keymap = {
+        "Select heading level": "Mod+Alt+{level}"
+    }
 </script>
 
 <Tooltip label={$t("Select font family")}>
@@ -33,7 +37,7 @@
     <SelectFontSize/>
 </Tooltip>
 
-<Tooltip label={$t("Select heading level")}>
+<Tooltip label={$t("Select heading level") + ` (${keymap["Select heading level"]})`}>
     <SelectHeadingLevel/>
 </Tooltip>