@neo4j-cypher/react-codemirror 1.0.0-next.8 → 1.0.0

package/es/CypherEditor.js

@@ -1,24 +1,4 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-/*
- * 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 React, { Component } from "react";
 import { createCypherEditor, reactiveOptionKeys, defaultOptions } from "@neo4j-cypher/codemirror";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -29,8 +9,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 +31,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 +66,8 @@ class CypherEditor extends Component {
     this.state = {
       focused: false
     };
+    this.lastValue = null;
+    this.lastPosition = null;
   }
   componentDidMount() {
     const {
@@ -86,8 +76,12 @@ class CypherEditor extends Component {
       autocompleteOpen,
       autocompleteTriggerStrings,
       autofocus,
+      bracketMatching,
+      closeBrackets,
+      cursorWide,
+      cypherLanguage,
       history,
-      indentWithTab,
+      indentUnit,
       lineNumberFormatter,
       lineNumbers,
       lineWrapping,
@@ -97,12 +91,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, {
@@ -111,8 +114,12 @@ class CypherEditor extends Component {
       autocompleteOpen,
       autocompleteTriggerStrings,
       autofocus,
+      bracketMatching,
+      closeBrackets,
+      cursorWide,
+      cypherLanguage,
       history,
-      indentWithTab,
+      indentUnit,
       lineNumberFormatter,
       lineNumbers,
       lineWrapping,
@@ -122,9 +129,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);
@@ -132,6 +148,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);
@@ -143,6 +160,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();
@@ -165,12 +183,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]);
@@ -179,6 +210,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

@@ -1,21 +1 @@
-/*
- * 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/>.
- */
-
 export { default as CypherEditor } from "./CypherEditor";

package/lib/CypherEditor.js

@@ -11,26 +11,6 @@ var _codemirror = require("@neo4j-cypher/codemirror");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-/*
- * 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/>.
- */
-
 class CypherEditor extends _react.Component {
   constructor(props) {
     super(props);
@@ -38,8 +18,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 +40,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 +75,8 @@ class CypherEditor extends _react.Component {
     this.state = {
       focused: false
     };
+    this.lastValue = null;
+    this.lastPosition = null;
   }
   componentDidMount() {
     const {
@@ -95,8 +85,12 @@ class CypherEditor extends _react.Component {
       autocompleteOpen,
       autocompleteTriggerStrings,
       autofocus,
+      bracketMatching,
+      closeBrackets,
+      cursorWide,
+      cypherLanguage,
       history,
-      indentWithTab,
+      indentUnit,
       lineNumberFormatter,
       lineNumbers,
       lineWrapping,
@@ -106,12 +100,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, {
@@ -120,8 +123,12 @@ class CypherEditor extends _react.Component {
       autocompleteOpen,
       autocompleteTriggerStrings,
       autofocus,
+      bracketMatching,
+      closeBrackets,
+      cursorWide,
+      cypherLanguage,
       history,
-      indentWithTab,
+      indentUnit,
       lineNumberFormatter,
       lineNumbers,
       lineWrapping,
@@ -131,9 +138,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);
@@ -141,6 +157,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);
@@ -152,6 +169,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();
@@ -174,12 +192,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]);
@@ -188,6 +219,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,18 +7,30 @@
     "codemirror",
     "codemirror 6"
   ],
-  "version": "1.0.0-next.8",
+  "version": "1.0.0",
   "author": "Neo4j Inc.",
-  "license": "GPL-3.0",
+  "license": "Apache-2.0",
   "main": "./lib/react-codemirror.js",
   "module": "./es/react-codemirror.js",
+  "exports": {
+    ".": {
+      "import": "./es/react-codemirror.js",
+      "require": "./lib/react-codemirror.js"
+    },
+    "./src/react-codemirror.d.ts": {
+      "import": "./src/react-codemirror.d.ts"
+    },
+    "./src/react-codemirror.js": {
+      "import": "./src/react-codemirror.js"
+    }
+  },
   "types": "src/react-codemirror.d.ts",
   "repository": {
     "type": "git",
-    "url": "git://github.com/neo4j-contrib/cypher-editor.git"
+    "url": "git://github.com/neo4j/cypher-editor.git"
   },
   "bugs": {
-    "url": "https://github.com/neo4j-contrib/cypher-editor/issues"
+    "url": "https://github.com/neo4j/cypher-editor/issues"
   },
   "scripts": {
     "build-lib": "babel --config-file ../../babel.react.config.js --extensions \".js\" --out-dir lib ./src",
@@ -37,9 +49,8 @@
     "node": ">=16"
   },
   "dependencies": {
-    "@babel/runtime": "^7.20.6",
-    "@neo4j-cypher/codemirror": "1.0.0-next.7",
-    "codemirror": "^6.0.1"
+    "@babel/runtime": "^7.20.13",
+    "@neo4j-cypher/codemirror": "1.0.0"
   },
   "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 } 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,36 @@ 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
    *
@@ -67,11 +98,11 @@ export interface CypherEditorProps {
    */
   history?: boolean;
   /**
-   * Whether pressing the tab key affects editor indentation
+   * The indent text to use when tabKey is enabled
    *
-   * @defaultValue true
+   * @defaultValue "  "
    */
-  indentWithTab?: boolean;
+  indentUnit?: string;
   /**
    * The formatter for the line numbers of the editor
    *
@@ -126,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
    *
@@ -171,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
    */
@@ -180,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[];
 }
 
 /**