add keymap in editor

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

@@ -505,6 +505,7 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
             indentSize={currentIndentSize ?? defaultIndentSize}
             acceptedFileType={acceptedFileType}
             editorTheme={editorSettings?.theme}
+            editorKeymap={editorSettings?.keymapMode}
           />
         </div>
         <div ref={previewRef} onScroll={scrollPreviewHandlerThrottle} className="page-editor-preview-container flex-expand-vert d-none d-lg-flex">

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

@@ -8,7 +8,9 @@ import { EditorView } from '@codemirror/view';
 import type { ReactCodeMirrorProps } from '@uiw/react-codemirror';
 
 import { GlobalCodeMirrorEditorKey, AcceptedUploadFileType } from '../../consts';
-import { useFileDropzone, FileDropzoneOverlay, AllEditorTheme } from '../../services';
+import {
+  useFileDropzone, FileDropzoneOverlay, AllEditorTheme, AllKeymap,
+} from '../../services';
 import {
   getStrFromBol, adjustPasteData,
 } from '../../services/list-util/markdown-list-util';
@@ -33,6 +35,7 @@ type Props = {
   onScroll?: () => void,
   indentSize?: number,
   editorTheme?: string,
+  editorKeymap?: string,
 }
 
 export const CodeMirrorEditor = (props: Props): JSX.Element => {
@@ -44,6 +47,7 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
     onScroll,
     indentSize,
     editorTheme,
+    editorKeymap,
   } = props;
 
   const containerRef = useRef(null);
@@ -156,6 +160,17 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
 
   }, [codeMirrorEditor, editorTheme]);
 
+
+  useEffect(() => {
+
+    const keymap = editorKeymap ?? 'default';
+    const extension = AllKeymap[keymap] ?? AllKeymap.default;
+
+    const cleanupFunction = codeMirrorEditor?.appendExtensions(Prec.high(extension));
+    return cleanupFunction;
+
+  }, [codeMirrorEditor, editorKeymap]);
+
   const {
     getRootProps,
     isDragActive,

packages/editor/src/components/CodeMirrorEditorMain.tsx

@@ -25,11 +25,12 @@ type Props = {
   acceptedFileType?: AcceptedUploadFileType,
   indentSize?: number,
   editorTheme?: string,
+  editorKeymap?: string,
 }
 
 export const CodeMirrorEditorMain = (props: Props): JSX.Element => {
   const {
-    onSave, onChange, onUpload, onScroll, acceptedFileType, indentSize, editorTheme,
+    onSave, onChange, onUpload, onScroll, acceptedFileType, indentSize, editorTheme, editorKeymap,
   } = props;
 
   const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(GlobalCodeMirrorEditorKey.MAIN);
@@ -75,6 +76,7 @@ export const CodeMirrorEditorMain = (props: Props): JSX.Element => {
       acceptedFileType={acceptedFileTypeNoOpt}
       indentSize={indentSize}
       editorTheme={editorTheme}
+      editorKeymap={editorKeymap}
     />
   );
 };

packages/editor/src/components/playground/Playground.tsx

@@ -63,6 +63,7 @@ export const Playground = (): JSX.Element => {
             indentSize={4}
             acceptedFileType={AcceptedUploadFileType.ALL}
             editorTheme={editorTheme}
+            editorKeymap="sublime"
           />
         </div>
         <div className="flex-expand-vert d-none d-lg-flex bg-light text-dark border-start border-dark-subtle p-3">

packages/editor/src/services/index.ts

@@ -1,3 +1,4 @@
 export * from './codemirror-editor';
 export * from './file-dropzone';
 export * from './editor-theme';
+export * from './keymaps';

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

@@ -0,0 +1,17 @@
+import { defaultKeymap } from '@codemirror/commands';
+import { Extension } from '@codemirror/state';
+import { keymap } from '@codemirror/view';
+import { emacs } from '@replit/codemirror-emacs';
+import { Vim, vim } from '@replit/codemirror-vim';
+import { vscodeKeymap } from '@replit/codemirror-vscode-keymap';
+
+// Vim useful keymap custom
+Vim.map('jj', '<Esc>', 'insert');
+Vim.map('jk', '<Esc>', 'insert');
+
+export const AllKeymap: Record<string, Extension> = {
+  default: keymap.of(defaultKeymap),
+  vim: vim(),
+  emacs: emacs(),
+  sublime: keymap.of(vscodeKeymap),
+};