@neo4j-cypher/react-codemirror 2.0.0-alpha.0 → 2.0.0-next.0

package/{esm → dist/esm}/index.mjs

@@ -3,9 +3,17 @@ import { CypherParser, parse } from "@neo4j-cypher/language-support";
 import * as ReactCodemirror from "@uiw/react-codemirror";
 
 // src/CypherEditor.tsx
-import { EditorView as EditorView4, keymap as keymap3 } from "@codemirror/view";
-import CodeEditor from "@uiw/react-codemirror";
-import React from "react";
+import {
+  Annotation,
+  Compartment,
+  EditorState as EditorState2
+} from "@codemirror/state";
+import {
+  EditorView as EditorView4,
+  keymap as keymap3,
+  lineNumbers
+} from "@codemirror/view";
+import { Component, createRef } from "react";
 
 // src/lang-cypher/lang-cypher.ts
 import {
@@ -47,8 +55,7 @@ var completionKindToCodemirrorIcon = (c) => {
   };
   return map[c];
 };
-var emptySchema = {};
-var cypherAutocomplete = (schema) => (context) => {
+var cypherAutocomplete = (config) => (context) => {
   const textUntilCursor = context.state.doc.toString().slice(0, context.pos);
   const triggerCharacters = [".", ":", "{", "$"];
   const lastCharacter = textUntilCursor.slice(-1);
@@ -58,7 +65,7 @@ var cypherAutocomplete = (schema) => (context) => {
   if (!shouldTriggerCompletion) {
     return null;
   }
-  const options = autocomplete(textUntilCursor, schema ?? emptySchema);
+  const options = autocomplete(textUntilCursor, config.schema ?? {});
   return {
     from: context.matchBefore(/(\w|\$)*$/).from,
     options: options.map((o) => ({
@@ -202,17 +209,18 @@ var ParserAdapter = class extends Parser {
 import { linter } from "@codemirror/lint";
 import { validateSyntax } from "@neo4j-cypher/language-support";
 import { DiagnosticSeverity } from "vscode-languageserver-types";
-var cypherLinter = (schema) => linter((view) => {
-  const diagnostics = [];
-  validateSyntax(view.state.doc.toString(), schema).forEach((diagnostic) => {
-    diagnostics.push({
+var cypherLinter = (config) => linter((view) => {
+  if (!config.lint) {
+    return [];
+  }
+  return validateSyntax(view.state.doc.toString(), config.schema).map(
+    (diagnostic) => ({
       from: diagnostic.offsets.start,
       to: diagnostic.offsets.end,
       severity: diagnostic.severity === DiagnosticSeverity.Error ? "error" : "warning",
       message: diagnostic.message
-    });
-  });
-  return diagnostics;
+    })
+  );
 });
 
 // src/lang-cypher/lang-cypher.ts
@@ -222,12 +230,12 @@ var facet = defineLanguageFacet({
 });
 var parserAdapter = new ParserAdapter(facet);
 var cypherLanguage = new Language(facet, parserAdapter, [], "cypher");
-function cypher({ lint, schema = {} }) {
+function cypher(config) {
   return new LanguageSupport(cypherLanguage, [
     cypherLanguage.data.of({
-      autocomplete: cypherAutocomplete(schema)
+      autocomplete: cypherAutocomplete(config)
     }),
-    ...lint ? [cypherLinter(schema)] : []
+    cypherLinter(config)
   ]);
 }
 
@@ -262,7 +270,6 @@ import {
   EditorView,
   highlightSpecialChars,
   keymap,
-  lineNumbers,
   rectangularSelection
 } from "@codemirror/view";
 import { lintKeymap } from "@codemirror/lint";
@@ -346,7 +353,7 @@ var insertTab = (cmd) => {
   }
   return true;
 };
-var basicNeo4jSetup = (prompt) => {
+var basicNeo4jSetup = () => {
   const keymaps = [
     closeBracketsKeymap,
     defaultKeymap,
@@ -372,16 +379,6 @@ var basicNeo4jSetup = (prompt) => {
     }
   ].flat();
   const extensions = [];
-  extensions.push(
-    lineNumbers({
-      formatNumber(a, state) {
-        if (state.doc.lines === 1 && prompt !== void 0) {
-          return prompt;
-        }
-        return a.toString();
-      }
-    })
-  );
   extensions.push(highlightSpecialChars());
   extensions.push(history());
   extensions.push(drawSelection());
@@ -396,6 +393,7 @@ var basicNeo4jSetup = (prompt) => {
   extensions.push(
     autocompletion({
       icons: false,
+      interactionDelay: 5,
       addToOptions: [
         {
           render(completion, state) {
@@ -538,8 +536,7 @@ var replMode = ({
             onExecute?.(doc);
             onNewHistoryEntry?.(doc);
             view.dispatch({
-              effects: pushToHistory.of(doc),
-              changes: { from: 0, to: view.state.doc.length, insert: "" }
+              effects: pushToHistory.of(doc)
             });
           }
           return true;
@@ -1286,45 +1283,179 @@ function getThemeExtension(theme, inheritBgColor) {
 
 // src/CypherEditor.tsx
 import { jsx } from "react/jsx-runtime";
-var CypherEditor = React.forwardRef((props, ref) => {
-  const {
-    theme = "light",
-    extensions = [],
-    prompt,
-    onExecute,
-    initialHistory = [],
-    onNewHistoryEntry,
-    extraKeybindings = [],
-    lineWrap = false,
-    overrideThemeBackgroundColor = false,
-    schema = {},
-    lint = true,
-    ...rest
-  } = props;
-  const maybeReplMode = onExecute ? replMode({
-    onExecute,
-    initialHistory,
-    onNewHistoryEntry
-  }) : [];
-  return /* @__PURE__ */ jsx(
-    CodeEditor,
-    {
-      ref,
-      theme: getThemeExtension(theme, overrideThemeBackgroundColor),
+var themeCompartment = new Compartment();
+var keyBindingCompartment = new Compartment();
+var ExternalEdit = Annotation.define();
+var CypherEditor = class extends Component {
+  /**
+   * The codemirror editor container.
+   */
+  editorContainer = createRef();
+  /**
+   * The codemirror editor state.
+   */
+  editorState = createRef();
+  /**
+   * The codemirror editor view.
+   */
+  editorView = createRef();
+  schemaRef = createRef();
+  /**
+   * Focus the editor
+   */
+  focus() {
+    this.editorView.current?.focus();
+  }
+  /**
+   * Move the cursor to the supplied position.
+   * For example, to move the cursor to the end of the editor, use `value.length`
+   */
+  updateCursorPosition(position) {
+    this.editorView.current?.dispatch({
+      selection: { anchor: position, head: position }
+    });
+  }
+  /**
+   * Externally set the editor value and focus the editor.
+   */
+  setValueAndFocus(value = "") {
+    const currentCmValue = this.editorView.current.state?.doc.toString() ?? "";
+    this.editorView.current.dispatch({
+      changes: {
+        from: 0,
+        to: currentCmValue.length,
+        insert: value
+      },
+      selection: { anchor: value.length, head: value.length }
+    });
+    this.editorView.current?.focus();
+  }
+  static defaultProps = {
+    lint: true,
+    schema: {},
+    overrideThemeBackgroundColor: false,
+    lineWrap: false,
+    extraKeybindings: [],
+    initialHistory: [],
+    theme: "light"
+  };
+  componentDidMount() {
+    const {
+      theme,
+      onExecute,
+      initialHistory,
+      onNewHistoryEntry,
+      extraKeybindings,
+      lineWrap,
+      overrideThemeBackgroundColor,
+      schema,
+      lint,
+      onChange
+    } = this.props;
+    this.schemaRef.current = { schema, lint };
+    const maybeReplMode = onExecute ? replMode({
+      onExecute,
+      initialHistory,
+      onNewHistoryEntry
+    }) : [];
+    const themeExtension = getThemeExtension(
+      theme,
+      overrideThemeBackgroundColor
+    );
+    const changeListener = onChange ? [
+      EditorView4.updateListener.of((upt) => {
+        const wasUserEdit = !upt.transactions.some(
+          (tr) => tr.annotation(ExternalEdit)
+        );
+        if (upt.docChanged && wasUserEdit) {
+          const doc = upt.state.doc;
+          const value = doc.toString();
+          onChange(value, upt);
+        }
+      })
+    ] : [];
+    this.editorState.current = EditorState2.create({
       extensions: [
-        cypher({ lint, schema }),
-        keymap3.of(extraKeybindings),
         maybeReplMode,
-        basicNeo4jSetup(prompt),
+        basicNeo4jSetup(),
+        themeCompartment.of(themeExtension),
+        changeListener,
+        cypher(this.schemaRef.current),
+        keyBindingCompartment.of(keymap3.of(extraKeybindings)),
         lineWrap ? EditorView4.lineWrapping : [],
-        ...extensions
+        lineNumbers({
+          formatNumber: (a, state) => {
+            if (state.doc.lines === 1 && this.props.prompt !== void 0) {
+              return this.props.prompt;
+            }
+            return a.toString();
+          }
+        })
       ],
-      basicSetup: false,
-      indentWithTab: false,
-      ...rest
+      doc: this.props.value
+    });
+    this.editorView.current = new EditorView4({
+      state: this.editorState.current,
+      parent: this.editorContainer.current
+    });
+    if (this.props.autofocus) {
+      this.focus();
+      if (this.props.value) {
+        this.updateCursorPosition(this.props.value.length);
+      }
     }
-  );
-});
+  }
+  componentDidUpdate(prevProps) {
+    if (!this.editorView.current) {
+      return;
+    }
+    const currentCmValue = this.editorView.current.state?.doc.toString() ?? "";
+    if (this.props.value !== void 0 && currentCmValue !== this.props.value) {
+      this.editorView.current.dispatch({
+        changes: {
+          from: 0,
+          to: currentCmValue.length,
+          insert: this.props.value ?? ""
+        },
+        annotations: [ExternalEdit.of(true)]
+      });
+    }
+    const didChangeTheme = prevProps.theme !== this.props.theme || prevProps.overrideThemeBackgroundColor !== this.props.overrideThemeBackgroundColor;
+    if (didChangeTheme) {
+      this.editorView.current.dispatch({
+        effects: themeCompartment.reconfigure(
+          getThemeExtension(
+            this.props.theme,
+            this.props.overrideThemeBackgroundColor
+          )
+        )
+      });
+    }
+    if (prevProps.extraKeybindings !== this.props.extraKeybindings) {
+      this.editorView.current.dispatch({
+        effects: keyBindingCompartment.reconfigure(
+          keymap3.of(this.props.extraKeybindings)
+        )
+      });
+    }
+    this.schemaRef.current.schema = this.props.schema;
+    this.schemaRef.current.lint = this.props.lint;
+  }
+  componentWillUnmount() {
+    this.editorView.current?.destroy();
+  }
+  render() {
+    const { className, theme } = this.props;
+    const themeClass = typeof theme === "string" ? `cm-theme-${theme}` : "cm-theme";
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: this.editorContainer,
+        className: `${themeClass}${className ? ` ${className}` : ""}`
+      }
+    );
+  }
+};
 export {
   CypherEditor,
   CypherParser,
@@ -1334,3 +1465,4 @@ export {
   lightThemeConstants,
   parse
 };
+//# sourceMappingURL=index.mjs.map