@neo4j-cypher/react-codemirror 1.0.0-next.0

package/README.md

@@ -0,0 +1,32 @@
+### @neo4j-cypher/react-codemirror
+
+This package exports a React component that provides a cypher editor using codemirror 6.
+
+You can use this package like the following:
+
+```
+import React from 'react';
+import CypherEditor from '@neo4j-cypher/react-codemirror';
+
+const editorProps = {
+  onValueChanged: value => {}, // optional
+  onFocusChanged: focused => {}, // optional
+  onScrollChanged: scrollInfo => {}, // optional
+  onPositionChanged: ({ line, column, position }) => {}, // optional
+  initialOptions: {
+    theme: 'light', // optional, defaults to light
+    extensions: [ /* override extensions  */ ] // optional, defaults to a sensible list of extensions.
+  },
+  initialSchema: { /* ... */ }, // optional, see example in demos
+  initialValue: 'this is the text to show in the editor',
+  initialPosition: { row: 2, column: 3},  // optional, rows are 1 based, columns are 0 based
+  classNames: [], // optional, array of classnames to add to the root dom element.
+  theme: 'light' // optional, should be light or dark, defaults to light
+};
+
+const MyReactComponent = () => {
+  return (
+    <CypherEditor {...editorProps} />
+  );
+}
+```

package/es/CypherEditor.js

@@ -0,0 +1,196 @@
+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";
+class CypherEditor extends Component {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "setEditorRef", ref => {
+      this.editorRef = ref;
+    });
+    _defineProperty(this, "valueChanged", (value, changes) => {
+      this.innerValue = value;
+      this.value = 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 => {
+      const {
+        onPositionChanged
+      } = this.props;
+      onPositionChanged && onPositionChanged(positionObject);
+    });
+    _defineProperty(this, "autocompleteChanged", (autocompleteOpen, from, options) => {
+      const {
+        onAutocompleteChanged
+      } = this.props;
+      onAutocompleteChanged && onAutocompleteChanged(autocompleteOpen, from, options);
+    });
+    _defineProperty(this, "lineNumberClick", (line, event) => {
+      const {
+        onLineNumberClick
+      } = this.props;
+      onLineNumberClick && onLineNumberClick(line, event);
+    });
+    _defineProperty(this, "keyDown", event => {
+      const {
+        onKeyDown
+      } = this.props;
+      onKeyDown && onKeyDown(event);
+    });
+    this.state = {
+      focused: false
+    };
+  }
+  componentDidMount() {
+    const {
+      autocomplete,
+      autocompleteCloseOnBlur,
+      autocompleteOpen,
+      autocompleteTriggerStrings,
+      autofocus,
+      history,
+      lineNumberFormatter,
+      lineNumbers,
+      lineWrapping,
+      lint,
+      placeholder,
+      position,
+      readOnly,
+      readOnlyCursor,
+      schema,
+      theme,
+      parseOnSetValue,
+      value,
+      onEditorCreated
+    } = this.props;
+    this.value = this.innerValue = value;
+    const {
+      editor
+    } = createCypherEditor(this.editorRef, {
+      autocomplete,
+      autocompleteCloseOnBlur,
+      autocompleteOpen,
+      autocompleteTriggerStrings,
+      autofocus,
+      history,
+      lineNumberFormatter,
+      lineNumbers,
+      lineWrapping,
+      lint,
+      placeholder,
+      position,
+      readOnly,
+      readOnlyCursor,
+      schema,
+      theme,
+      parseOnSetValue,
+      value
+    });
+    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.onAutocompleteChanged(this.autocompleteChanged);
+    this.cypherEditor.onLineNumberClick(this.lineNumberClick);
+    this.cypherEditor.onKeyDown(this.keyDown);
+    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.offAutocompleteChanged(this.autocompleteChanged);
+      this.cypherEditor.offLineNumberClick(this.lineNumberClick);
+      this.cypherEditor.offKeyDown(this.keyDown);
+      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();
+
+    // 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?)
+    }
+
+    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();
+    }
+  }
+  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/CypherEditorStyled.js

@@ -0,0 +1,22 @@
+/*
+ * 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/es/react-codemirror.js

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

package/lib/CypherEditor.js

@@ -0,0 +1,206 @@
+"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; }
+/*
+ * 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);
+    (0, _defineProperty2.default)(this, "setEditorRef", ref => {
+      this.editorRef = ref;
+    });
+    (0, _defineProperty2.default)(this, "valueChanged", (value, changes) => {
+      this.innerValue = value;
+      this.value = 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 => {
+      const {
+        onPositionChanged
+      } = this.props;
+      onPositionChanged && onPositionChanged(positionObject);
+    });
+    (0, _defineProperty2.default)(this, "autocompleteChanged", (autocompleteOpen, from, options) => {
+      const {
+        onAutocompleteChanged
+      } = this.props;
+      onAutocompleteChanged && onAutocompleteChanged(autocompleteOpen, from, options);
+    });
+    (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);
+    });
+    this.state = {
+      focused: false
+    };
+  }
+  componentDidMount() {
+    const {
+      autocomplete,
+      autocompleteCloseOnBlur,
+      autocompleteOpen,
+      autocompleteTriggerStrings,
+      autofocus,
+      history,
+      lineNumberFormatter,
+      lineNumbers,
+      lineWrapping,
+      lint,
+      placeholder,
+      position,
+      readOnly,
+      readOnlyCursor,
+      schema,
+      theme,
+      parseOnSetValue,
+      value,
+      onEditorCreated
+    } = this.props;
+    this.value = this.innerValue = value;
+    const {
+      editor
+    } = (0, _codemirror.createCypherEditor)(this.editorRef, {
+      autocomplete,
+      autocompleteCloseOnBlur,
+      autocompleteOpen,
+      autocompleteTriggerStrings,
+      autofocus,
+      history,
+      lineNumberFormatter,
+      lineNumbers,
+      lineWrapping,
+      lint,
+      placeholder,
+      position,
+      readOnly,
+      readOnlyCursor,
+      schema,
+      theme,
+      parseOnSetValue,
+      value
+    });
+    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.onAutocompleteChanged(this.autocompleteChanged);
+    this.cypherEditor.onLineNumberClick(this.lineNumberClick);
+    this.cypherEditor.onKeyDown(this.keyDown);
+    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.offAutocompleteChanged(this.autocompleteChanged);
+      this.cypherEditor.offLineNumberClick(this.lineNumberClick);
+      this.cypherEditor.offKeyDown(this.keyDown);
+      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();
+
+    // 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?)
+    }
+
+    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();
+    }
+  }
+  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/CypherEditorStyled.js

@@ -0,0 +1,14 @@
+"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/lib/react-codemirror.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+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"));

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@neo4j-cypher/react-codemirror",
+  "description": "React CodeMirror 6 Cypher editor",
+  "keywords": [
+    "react",
+    "cypher",
+    "codemirror",
+    "codemirror 6"
+  ],
+  "version": "1.0.0-next.0",
+  "author": "Neo4j Inc.",
+  "license": "GPL-3.0",
+  "main": "./lib/react-codemirror.js",
+  "module": "./es/react-codemirror.js",
+  "types": "src/react-codemirror.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/neo4j-contrib/cypher-editor.git"
+  },
+  "bugs": {
+    "url": "https://github.com/neo4j-contrib/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/",
+    "README.md"
+  ],
+  "engineStrict": true,
+  "engines": {
+    "node": ">=16"
+  },
+  "dependencies": {
+    "@neo4j-cypher/codemirror": "1.0.0-next.0",
+    "codemirror": "^6.0.1"
+  },
+  "peerDependencies": {
+    "react": ">=16"
+  }
+}

package/src/CypherEditor.d.ts

@@ -0,0 +1,188 @@
+import * as React from "react";
+// import type { Extension } from "@codemirror/state";
+import type { EditorSupportSchema } from "@neo4j-cypher/editor-support";
+import type {
+  PositionAny,
+  Theme,
+  AutofocusProp,
+  EditorCreatedListener,
+  AutocompleteChangedListener,
+  PositionChangedListener,
+  FocusChangedListener,
+  ScrollChangedListener,
+  ValueChangedListener,
+  KeyDownListener,
+  LineNumberClickListener,
+  LineNumberFormatter
+} from "@neo4j-cypher/codemirror";
+
+/**
+ * Interface for React Cypher Editor component props
+ */
+export interface CypherEditorProps {
+  /**
+   * Whether the autocomplete feature is enabled
+   *
+   * @defaultValue `true`
+   */
+  autocomplete?: boolean;
+  /**
+   * Whether the autocomplete auto closes whenever the editor loses focus
+   *
+   * @defaultValue `true`
+   */
+  autocompleteCloseOnBlur?: boolean;
+  /**
+   * Whether the autocomplete window is open
+   *
+   * @remarks
+   *
+   * Changing this can be used to manually control the autocomplete open state
+   *
+   * @defaultValue `false`
+   */
+  autocompleteOpen?: boolean;
+  /**
+   * The keys that when typed will automatically open the autocomplete menu
+   *
+   * @defaultValue [".",":","[]","()","{}","[","(","{","$"]
+   */
+  autocompleteTriggerStrings?: string[];
+  /**
+   * Whether the editor should be auto focused on first creation
+   *
+   * @defaultValue true
+   */
+  autofocus?: boolean;
+  /**
+   * setting any of these props will trigger the editor gaining focus
+   *
+   * @defaultValue ["position", "readOnly", "value"]
+   */
+  autofocusProps?: AutofocusProp[];
+  /**
+   * Whether the editor maintains an undo/redo history
+   *
+   * @defaultValue true
+   */
+  history?: boolean;
+  /**
+   * The formatter for the line numbers of the editor
+   *
+   * @defaultValue (line, lineCount) => lineCount === 1 ? "$" : line + "";
+   */
+  lineNumberFormatter?: LineNumberFormatter;
+  /**
+   * Whether line numbers are shown to the left of the editor ui
+   *
+   * @defaultValue true
+   */
+  lineNumbers?: boolean;
+  /**
+   * Whether the editor wraps lines vs using a horizontal scrollbar
+   *
+   * @defaultValue false
+   */
+  lineWrapping?: boolean;
+  /**
+   * Whether the editor should display lint errors to the user
+   *
+   * @defaultValue false
+   */
+  lint?: boolean;
+  /**
+   * Whether to run the cypher language parser immediately after every call to set the value
+   *
+   * @defaultValue true
+   */
+  parseOnSetValue?: boolean;
+  /**
+   * The text to be shown to the user when the editor value is empty
+   */
+  placeholder?: string;
+  /**
+   * The editor cursor position
+   */
+  position?: PositionAny;
+  /**
+   * Whether the editor is read only or the user can edit the editor's value
+   *
+   * @defaultValue false
+   */
+  readOnly?: boolean;
+  /**
+   * Whether to show the cursor when the editor readOnly is true
+   *
+   * @defaultValue false
+   */
+  readOnlyCursor?: boolean;
+  /**
+   * The schema making the editor aware of things such as node labels & relationship types & procedures in the current graph database
+   */
+  schema?: EditorSupportSchema;
+  /**
+   * Whether to use the light or dark theme for the editor
+   *
+   * @defaultValue "light"
+   */
+  theme?: Theme;
+  /**
+   * The editor text value
+   *
+   * @defaultValue ""
+   */
+  value?: string;
+  /**
+   * A css class name to be added to the root editor dom element
+   */
+  className?: string;
+  /**
+   * A css class name to be added to the root editor dom element when it is focused
+   */
+  focusedClassName?: string;
+
+  /**
+   * A listener for when the editor api gets created
+   */
+  onEditorCreated?: EditorCreatedListener;
+  /**
+   * A listener for when the editor value changes
+   */
+  onValueChanged?: ValueChangedListener;
+  /**
+   * A listener for when the editor focus changes
+   */
+  onFocusChanged?: FocusChangedListener;
+  /**
+   * A listener for when the editor scroll position changes
+   */
+  onScrollChanged?: ScrollChangedListener;
+  /**
+   * A listener for when the editor cursor position changes
+   */
+  onPositionChanged?: PositionChangedListener;
+  /**
+   * A listener for when the editor autocompletion state changes
+   */
+  onAutocompleteChanged?: AutocompleteChangedListener;
+  /**
+   * A listener for when the user clicks an editor line number
+   */
+  onLineNumberClick?: LineNumberClickListener;
+  /**
+   * A listener for when the user presses a key down in the editor
+   */
+  onKeyDown?: KeyDownListener;
+
+  // TODO - add these props
+  // preExtensions?: Extension[],
+  // postExtensions?: Extension[]
+}
+
+/**
+ * Cypher Editor React Component
+ */
+export default class CypherEditor extends React.Component<
+  CypherEditorProps,
+  any
+> {}

package/src/CypherEditorStyled.d.ts

@@ -0,0 +1,10 @@
+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
+> {}

package/src/react-codemirror.d.ts

@@ -0,0 +1,22 @@
+/**
+ * This package provides a React Cypher Editor component
+ *
+ * @remarks
+ *
+ * The props for this component are defined by the {@link react-codemirror#CypherEditorProps | CypherEditorProps} interface
+ *
+ * @example
+ * Here's some example code using the props:
+ *
+ * ```ts
+ * const props = { autocomplete: false };
+ * <CypherEditor {...props} />
+ * ```
+ *
+ * @packageDocumentation
+ */
+export type {
+  default as UnstyledCypherEditor,
+  CypherEditorProps
+} from "./CypherEditor";
+export type { default as CypherEditor } from "./CypherEditorStyled";