Apply editor settings in web playground

Author: terror

www/bun.lock

@@ -4,6 +4,7 @@
     "": {
       "name": "www",
       "dependencies": {
+        "@codemirror/lang-rust": "^6.0.1",
         "@radix-ui/react-dialog": "^1.1.7",
         "@radix-ui/react-label": "^2.1.3",
         "@radix-ui/react-select": "^2.1.7",
@@ -91,6 +92,8 @@
 
     "@codemirror/commands": ["@codemirror/[email protected]", "", { "dependencies": { "@codemirror/language": "^6.0.0", "@codemirror/state": "^6.4.0", "@codemirror/view": "^6.27.0", "@lezer/common": "^1.1.0" } }, "sha512-KlGVYufHMQzxbdQONiLyGQDUW0itrLZwq3CcY7xpv9ZLRHqzkBSoteocBHtMCoY7/Ci4xhzSrToIeLg7FxHuaw=="],
 
+    "@codemirror/lang-rust": ["@codemirror/[email protected]", "", { "dependencies": { "@codemirror/language": "^6.0.0", "@lezer/rust": "^1.0.0" } }, "sha512-344EMWFBzWArHWdZn/NcgkwMvZIWUR1GEBdwG8FEp++6o6vT6KL9V7vGs2ONsKxxFUPXKI0SPcWhyYyl2zPYxQ=="],
+
     "@codemirror/language": ["@codemirror/[email protected]", "", { "dependencies": { "@codemirror/state": "^6.0.0", "@codemirror/view": "^6.23.0", "@lezer/common": "^1.1.0", "@lezer/highlight": "^1.0.0", "@lezer/lr": "^1.0.0", "style-mod": "^4.0.0" } }, "sha512-A7+f++LodNNc1wGgoRDTt78cOwWm9KVezApgjOMp1W4hM0898nsqBXwF+sbePE7ZRcjN7Sa1Z5m2oN27XkmEjQ=="],
 
     "@codemirror/lint": ["@codemirror/[email protected]", "", { "dependencies": { "@codemirror/state": "^6.0.0", "@codemirror/view": "^6.35.0", "crelt": "^1.0.5" } }, "sha512-s3n3KisH7dx3vsoeGMxsbRAgKe4O1vbrnKBClm99PU0fWxmxsx5rR2PfqQgIt+2MMJBHbiJ5rfIdLYfB9NNvsA=="],
@@ -185,6 +188,8 @@
 
     "@lezer/lr": ["@lezer/[email protected]", "", { "dependencies": { "@lezer/common": "^1.0.0" } }, "sha512-pu0K1jCIdnQ12aWNaAVU5bzi7Bd1w54J3ECgANPmYLtQKP0HBj2cE/5coBD66MT10xbtIuUr7tg0Shbsvk0mDA=="],
 
+    "@lezer/rust": ["@lezer/[email protected]", "", { "dependencies": { "@lezer/common": "^1.2.0", "@lezer/highlight": "^1.0.0", "@lezer/lr": "^1.0.0" } }, "sha512-Lz5sIPBdF2FUXcWeCu1//ojFAZqzTQNRga0aYv6dYXqJqPfMdCAI0NzajWUd4Xijj1IKJLtjoXRPMvTKWBcqKg=="],
+
     "@marijn/find-cluster-break": ["@marijn/[email protected]", "", {}, "sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g=="],
 
     "@nodelib/fs.scandir": ["@nodelib/[email protected]", "", { "dependencies": { "@nodelib/fs.stat": "2.0.5", "run-parallel": "^1.1.9" } }, "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g=="],

www/package.json

@@ -13,6 +13,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@codemirror/lang-rust": "^6.0.1",
     "@radix-ui/react-dialog": "^1.1.7",
     "@radix-ui/react-label": "^2.1.3",
     "@radix-ui/react-select": "^2.1.7",

www/src/App.tsx

@@ -19,7 +19,7 @@ import {
 } from './components/ui/resizable';
 
 const EXAMPLES = {
-  Factorial: `fn factorial(n) {
+  factorial: `fn factorial(n) {
   if (n <= 1) {
     1
   } else {
@@ -32,27 +32,31 @@ print(factorial(5));`,
 
 function App() {
   const [wasmLoaded, setWasmLoaded] = useState(false);
-  const [code, setCode] = useState(EXAMPLES.Factorial);
-  const [currentExample, setCurrentExample] = useState('Factorial');
+
   const [ast, setAst] = useState<AstNode | null>(null);
-  const [parseErrors, setParseErrors] = useState<ParseError[]>([]);
+  const [code, setCode] = useState(EXAMPLES.factorial);
+  const [errors, setErrors] = useState<ParseError[]>([]);
+
+  const [currentExample, setCurrentExample] = useState('factorial');
 
   useEffect(() => {
     init()
       .then(() => {
         setWasmLoaded(true);
+        setAst(parse(code));
       })
       .catch((error) => {
         toast.error(error);
       });
   }, []);
 
   useEffect(() => {
+    if (!wasmLoaded) return;
+
     try {
       setAst(parse(code));
-      setParseErrors([]);
     } catch (error) {
-      setParseErrors(error as ParseError[]);
+      setErrors(error as ParseError[]);
     }
   }, [code]);
 
@@ -102,7 +106,7 @@ function App() {
                 <EditorSettingsDialog />
               </div>
               <div className='h-full min-h-0 flex-grow overflow-hidden'>
-                <Editor errors={parseErrors} value={code} onChange={setCode} />
+                <Editor errors={errors} value={code} onChange={setCode} />
               </div>
             </div>
           </div>

www/src/components/editor.tsx

@@ -1,5 +1,14 @@
+import { highlightExtension } from '@/lib/cm-highlight-extension';
+import { useEditorSettings } from '@/providers/editor-settings-provider';
+import { rust } from '@codemirror/lang-rust';
+import {
+  bracketMatching,
+  defaultHighlightStyle,
+  indentOnInput,
+  syntaxHighlighting,
+} from '@codemirror/language';
 import { Diagnostic, lintGutter, linter } from '@codemirror/lint';
-import CodeMirror, { EditorView } from '@uiw/react-codemirror';
+import CodeMirror, { EditorState, EditorView } from '@uiw/react-codemirror';
 import { ParseError } from 'packages/val-wasm/val';
 import { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
 
@@ -15,6 +24,8 @@ export interface EditorRef {
 
 export const Editor = forwardRef<EditorRef, EditorProps>(
   ({ value, errors, onChange }, ref) => {
+    const { settings } = useEditorSettings();
+
     const viewRef = useRef<EditorView | null>(null);
 
     useImperativeHandle(ref, () => ({
@@ -23,86 +34,112 @@ export const Editor = forwardRef<EditorRef, EditorProps>(
       },
     }));
 
-    const theme = EditorView.theme({
-      '&': {
-        height: '100%',
-        fontSize: '14px',
-        display: 'flex',
-        flexDirection: 'column',
-      },
-      '&.cm-editor': {
-        height: '100%',
-      },
-      '&.cm-focused': {
-        outline: 'none',
-      },
-      '.cm-scroller': {
-        overflow: 'auto',
-        flex: '1 1 auto',
-        fontFamily:
-          'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
-      },
-      '.cm-content': {
-        padding: '10px 0',
-      },
-      '.cm-line': {
-        padding: '0 10px',
-      },
-      '.cm-gutters': {
-        backgroundColor: 'transparent',
-        borderRight: 'none',
-        paddingRight: '8px',
-      },
-      '.cm-activeLineGutter': {
-        backgroundColor: 'rgba(59, 130, 246, 0.1)',
-      },
-      '.cm-activeLine': {
-        backgroundColor: 'rgba(59, 130, 246, 0.1)',
-      },
-      '.cm-fat-cursor': {
-        backgroundColor: 'rgba(59, 130, 246, 0.5)',
-        borderLeft: 'none',
-        width: '0.6em',
-      },
-      '.cm-cursor-secondary': {
-        backgroundColor: 'rgba(59, 130, 246, 0.3)',
-      },
-    });
+    const createEditorTheme = useCallback(
+      () =>
+        EditorView.theme({
+          '&': {
+            height: '100%',
+            fontSize: `${settings.fontSize}px`,
+            display: 'flex',
+            flexDirection: 'column',
+          },
+          '&.cm-editor': {
+            height: '100%',
+          },
+          '.cm-scroller': {
+            overflow: 'auto',
+            flex: '1 1 auto',
+            fontFamily:
+              'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
+          },
+          '.cm-content': {
+            padding: '10px 0',
+          },
+          '.cm-line': {
+            padding: '0 10px',
+          },
+          '.cm-gutters': {
+            backgroundColor: 'transparent',
+            borderRight: 'none',
+            paddingRight: '8px',
+          },
+          '.cm-activeLineGutter': {
+            backgroundColor: 'rgba(59, 130, 246, 0.1)',
+          },
+          '.cm-activeLine': {
+            backgroundColor: 'rgba(59, 130, 246, 0.1)',
+          },
+          '.cm-fat-cursor': {
+            backgroundColor: 'rgba(59, 130, 246, 0.5)',
+            borderLeft: 'none',
+            width: '0.6em',
+          },
+          '.cm-cursor-secondary': {
+            backgroundColor: 'rgba(59, 130, 246, 0.3)',
+          },
+        }),
+      [settings]
+    );
+
+    const createExtensions = useCallback(() => {
+      const extensions = [
+        EditorState.tabSize.of(settings.tabSize),
+        bracketMatching(),
+        highlightExtension,
+        indentOnInput(),
+        lintGutter(),
+        linter(diagnostics()),
+        rust(),
+        syntaxHighlighting(defaultHighlightStyle),
+      ];
+
+      if (settings.lineWrapping) {
+        extensions.push(EditorView.lineWrapping);
+      }
+
+      return extensions;
+    }, [settings]);
 
     const diagnostics = () =>
       useCallback(
         (_view: EditorView): Diagnostic[] => {
-          return errors.map((error) => {
-            try {
-              return {
-                from: error.range.start,
-                to: error.range.end,
-                severity: 'error',
-                message: error.message,
-                source: 'PARSER',
-              };
-            } catch (e) {
-              console.warn('Failed to create diagnostic:', e, error);
+          return (
+            errors &&
+            errors.map((error) => {
+              try {
+                return {
+                  from: error.range.start,
+                  to: error.range.end,
+                  severity: 'error',
+                  message: error.message,
+                  source: 'PARSER',
+                };
+              } catch (e) {
+                console.warn('Failed to create diagnostic:', e, error);
 
-              return {
-                from: 0,
-                to: 0,
-                severity: 'error',
-                message: error.message,
-                source: 'PARSER',
-              };
-            }
-          });
+                return {
+                  from: 0,
+                  to: 0,
+                  severity: 'error',
+                  message: error.message,
+                  source: 'PARSER',
+                };
+              }
+            })
+          );
         },
         [errors]
       );
 
     return (
       <CodeMirror
         value={value}
-        theme={theme}
+        theme={createEditorTheme()}
+        basicSetup={{
+          lineNumbers: settings.lineNumbers,
+        }}
         height='100%'
-        extensions={[lintGutter(), linter(diagnostics())]}
+        extensions={createExtensions()}
         onCreateEditor={(view) => {
           viewRef.current = view;
         }}

www/src/index.css

@@ -119,6 +119,12 @@
   }
 }
 
+.cm-highlighted-node {
+  background-color: rgba(59, 130, 246, 0.15);
+  outline: 1px solid rgba(59, 130, 246, 0.3);
+  border-radius: 2px;
+}
+
 ::-webkit-scrollbar {
   width: 3px;
   height: 3px;

www/src/lib/cm-highlight-extension.ts

@@ -0,0 +1,46 @@
+import { StateEffect } from '@codemirror/state';
+import {
+  Decoration,
+  DecorationSet,
+  ViewPlugin,
+  ViewUpdate,
+} from '@codemirror/view';
+
+const highlightMark = Decoration.mark({ class: 'cm-highlighted-node' });
+
+export const addHighlightEffect = StateEffect.define<{
+  from: number;
+  to: number;
+}>();
+
+export const removeHighlightEffect = StateEffect.define<null>();
+
+export const highlightExtension = ViewPlugin.fromClass(
+  class {
+    decorations: DecorationSet;
+
+    constructor() {
+      this.decorations = Decoration.none;
+    }
+
+    update(update: ViewUpdate) {
+      const effects = update.transactions
+        .flatMap((tr) => tr.effects)
+        .filter((e) => e.is(addHighlightEffect) || e.is(removeHighlightEffect));
+
+      if (!effects.length) return;
+
+      for (const effect of effects) {
+        if (effect.is(addHighlightEffect)) {
+          const { from, to } = effect.value;
+          this.decorations = Decoration.set([highlightMark.range(from, to)]);
+        } else if (effect.is(removeHighlightEffect)) {
+          this.decorations = Decoration.none;
+        }
+      }
+    }
+  },
+  {
+    decorations: (v) => v.decorations,
+  }
+);