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

package/src/neo4j-setup.tsx

@@ -0,0 +1,129 @@
+import {
+  acceptCompletion,
+  autocompletion,
+  closeBrackets,
+  closeBracketsKeymap,
+  completionKeymap,
+} 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 {
+  crosshairCursor,
+  drawSelection,
+  dropCursor,
+  EditorView,
+  highlightSpecialChars,
+  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 = [
+    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));
+
+  return extensions;
+};

package/src/repl-mode.ts

@@ -0,0 +1,214 @@
+import { Extension, StateEffect } from '@codemirror/state';
+import { EditorView, keymap } from '@codemirror/view';
+
+import { StateField } from '@codemirror/state';
+
+type HistoryState = {
+  history: string[];
+  index: number;
+  draft: string;
+  documentUpdate: string | null;
+};
+const DRAFT_ENTRY_INDEX = -1;
+const historyInitialState = {
+  history: [],
+  index: DRAFT_ENTRY_INDEX,
+  documentUpdate: null,
+  draft: '',
+};
+
+const historyState = StateField.define<HistoryState>({
+  create() {
+    return historyInitialState;
+  },
+  toJSON(value) {
+    return JSON.stringify(value);
+  },
+  update(value, transaction) {
+    for (const effect of transaction.effects) {
+      if (effect.is(moveInHistory)) {
+        if (value.history.length === 0) {
+          return {
+            ...value,
+            documentUpdate: null,
+          };
+        }
+
+        const currentHistoryIndex = value.index;
+        if (effect.value === 'BACK') {
+          const newHistoryIndex = currentHistoryIndex + 1;
+
+          if (newHistoryIndex === value.history.length) {
+            return {
+              ...value,
+              documentUpdate: null,
+            };
+          }
+
+          let draft = value.draft;
+          if (currentHistoryIndex === DRAFT_ENTRY_INDEX) {
+            draft = transaction.state.doc.toString();
+          }
+
+          return {
+            ...value,
+            draft,
+            index: newHistoryIndex,
+            documentUpdate: value.history[newHistoryIndex],
+          };
+        } else if (effect.value === 'FORWARDS') {
+          const newHistoryIndex = currentHistoryIndex - 1;
+
+          if (currentHistoryIndex === DRAFT_ENTRY_INDEX) {
+            return { ...value, documentUpdate: null };
+          }
+
+          if (newHistoryIndex === DRAFT_ENTRY_INDEX) {
+            return {
+              ...value,
+              index: newHistoryIndex,
+              documentUpdate: value.draft,
+            };
+          } else {
+            return {
+              ...value,
+              index: newHistoryIndex,
+              documentUpdate: value.history[newHistoryIndex],
+            };
+          }
+        }
+      } else if (effect.is(pushToHistory)) {
+        return {
+          ...value,
+          index: DRAFT_ENTRY_INDEX,
+          history: [effect.value, ...value.history],
+        };
+      }
+    }
+    return value;
+  },
+});
+
+type HistoryNavigation = 'BACK' | 'FORWARDS';
+const moveInHistory = StateEffect.define<HistoryNavigation>();
+const pushToHistory = StateEffect.define<string>();
+
+function navigateHistory(view: EditorView, direction: HistoryNavigation) {
+  view.dispatch(
+    view.state.update({
+      effects: moveInHistory.of(direction),
+      selection: { anchor: view.state.doc.length },
+    }),
+  );
+
+  const updatedHistory = view.state.field<HistoryState>(historyState, false);
+  if (updatedHistory.documentUpdate !== null) {
+    view.dispatch(
+      view.state.update({
+        changes: {
+          from: 0,
+          to: view.state.doc.length,
+          insert: updatedHistory.documentUpdate,
+        },
+      }),
+    );
+  }
+}
+
+type ReplProps = {
+  onExecute: (cmd: string) => void;
+  initialHistory?: string[];
+  onNewHistoryEntry?: (historyEntry: string) => void;
+};
+
+export const replMode = ({
+  onExecute,
+  onNewHistoryEntry,
+  initialHistory,
+}: ReplProps): Extension[] => {
+  return [
+    historyState.init(() => ({
+      ...historyInitialState,
+      history: initialHistory,
+    })),
+    keymap.of([
+      {
+        key: 'Ctrl-Enter',
+        mac: 'Mod-Enter',
+        preventDefault: true,
+        run: (view) => {
+          const doc = view.state.doc.toString();
+          if (doc.trim() !== '') {
+            onExecute?.(doc);
+            onNewHistoryEntry?.(doc);
+            view.dispatch({
+              effects: pushToHistory.of(doc),
+            });
+          }
+
+          return true;
+        },
+      },
+      {
+        key: 'ArrowUp',
+        preventDefault: true,
+        run: (view) => {
+          // If text is selected or cursor is not at top of document, do nothing
+          const { empty, head } = view.state.selection.main;
+          if (!empty || head !== 0) {
+            return false;
+          }
+
+          navigateHistory(view, 'BACK');
+          return true;
+        },
+      },
+      {
+        mac: 'Cmd-ArrowUp',
+        win: 'Ctrl-ArrowUp',
+        linux: 'Ctrl-ArrowUp',
+        preventDefault: true,
+        run: (view) => {
+          // If text is selected or cursor is not at top of document, do nothing
+          const { empty, head } = view.state.selection.main;
+          if (!empty || head !== 0) {
+            return false;
+          }
+
+          navigateHistory(view, 'BACK');
+          return true;
+        },
+      },
+      {
+        key: 'ArrowDown',
+        preventDefault: true,
+        run: (view) => {
+          const { empty, head } = view.state.selection.main;
+          // If text is selected or cursor is not at end of document, do nothing
+          if (!empty || head !== view.state.doc.length) {
+            return false;
+          }
+          navigateHistory(view, 'FORWARDS');
+
+          return true;
+        },
+      },
+      {
+        mac: 'Cmd-ArrowDown',
+        win: 'Ctrl-ArrowDown',
+        linux: 'Ctrl-ArrowDown',
+        preventDefault: true,
+        run: (view) => {
+          const { empty, head } = view.state.selection.main;
+          // If text is selected or cursor is not at end of document, do nothing
+          if (!empty || head !== view.state.doc.length) {
+            return false;
+          }
+          navigateHistory(view, 'FORWARDS');
+
+          return true;
+        },
+      },
+    ]),
+  ];
+};

package/src/themes.ts

@@ -0,0 +1,130 @@
+import { Extension } from '@codemirror/state';
+import { light, mirage } from 'ayu';
+import {
+  createCypherTheme,
+  ThemeOptions,
+} from './lang-cypher/create-cypher-theme';
+import { tokens } from './ndl-tokens-copy';
+
+/* 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(),
+  },
+};
+
+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(),
+  },
+};
+
+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;
+  }
+}