@neo4j-cypher/react-codemirror 1.0.2 → 2.0.0-alpha.0

package/package.json

@@ -1,58 +1,51 @@
 {
   "name": "@neo4j-cypher/react-codemirror",
-  "description": "React CodeMirror 6 Cypher editor",
-  "keywords": [
-    "react",
-    "cypher",
-    "codemirror",
-    "codemirror 6"
-  ],
-  "version": "1.0.2",
-  "author": "Neo4j Inc.",
   "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/cypher-editor.git"
-  },
-  "bugs": {
-    "url": "https://github.com/neo4j/cypher-editor/issues"
-  },
-  "scripts": {
-    "build-lib": "babel --config-file ../../babel.react.config.js --extensions \".js\" --out-dir lib ./src",
-    "build-es": "cross-env ES=true babel --config-file ../../babel.react.config.js --extensions \".js\" --out-dir es ./src",
-    "build": "npm run build-lib && npm run build-es",
-    "clean:build": "rimraf lib && rimraf es"
-  },
   "files": [
-    "src/*.d.ts",
-    "es/",
-    "lib/",
+    "dist",
+    "esm",
+    "package.json",
     "README.md"
   ],
-  "engineStrict": true,
-  "engines": {
-    "node": ">=16"
+  "version": "2.0.0-alpha.0",
+  "main": "dist/index.cjs",
+  "module": "esm/index.mjs",
+  "sideEffects": false,
+  "scripts": {
+    "build": "concurrently \"npm:build-esm\" \"npm:build-commonjs\"",
+    "build-esm": "esbuild --bundle --format=esm --outfile=esm/index.mjs --packages=external src/index.ts",
+    "build-commonjs": "esbuild --bundle --format=cjs --outfile=dist/index.cjs --packages=external src/index.ts",
+    "test": "jest",
+    "test:e2e": "playwright test",
+    "e2e-http-server": "vite dev"
   },
   "dependencies": {
-    "@babel/runtime": "^7.20.13",
-    "@neo4j-cypher/codemirror": "1.0.2"
+    "@codemirror/autocomplete": "^6.5.1",
+    "@codemirror/commands": "^6.2.2",
+    "@codemirror/language": "^6.6.0",
+    "@codemirror/lint": "^6.2.2",
+    "@codemirror/search": "^6.5.0",
+    "@codemirror/state": "^6.2.1",
+    "@codemirror/view": "^6.13.2",
+    "@lezer/common": "^1.0.2",
+    "@lezer/highlight": "^1.1.3",
+    "@uiw/react-codemirror": "^4.19.9",
+    "ayu": "^8.0.1",
+    "fastest-levenshtein": "^1.0.16",
+    "react": "^18.2.0",
+    "vscode-languageserver-types": "^3.17.3"
   },
-  "peerDependencies": {
-    "react": ">=16"
+  "devDependencies": {
+    "@neo4j-ndl/base": "^1.10.1",
+    "@playwright/test": "^1.36.2",
+    "@types/react": "^18.0.28",
+    "@vitejs/plugin-react": "^3.1.0",
+    "concurrently": "^8.2.1",
+    "esbuild": "^0.19.4",
+    "lodash": "^4.17.21",
+    "playwright": "^1.36.2",
+    "typescript": "^4.9.3",
+    "vite": "^4.4.8",
+    "vite-plugin-node-stdlib-browser": "^0.2.1"
   }
 }

package/es/CypherEditor.js

@@ -1,260 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React, { Component } from "react";
-import { createCypherEditor, reactiveOptionKeys, defaultOptions } from "@neo4j-cypher/codemirror";
-import { jsx as _jsx } from "react/jsx-runtime";
-class CypherEditor extends Component {
-  constructor(props) {
-    super(props);
-    _defineProperty(this, "setEditorRef", ref => {
-      this.editorRef = ref;
-    });
-    _defineProperty(this, "valueChanged", (value, changes) => {
-      this.lastValue = value;
-      const {
-        onValueChanged
-      } = this.props;
-      onValueChanged && onValueChanged(value, changes);
-    });
-    _defineProperty(this, "focusChanged", focused => {
-      const {
-        onFocusChanged
-      } = this.props;
-      this.setState({
-        focused
-      });
-      onFocusChanged && onFocusChanged(focused);
-    });
-    _defineProperty(this, "scrollChanged", scrollInfo => {
-      const {
-        onScrollChanged
-      } = this.props;
-      onScrollChanged && onScrollChanged(scrollInfo);
-    });
-    _defineProperty(this, "positionChanged", positionObject => {
-      this.lastPosition = (positionObject || {
-        position: null
-      }).position;
-      const {
-        onPositionChanged
-      } = 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
-      } = this.props;
-      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 {
-        onLineNumberClick
-      } = this.props;
-      onLineNumberClick && onLineNumberClick(line, event);
-    });
-    _defineProperty(this, "keyDown", event => {
-      const {
-        onKeyDown
-      } = this.props;
-      onKeyDown && onKeyDown(event);
-    });
-    _defineProperty(this, "keyUp", event => {
-      const {
-        onKeyUp
-      } = this.props;
-      onKeyUp && onKeyUp(event);
-    });
-    this.state = {
-      focused: false
-    };
-    this.lastValue = null;
-    this.lastPosition = null;
-    this.lastSelection = null;
-  }
-  componentDidMount() {
-    const {
-      autocomplete,
-      autocompleteCloseOnBlur,
-      autocompleteOpen,
-      autocompleteTriggerStrings,
-      autofocus,
-      bracketMatching,
-      closeBrackets,
-      cursorWide,
-      cypherLanguage,
-      history,
-      indentUnit,
-      lineNumberFormatter,
-      lineNumbers,
-      lineWrapping,
-      lint,
-      placeholder,
-      position,
-      readOnly,
-      readOnlyCursor,
-      schema,
-      search,
-      searchMatches,
-      searchOpen,
-      searchText,
-      searchTop,
-      selection,
-      tabKey,
-      theme,
-      tooltipAbsolute,
-      parseOnSetValue,
-      value,
-      onEditorCreated,
-      preExtensions,
-      postExtensions
-    } = this.props;
-    this.value = value;
-    const {
-      editor
-    } = createCypherEditor(this.editorRef, {
-      autocomplete,
-      autocompleteCloseOnBlur,
-      autocompleteOpen,
-      autocompleteTriggerStrings,
-      autofocus,
-      bracketMatching,
-      closeBrackets,
-      cursorWide,
-      cypherLanguage,
-      history,
-      indentUnit,
-      lineNumberFormatter,
-      lineNumbers,
-      lineWrapping,
-      lint,
-      placeholder,
-      position,
-      readOnly,
-      readOnlyCursor,
-      schema,
-      search,
-      searchMatches,
-      searchOpen,
-      searchText,
-      searchTop,
-      selection,
-      tabKey,
-      theme,
-      tooltipAbsolute,
-      parseOnSetValue,
-      value,
-      preExtensions,
-      postExtensions
-    });
-    this.cypherEditor = editor;
-    this.cypherEditor.onValueChanged(this.valueChanged);
-    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);
-    this.cypherEditor.onKeyDown(this.keyDown);
-    this.cypherEditor.onKeyUp(this.keyUp);
-    onEditorCreated && onEditorCreated(this.cypherEditor);
-  }
-  componentWillUnmount() {
-    if (this.cypherEditor) {
-      this.cypherEditor.offValueChanged(this.valueChanged);
-      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);
-      this.cypherEditor.offKeyDown(this.keyDown);
-      this.cypherEditor.offKeyUp(this.keyUp);
-      this.cypherEditor.destroy();
-    }
-  }
-  componentDidUpdate(prevProps) {
-    if (prevProps.value !== this.props.value) {
-      this.value = this.props.value;
-    }
-    for (let key of reactiveOptionKeys) {
-      if (prevProps[key] !== this.props[key]) {
-        this.updateOption({
-          [key]: this.props[key]
-        });
-      }
-    }
-  }
-  updateOption(prop) {
-    if (!this.cypherEditor) {
-      return;
-    }
-    const key = Object.keys(prop).pop();
-    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;
-      }
-    }
-    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]);
-    }
-    const autofocusProps = this.props.autofocusProps !== undefined ? this.props.autofocusProps : defaultOptions.autofocusProps;
-    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 {
-      className,
-      focusedClassName
-    } = this.props;
-    const {
-      focused
-    } = this.state;
-    const editorClassName = (className ? className + " " : "") + (focused && focusedClassName ? focusedClassName : "");
-    return /*#__PURE__*/_jsx("div", {
-      className: editorClassName,
-      ref: this.setEditorRef
-    });
-  }
-}
-export default CypherEditor;

package/es/react-codemirror.js

@@ -1 +0,0 @@
-export { default as CypherEditor } from "./CypherEditor";

package/lib/CypherEditor.js

@@ -1,270 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireWildcard(require("react"));
-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; }
-class CypherEditor extends _react.Component {
-  constructor(props) {
-    super(props);
-    (0, _defineProperty2.default)(this, "setEditorRef", ref => {
-      this.editorRef = ref;
-    });
-    (0, _defineProperty2.default)(this, "valueChanged", (value, changes) => {
-      this.lastValue = value;
-      const {
-        onValueChanged
-      } = this.props;
-      onValueChanged && onValueChanged(value, changes);
-    });
-    (0, _defineProperty2.default)(this, "focusChanged", focused => {
-      const {
-        onFocusChanged
-      } = this.props;
-      this.setState({
-        focused
-      });
-      onFocusChanged && onFocusChanged(focused);
-    });
-    (0, _defineProperty2.default)(this, "scrollChanged", scrollInfo => {
-      const {
-        onScrollChanged
-      } = this.props;
-      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, "selectionChanged", selection => {
-      this.lastSelection = selection;
-      const {
-        onSelectionChanged
-      } = this.props;
-      onSelectionChanged && onSelectionChanged(selection);
-    });
-    (0, _defineProperty2.default)(this, "autocompleteChanged", (autocompleteOpen, options, option) => {
-      const {
-        onAutocompleteChanged
-      } = this.props;
-      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 {
-        onLineNumberClick
-      } = this.props;
-      onLineNumberClick && onLineNumberClick(line, event);
-    });
-    (0, _defineProperty2.default)(this, "keyDown", event => {
-      const {
-        onKeyDown
-      } = this.props;
-      onKeyDown && onKeyDown(event);
-    });
-    (0, _defineProperty2.default)(this, "keyUp", event => {
-      const {
-        onKeyUp
-      } = this.props;
-      onKeyUp && onKeyUp(event);
-    });
-    this.state = {
-      focused: false
-    };
-    this.lastValue = null;
-    this.lastPosition = null;
-    this.lastSelection = null;
-  }
-  componentDidMount() {
-    const {
-      autocomplete,
-      autocompleteCloseOnBlur,
-      autocompleteOpen,
-      autocompleteTriggerStrings,
-      autofocus,
-      bracketMatching,
-      closeBrackets,
-      cursorWide,
-      cypherLanguage,
-      history,
-      indentUnit,
-      lineNumberFormatter,
-      lineNumbers,
-      lineWrapping,
-      lint,
-      placeholder,
-      position,
-      readOnly,
-      readOnlyCursor,
-      schema,
-      search,
-      searchMatches,
-      searchOpen,
-      searchText,
-      searchTop,
-      selection,
-      tabKey,
-      theme,
-      tooltipAbsolute,
-      parseOnSetValue,
-      value,
-      onEditorCreated,
-      preExtensions,
-      postExtensions
-    } = this.props;
-    this.value = value;
-    const {
-      editor
-    } = (0, _codemirror.createCypherEditor)(this.editorRef, {
-      autocomplete,
-      autocompleteCloseOnBlur,
-      autocompleteOpen,
-      autocompleteTriggerStrings,
-      autofocus,
-      bracketMatching,
-      closeBrackets,
-      cursorWide,
-      cypherLanguage,
-      history,
-      indentUnit,
-      lineNumberFormatter,
-      lineNumbers,
-      lineWrapping,
-      lint,
-      placeholder,
-      position,
-      readOnly,
-      readOnlyCursor,
-      schema,
-      search,
-      searchMatches,
-      searchOpen,
-      searchText,
-      searchTop,
-      selection,
-      tabKey,
-      theme,
-      tooltipAbsolute,
-      parseOnSetValue,
-      value,
-      preExtensions,
-      postExtensions
-    });
-    this.cypherEditor = editor;
-    this.cypherEditor.onValueChanged(this.valueChanged);
-    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);
-    this.cypherEditor.onKeyDown(this.keyDown);
-    this.cypherEditor.onKeyUp(this.keyUp);
-    onEditorCreated && onEditorCreated(this.cypherEditor);
-  }
-  componentWillUnmount() {
-    if (this.cypherEditor) {
-      this.cypherEditor.offValueChanged(this.valueChanged);
-      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);
-      this.cypherEditor.offKeyDown(this.keyDown);
-      this.cypherEditor.offKeyUp(this.keyUp);
-      this.cypherEditor.destroy();
-    }
-  }
-  componentDidUpdate(prevProps) {
-    if (prevProps.value !== this.props.value) {
-      this.value = this.props.value;
-    }
-    for (let key of _codemirror.reactiveOptionKeys) {
-      if (prevProps[key] !== this.props[key]) {
-        this.updateOption({
-          [key]: this.props[key]
-        });
-      }
-    }
-  }
-  updateOption(prop) {
-    if (!this.cypherEditor) {
-      return;
-    }
-    const key = Object.keys(prop).pop();
-    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;
-      }
-    }
-    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]);
-    }
-    const autofocusProps = this.props.autofocusProps !== undefined ? this.props.autofocusProps : _codemirror.defaultOptions.autofocusProps;
-    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 {
-      className,
-      focusedClassName
-    } = this.props;
-    const {
-      focused
-    } = this.state;
-    const editorClassName = (className ? className + " " : "") + (focused && focusedClassName ? focusedClassName : "");
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: editorClassName,
-      ref: this.setEditorRef
-    });
-  }
-}
-var _default = CypherEditor;
-exports.default = _default;

package/lib/react-codemirror.js

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