setting playground

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

@@ -3,7 +3,7 @@ import { useCallback } from 'react';
 import { useForm } from 'react-hook-form';
 
 import { GlobalCodeMirrorEditorKey } from '../../consts';
-import { AllEditorTheme } from '../../services';
+import { AllEditorTheme, AllKeyMap } from '../../services';
 import { useCodeMirrorEditorIsolated } from '../../stores';
 
 export const InitEditorValueRow = (): JSX.Element => {
@@ -70,11 +70,15 @@ export const SetCaretLineRow = (): JSX.Element => {
 };
 
 
-const SetParamRow = (
-    set: (value: string) => void,
+type SetParamRowProps = {
+    update: (value: string) => void,
     items: string[],
-)
+}
 
+const SetParamRow = (
+    props: SetParamRowProps,
+): JSX.Element => {
+  const { update, items } = props;
   return (
     <>
       <div className="row mt-3">
@@ -87,7 +91,7 @@ const SetParamRow = (
                   type="button"
                   className="btn btn-outline-secondary"
                   onClick={() => {
-                    set(item);
+                    update(item);
                   }}
                 >{item}
                 </button>
@@ -112,8 +116,8 @@ export const PlaygroundController = (props: PlaygroundControllerProps): JSX.Elem
     <div className="container mt-5">
       <InitEditorValueRow />
       <SetCaretLineRow />
-      <SetParamRow set={setEditorTheme} items={AllEditorTheme} />
-      <SetParamRow set={setEditorKeymap} items={}/>
+      <SetParamRow update={setEditorTheme} items={AllEditorTheme} />
+      <SetParamRow update={setEditorKeymap} items={AllKeyMap} />
     </div>
   );
 };

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

@@ -27,4 +27,5 @@ const KeyMapMode = {
   vscode: 'vscode',
 } as const;
 
+export const AllKeyMap = Object.values(KeyMapMode);
 export type KeyMapMode = typeof KeyMapMode[keyof typeof KeyMapMode];

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

@@ -2,8 +2,8 @@ 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');
+Vim.map('jj', '<Esc>', 'insert');
+Vim.map('jk', '<Esc>', 'insert');
 
 export const vimKeymap = (onSave?: () => void): Extension => {
   if (onSave != null) {