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

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,6 +51,9 @@ class CypherEditor extends Component {
       onScrollChanged && onScrollChanged(scrollInfo);
     });
     _defineProperty(this, "positionChanged", positionObject => {
+      this.lastPosition = (positionObject || {
+        position: null
+      }).position;
       const {
         onPositionChanged
       } = this.props;
@@ -78,6 +80,8 @@ class CypherEditor extends Component {
     this.state = {
       focused: false
     };
+    this.lastValue = null;
+    this.lastPosition = null;
   }
   componentDidMount() {
     const {
@@ -87,6 +91,7 @@ class CypherEditor extends Component {
       autocompleteTriggerStrings,
       autofocus,
       history,
+      indentUnit,
       lineNumberFormatter,
       lineNumbers,
       lineWrapping,
@@ -96,6 +101,8 @@ class CypherEditor extends Component {
       readOnly,
       readOnlyCursor,
       schema,
+      search,
+      searchTop,
       tabKey,
       theme,
       tooltipAbsolute,
@@ -103,7 +110,7 @@ class CypherEditor extends Component {
       value,
       onEditorCreated
     } = this.props;
-    this.value = this.innerValue = value;
+    this.value = value;
     const {
       editor
     } = createCypherEditor(this.editorRef, {
@@ -113,6 +120,7 @@ class CypherEditor extends Component {
       autocompleteTriggerStrings,
       autofocus,
       history,
+      indentUnit,
       lineNumberFormatter,
       lineNumbers,
       lineWrapping,
@@ -122,6 +130,8 @@ class CypherEditor extends Component {
       readOnly,
       readOnlyCursor,
       schema,
+      search,
+      searchTop,
       tabKey,
       theme,
       tooltipAbsolute,
@@ -167,12 +177,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]);

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,6 +60,9 @@ class CypherEditor extends _react.Component {
       onScrollChanged && onScrollChanged(scrollInfo);
     });
     (0, _defineProperty2.default)(this, "positionChanged", positionObject => {
+      this.lastPosition = (positionObject || {
+        position: null
+      }).position;
       const {
         onPositionChanged
       } = this.props;
@@ -87,6 +89,8 @@ class CypherEditor extends _react.Component {
     this.state = {
       focused: false
     };
+    this.lastValue = null;
+    this.lastPosition = null;
   }
   componentDidMount() {
     const {
@@ -96,6 +100,7 @@ class CypherEditor extends _react.Component {
       autocompleteTriggerStrings,
       autofocus,
       history,
+      indentUnit,
       lineNumberFormatter,
       lineNumbers,
       lineWrapping,
@@ -105,6 +110,8 @@ class CypherEditor extends _react.Component {
       readOnly,
       readOnlyCursor,
       schema,
+      search,
+      searchTop,
       tabKey,
       theme,
       tooltipAbsolute,
@@ -112,7 +119,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, {
@@ -122,6 +129,7 @@ class CypherEditor extends _react.Component {
       autocompleteTriggerStrings,
       autofocus,
       history,
+      indentUnit,
       lineNumberFormatter,
       lineNumbers,
       lineWrapping,
@@ -131,6 +139,8 @@ class CypherEditor extends _react.Component {
       readOnly,
       readOnlyCursor,
       schema,
+      search,
+      searchTop,
       tabKey,
       theme,
       tooltipAbsolute,
@@ -176,12 +186,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]);

package/package.json

@@ -7,7 +7,7 @@
     "codemirror",
     "codemirror 6"
   ],
-  "version": "1.0.0-next.10",
+  "version": "1.0.0-next.12",
   "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.9",
+    "@neo4j-cypher/codemirror": "1.0.0-next.11",
     "codemirror": "^6.0.1"
   },
   "peerDependencies": {

package/src/CypherEditor.d.ts

@@ -66,6 +66,12 @@ export interface CypherEditorProps {
    * @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 +126,18 @@ 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;
+  /**
+   * Whether search is shown at the top of the editor window
+   *
+   * @defaultValue false
+   */
+  searchTop?: boolean;
   /**
    * Whether the tab key is enabled
    *
@@ -135,7 +153,7 @@ export interface CypherEditorProps {
   /**
    * Whether or not the tooltips use simple absolute position styling (vs trying to stay within bounds)
    *
-   * @defaultValue false
+   * @defaultValue true
    */
   tooltipAbsolute?: boolean;
   /**