wip

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

@@ -15,6 +15,7 @@ export const Playground = (): JSX.Element => {
 
   const [markdownToPreview, setMarkdownToPreview] = useState('');
   const [editorTheme, setEditorTheme] = useState('');
+  const [editorKeymap, setEditorKeymap] = useState('');
 
   const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(GlobalCodeMirrorEditorKey.MAIN);
 
@@ -63,12 +64,12 @@ export const Playground = (): JSX.Element => {
             indentSize={4}
             acceptedFileType={AcceptedUploadFileType.ALL}
             editorTheme={editorTheme}
-            editorKeymap="default"
+            editorKeymap={editorKeymap}
           />
         </div>
         <div className="flex-expand-vert d-none d-lg-flex bg-light text-dark border-start border-dark-subtle p-3">
           <Preview markdown={markdownToPreview} />
-          <PlaygroundController setEditorTheme={setEditorTheme} />
+          <PlaygroundController setEditorTheme={setEditorTheme} setEditorKeymap={setEditorKeymap} />
         </div>
       </div>
       <div className="flex-expand-vert justify-content-center align-items-center bg-dark" style={{ minHeight: '50px' }}>

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

@@ -69,38 +69,31 @@ export const SetCaretLineRow = (): JSX.Element => {
   );
 };
 
-type SetThemeRowProps = {
-  setEditorTheme: (value: string) => void,
-}
-const SetThemeRow = (props: SetThemeRowProps): JSX.Element => {
-
-  const { setEditorTheme } = props;
-
-  const createItems = (items: string[]): JSX.Element => {
-    return (
-      <div>
-        { items.map((theme) => {
-          return (
-            <button
-              type="button"
-              className="btn btn-outline-secondary"
-              onClick={() => {
-                setEditorTheme(theme);
-              }}
-            >{theme}
-            </button>
-          );
-        }) }
-      </div>
-    );
-  };
+
+const SetParamRow = (
+    set: (value: string) => void,
+    items: string[],
+)
 
   return (
     <>
       <div className="row mt-3">
         <h2>default</h2>
         <div className="col">
-          {createItems(AllEditorTheme)}
+          <div>
+            { items.map((item) => {
+              return (
+                <button
+                  type="button"
+                  className="btn btn-outline-secondary"
+                  onClick={() => {
+                    set(item);
+                  }}
+                >{item}
+                </button>
+              );
+            }) }
+          </div>
         </div>
       </div>
     </>
@@ -110,15 +103,17 @@ const SetThemeRow = (props: SetThemeRowProps): JSX.Element => {
 
 type PlaygroundControllerProps = {
   setEditorTheme: (value: string) => void
+  setEditorKeymap: (value: string) => void
 };
 
 export const PlaygroundController = (props: PlaygroundControllerProps): JSX.Element => {
-  const { setEditorTheme } = props;
+  const { setEditorTheme, setEditorKeymap } = props;
   return (
     <div className="container mt-5">
       <InitEditorValueRow />
       <SetCaretLineRow />
-      <SetThemeRow setEditorTheme={setEditorTheme} />
+      <SetParamRow set={setEditorTheme} items={AllEditorTheme} />
+      <SetParamRow set={setEditorKeymap} items={}/>
     </div>
   );
 };

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

@@ -2,20 +2,15 @@ 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');
+import { vimKeymap } from './vim';
+
 
 export const getKeyMap = (keyMapName: KeyMapMode, onSave?: () => void): Extension => {
   switch (keyMapName) {
     case 'vim':
-      if (onSave != null) {
-        Vim.defineEx('write', 'w', onSave);
-      }
-      return vim();
+      return vimKeymap(onSave);
     case 'emacs':
       return emacs();
     case 'vscode':

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

@@ -0,0 +1,13 @@
+import { Extension } from '@codemirror/state';
+import { Vim, vim } from '@replit/codemirror-vim';
+
+// vim useful keymap custom
+vim.map('jj', '<esc>', 'insert');
+vim.map('jk', '<esc>', 'insert');
+
+export const vimKeymap = (onSave?: () => void): Extension => {
+  if (onSave != null) {
+    Vim.defineEx('write', 'w', onSave);
+  }
+  return vim();
+};