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

package/dist/esm/index.mjs

@@ -1,6 +1,5 @@
 // src/index.ts
 import { CypherParser, parse } from "@neo4j-cypher/language-support";
-import * as ReactCodemirror from "@uiw/react-codemirror";
 
 // src/CypherEditor.tsx
 import {
@@ -15,6 +14,167 @@ import {
 } from "@codemirror/view";
 import { Component, createRef } from "react";
 
+// src/history-navigation.ts
+import { StateEffect } from "@codemirror/state";
+import { keymap } from "@codemirror/view";
+import { StateField } from "@codemirror/state";
+var DRAFT_ENTRY_INDEX = -1;
+var historyInitialState = {
+  history: [],
+  index: DRAFT_ENTRY_INDEX,
+  documentUpdate: null,
+  draft: ""
+};
+var historyState = StateField.define({
+  create() {
+    return historyInitialState;
+  },
+  toJSON(value) {
+    return JSON.stringify(value);
+  },
+  update(value, transaction) {
+    for (const effect of transaction.effects) {
+      if (effect.is(moveInHistory)) {
+        if (value.history.length === 0) {
+          return {
+            ...value,
+            documentUpdate: null
+          };
+        }
+        const currentHistoryIndex = value.index;
+        if (effect.value === "BACK") {
+          const newHistoryIndex = currentHistoryIndex + 1;
+          if (newHistoryIndex === value.history.length) {
+            return {
+              ...value,
+              documentUpdate: null
+            };
+          }
+          let draft = value.draft;
+          if (currentHistoryIndex === DRAFT_ENTRY_INDEX) {
+            draft = transaction.state.doc.toString();
+          }
+          return {
+            ...value,
+            draft,
+            index: newHistoryIndex,
+            documentUpdate: value.history[newHistoryIndex]
+          };
+        } else if (effect.value === "FORWARDS") {
+          const newHistoryIndex = currentHistoryIndex - 1;
+          if (currentHistoryIndex === DRAFT_ENTRY_INDEX) {
+            return { ...value, documentUpdate: null };
+          }
+          if (newHistoryIndex === DRAFT_ENTRY_INDEX) {
+            return {
+              ...value,
+              index: newHistoryIndex,
+              documentUpdate: value.draft
+            };
+          } else {
+            return {
+              ...value,
+              index: newHistoryIndex,
+              documentUpdate: value.history[newHistoryIndex]
+            };
+          }
+        }
+      } else if (effect.is(replaceHistory)) {
+        return {
+          ...value,
+          index: DRAFT_ENTRY_INDEX,
+          history: effect.value
+        };
+      }
+    }
+    return value;
+  }
+});
+var moveInHistory = StateEffect.define();
+var replaceHistory = StateEffect.define();
+function navigateHistory(view, direction) {
+  view.dispatch(
+    view.state.update({
+      effects: moveInHistory.of(direction),
+      selection: { anchor: view.state.doc.length }
+    })
+  );
+  const updatedHistory = view.state.field(historyState, false);
+  if (updatedHistory.documentUpdate !== null) {
+    view.dispatch(
+      view.state.update({
+        changes: {
+          from: 0,
+          to: view.state.doc.length,
+          insert: updatedHistory.documentUpdate
+        }
+      })
+    );
+  }
+}
+var replMode = ({ history: history2 }) => {
+  return [
+    historyState.init(() => ({
+      ...historyInitialState,
+      history: history2
+    })),
+    keymap.of([
+      {
+        key: "ArrowUp",
+        preventDefault: true,
+        run: (view) => {
+          const { empty, head } = view.state.selection.main;
+          if (!empty || head !== 0) {
+            return false;
+          }
+          navigateHistory(view, "BACK");
+          return true;
+        }
+      },
+      {
+        mac: "Cmd-ArrowUp",
+        win: "Ctrl-ArrowUp",
+        linux: "Ctrl-ArrowUp",
+        preventDefault: true,
+        run: (view) => {
+          const { empty, head } = view.state.selection.main;
+          if (!empty || head !== 0) {
+            return false;
+          }
+          navigateHistory(view, "BACK");
+          return true;
+        }
+      },
+      {
+        key: "ArrowDown",
+        preventDefault: true,
+        run: (view) => {
+          const { empty, head } = view.state.selection.main;
+          if (!empty || head !== view.state.doc.length) {
+            return false;
+          }
+          navigateHistory(view, "FORWARDS");
+          return true;
+        }
+      },
+      {
+        mac: "Cmd-ArrowDown",
+        win: "Ctrl-ArrowDown",
+        linux: "Ctrl-ArrowDown",
+        preventDefault: true,
+        run: (view) => {
+          const { empty, head } = view.state.selection.main;
+          if (!empty || head !== view.state.doc.length) {
+            return false;
+          }
+          navigateHistory(view, "FORWARDS");
+          return true;
+        }
+      }
+    ])
+  ];
+};
+
 // src/lang-cypher/lang-cypher.ts
 import {
   defineLanguageFacet,
@@ -267,9 +427,9 @@ import {
   crosshairCursor,
   drawSelection,
   dropCursor,
-  EditorView,
+  EditorView as EditorView2,
   highlightSpecialChars,
-  keymap,
+  keymap as keymap2,
   rectangularSelection
 } from "@codemirror/view";
 import { lintKeymap } from "@codemirror/lint";
@@ -397,7 +557,7 @@ var basicNeo4jSetup = () => {
       addToOptions: [
         {
           render(completion, state) {
-            const isDarkTheme = state.facet(EditorView.darkTheme);
+            const isDarkTheme = state.facet(EditorView2.darkTheme);
             const icon = document.createElement("span");
             icon.innerHTML = getIconForType(completion.type, isDarkTheme);
             const svgElement = icon.children[0];
@@ -413,191 +573,10 @@ var basicNeo4jSetup = () => {
   extensions.push(rectangularSelection());
   extensions.push(crosshairCursor());
   extensions.push(highlightSelectionMatches());
-  extensions.push(keymap.of(keymaps));
+  extensions.push(keymap2.of(keymaps));
   return extensions;
 };
 
-// src/repl-mode.ts
-import { StateEffect } from "@codemirror/state";
-import { keymap as keymap2 } from "@codemirror/view";
-import { StateField } from "@codemirror/state";
-var DRAFT_ENTRY_INDEX = -1;
-var historyInitialState = {
-  history: [],
-  index: DRAFT_ENTRY_INDEX,
-  documentUpdate: null,
-  draft: ""
-};
-var historyState = StateField.define({
-  create() {
-    return historyInitialState;
-  },
-  toJSON(value) {
-    return JSON.stringify(value);
-  },
-  update(value, transaction) {
-    for (const effect of transaction.effects) {
-      if (effect.is(moveInHistory)) {
-        if (value.history.length === 0) {
-          return {
-            ...value,
-            documentUpdate: null
-          };
-        }
-        const currentHistoryIndex = value.index;
-        if (effect.value === "BACK") {
-          const newHistoryIndex = currentHistoryIndex + 1;
-          if (newHistoryIndex === value.history.length) {
-            return {
-              ...value,
-              documentUpdate: null
-            };
-          }
-          let draft = value.draft;
-          if (currentHistoryIndex === DRAFT_ENTRY_INDEX) {
-            draft = transaction.state.doc.toString();
-          }
-          return {
-            ...value,
-            draft,
-            index: newHistoryIndex,
-            documentUpdate: value.history[newHistoryIndex]
-          };
-        } else if (effect.value === "FORWARDS") {
-          const newHistoryIndex = currentHistoryIndex - 1;
-          if (currentHistoryIndex === DRAFT_ENTRY_INDEX) {
-            return { ...value, documentUpdate: null };
-          }
-          if (newHistoryIndex === DRAFT_ENTRY_INDEX) {
-            return {
-              ...value,
-              index: newHistoryIndex,
-              documentUpdate: value.draft
-            };
-          } else {
-            return {
-              ...value,
-              index: newHistoryIndex,
-              documentUpdate: value.history[newHistoryIndex]
-            };
-          }
-        }
-      } else if (effect.is(pushToHistory)) {
-        return {
-          ...value,
-          index: DRAFT_ENTRY_INDEX,
-          history: [effect.value, ...value.history]
-        };
-      }
-    }
-    return value;
-  }
-});
-var moveInHistory = StateEffect.define();
-var pushToHistory = StateEffect.define();
-function navigateHistory(view, direction) {
-  view.dispatch(
-    view.state.update({
-      effects: moveInHistory.of(direction),
-      selection: { anchor: view.state.doc.length }
-    })
-  );
-  const updatedHistory = view.state.field(historyState, false);
-  if (updatedHistory.documentUpdate !== null) {
-    view.dispatch(
-      view.state.update({
-        changes: {
-          from: 0,
-          to: view.state.doc.length,
-          insert: updatedHistory.documentUpdate
-        }
-      })
-    );
-  }
-}
-var replMode = ({
-  onExecute,
-  onNewHistoryEntry,
-  initialHistory
-}) => {
-  return [
-    historyState.init(() => ({
-      ...historyInitialState,
-      history: initialHistory
-    })),
-    keymap2.of([
-      {
-        key: "Ctrl-Enter",
-        mac: "Mod-Enter",
-        preventDefault: true,
-        run: (view) => {
-          const doc = view.state.doc.toString();
-          if (doc.trim() !== "") {
-            onExecute?.(doc);
-            onNewHistoryEntry?.(doc);
-            view.dispatch({
-              effects: pushToHistory.of(doc)
-            });
-          }
-          return true;
-        }
-      },
-      {
-        key: "ArrowUp",
-        preventDefault: true,
-        run: (view) => {
-          const { empty, head } = view.state.selection.main;
-          if (!empty || head !== 0) {
-            return false;
-          }
-          navigateHistory(view, "BACK");
-          return true;
-        }
-      },
-      {
-        mac: "Cmd-ArrowUp",
-        win: "Ctrl-ArrowUp",
-        linux: "Ctrl-ArrowUp",
-        preventDefault: true,
-        run: (view) => {
-          const { empty, head } = view.state.selection.main;
-          if (!empty || head !== 0) {
-            return false;
-          }
-          navigateHistory(view, "BACK");
-          return true;
-        }
-      },
-      {
-        key: "ArrowDown",
-        preventDefault: true,
-        run: (view) => {
-          const { empty, head } = view.state.selection.main;
-          if (!empty || head !== view.state.doc.length) {
-            return false;
-          }
-          navigateHistory(view, "FORWARDS");
-          return true;
-        }
-      },
-      {
-        mac: "Cmd-ArrowDown",
-        win: "Ctrl-ArrowDown",
-        linux: "Ctrl-ArrowDown",
-        preventDefault: true,
-        run: (view) => {
-          const { empty, head } = view.state.selection.main;
-          if (!empty || head !== view.state.doc.length) {
-            return false;
-          }
-          navigateHistory(view, "FORWARDS");
-          return true;
-        }
-      }
-    ])
-  ];
-};
-
 // src/themes.ts
 import { light, mirage } from "ayu";
 
@@ -1283,6 +1262,20 @@ function getThemeExtension(theme, inheritBgColor) {
 
 // src/CypherEditor.tsx
 import { jsx } from "react/jsx-runtime";
+var executeKeybinding = (onExecute) => onExecute ? [
+  {
+    key: "Ctrl-Enter",
+    mac: "Mod-Enter",
+    preventDefault: true,
+    run: (view) => {
+      const doc = view.state.doc.toString();
+      if (doc.trim() !== "") {
+        onExecute(doc);
+      }
+      return true;
+    }
+  }
+] : [];
 var themeCompartment = new Compartment();
 var keyBindingCompartment = new Compartment();
 var ExternalEdit = Annotation.define();
@@ -1336,28 +1329,21 @@ var CypherEditor = class extends Component {
     overrideThemeBackgroundColor: false,
     lineWrap: false,
     extraKeybindings: [],
-    initialHistory: [],
+    history: [],
     theme: "light"
   };
   componentDidMount() {
     const {
       theme,
-      onExecute,
-      initialHistory,
-      onNewHistoryEntry,
       extraKeybindings,
       lineWrap,
       overrideThemeBackgroundColor,
       schema,
       lint,
-      onChange
+      onChange,
+      onExecute
     } = this.props;
     this.schemaRef.current = { schema, lint };
-    const maybeReplMode = onExecute ? replMode({
-      onExecute,
-      initialHistory,
-      onNewHistoryEntry
-    }) : [];
     const themeExtension = getThemeExtension(
       theme,
       overrideThemeBackgroundColor
@@ -1376,12 +1362,14 @@ var CypherEditor = class extends Component {
     ] : [];
     this.editorState.current = EditorState2.create({
       extensions: [
-        maybeReplMode,
+        keyBindingCompartment.of(
+          keymap3.of([...executeKeybinding(onExecute), ...extraKeybindings])
+        ),
+        replMode(this.props),
         basicNeo4jSetup(),
         themeCompartment.of(themeExtension),
         changeListener,
         cypher(this.schemaRef.current),
-        keyBindingCompartment.of(keymap3.of(extraKeybindings)),
         lineWrap ? EditorView4.lineWrapping : [],
         lineNumbers({
           formatNumber: (a, state) => {
@@ -1431,13 +1419,21 @@ var CypherEditor = class extends Component {
         )
       });
     }
-    if (prevProps.extraKeybindings !== this.props.extraKeybindings) {
+    if (prevProps.extraKeybindings !== this.props.extraKeybindings || prevProps.onExecute !== this.props.onExecute) {
       this.editorView.current.dispatch({
         effects: keyBindingCompartment.reconfigure(
-          keymap3.of(this.props.extraKeybindings)
+          keymap3.of([
+            ...executeKeybinding(this.props.onExecute),
+            ...this.props.extraKeybindings
+          ])
         )
       });
     }
+    if (prevProps.history?.length !== this.props.history?.length) {
+      this.editorView.current.dispatch({
+        effects: replaceHistory.of(this.props.history ?? [])
+      });
+    }
     this.schemaRef.current.schema = this.props.schema;
     this.schemaRef.current.lint = this.props.lint;
   }
@@ -1459,7 +1455,6 @@ var CypherEditor = class extends Component {
 export {
   CypherEditor,
   CypherParser,
-  ReactCodemirror,
   cypher,
   darkThemeConstants,
   lightThemeConstants,