@neo4j-cypher/react-codemirror 1.0.0-next.2 → 1.0.0-next.21

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,12 @@ class CypherEditor extends Component {
       autocompleteOpen,
       autocompleteTriggerStrings,
       autofocus,
+      bracketMatching,
+      closeBrackets,
+      cursorWide,
+      cypherLanguage,
       history,
+      indentUnit,
       lineNumberFormatter,
       lineNumbers,
       lineWrapping,
@@ -96,12 +111,21 @@ class CypherEditor extends Component {
       readOnly,
       readOnlyCursor,
       schema,
+      search,
+      searchMatches,
+      searchOpen,
+      searchText,
+      searchTop,
+      tabKey,
       theme,
+      tooltipAbsolute,
       parseOnSetValue,
       value,
-      onEditorCreated
+      onEditorCreated,
+      preExtensions,
+      postExtensions
     } = this.props;
-    this.value = this.innerValue = value;
+    this.value = value;
     const {
       editor
     } = createCypherEditor(this.editorRef, {
@@ -110,7 +134,12 @@ class CypherEditor extends Component {
       autocompleteOpen,
       autocompleteTriggerStrings,
       autofocus,
+      bracketMatching,
+      closeBrackets,
+      cursorWide,
+      cypherLanguage,
       history,
+      indentUnit,
       lineNumberFormatter,
       lineNumbers,
       lineWrapping,
@@ -120,9 +149,18 @@ class CypherEditor extends Component {
       readOnly,
       readOnlyCursor,
       schema,
+      search,
+      searchMatches,
+      searchOpen,
+      searchText,
+      searchTop,
+      tabKey,
       theme,
+      tooltipAbsolute,
       parseOnSetValue,
-      value
+      value,
+      preExtensions,
+      postExtensions
     });
     this.cypherEditor = editor;
     this.cypherEditor.onValueChanged(this.valueChanged);
@@ -130,6 +168,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);
@@ -141,6 +180,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();
@@ -163,12 +203,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]);
@@ -177,6 +230,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/es/react-codemirror.js

@@ -18,5 +18,4 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-export { default as UnstyledCypherEditor } from "./CypherEditor";
-export { default as CypherEditor } from "./CypherEditorStyled";
+export { default as CypherEditor } from "./CypherEditor";

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,12 @@ class CypherEditor extends _react.Component {
       autocompleteOpen,
       autocompleteTriggerStrings,
       autofocus,
+      bracketMatching,
+      closeBrackets,
+      cursorWide,
+      cypherLanguage,
       history,
+      indentUnit,
       lineNumberFormatter,
       lineNumbers,
       lineWrapping,
@@ -105,12 +120,21 @@ class CypherEditor extends _react.Component {
       readOnly,
       readOnlyCursor,
       schema,
+      search,
+      searchMatches,
+      searchOpen,
+      searchText,
+      searchTop,
+      tabKey,
       theme,
+      tooltipAbsolute,
       parseOnSetValue,
       value,
-      onEditorCreated
+      onEditorCreated,
+      preExtensions,
+      postExtensions
     } = this.props;
-    this.value = this.innerValue = value;
+    this.value = value;
     const {
       editor
     } = (0, _codemirror.createCypherEditor)(this.editorRef, {
@@ -119,7 +143,12 @@ class CypherEditor extends _react.Component {
       autocompleteOpen,
       autocompleteTriggerStrings,
       autofocus,
+      bracketMatching,
+      closeBrackets,
+      cursorWide,
+      cypherLanguage,
       history,
+      indentUnit,
       lineNumberFormatter,
       lineNumbers,
       lineWrapping,
@@ -129,9 +158,18 @@ class CypherEditor extends _react.Component {
       readOnly,
       readOnlyCursor,
       schema,
+      search,
+      searchMatches,
+      searchOpen,
+      searchText,
+      searchTop,
+      tabKey,
       theme,
+      tooltipAbsolute,
       parseOnSetValue,
-      value
+      value,
+      preExtensions,
+      postExtensions
     });
     this.cypherEditor = editor;
     this.cypherEditor.onValueChanged(this.valueChanged);
@@ -139,6 +177,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);
@@ -150,6 +189,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();
@@ -172,12 +212,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]);
@@ -186,6 +239,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/lib/react-codemirror.js

@@ -5,16 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 Object.defineProperty(exports, "CypherEditor", {
-  enumerable: true,
-  get: function () {
-    return _CypherEditorStyled.default;
-  }
-});
-Object.defineProperty(exports, "UnstyledCypherEditor", {
   enumerable: true,
   get: function () {
     return _CypherEditor.default;
   }
 });
-var _CypherEditor = _interopRequireDefault(require("./CypherEditor"));
-var _CypherEditorStyled = _interopRequireDefault(require("./CypherEditorStyled"));
+var _CypherEditor = _interopRequireDefault(require("./CypherEditor"));

package/package.json

@@ -7,7 +7,7 @@
     "codemirror",
     "codemirror 6"
   ],
-  "version": "1.0.0-next.2",
+  "version": "1.0.0-next.21",
   "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.2",
+    "@neo4j-cypher/codemirror": "1.0.0-next.20",
     "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,48 @@ export interface CypherEditorProps {
    * @defaultValue ["position", "readOnly", "value"]
    */
   autofocusProps?: AutofocusProp[];
+  /**
+   * Whether to show matching brackets in the editor view
+   *
+   * @defaultValue true
+   */
+  bracketMatching?: boolean;
+  /**
+   * Setting any of these props will trigger the editor to clear its undo/redo history
+   *
+   * @defaultValue ["cypherLanguage"]
+   */
+  clearHistoryProps?: AutofocusProp[];
+  /**
+   * Whether to automatically close brackets or wrap selected text with quotes on quote press
+   *
+   * @defaultValue true
+   */
+  closeBrackets?: boolean;
+  /**
+   * 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,12 +157,66 @@ 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
+   *
+   * @defaultValue true
+   */
+  tabKey?: boolean;
   /**
    * Whether to use the light or dark theme for the editor
    *
    * @defaultValue "light"
    */
   theme?: Theme;
+  /**
+   * Whether or not the tooltips use simple absolute position styling (vs trying to stay within bounds)
+   *
+   * @defaultValue true
+   */
+  tooltipAbsolute?: boolean;
   /**
    * The editor text value
    *
@@ -165,6 +256,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
    */
@@ -174,9 +269,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[];
 }
 
 /**

package/src/react-codemirror.d.ts

@@ -15,8 +15,4 @@
  *
  * @packageDocumentation
  */
-export {
-  default as UnstyledCypherEditor,
-  CypherEditorProps
-} from "./CypherEditor";
-export { default as CypherEditor } from "./CypherEditorStyled";
+export { default as CypherEditor, CypherEditorProps } from "./CypherEditor";

package/es/CypherEditorStyled.js

@@ -1,22 +0,0 @@
-/*
- * Copyright (c) "Neo4j"
- * Neo4j Sweden AB [http://neo4j.com]
- *
- * This file is part of Neo4j.
- *
- * Neo4j is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-import "@neo4j-cypher/codemirror/css/cypher-codemirror.css";
-export { default } from "./CypherEditor";

package/lib/CypherEditorStyled.js

@@ -1,14 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _CypherEditor.default;
-  }
-});
-require("@neo4j-cypher/codemirror/css/cypher-codemirror.css");
-var _CypherEditor = _interopRequireDefault(require("./CypherEditor"));

package/src/CypherEditorStyled.d.ts

@@ -1,10 +0,0 @@
-import * as React from "react";
-import type { CypherEditorProps } from "./CypherEditor";
-
-/**
- * Cypher Editor React Component (with css styles included)
- */
-export default class CypherEditorStyled extends React.Component<
-  CypherEditorProps,
-  any
-> {}