@neo4j-cypher/react-codemirror 1.0.1 → 1.0.3

package/es/CypherEditor.js

@@ -39,6 +39,13 @@ class CypherEditor extends Component {
       } = this.props;
       onPositionChanged && onPositionChanged(positionObject);
     });
+    _defineProperty(this, "selectionChanged", selection => {
+      this.lastSelection = selection;
+      const {
+        onSelectionChanged
+      } = this.props;
+      onSelectionChanged && onSelectionChanged(selection);
+    });
     _defineProperty(this, "autocompleteChanged", (autocompleteOpen, options, option) => {
       const {
         onAutocompleteChanged
@@ -74,6 +81,7 @@ class CypherEditor extends Component {
     };
     this.lastValue = null;
     this.lastPosition = null;
+    this.lastSelection = null;
   }
   componentDidMount() {
     const {
@@ -102,6 +110,7 @@ class CypherEditor extends Component {
       searchOpen,
       searchText,
       searchTop,
+      selection,
       tabKey,
       theme,
       tooltipAbsolute,
@@ -140,6 +149,7 @@ class CypherEditor extends Component {
       searchOpen,
       searchText,
       searchTop,
+      selection,
       tabKey,
       theme,
       tooltipAbsolute,
@@ -153,6 +163,7 @@ class CypherEditor extends Component {
     this.cypherEditor.onFocusChanged(this.focusChanged);
     this.cypherEditor.onScrollChanged(this.scrollChanged);
     this.cypherEditor.onPositionChanged(this.positionChanged);
+    this.cypherEditor.onSelectionChanged(this.selectionChanged);
     this.cypherEditor.onAutocompleteChanged(this.autocompleteChanged);
     this.cypherEditor.onSearchChanged(this.searchChanged);
     this.cypherEditor.onLineNumberClick(this.lineNumberClick);
@@ -166,6 +177,7 @@ class CypherEditor extends Component {
       this.cypherEditor.offFocusChanged(this.focusChanged);
       this.cypherEditor.offScrollChanged(this.scrollChanged);
       this.cypherEditor.offPositionChanged(this.positionChanged);
+      this.cypherEditor.offSelectionChanged(this.selectionChanged);
       this.cypherEditor.offAutocompleteChanged(this.autocompleteChanged);
       this.cypherEditor.offSearchChanged(this.searchChanged);
       this.cypherEditor.offLineNumberClick(this.lineNumberClick);
@@ -210,6 +222,13 @@ class CypherEditor extends Component {
         this.lastPosition = position;
       }
     }
+    if (key === "selection") {
+      if (prop[key] === this.lastSelection) {
+        return;
+      } else {
+        this.lastSelection = prop[key];
+      }
+    }
     const methodName = "set" + key[0].toUpperCase() + key.slice(1);
     if (this.cypherEditor[methodName]) {
       this.cypherEditor[methodName](prop[key]);
@@ -226,7 +245,8 @@ class CypherEditor extends Component {
   render() {
     const {
       className,
-      focusedClassName
+      focusedClassName,
+      style
     } = this.props;
     const {
       focused
@@ -234,6 +254,7 @@ class CypherEditor extends Component {
     const editorClassName = (className ? className + " " : "") + (focused && focusedClassName ? focusedClassName : "");
     return /*#__PURE__*/_jsx("div", {
       className: editorClassName,
+      style: style,
       ref: this.setEditorRef
     });
   }

package/lib/CypherEditor.js

@@ -48,6 +48,13 @@ class CypherEditor extends _react.Component {
       } = this.props;
       onPositionChanged && onPositionChanged(positionObject);
     });
+    (0, _defineProperty2.default)(this, "selectionChanged", selection => {
+      this.lastSelection = selection;
+      const {
+        onSelectionChanged
+      } = this.props;
+      onSelectionChanged && onSelectionChanged(selection);
+    });
     (0, _defineProperty2.default)(this, "autocompleteChanged", (autocompleteOpen, options, option) => {
       const {
         onAutocompleteChanged
@@ -83,6 +90,7 @@ class CypherEditor extends _react.Component {
     };
     this.lastValue = null;
     this.lastPosition = null;
+    this.lastSelection = null;
   }
   componentDidMount() {
     const {
@@ -111,6 +119,7 @@ class CypherEditor extends _react.Component {
       searchOpen,
       searchText,
       searchTop,
+      selection,
       tabKey,
       theme,
       tooltipAbsolute,
@@ -149,6 +158,7 @@ class CypherEditor extends _react.Component {
       searchOpen,
       searchText,
       searchTop,
+      selection,
       tabKey,
       theme,
       tooltipAbsolute,
@@ -162,6 +172,7 @@ class CypherEditor extends _react.Component {
     this.cypherEditor.onFocusChanged(this.focusChanged);
     this.cypherEditor.onScrollChanged(this.scrollChanged);
     this.cypherEditor.onPositionChanged(this.positionChanged);
+    this.cypherEditor.onSelectionChanged(this.selectionChanged);
     this.cypherEditor.onAutocompleteChanged(this.autocompleteChanged);
     this.cypherEditor.onSearchChanged(this.searchChanged);
     this.cypherEditor.onLineNumberClick(this.lineNumberClick);
@@ -175,6 +186,7 @@ class CypherEditor extends _react.Component {
       this.cypherEditor.offFocusChanged(this.focusChanged);
       this.cypherEditor.offScrollChanged(this.scrollChanged);
       this.cypherEditor.offPositionChanged(this.positionChanged);
+      this.cypherEditor.offSelectionChanged(this.selectionChanged);
       this.cypherEditor.offAutocompleteChanged(this.autocompleteChanged);
       this.cypherEditor.offSearchChanged(this.searchChanged);
       this.cypherEditor.offLineNumberClick(this.lineNumberClick);
@@ -219,6 +231,13 @@ class CypherEditor extends _react.Component {
         this.lastPosition = position;
       }
     }
+    if (key === "selection") {
+      if (prop[key] === this.lastSelection) {
+        return;
+      } else {
+        this.lastSelection = prop[key];
+      }
+    }
     const methodName = "set" + key[0].toUpperCase() + key.slice(1);
     if (this.cypherEditor[methodName]) {
       this.cypherEditor[methodName](prop[key]);
@@ -235,7 +254,8 @@ class CypherEditor extends _react.Component {
   render() {
     const {
       className,
-      focusedClassName
+      focusedClassName,
+      style
     } = this.props;
     const {
       focused
@@ -243,6 +263,7 @@ class CypherEditor extends _react.Component {
     const editorClassName = (className ? className + " " : "") + (focused && focusedClassName ? focusedClassName : "");
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: editorClassName,
+      style: style,
       ref: this.setEditorRef
     });
   }

package/package.json

@@ -7,7 +7,7 @@
     "codemirror",
     "codemirror 6"
   ],
-  "version": "1.0.1",
+  "version": "1.0.3",
   "author": "Neo4j Inc.",
   "license": "Apache-2.0",
   "main": "./lib/react-codemirror.js",
@@ -50,7 +50,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
-    "@neo4j-cypher/codemirror": "1.0.1"
+    "@neo4j-cypher/codemirror": "1.0.2"
   },
   "peerDependencies": {
     "react": ">=16"

package/src/CypherEditor.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { Extension } from "@codemirror/state";
+import type { Extension, EditorSelection } from "@codemirror/state";
 import type { EditorSupportSchema } from "@neo4j-cypher/editor-support";
 import type {
   PositionAny,
@@ -14,7 +14,8 @@ import type {
   ValueChangedListener,
   KeyListener,
   LineNumberClickListener,
-  LineNumberFormatter
+  LineNumberFormatter,
+  SelectionChangedListener
 } from "@neo4j-cypher/codemirror";
 
 /**
@@ -199,6 +200,12 @@ export interface CypherEditorProps {
    * @defaultValue false
    */
   searchTop?: boolean;
+  /**
+   * The editor text selection
+   *
+   * @defaultValue undefined
+   */
+  selection?: EditorSelection;
   /**
    * Whether the tab key is enabled
    *
@@ -231,7 +238,10 @@ export interface CypherEditorProps {
    * A css class name to be added to the root editor dom element when it is focused
    */
   focusedClassName?: string;
-
+  /**
+   * a style prop to be applied to the root editor dom element
+   */
+  style?: React.CSSProperties;
   /**
    * A listener for when the editor api gets created
    */
@@ -260,6 +270,10 @@ export interface CypherEditorProps {
    * A listener for when the editor search state changes
    */
   onSearchChanged?: SearchChangedListener;
+  /**
+   * A listener for when the editor text selection changes
+   */
+  onSelectionChanged?: SelectionChangedListener;
   /**
    * A listener for when the user clicks an editor line number
    */