Flowquery APP

Author: niclasko

flowquery-app/package-lock.json

@@ -7,8 +7,16 @@
     "build": "vite build"
   },
   "dependencies": {
+    "@codemirror/autocomplete": "^6.20.1",
+    "@codemirror/commands": "^6.10.2",
+    "@codemirror/language": "^6.12.2",
+    "@codemirror/search": "^6.6.0",
+    "@codemirror/state": "^6.5.4",
+    "@codemirror/view": "^6.39.16",
     "@fluentui/react-components": "^9.56.0",
     "@fluentui/react-icons": "^2.0.320",
+    "@lezer/highlight": "^1.2.3",
+    "codemirror": "^6.0.2",
     "react": "^18.3.0",
     "react-dom": "^18.3.0"
   },

flowquery-app/package.json

@@ -2,13 +2,13 @@ import {
     FluentProvider,
     Input,
     Text,
-    Textarea,
     Toolbar,
     ToolbarButton,
     webLightTheme,
 } from "@fluentui/react-components";
 import React from "react";
 import { Compression } from "./compression";
+import { CypherEditor } from "./CypherEditor";
 import { ResultsTable } from "./ResultsTable";
 
 function formatMetadataKey(key: string): string {
@@ -81,13 +81,6 @@ export class App extends React.Component<Record<string, never>, AppState> {
         this.setState({ input: "", results: [], metadata: null, error: null, shareLink: "" });
     };
 
-    handleKeyDown = (e: React.KeyboardEvent) => {
-        if (e.key === "Enter" && e.shiftKey) {
-            e.preventDefault();
-            this.run();
-        }
-    };
-
     render() {
         const { input, results, metadata, error, shareLink } = this.state;
 
@@ -102,14 +95,11 @@ export class App extends React.Component<Record<string, never>, AppState> {
                     boxSizing: "border-box",
                 }}
             >
-                <Textarea
+                <CypherEditor
                     value={input}
-                    onChange={(_, d) => this.setState({ input: d.value })}
-                    onKeyDown={this.handleKeyDown}
+                    onChange={(v) => this.setState({ input: v })}
+                    onShiftEnter={this.run}
                     placeholder="Type your FlowQuery statement here and press Shift+Enter to run it."
-                    resize="vertical"
-                    textarea={{ style: { fontFamily: "monospace", minHeight: 200 } }}
-                    style={{ width: "100%" }}
                 />
                 <Toolbar style={{ padding: "8px 0", gap: 4 }}>
                     <ToolbarButton appearance="primary" onClick={this.run}>

flowquery-app/src/App.tsx

@@ -0,0 +1,121 @@
+import React, { useEffect, useRef } from "react";
+import { EditorState } from "@codemirror/state";
+import { EditorView, keymap, placeholder as cmPlaceholder } from "@codemirror/view";
+import { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
+import { syntaxHighlighting, defaultHighlightStyle, bracketMatching } from "@codemirror/language";
+import { closeBrackets, closeBracketsKeymap } from "@codemirror/autocomplete";
+import { searchKeymap, highlightSelectionMatches } from "@codemirror/search";
+import { cypherLanguage } from "./cypher-lang";
+
+interface CypherEditorProps {
+    value: string;
+    onChange: (value: string) => void;
+    onShiftEnter?: () => void;
+    placeholder?: string;
+}
+
+export const CypherEditor: React.FC<CypherEditorProps> = ({
+    value,
+    onChange,
+    onShiftEnter,
+    placeholder,
+}) => {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const viewRef = useRef<EditorView | null>(null);
+    const onChangeRef = useRef(onChange);
+    const onShiftEnterRef = useRef(onShiftEnter);
+
+    onChangeRef.current = onChange;
+    onShiftEnterRef.current = onShiftEnter;
+
+    useEffect(() => {
+        if (!containerRef.current) return;
+
+        const shiftEnterKeymap = keymap.of([
+            {
+                key: "Shift-Enter",
+                run: () => {
+                    onShiftEnterRef.current?.();
+                    return true;
+                },
+            },
+        ]);
+
+        const updateListener = EditorView.updateListener.of((update) => {
+            if (update.docChanged) {
+                onChangeRef.current(update.state.doc.toString());
+            }
+        });
+
+        const theme = EditorView.theme({
+            "&": {
+                fontFamily: "monospace",
+                fontSize: "14px",
+                border: "1px solid #d1d1d1",
+                borderRadius: "4px",
+                minHeight: "120px",
+                maxHeight: "40vh",
+            },
+            "&.cm-focused": {
+                outline: "2px solid #0078d4",
+                outlineOffset: "-1px",
+            },
+            ".cm-content": {
+                padding: "8px 12px",
+            },
+            ".cm-scroller": {
+                overflow: "auto",
+            },
+        });
+
+        const state = EditorState.create({
+            doc: value,
+            extensions: [
+                shiftEnterKeymap,
+                history(),
+                closeBrackets(),
+                bracketMatching(),
+                highlightSelectionMatches(),
+                cypherLanguage,
+                syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+                keymap.of([
+                    ...closeBracketsKeymap,
+                    ...defaultKeymap,
+                    ...searchKeymap,
+                    ...historyKeymap,
+                ]),
+                updateListener,
+                theme,
+                ...(placeholder ? [cmPlaceholder(placeholder)] : []),
+                EditorView.lineWrapping,
+            ],
+        });
+
+        const view = new EditorView({
+            state,
+            parent: containerRef.current,
+        });
+
+        viewRef.current = view;
+
+        return () => {
+            view.destroy();
+            viewRef.current = null;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    // Sync external value changes into the editor
+    useEffect(() => {
+        const view = viewRef.current;
+        if (!view) return;
+        const current = view.state.doc.toString();
+        if (current !== value) {
+            view.dispatch({
+                changes: { from: 0, to: current.length, insert: value },
+            });
+        }
+    }, [value]);
+
+    return <div ref={containerRef} style={{ width: "100%" }} />;
+};