@neo4j-cypher/react-codemirror 1.0.4 → 2.0.0-canary-a1ed8f3

package/src/neo4jSetup.tsx

@@ -0,0 +1,179 @@
+import {
+  acceptCompletion,
+  autocompletion,
+  clearSnippet,
+  closeBrackets,
+  closeBracketsKeymap,
+  closeCompletion,
+  completionKeymap,
+  nextSnippetField,
+  prevSnippetField,
+  snippetKeymap,
+} from '@codemirror/autocomplete';
+import {
+  defaultKeymap,
+  history,
+  historyKeymap,
+  indentLess,
+  indentMore,
+} from '@codemirror/commands';
+import {
+  bracketMatching,
+  defaultHighlightStyle,
+  foldKeymap,
+  indentOnInput,
+  syntaxHighlighting,
+} from '@codemirror/language';
+import { highlightSelectionMatches, searchKeymap } from '@codemirror/search';
+import { EditorState, Extension, StateCommand } from '@codemirror/state';
+import {
+  Command,
+  crosshairCursor,
+  drawSelection,
+  dropCursor,
+  EditorView,
+  highlightSpecialChars,
+  KeyBinding,
+  keymap,
+  rectangularSelection,
+} from '@codemirror/view';
+
+import { lintKeymap } from '@codemirror/lint';
+import { getIconForType } from './icons';
+
+const insertTab: StateCommand = (cmd) => {
+  // if there is a selection we should indent the selected text, but if not insert
+  // two spaces as per the cypher style guide
+  if (cmd.state.selection.main.from === cmd.state.selection.main.to) {
+    cmd.dispatch(
+      cmd.state.update({
+        changes: {
+          from: cmd.state.selection.main.to,
+          to: cmd.state.selection.main.to,
+          insert: '  ',
+        },
+        selection: { anchor: cmd.state.selection.main.to + 2 },
+      }),
+    );
+  } else {
+    indentMore(cmd);
+  }
+  return true;
+};
+
+export const basicNeo4jSetup = (): Extension[] => {
+  const keymaps: KeyBinding[] = [
+    closeBracketsKeymap,
+    defaultKeymap,
+    searchKeymap,
+    historyKeymap,
+    foldKeymap,
+    completionKeymap,
+    lintKeymap,
+    {
+      key: 'Tab',
+      preventDefault: true,
+      run: acceptCompletion,
+    },
+    {
+      key: 'Tab',
+      preventDefault: true,
+      run: insertTab,
+    },
+    {
+      key: 'Shift-Tab',
+      preventDefault: true,
+      run: indentLess,
+    },
+  ].flat();
+
+  const extensions: Extension[] = [];
+
+  extensions.push(highlightSpecialChars());
+  extensions.push(history());
+
+  extensions.push(drawSelection());
+  extensions.push(dropCursor());
+  extensions.push(EditorState.allowMultipleSelections.of(true));
+  extensions.push(indentOnInput());
+  extensions.push(
+    syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+  );
+
+  extensions.push(bracketMatching());
+  extensions.push(closeBrackets());
+  extensions.push(
+    autocompletion({
+      icons: false,
+      interactionDelay: 5,
+      addToOptions: [
+        {
+          render(completion, state) {
+            const isDarkTheme = state.facet(EditorView.darkTheme);
+            const icon = document.createElement('span');
+
+            icon.innerHTML = getIconForType(completion.type, isDarkTheme);
+
+            const svgElement = icon.children[0] as SVGElement;
+
+            svgElement.style.display = 'inline';
+            svgElement.style.marginRight = '5px';
+            return icon;
+          },
+          position: 20,
+        },
+      ],
+    }),
+  );
+
+  extensions.push(rectangularSelection());
+  extensions.push(crosshairCursor());
+  extensions.push(highlightSelectionMatches());
+
+  extensions.push(keymap.of(keymaps));
+
+  extensions.push(
+    snippetKeymap.of([
+      {
+        key: 'Tab',
+        run: acceptCompletionOrGotoNextSnippet,
+        shift: acceptCompletionOrGotoPrevSnippet,
+      },
+      { key: 'Escape', run: closeCompletionsOrClearSnippets },
+    ]),
+  );
+
+  return extensions;
+};
+
+// The logic to check if there's a completion open is surprisingly complex
+// https://github.com/codemirror/autocomplete/blob/5ad2ebc861f2f61cdc943fc087a5bfb756a7d0fa/src/view.ts#L31
+// For example it respects an interaction delay, so we can't just check if the completion is open
+// instead we just run the acceptCompletion command which returns true if a completion was accepted
+// in that case we know that we shouldn't move to the next snippet field
+const acceptCompletionOrGotoNextSnippet: Command = (view: EditorView) => {
+  const didCompletion = acceptCompletion(view);
+  if (didCompletion) {
+    return true;
+  }
+
+  return nextSnippetField(view);
+};
+
+const acceptCompletionOrGotoPrevSnippet: Command = (view: EditorView) => {
+  const didCompletion = acceptCompletion(view);
+  if (didCompletion) {
+    return true;
+  }
+
+  return prevSnippetField(view);
+};
+
+const closeCompletionsOrClearSnippets: Command = (view: EditorView) => {
+  const closedCompletions = closeCompletion(view);
+  if (closedCompletions) {
+    return true;
+  }
+
+  return clearSnippet(view);
+};

package/src/themes.ts

@@ -0,0 +1,132 @@
+import { Extension } from '@codemirror/state';
+import { light, mirage } from 'ayu';
+import {
+  createCypherTheme,
+  ThemeOptions,
+} from './lang-cypher/createCypherTheme';
+import { tokens } from './ndlTokensCopy';
+
+/* ndl exports most tokens as hex colors but some tokens are exported as rgb colors, in the form of "10, 20, 30"
+   This should be fixed in version 2 of ndl.
+   Meanwhile we can use this function */
+const convertToHex = (color: string) => {
+  if (color.startsWith('#')) {
+    return color;
+  }
+
+  const rgb = color.match(/\d+/g);
+  if (!rgb) {
+    return color;
+  }
+  const [r, g, b] = rgb;
+  return `#${Number(r).toString(16)}${Number(g).toString(16)}${Number(
+    b,
+  ).toString(16)}`;
+};
+
+export const lightThemeConstants: ThemeOptions = {
+  dark: false,
+  editorSettings: {
+    background: light.editor.bg.hex(),
+    foreground: light.editor.fg.hex(),
+    gutterForeground: light.editor.gutter.normal.hex(),
+    selection: light.editor.selection.active.hex(),
+    textMatchingSelection: light.editor.findMatch.active.hex(),
+    cursor: '#000000',
+    autoCompletionPanel: {
+      selectedColor: '#cce2ff',
+      matchingTextColor: '#0066bf',
+      backgroundColor: '#F3F4F5',
+    },
+    searchPanel: {
+      background: tokens.palette.light.neutral.bg.default,
+      text: tokens.palette.light.neutral.text.default,
+      buttonHoverBackground: tokens.palette.light.neutral.bg.strong,
+    },
+  },
+  highlightStyles: {
+    comment: light.syntax.comment.hex(),
+    keyword: light.syntax.keyword.hex(),
+    keywordLiteral: light.syntax.keyword.hex(),
+    label: light.syntax.markup.hex(),
+    predicateFunction: light.syntax.func.hex(),
+    function: light.syntax.func.hex(),
+    procedure: light.syntax.func.hex(),
+    stringLiteral: light.syntax.string.hex(),
+    numberLiteral: light.syntax.constant.hex(),
+    booleanLiteral: light.syntax.constant.hex(),
+    operator: light.syntax.operator.hex(),
+    property: light.syntax.tag.hex(),
+    paramDollar: light.syntax.regexp.hex(),
+    paramValue: light.syntax.regexp.hex(),
+    namespace: light.syntax.special.hex(),
+    consoleCommand: light.editor.fg.hex(),
+  },
+};
+
+export const darkThemeConstants: ThemeOptions = {
+  dark: true,
+  editorSettings: {
+    background: mirage.editor.bg.hex(),
+    foreground: mirage.editor.fg.hex(),
+    gutterForeground: mirage.editor.gutter.normal.hex(),
+    selection: mirage.editor.selection.active.hex(),
+    textMatchingSelection: mirage.editor.findMatch.active.hex(),
+    cursor: '#ffffff',
+    autoCompletionPanel: {
+      selectedColor: '#062f4a',
+      matchingTextColor: '#0097fb',
+      backgroundColor: '#1C212B',
+    },
+    searchPanel: {
+      background: convertToHex(tokens.palette.dark.neutral.bg.default),
+      text: convertToHex(tokens.palette.dark.neutral.text.default),
+      buttonHoverBackground: convertToHex(
+        tokens.palette.dark.neutral.bg.strong,
+      ),
+    },
+  },
+  highlightStyles: {
+    comment: mirage.syntax.comment.hex(),
+    keyword: mirage.syntax.keyword.hex(),
+    keywordLiteral: mirage.syntax.keyword.hex(),
+    label: mirage.syntax.markup.hex(),
+    predicateFunction: mirage.syntax.func.hex(),
+    function: mirage.syntax.func.hex(),
+    procedure: mirage.syntax.func.hex(),
+    stringLiteral: mirage.syntax.string.hex(),
+    numberLiteral: mirage.syntax.constant.hex(),
+    booleanLiteral: mirage.syntax.constant.hex(),
+    operator: mirage.syntax.operator.hex(),
+    property: mirage.syntax.tag.hex(),
+    paramDollar: mirage.syntax.regexp.hex(),
+    paramValue: mirage.syntax.regexp.hex(),
+    namespace: mirage.syntax.special.hex(),
+    consoleCommand: mirage.editor.fg.hex(),
+  },
+};
+
+type ExtraThemeOptions = { inheritBgColor?: boolean };
+export const ayuLightTheme = ({ inheritBgColor }: ExtraThemeOptions) => {
+  return createCypherTheme({ ...lightThemeConstants, inheritBgColor });
+};
+
+export const ayuDarkTheme = ({ inheritBgColor }: ExtraThemeOptions) => {
+  return createCypherTheme({ ...darkThemeConstants, inheritBgColor });
+};
+
+export function getThemeExtension(
+  theme: 'light' | 'dark' | 'none' | Extension,
+  inheritBgColor?: boolean,
+): Extension | Extension[] {
+  switch (theme) {
+    case 'light':
+      return ayuLightTheme({ inheritBgColor });
+    case 'dark':
+      return ayuDarkTheme({ inheritBgColor });
+    case 'none':
+      return [];
+    default:
+      return theme;
+  }
+}

package/es/CypherEditor.js

@@ -1,262 +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,
-      style
-    } = this.props;
-    const {
-      focused
-    } = this.state;
-    const editorClassName = (className ? className + " " : "") + (focused && focusedClassName ? focusedClassName : "");
-    return /*#__PURE__*/_jsx("div", {
-      className: editorClassName,
-      style: style,
-      ref: this.setEditorRef
-    });
-  }
-}
-export default CypherEditor;

package/es/react-codemirror.js

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