Use editor markers to show syntax error

Author: iddan

src/App.tsx

@@ -19,10 +19,8 @@ export default function App() {
   const [highlightedIntervals, setHighlightedIntervals] = useState<HighlightedIntervals>([]);
   const [query, setQuery] = useState<string>('');
   const [code, setCode] = useState<string>('');
-  const [syntaxError, setSyntaxError] = useState<Error>();
 
   const handleQueryChange = useCallback((value: string | undefined) => {
-    setSyntaxError(undefined);
     if (value) {
       setQuery(value);
     }
@@ -38,16 +36,14 @@ export default function App() {
     if (!query) {
       return;
     }
-    setSyntaxError(undefined);
     setHighlightedIntervals([]);
 
     try {
       const nodes = queryCode(code, query);
       const highlightedIntervals = nodes.map((node) => mapNodeToHighlightInterval(node));
       setHighlightedIntervals(highlightedIntervals);
     } catch (error) {
-      if (isSyntaxError(error)) {
-        setSyntaxError(error);
+      if (error instanceof SyntaxError) {
         return;
       }
       throw error;
@@ -66,17 +62,12 @@ export default function App() {
       </header>
       <h2>Query</h2>
       <QueryEditor onChange={handleQueryChange} />
-      {syntaxError && syntaxError.toString()}
       <h2>Code</h2>
       <Code highlighted={highlightedIntervals} onChange={handleCodeChange} />
     </div>
   );
 }
 
-function isSyntaxError(error: unknown): error is Error & { name: 'SyntaxError' } {
-  return (error as { name: string }).name === 'SyntaxError';
-}
-
 function mapNodeToHighlightInterval(node: Node): HighlightedInterval {
   const fullText = node.getFullText();
   const leadingWhitespaceOffset = getFirstMatchLengthOrZero(fullText, REG_EXPS.LeadingWhitespace);

src/QueryEditor.tsx

@@ -1,27 +1,96 @@
-import { FC, useCallback } from 'react';
+import { FC, useCallback, useRef } from 'react';
 import Editor, { EditorProps } from '@monaco-editor/react';
 import type * as Monaco from 'monaco-editor';
+import { tsquery } from '@phenomnomnominal/tsquery';
+import { sanitizeQuery } from './engine';
 
-const QueryEditor: FC<Omit<EditorProps, 'defaultLanguage' | 'theme' | 'options' | 'onMount'>> = (props) => {
+const MONACO_MODEL_MARKER_OWNER = 'tsquery';
+
+const QueryEditor: FC<Omit<EditorProps, 'defaultLanguage' | 'theme' | 'options' | 'onMount'>> = ({
+  onChange,
+  ...rest
+}) => {
+  const monacoRef = useRef<typeof Monaco>();
+  const editorRef = useRef<Monaco.editor.IStandaloneCodeEditor>();
   const handleQueryMount = useCallback((editor: Monaco.editor.IStandaloneCodeEditor, monaco: typeof Monaco) => {
+    monacoRef.current = monaco;
+    editorRef.current = editor;
     monaco.languages.css.cssDefaults.setOptions({
       validate: false,
     });
   }, []);
 
+  const handleQueryChange = useCallback(
+    (value: string | undefined, event: Monaco.editor.IModelContentChangedEvent) => {
+      const monaco = monacoRef.current;
+      const editor = editorRef.current;
+      const model = editor?.getModel();
+      if (monaco && model && typeof value === 'string') {
+        const sanitizedQuery = sanitizeQuery(value);
+        const error = getSyntaxError(sanitizedQuery);
+        if (!error) {
+          monaco.editor.setModelMarkers(model, MONACO_MODEL_MARKER_OWNER, []);
+        } else {
+          if (model) {
+            monaco.editor.setModelMarkers(model, MONACO_MODEL_MARKER_OWNER, [
+              {
+                ...getFullRange(model),
+                severity: monaco.MarkerSeverity.Error,
+                message: error.message,
+              },
+            ]);
+          }
+        }
+      }
+
+      if (onChange) {
+        onChange(value, event);
+      }
+    },
+    [onChange],
+  );
+
   return (
     <Editor
       defaultLanguage="css"
       theme="vs-dark"
       onMount={handleQueryMount}
+      onChange={handleQueryChange}
       options={{
         minimap: {
           enabled: false,
         },
       }}
-      {...props}
+      {...rest}
     />
   );
 };
 
 export default QueryEditor;
+
+function getSyntaxError(query: string): Error | null {
+  try {
+    tsquery.parse(query);
+    return null;
+  } catch (error) {
+    if (error instanceof SyntaxError) {
+      return error;
+    }
+    throw error;
+  }
+}
+
+function getFullRange(model: Monaco.editor.ITextModel): {
+  startLineNumber: number;
+  startColumn: number;
+  endLineNumber: number;
+  endColumn: number;
+} {
+  const lastLine = model.getLineCount();
+  return {
+    startLineNumber: 0,
+    startColumn: 0,
+    endLineNumber: lastLine,
+    endColumn: model.getLineMaxColumn(lastLine),
+  };
+}

src/engine.ts

@@ -24,7 +24,7 @@ export function queryCode(code: string, query: string): Node[] {
   return nonEmptyNodes;
 }
 
-function sanitizeQuery(query: string): string {
+export function sanitizeQuery(query: string): string {
   return query.replace(REG_EXPS.AllLineBreaks, ' ').replace(REG_EXPS.TrailingCommaAndWhitespace, '').trim();
 }