Add some basic key bindings for Markdown syntax (#628)

src/app/dashboard/[subdomain]/editor/page.tsx

@@ -34,7 +34,7 @@ import { Modal } from "~/components/ui/Modal"
 import { Switch } from "~/components/ui/Switch"
 import { TagInput } from "~/components/ui/TagInput"
 import { UniLink } from "~/components/ui/UniLink"
-import { toolbars } from "~/editor"
+import { toolbarShortcuts, toolbars } from "~/editor"
 import { editorUpload } from "~/editor/Multimedia"
 import {
   Values,
@@ -619,6 +619,7 @@ export default function SubdomainEditor() {
                         "h-full flex-1",
                         isRendering ? "border-r" : "",
                       )}
+                      shortcuts={toolbarShortcuts}
                     />
                   )}
                   {!isMobileLayout && (

src/components/ui/CodeMirror.tsx

@@ -47,6 +47,7 @@ interface XLogCodeMirrorEditorProps {
   onCreateEditor?: (view: EditorView, state: EditorState) => void
   onMouseEnter?: () => void
   LoadingComponent?: () => JSX.Element
+  shortcuts?: KeyBinding[]
 }
 
 export const CodeMirrorEditor = forwardRef<
@@ -189,6 +190,7 @@ const LazyCodeMirrorEditor = forwardRef<
           }),
 
           keymap.of([
+            ...(props.shortcuts ?? []),
             ...defaultKeymap,
             ...historyKeymap,
             ...markdownKeymap,

src/editor/Bold.tsx

@@ -1,10 +1,23 @@
-import { ICommand, wrapExecute } from "."
+import { type EditorView } from "@codemirror/view"
+
+import { type ICommand, wrapExecute } from "."
+
+const action = (view: EditorView) => {
+  wrapExecute({ view, prepend: "**", append: "**" })
+}
 
 export const Bold: ICommand = {
   name: "bold",
   label: "Bold",
   icon: "icon-[mingcute--bold-line]",
-  execute: ({ view }) => {
-    wrapExecute({ view, prepend: "**", append: "**" })
+  execute({ view }) {
+    action(view)
+  },
+  shortcut: {
+    key: "Mod-b",
+    run(view) {
+      action(view)
+      return true
+    },
   },
 }

src/editor/Italic.tsx

@@ -1,10 +1,23 @@
-import { ICommand, wrapExecute } from "."
+import { type EditorView } from "@codemirror/view"
+
+import { type ICommand, wrapExecute } from "."
+
+const action = (view: EditorView) => {
+  wrapExecute({ view, prepend: "_", append: "_" })
+}
 
 export const Italic: ICommand = {
   name: "italic",
   label: "Italic",
   icon: "icon-[mingcute--italic-line]",
-  execute: ({ view }) => {
-    wrapExecute({ view, prepend: "_", append: "_" })
+  execute({ view }) {
+    action(view)
+  },
+  shortcut: {
+    key: "Mod-i",
+    run(view) {
+      action(view)
+      return true
+    },
   },
 }

src/editor/Link.tsx

@@ -1,10 +1,23 @@
-import { ICommand, wrapExecute } from "."
+import { type EditorView } from "@codemirror/view"
+
+import { type ICommand, wrapExecute } from "."
+
+const action = (view: EditorView) => {
+  wrapExecute({ view, prepend: "[", append: "]()" })
+}
 
 export const Link: ICommand = {
   name: "link",
   label: "Link",
   icon: "icon-[mingcute--link-2-line]",
-  execute: ({ view }) => {
-    wrapExecute({ view, prepend: "[", append: "]()" })
+  execute({ view }) {
+    action(view)
+  },
+  shortcut: {
+    key: "Mod-k",
+    run(view) {
+      action(view)
+      return true
+    },
   },
 }

src/editor/Underline.tsx

@@ -1,10 +1,23 @@
-import { ICommand, wrapExecute } from "."
+import { type EditorView } from "@codemirror/view"
+
+import { type ICommand, wrapExecute } from "."
+
+const action = (view: EditorView) => {
+  wrapExecute({ view, prepend: "<u>", append: "</u>" })
+}
 
 export const Underline: ICommand = {
   name: "underline",
   label: "Underline",
   icon: "icon-[mingcute--underline-line]",
   execute: ({ view }) => {
-    wrapExecute({ view, prepend: "<u>", append: "</u>" })
+    action(view)
+  },
+  shortcut: {
+    key: "Mod-u",
+    run(view) {
+      action(view)
+      return true
+    },
   },
 }

src/editor/index.tsx

@@ -1,7 +1,7 @@
 import { Dispatch, SetStateAction } from "react"
 
 import { EditorSelection } from "@codemirror/state"
-import { EditorView } from "@codemirror/view"
+import { type EditorView, type KeyBinding } from "@codemirror/view"
 
 import { AlignCenter } from "./AlignCenter"
 import { AlignRight } from "./AlignRight"
@@ -42,6 +42,8 @@ export type ICommand<P = any> = {
     transferPayload: (payload: P) => void
     view: EditorView
   }) => JSX.Element
+
+  shortcut?: KeyBinding
 }
 
 export type IPrependExecute = {
@@ -106,5 +108,9 @@ export const toolbars: ICommand[] = [
   Help,
 ]
 
+export const toolbarShortcuts = toolbars
+  .map((t) => t.shortcut)
+  .filter(<T,>(v: T): v is NonNullable<T> => !!v)
+
 export { wrapExecute } from "./helper"
 export type { IWrapExecute } from "./helper"