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

package/es/CypherEditor.js

@@ -59,11 +59,17 @@ class CypherEditor extends Component {
       } = 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 {
@@ -90,6 +96,8 @@ class CypherEditor extends Component {
       autocompleteOpen,
       autocompleteTriggerStrings,
       autofocus,
+      cursorWide,
+      cypherLanguage,
       history,
       indentUnit,
       lineNumberFormatter,
@@ -102,6 +110,9 @@ class CypherEditor extends Component {
       readOnlyCursor,
       schema,
       search,
+      searchMatches,
+      searchOpen,
+      searchText,
       searchTop,
       tabKey,
       theme,
@@ -119,6 +130,8 @@ class CypherEditor extends Component {
       autocompleteOpen,
       autocompleteTriggerStrings,
       autofocus,
+      cursorWide,
+      cypherLanguage,
       history,
       indentUnit,
       lineNumberFormatter,
@@ -131,6 +144,9 @@ class CypherEditor extends Component {
       readOnlyCursor,
       schema,
       search,
+      searchMatches,
+      searchOpen,
+      searchText,
       searchTop,
       tabKey,
       theme,
@@ -144,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);
@@ -155,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();
@@ -204,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

@@ -68,11 +68,17 @@ class CypherEditor extends _react.Component {
       } = 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 {
@@ -99,6 +105,8 @@ class CypherEditor extends _react.Component {
       autocompleteOpen,
       autocompleteTriggerStrings,
       autofocus,
+      cursorWide,
+      cypherLanguage,
       history,
       indentUnit,
       lineNumberFormatter,
@@ -111,6 +119,9 @@ class CypherEditor extends _react.Component {
       readOnlyCursor,
       schema,
       search,
+      searchMatches,
+      searchOpen,
+      searchText,
       searchTop,
       tabKey,
       theme,
@@ -128,6 +139,8 @@ class CypherEditor extends _react.Component {
       autocompleteOpen,
       autocompleteTriggerStrings,
       autofocus,
+      cursorWide,
+      cypherLanguage,
       history,
       indentUnit,
       lineNumberFormatter,
@@ -140,6 +153,9 @@ class CypherEditor extends _react.Component {
       readOnlyCursor,
       schema,
       search,
+      searchMatches,
+      searchOpen,
+      searchText,
       searchTop,
       tabKey,
       theme,
@@ -153,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);
@@ -164,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();
@@ -213,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.12",
+  "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.11",
+    "@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,6 +61,24 @@ 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
    *
@@ -132,6 +151,36 @@ export interface CypherEditorProps {
    * @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
    *
@@ -195,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
    */
@@ -204,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[];
 }
 
 /**