add emacs mode + fontSize slider

packages/react/package.json

@@ -37,6 +37,7 @@
     "@codemirror/state": "^6.2.0",
     "@codemirror/view": "^6.7.3",
     "@lezer/highlight": "^1.1.3",
+    "@replit/codemirror-emacs": "^6.0.0",
     "@replit/codemirror-vim": "^6.0.6",
     "@strudel.cycles/core": "workspace:*",
     "@strudel.cycles/transpiler": "workspace:*",

packages/react/src/components/CodeMirror6.jsx

@@ -9,6 +9,7 @@ import { useCallback } from 'react';
 import { autocompletion } from '@codemirror/autocomplete';
 import { strudelAutocomplete } from './Autocomplete';
 import { vim } from '@replit/codemirror-vim';
+import { emacs } from '@replit/codemirror-emacs';
 
 export const setFlash = StateEffect.define();
 const flashField = StateField.define({
@@ -98,7 +99,8 @@ export default function CodeMirror({
   onViewChanged,
   onSelectionChange,
   theme,
-  vimMode,
+  keybindings,
+  fontSize = 18,
   options,
   editorDidMount,
 }) {
@@ -122,9 +124,18 @@ export default function CodeMirror({
     },
     [onSelectionChange],
   );
-  const extensions = useMemo(() => [...staticExtensions, ...(vimMode ? [vim()] : [])], [vimMode]);
+  const extensions = useMemo(() => {
+    let bindings = {
+      vim,
+      emacs,
+    };
+    if (bindings[keybindings]) {
+      return [...staticExtensions, bindings[keybindings]()];
+    }
+    return staticExtensions;
+  }, [keybindings]);
   return (
-    <>
+    <div style={{ fontSize }} className="w-full">
       <_CodeMirror
         value={value}
         theme={theme || strudelTheme}
@@ -133,7 +144,7 @@ export default function CodeMirror({
         onUpdate={handleOnUpdate}
         extensions={extensions}
       />
-    </>
+    </div>
   );
 }
 

packages/react/src/components/style.css

@@ -2,7 +2,6 @@
   background-color: transparent !important;
   height: 100%;
   z-index: 11;
-  font-size: 18px;
 }
 
 .cm-theme {