use union

apps/app/src/components/PageEditor/OptionsSelector.tsx

@@ -10,7 +10,7 @@ import {
 import { useIsIndentSizeForced } from '~/stores/context';
 import { useEditorSettings, useCurrentIndentSize } from '~/stores/editor';
 
-import { DEFAULT_THEME, KeyMapMode } from '../../interfaces/editor-settings';
+import { DEFAULT_THEME, type KeyMapMode } from '../../interfaces/editor-settings';
 
 
 const AVAILABLE_THEMES = [

packages/editor/src/components/CodeMirrorEditor/CodeMirrorEditor.tsx

@@ -9,7 +9,7 @@ import type { ReactCodeMirrorProps } from '@uiw/react-codemirror';
 
 import { GlobalCodeMirrorEditorKey, AcceptedUploadFileType } from '../../consts';
 import {
-  useFileDropzone, FileDropzoneOverlay, getEditorTheme, type EditorTheme,
+  useFileDropzone, FileDropzoneOverlay, getEditorTheme, type EditorTheme, getKeyMap, type KeyMapMode,
 } from '../../services';
 import {
   adjustPasteData, getStrFromBol,
@@ -44,6 +44,7 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
     editorKey,
     acceptedFileType,
     onChange,
+    onSave,
     onUpload,
     onScroll,
     indentSize,
@@ -165,21 +166,10 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
 
 
   useEffect(() => {
+    const keymap = (editorKeymap ?? 'default') as KeyMapMode;
+    const extension = getKeyMap(keymap, onSave);
 
-    const keymap = editorKeymap ?? 'default';
-    const extension = getKeymap(keymap, onSave);
-
-    const cleanupFunction = codeMirrorEditor?.appendExtensions(Prec.low(extension));
-    return cleanupFunction;
-
-  }, [codeMirrorEditor, editorKeymap, onSave]);
-
-
-  useEffect(() => {
-
-    const keymap = editorKeymap ?? 'default';
-    const extension = getKeymap(keymap, onSave);
-
+    // Prevent these Keybind from overwriting the originally defined keymap.
     const cleanupFunction = codeMirrorEditor?.appendExtensions(Prec.low(extension));
     return cleanupFunction;
 

packages/editor/src/services/keymaps/index.ts

@@ -9,8 +9,8 @@ import { vscodeKeymap } from '@replit/codemirror-vscode-keymap';
 Vim.map('jj', '<Esc>', 'insert');
 Vim.map('jk', '<Esc>', 'insert');
 
-export const getKeymap = (keymapName: string, onSave?: () => void): Extension => {
-  switch (keymapName) {
+export const getKeyMap = (keyMapName: KeyMapMode, onSave?: () => void): Extension => {
+  switch (keyMapName) {
     case 'vim':
       if (onSave != null) {
         Vim.defineEx('write', 'w', onSave);
@@ -20,6 +20,16 @@ export const getKeymap = (keymapName: string, onSave?: () => void): Extension =>
       return emacs();
     case 'vscode':
       return keymap.of(vscodeKeymap);
+    case 'default':
+      return keymap.of(defaultKeymap);
   }
-  return keymap.of(defaultKeymap);
 };
+
+const KeyMapMode = {
+  default: 'default',
+  vim: 'vim',
+  emacs: 'emacs',
+  vscode: 'vscode',
+} as const;
+
+export type KeyMapMode = typeof KeyMapMode[keyof typeof KeyMapMode];