@neo4j-cypher/react-codemirror 2.0.0-next.1 → 2.0.0-next.3

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @neo4j-cypher/react-codemirror
 
+## 2.0.0-next.3
+
+### Patch Changes
+
+- Updated dependencies [a790700]
+- Updated dependencies [08db455]
+  - @neo4j-cypher/language-support@2.0.0-next.1
+
+## 2.0.0-next.2
+
+### Patch Changes
+
+- 3866e43: Editor history is now a controlled prop
+
 ## 2.0.0-next.1
 
 ### Patch Changes

package/README.md

@@ -4,7 +4,7 @@ This package can be built with `npm run build` and then published to npm with `n
 
 ## Usage
 
-`npm install @neo4j-cypher/reactcodemirror`
+`npm install @neo4j-cypher/react-codemirror@next`
 
 ```tsx
 import { useState } from 'react';
@@ -26,6 +26,9 @@ For a full example, see the [react-codemirror-playground](https://github.com/neo
 
 Currently we only support using the codemirror editor via the react wrapper, but we plan to release the codemirror extensions separately as well.
 
+## Learning codemirror
+It can take a little time to get into the CodeMirror6 ways of thinking, Trevor Harmon has a [great blog post](https://thetrevorharmon.com/blog/learning-codemirror/) explaining the cm6 "primitives". He also has a demo on how to integrate ANTLR4 with codemirror over [here](https://github.com/thetrevorharmon/zephyr-demo). 
+
 ### Completion Icons
 
 We use unmodified copies of Visual Studio Code Icons from microsofts repository [here](https://github.com/microsoft/vscode-icons) licensed under creative commons.

package/dist/cjs/index.cjs

@@ -34,6 +34,167 @@ var import_state4 = require("@codemirror/state");
 var import_view4 = require("@codemirror/view");
 var import_react = require("react");
 
+// src/history-navigation.ts
+var import_state = require("@codemirror/state");
+var import_view = require("@codemirror/view");
+var import_state2 = require("@codemirror/state");
+var DRAFT_ENTRY_INDEX = -1;
+var historyInitialState = {
+  history: [],
+  index: DRAFT_ENTRY_INDEX,
+  documentUpdate: null,
+  draft: ""
+};
+var historyState = import_state2.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 = import_state.StateEffect.define();
+var replaceHistory = import_state.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
+    })),
+    import_view.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
 var import_language2 = require("@codemirror/language");
 
@@ -257,8 +418,8 @@ var import_autocomplete2 = require("@codemirror/autocomplete");
 var import_commands = require("@codemirror/commands");
 var import_language3 = require("@codemirror/language");
 var import_search = require("@codemirror/search");
-var import_state = require("@codemirror/state");
-var import_view = require("@codemirror/view");
+var import_state3 = require("@codemirror/state");
+var import_view2 = require("@codemirror/view");
 var import_lint2 = require("@codemirror/lint");
 
 // src/icons.ts
@@ -366,11 +527,11 @@ var basicNeo4jSetup = () => {
     }
   ].flat();
   const extensions = [];
-  extensions.push((0, import_view.highlightSpecialChars)());
+  extensions.push((0, import_view2.highlightSpecialChars)());
   extensions.push((0, import_commands.history)());
-  extensions.push((0, import_view.drawSelection)());
-  extensions.push((0, import_view.dropCursor)());
-  extensions.push(import_state.EditorState.allowMultipleSelections.of(true));
+  extensions.push((0, import_view2.drawSelection)());
+  extensions.push((0, import_view2.dropCursor)());
+  extensions.push(import_state3.EditorState.allowMultipleSelections.of(true));
   extensions.push((0, import_language3.indentOnInput)());
   extensions.push(
     (0, import_language3.syntaxHighlighting)(import_language3.defaultHighlightStyle, { fallback: true })
@@ -384,7 +545,7 @@ var basicNeo4jSetup = () => {
       addToOptions: [
         {
           render(completion, state) {
-            const isDarkTheme = state.facet(import_view.EditorView.darkTheme);
+            const isDarkTheme = state.facet(import_view2.EditorView.darkTheme);
             const icon = document.createElement("span");
             icon.innerHTML = getIconForType(completion.type, isDarkTheme);
             const svgElement = icon.children[0];
@@ -397,194 +558,13 @@ var basicNeo4jSetup = () => {
       ]
     })
   );
-  extensions.push((0, import_view.rectangularSelection)());
-  extensions.push((0, import_view.crosshairCursor)());
+  extensions.push((0, import_view2.rectangularSelection)());
+  extensions.push((0, import_view2.crosshairCursor)());
   extensions.push((0, import_search.highlightSelectionMatches)());
-  extensions.push(import_view.keymap.of(keymaps));
+  extensions.push(import_view2.keymap.of(keymaps));
   return extensions;
 };
 
-// src/repl-mode.ts
-var import_state2 = require("@codemirror/state");
-var import_view2 = require("@codemirror/view");
-var import_state3 = require("@codemirror/state");
-var DRAFT_ENTRY_INDEX = -1;
-var historyInitialState = {
-  history: [],
-  index: DRAFT_ENTRY_INDEX,
-  documentUpdate: null,
-  draft: ""
-};
-var historyState = import_state3.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 = import_state2.StateEffect.define();
-var pushToHistory = import_state2.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
-    })),
-    import_view2.keymap.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
 var import_ayu = require("ayu");
 
@@ -1267,6 +1247,20 @@ function getThemeExtension(theme, inheritBgColor) {
 
 // src/CypherEditor.tsx
 var import_jsx_runtime = require("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 import_state4.Compartment();
 var keyBindingCompartment = new import_state4.Compartment();
 var ExternalEdit = import_state4.Annotation.define();
@@ -1320,28 +1314,21 @@ var CypherEditor = class extends import_react.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
@@ -1360,12 +1347,14 @@ var CypherEditor = class extends import_react.Component {
     ] : [];
     this.editorState.current = import_state4.EditorState.create({
       extensions: [
-        maybeReplMode,
+        keyBindingCompartment.of(
+          import_view4.keymap.of([...executeKeybinding(onExecute), ...extraKeybindings])
+        ),
+        replMode(this.props),
         basicNeo4jSetup(),
         themeCompartment.of(themeExtension),
         changeListener,
         cypher(this.schemaRef.current),
-        keyBindingCompartment.of(import_view4.keymap.of(extraKeybindings)),
         lineWrap ? import_view4.EditorView.lineWrapping : [],
         (0, import_view4.lineNumbers)({
           formatNumber: (a, state) => {
@@ -1415,13 +1404,21 @@ var CypherEditor = class extends import_react.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(
-          import_view4.keymap.of(this.props.extraKeybindings)
+          import_view4.keymap.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;
   }