@neo4j-cypher/react-codemirror 1.0.0-next.11 → 1.0.0-next.13

package/es/CypherEditor.js

@@ -29,8 +29,7 @@ class CypherEditor extends Component {
       this.editorRef = ref;
     });
     _defineProperty(this, "valueChanged", (value, changes) => {
-      this.innerValue = value;
-      this.value = value;
+      this.lastValue = value;
       const {
         onValueChanged
       } = this.props;
@@ -52,16 +51,25 @@ class CypherEditor extends Component {
       onScrollChanged && onScrollChanged(scrollInfo);
     });
     _defineProperty(this, "positionChanged", positionObject => {
+      this.lastPosition = (positionObject || {
+        position: null
+      }).position;
       const {
         onPositionChanged
       } = this.props;
       onPositionChanged && onPositionChanged(positionObject);
     });
-    _defineProperty(this, "autocompleteChanged", (autocompleteOpen, from, options) => {
+    _defineProperty(this, "autocompleteChanged", (autocompleteOpen, options, option) => {
       const {
         onAutocompleteChanged
       } = this.props;
-      onAutocompleteChanged && onAutocompleteChanged(autocompleteOpen, from, options);
+      onAutocompleteChanged && onAutocompleteChanged(autocompleteOpen, options, option);
+    });
+    _defineProperty(this, "searchChanged", (searchOpen, text, matches) => {
+      const {
+        onSearchChanged
+      } = this.props;
+      onSearchChanged && onSearchChanged(searchOpen, text, matches);
     });
     _defineProperty(this, "lineNumberClick", (line, event) => {
       const {
@@ -78,6 +86,8 @@ class CypherEditor extends Component {
     this.state = {
       focused: false
     };
+    this.lastValue = null;
+    this.lastPosition = null;
   }
   componentDidMount() {
     const {
@@ -86,7 +96,10 @@ class CypherEditor extends Component {
       autocompleteOpen,
       autocompleteTriggerStrings,
       autofocus,
+      cursorWide,
+      cypherLanguage,
       history,
+      indentUnit,
       lineNumberFormatter,
       lineNumbers,
       lineWrapping,
@@ -96,6 +109,11 @@ class CypherEditor extends Component {
       readOnly,
       readOnlyCursor,
       schema,
+      search,
+      searchMatches,
+      searchOpen,
+      searchText,
+      searchTop,
       tabKey,
       theme,
       tooltipAbsolute,
@@ -103,7 +121,7 @@ class CypherEditor extends Component {
       value,
       onEditorCreated
     } = this.props;
-    this.value = this.innerValue = value;
+    this.value = value;
     const {
       editor
     } = createCypherEditor(this.editorRef, {
@@ -112,7 +130,10 @@ class CypherEditor extends Component {
       autocompleteOpen,
       autocompleteTriggerStrings,
       autofocus,
+      cursorWide,
+      cypherLanguage,
       history,
+      indentUnit,
       lineNumberFormatter,
       lineNumbers,
       lineWrapping,
@@ -122,6 +143,11 @@ class CypherEditor extends Component {
       readOnly,
       readOnlyCursor,
       schema,
+      search,
+      searchMatches,
+      searchOpen,
+      searchText,
+      searchTop,
       tabKey,
       theme,
       tooltipAbsolute,
@@ -134,6 +160,7 @@ class CypherEditor extends Component {
     this.cypherEditor.onScrollChanged(this.scrollChanged);
     this.cypherEditor.onPositionChanged(this.positionChanged);
     this.cypherEditor.onAutocompleteChanged(this.autocompleteChanged);
+    this.cypherEditor.onSearchChanged(this.searchChanged);
     this.cypherEditor.onLineNumberClick(this.lineNumberClick);
     this.cypherEditor.onKeyDown(this.keyDown);
     onEditorCreated && onEditorCreated(this.cypherEditor);
@@ -145,6 +172,7 @@ class CypherEditor extends Component {
       this.cypherEditor.offScrollChanged(this.scrollChanged);
       this.cypherEditor.offPositionChanged(this.positionChanged);
       this.cypherEditor.offAutocompleteChanged(this.autocompleteChanged);
+      this.cypherEditor.offSearchChanged(this.searchChanged);
       this.cypherEditor.offLineNumberClick(this.lineNumberClick);
       this.cypherEditor.offKeyDown(this.keyDown);
       this.cypherEditor.destroy();
@@ -167,12 +195,25 @@ class CypherEditor extends Component {
       return;
     }
     const key = Object.keys(prop).pop();
-
-    // Call setValue only if the change comes from the outside
-    if (key === "value" && this.innerValue === this.value) {
-      return; // TODO - this probably isn't needed for React (only needed for bind:value in Svelte?)
+    if (key === "value") {
+      if (prop[key] === this.lastValue) {
+        return;
+      } else {
+        this.lastValue = prop[key];
+      }
+    }
+    if (key === "position") {
+      const {
+        position
+      } = this.cypherEditor.getPositionForValue(prop[key]) || {
+        position: null
+      };
+      if (position === this.lastPosition) {
+        return;
+      } else {
+        this.lastPosition = position;
+      }
     }
-
     const methodName = "set" + key[0].toUpperCase() + key.slice(1);
     if (this.cypherEditor[methodName]) {
       this.cypherEditor[methodName](prop[key]);
@@ -181,6 +222,10 @@ class CypherEditor extends Component {
     if (autofocusProps.includes(key)) {
       this.cypherEditor.focus();
     }
+    const clearHistoryProps = this.props.clearHistoryProps !== undefined ? this.props.clearHistoryProps : defaultOptions.clearHistoryProps;
+    if (clearHistoryProps.includes(key)) {
+      this.cypherEditor.clearHistory();
+    }
   }
   render() {
     const {

package/lib/CypherEditor.js

@@ -38,8 +38,7 @@ class CypherEditor extends _react.Component {
       this.editorRef = ref;
     });
     (0, _defineProperty2.default)(this, "valueChanged", (value, changes) => {
-      this.innerValue = value;
-      this.value = value;
+      this.lastValue = value;
       const {
         onValueChanged
       } = this.props;
@@ -61,16 +60,25 @@ class CypherEditor extends _react.Component {
       onScrollChanged && onScrollChanged(scrollInfo);
     });
     (0, _defineProperty2.default)(this, "positionChanged", positionObject => {
+      this.lastPosition = (positionObject || {
+        position: null
+      }).position;
       const {
         onPositionChanged
       } = this.props;
       onPositionChanged && onPositionChanged(positionObject);
     });
-    (0, _defineProperty2.default)(this, "autocompleteChanged", (autocompleteOpen, from, options) => {
+    (0, _defineProperty2.default)(this, "autocompleteChanged", (autocompleteOpen, options, option) => {
       const {
         onAutocompleteChanged
       } = this.props;
-      onAutocompleteChanged && onAutocompleteChanged(autocompleteOpen, from, options);
+      onAutocompleteChanged && onAutocompleteChanged(autocompleteOpen, options, option);
+    });
+    (0, _defineProperty2.default)(this, "searchChanged", (searchOpen, text, matches) => {
+      const {
+        onSearchChanged
+      } = this.props;
+      onSearchChanged && onSearchChanged(searchOpen, text, matches);
     });
     (0, _defineProperty2.default)(this, "lineNumberClick", (line, event) => {
       const {
@@ -87,6 +95,8 @@ class CypherEditor extends _react.Component {
     this.state = {
       focused: false
     };
+    this.lastValue = null;
+    this.lastPosition = null;
   }
   componentDidMount() {
     const {
@@ -95,7 +105,10 @@ class CypherEditor extends _react.Component {
       autocompleteOpen,
       autocompleteTriggerStrings,
       autofocus,
+      cursorWide,
+      cypherLanguage,
       history,
+      indentUnit,
       lineNumberFormatter,
       lineNumbers,
       lineWrapping,
@@ -105,6 +118,11 @@ class CypherEditor extends _react.Component {
       readOnly,
       readOnlyCursor,
       schema,
+      search,
+      searchMatches,
+      searchOpen,
+      searchText,
+      searchTop,
       tabKey,
       theme,
       tooltipAbsolute,
@@ -112,7 +130,7 @@ class CypherEditor extends _react.Component {
       value,
       onEditorCreated
     } = this.props;
-    this.value = this.innerValue = value;
+    this.value = value;
     const {
       editor
     } = (0, _codemirror.createCypherEditor)(this.editorRef, {
@@ -121,7 +139,10 @@ class CypherEditor extends _react.Component {
       autocompleteOpen,
       autocompleteTriggerStrings,
       autofocus,
+      cursorWide,
+      cypherLanguage,
       history,
+      indentUnit,
       lineNumberFormatter,
       lineNumbers,
       lineWrapping,
@@ -131,6 +152,11 @@ class CypherEditor extends _react.Component {
       readOnly,
       readOnlyCursor,
       schema,
+      search,
+      searchMatches,
+      searchOpen,
+      searchText,
+      searchTop,
       tabKey,
       theme,
       tooltipAbsolute,
@@ -143,6 +169,7 @@ class CypherEditor extends _react.Component {
     this.cypherEditor.onScrollChanged(this.scrollChanged);
     this.cypherEditor.onPositionChanged(this.positionChanged);
     this.cypherEditor.onAutocompleteChanged(this.autocompleteChanged);
+    this.cypherEditor.onSearchChanged(this.searchChanged);
     this.cypherEditor.onLineNumberClick(this.lineNumberClick);
     this.cypherEditor.onKeyDown(this.keyDown);
     onEditorCreated && onEditorCreated(this.cypherEditor);
@@ -154,6 +181,7 @@ class CypherEditor extends _react.Component {
       this.cypherEditor.offScrollChanged(this.scrollChanged);
       this.cypherEditor.offPositionChanged(this.positionChanged);
       this.cypherEditor.offAutocompleteChanged(this.autocompleteChanged);
+      this.cypherEditor.offSearchChanged(this.searchChanged);
       this.cypherEditor.offLineNumberClick(this.lineNumberClick);
       this.cypherEditor.offKeyDown(this.keyDown);
       this.cypherEditor.destroy();
@@ -176,12 +204,25 @@ class CypherEditor extends _react.Component {
       return;
     }
     const key = Object.keys(prop).pop();
-
-    // Call setValue only if the change comes from the outside
-    if (key === "value" && this.innerValue === this.value) {
-      return; // TODO - this probably isn't needed for React (only needed for bind:value in Svelte?)
+    if (key === "value") {
+      if (prop[key] === this.lastValue) {
+        return;
+      } else {
+        this.lastValue = prop[key];
+      }
+    }
+    if (key === "position") {
+      const {
+        position
+      } = this.cypherEditor.getPositionForValue(prop[key]) || {
+        position: null
+      };
+      if (position === this.lastPosition) {
+        return;
+      } else {
+        this.lastPosition = position;
+      }
     }
-
     const methodName = "set" + key[0].toUpperCase() + key.slice(1);
     if (this.cypherEditor[methodName]) {
       this.cypherEditor[methodName](prop[key]);
@@ -190,6 +231,10 @@ class CypherEditor extends _react.Component {
     if (autofocusProps.includes(key)) {
       this.cypherEditor.focus();
     }
+    const clearHistoryProps = this.props.clearHistoryProps !== undefined ? this.props.clearHistoryProps : _codemirror.defaultOptions.clearHistoryProps;
+    if (clearHistoryProps.includes(key)) {
+      this.cypherEditor.clearHistory();
+    }
   }
   render() {
     const {

package/package.json

@@ -7,7 +7,7 @@
     "codemirror",
     "codemirror 6"
   ],
-  "version": "1.0.0-next.11",
+  "version": "1.0.0-next.13",
   "author": "Neo4j Inc.",
   "license": "GPL-3.0",
   "main": "./lib/react-codemirror.js",
@@ -38,7 +38,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.6",
-    "@neo4j-cypher/codemirror": "1.0.0-next.10",
+    "@neo4j-cypher/codemirror": "1.0.0-next.12",
     "codemirror": "^6.0.1"
   },
   "peerDependencies": {

package/src/CypherEditor.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-// import type { Extension } from "@codemirror/state";
+import type { Extension } from "@codemirror/state";
 import type { EditorSupportSchema } from "@neo4j-cypher/editor-support";
 import type {
   PositionAny,
@@ -10,6 +10,7 @@ import type {
   PositionChangedListener,
   FocusChangedListener,
   ScrollChangedListener,
+  SearchChangedListener,
   ValueChangedListener,
   KeyDownListener,
   LineNumberClickListener,
@@ -33,7 +34,7 @@ export interface CypherEditorProps {
    */
   autocompleteCloseOnBlur?: boolean;
   /**
-   * Whether the autocomplete window is open
+   * Whether the autocomplete panel is open
    *
    * @remarks
    *
@@ -60,12 +61,36 @@ export interface CypherEditorProps {
    * @defaultValue ["position", "readOnly", "value"]
    */
   autofocusProps?: AutofocusProp[];
+  /**
+   * setting any of these props will trigger the editor to clear its undo/redo history
+   *
+   * @defaultValue ["cypherLanguage"]
+   */
+  clearHistoryProps?: AutofocusProp[];
+  /**
+   * Whether the wide cursor should be shown
+   *
+   * @defaultValue true
+   */
+  cursorWide?: boolean;
+  /**
+   * Whether or not cypher language extensions are enabled
+   *
+   * @defaultValue true
+   */
+  cypherLanguage?: boolean;
   /**
    * Whether the editor maintains an undo/redo history
    *
    * @defaultValue true
    */
   history?: boolean;
+  /**
+   * The indent text to use when tabKey is enabled
+   *
+   * @defaultValue "  "
+   */
+  indentUnit?: string;
   /**
    * The formatter for the line numbers of the editor
    *
@@ -120,6 +145,48 @@ export interface CypherEditorProps {
    * The schema making the editor aware of things such as node labels & relationship types & procedures in the current graph database
    */
   schema?: EditorSupportSchema;
+  /**
+   * Whether search is enabled
+   *
+   * @defaultValue true
+   */
+  search?: boolean;
+  /**
+   * The max number of search matches to be included with search changed callbacks
+   *
+   * @remarks
+   *
+   * Must be between 0 and 1000, 0 means no searching for matches (better for performance)
+   *
+   * @defaultValue 0
+   */
+  searchMatches?: number;
+  /**
+   * Whether the search panel is open
+   *
+   * @remarks
+   *
+   * Changing this can be used to manually control the search open state
+   *
+   * @defaultValue `false`
+   */
+  searchOpen?: boolean;
+  /**
+   * The search text for the search panel
+   *
+   * @remarks
+   *
+   * Changing this can be used to manually control the search panel text
+   *
+   * @defaultValue ""
+   */
+  searchText?: string;
+  /**
+   * Whether search is shown at the top of the editor window
+   *
+   * @defaultValue false
+   */
+  searchTop?: boolean;
   /**
    * Whether the tab key is enabled
    *
@@ -177,6 +244,10 @@ export interface CypherEditorProps {
    * A listener for when the editor autocompletion state changes
    */
   onAutocompleteChanged?: AutocompleteChangedListener;
+  /**
+   * A listener for when the editor search state changes
+   */
+  onSearchChanged?: SearchChangedListener;
   /**
    * A listener for when the user clicks an editor line number
    */
@@ -186,9 +257,18 @@ export interface CypherEditorProps {
    */
   onKeyDown?: KeyDownListener;
 
-  // TODO - add these props
-  // preExtensions?: Extension[],
-  // postExtensions?: Extension[]
+  /**
+   * The codemirror 6 extensions that should be added to the editor before the cypher language support extensions.
+   *
+   * @defaultValue undefined
+   */
+  preExtensions?: Extension[];
+  /**
+   * The codemirror 6 extensions that should be added to the editor after the cypher language support extensions.
+   *
+   * @defaultValue undefined
+   */
+  postExtensions?: Extension[];
 }
 
 /**