refactor: rename useKeyboardShortcuts to useEditorShortcuts and update related references

packages/editor/src/client/stores/use-editor-settings.ts

@@ -14,7 +14,7 @@ import {
   getEditorTheme, getKeymap, insertNewlineContinueMarkup, insertNewRowToMarkdownTable, isInTable,
 } from '../services-internal';
 
-import { useKeyboardShortcuts } from './use-editor-shortcuts';
+import { useEditorShortcuts } from './use-editor-shortcuts';
 
 const useStyleActiveLine = (
     codeMirrorEditor?: UseCodeMirrorEditor,
@@ -102,7 +102,7 @@ export const useEditorSettings = (
     editorSettings?: EditorSettings,
     onSave?: () => void,
 ): void => {
-  useKeyboardShortcuts(codeMirrorEditor, editorSettings?.keymapMode);
+  useEditorShortcuts(codeMirrorEditor, editorSettings?.keymapMode);
   useStyleActiveLine(codeMirrorEditor, editorSettings?.styleActiveLine);
   useEnterKeyHandler(codeMirrorEditor, editorSettings?.autoFormatMarkdownTable);
   useThemeExtension(codeMirrorEditor, editorSettings?.theme);

packages/editor/src/client/stores/use-editor-shortcuts.ts

@@ -2,96 +2,56 @@ import { useEffect } from 'react';
 
 import type { EditorView } from '@codemirror/view';
 import {
-  keymap, type Command, type KeyBinding,
+  keymap, type KeyBinding,
 } from '@codemirror/view';
 
 import type { UseCodeMirrorEditor } from '../services';
-import { useAddMultiCursorCommand } from '../services/use-codemirror-editor/utils/add-multi-cursor';
-import type { InsertMarkdownElements } from '../services/use-codemirror-editor/utils/insert-markdown-elements';
-import { useInsertMarkdownElements } from '../services/use-codemirror-editor/utils/insert-markdown-elements';
-import { useInsertPrefix } from '../services/use-codemirror-editor/utils/insert-prefix';
-import type { InsertPrefix } from '../services/use-codemirror-editor/utils/insert-prefix';
-import { useMakeCodeBlockExtension } from '../services/use-codemirror-editor/utils/make-text-code-block';
+import { useAddMultiCursorKeyBindings } from '../services/use-codemirror-editor/utils/editor-shortcuts/add-multi-cursor';
+import { useInsertBlockquoteKeyBinding } from '../services/use-codemirror-editor/utils/editor-shortcuts/insert-blockquote';
+import { useInsertBulletListKeyBinding } from '../services/use-codemirror-editor/utils/editor-shortcuts/insert-bullet-list';
+import { useInsertLinkKeyBinding } from '../services/use-codemirror-editor/utils/editor-shortcuts/insert-link';
+import { useInsertNumberedKeyBinding } from '../services/use-codemirror-editor/utils/editor-shortcuts/insert-numbered-list';
+import { useMakeTextBoldKeyBinding } from '../services/use-codemirror-editor/utils/editor-shortcuts/make-text-bold';
+import { useMakeTextCodeKeyBinding } from '../services/use-codemirror-editor/utils/editor-shortcuts/make-text-code';
+import { useMakeCodeBlockExtension } from '../services/use-codemirror-editor/utils/editor-shortcuts/make-text-code-block';
+import { useMakeTextItalicKeyBinding } from '../services/use-codemirror-editor/utils/editor-shortcuts/make-text-italic';
+import { useMakeTextStrikethroughKeyBinding } from '../services/use-codemirror-editor/utils/editor-shortcuts/make-text-strikethrough';
 
-import type { KeyMapMode } from 'src/consts';
-
-const generateAddMarkdownSymbolCommand = (
-    insertMarkdown: InsertMarkdownElements | InsertPrefix,
-    prefix: string,
-    suffix?: string,
-): Command => {
-
-  const isInsertMarkdownElements = (
-      fn: InsertMarkdownElements | InsertPrefix,
-  ): fn is InsertMarkdownElements => {
-    return fn.length === 2;
-  };
-
-  const addMarkdownSymbolCommand: Command = () => {
-    if (isInsertMarkdownElements(insertMarkdown)) {
-      if (suffix == null) return false;
-      insertMarkdown(prefix, suffix);
-    }
-    else {
-      insertMarkdown(prefix);
-    }
-
-    return true;
-  };
 
-  return addMarkdownSymbolCommand;
-};
-
-const useCustomKeyBindings = (view?: EditorView, keyMapName?: KeyMapMode): KeyBinding[] => {
-
-  const insertMarkdownElements = useInsertMarkdownElements(view);
-
-  const customKeyBindings: KeyBinding[] = [];
-  switch (keyMapName) {
-    case 'vim':
-      customKeyBindings.push(
-        { key: 'mod-shift-b', run: generateAddMarkdownSymbolCommand(insertMarkdownElements, '**', '**') },
-      );
-      break;
-    default:
-      customKeyBindings.push(
-        { key: 'mod-b', run: generateAddMarkdownSymbolCommand(insertMarkdownElements, '**', '**') },
-      );
-  }
-  return customKeyBindings;
-};
+import type { KeyMapMode } from 'src/consts';
 
-const useKeyBindings = (view?: EditorView, customKeyBindings?: KeyBinding[]): KeyBinding[] => {
+const useKeyBindings = (view?: EditorView, keymapModeName?: KeyMapMode): KeyBinding[] => {
 
-  const insertMarkdownElements = useInsertMarkdownElements(view);
-  const insertPrefix = useInsertPrefix(view);
-  const upMultiCursorCommand = useAddMultiCursorCommand('up');
-  const downMultiCursorCommand = useAddMultiCursorCommand('down');
+  const makeTextBoldKeyBinding = useMakeTextBoldKeyBinding(view, keymapModeName);
+  const makeTextItalicKeyBinding = useMakeTextItalicKeyBinding(view);
+  const makeTextStrikethroughKeyBinding = useMakeTextStrikethroughKeyBinding(view);
+  const makeTextCodeCommand = useMakeTextCodeKeyBinding(view);
+  const insertNumberedKeyBinding = useInsertNumberedKeyBinding(view);
+  const insertBulletListKeyBinding = useInsertBulletListKeyBinding(view);
+  const insertBlockquoteKeyBinding = useInsertBlockquoteKeyBinding(view);
+  const InsertLinkKeyBinding = useInsertLinkKeyBinding(view);
+  const multiCursorKeyBindings = useAddMultiCursorKeyBindings();
 
   const keyBindings: KeyBinding[] = [
-    { key: 'mod-shift-i', run: generateAddMarkdownSymbolCommand(insertMarkdownElements, '*', '*') },
-    { key: 'mod-shift-x', run: generateAddMarkdownSymbolCommand(insertMarkdownElements, '~~', '~~') },
-    { key: 'mod-shift-c', run: generateAddMarkdownSymbolCommand(insertMarkdownElements, '`', '`') },
-    { key: 'mod-shift-7', run: generateAddMarkdownSymbolCommand(insertPrefix, '1.') },
-    { key: 'mod-shift-8', run: generateAddMarkdownSymbolCommand(insertPrefix, '-') },
-    { key: 'mod-shift-9', run: generateAddMarkdownSymbolCommand(insertPrefix, '>') },
-    { key: 'mod-shift-u', run: generateAddMarkdownSymbolCommand(insertMarkdownElements, '[', ']()') },
-    { key: 'mod-alt-ArrowUp', run: upMultiCursorCommand },
-    { key: 'mod-alt-ArrowDown', run: downMultiCursorCommand },
+    makeTextBoldKeyBinding,
+    makeTextItalicKeyBinding,
+    makeTextStrikethroughKeyBinding,
+    makeTextCodeCommand,
+    insertNumberedKeyBinding,
+    insertBulletListKeyBinding,
+    insertBlockquoteKeyBinding,
+    InsertLinkKeyBinding,
+    ...multiCursorKeyBindings,
   ];
 
-  if (customKeyBindings != null) {
-    keyBindings.push(...customKeyBindings);
-  }
-
   return keyBindings;
 };
 
-export const useKeyboardShortcuts = (codeMirrorEditor?: UseCodeMirrorEditor, keymapModeName?: KeyMapMode): void => {
+export const useEditorShortcuts = (codeMirrorEditor?: UseCodeMirrorEditor, keymapModeName?: KeyMapMode): void => {
 
-  const customKeyBindings = useCustomKeyBindings(codeMirrorEditor?.view, keymapModeName);
-  const keyBindings = useKeyBindings(codeMirrorEditor?.view, customKeyBindings);
+  const keyBindings = useKeyBindings(codeMirrorEditor?.view, keymapModeName);
 
+  // Since key combinations of 4 or more keys cannot be implemented with CodeMirror's keybinding, they are implemented as Extensions.
   const makeCodeBlockExtension = useMakeCodeBlockExtension();
 
   useEffect(() => {