@neo4j-cypher/react-codemirror 0.0.0-canary-20250423075344

package/src/neo4jSetup.tsx

@@ -0,0 +1,190 @@
+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;
+};
+
+type SetupProps = {
+  moveFocusOnTab?: boolean;
+};
+
+export const basicNeo4jSetup = ({
+  moveFocusOnTab = false,
+}: SetupProps): Extension[] => {
+  const keymaps: KeyBinding[] = [
+    closeBracketsKeymap,
+    defaultKeymap,
+    searchKeymap,
+    historyKeymap,
+    foldKeymap,
+    completionKeymap,
+    lintKeymap,
+  ].flat();
+
+  if (!moveFocusOnTab) {
+    keymaps.push(
+      {
+        key: 'Tab',
+        preventDefault: true,
+        run: acceptCompletion,
+      },
+      {
+        key: 'Tab',
+        preventDefault: true,
+        run: insertTab,
+      },
+      {
+        key: 'Shift-Tab',
+        preventDefault: true,
+        run: indentLess,
+      },
+    );
+  }
+
+  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,105 @@
+import { Extension } from '@codemirror/state';
+import {
+  createCypherTheme,
+  ThemeOptions,
+} from './lang-cypher/createCypherTheme';
+import { tokens } from './ndlTokensCopy';
+
+export const lightThemeConstants: ThemeOptions = {
+  dark: false,
+  editorSettings: {
+    background: '#FEFEFE',
+    foreground: '#545454',
+    gutterForeground: '#a3a7ae',
+    selection: tokens.colors.neutral['20'],
+    textMatchingSelection: tokens.colors.lavender['15'],
+    cursor: '#000000',
+    autoCompletionPanel: {
+      selectedColor: '#cce2ff',
+      matchingTextColor: '#0066bf',
+      backgroundColor: '#F3F4F5',
+    },
+    searchPanel: {
+      background: '#FEFEFE',
+      text: '#545454',
+      buttonHoverBackground: tokens.theme.light.palette.neutral.bg.strong,
+    },
+  },
+  highlightStyles: {
+    comment: tokens.palette.code.light.comment,
+    keyword: tokens.palette.code.light.keyword,
+    keywordLiteral: tokens.palette.code.light.keywordLiteral,
+    label: tokens.palette.code.light.label,
+    predicateFunction: tokens.palette.code.light.predicateFunction,
+    function: tokens.palette.code.light.function,
+    procedure: tokens.palette.code.light.procedure,
+    stringLiteral: tokens.palette.code.light.stringLiteral,
+    numberLiteral: tokens.palette.code.light.numberLiteral,
+    booleanLiteral: tokens.palette.code.light.booleanLiteral,
+    operator: tokens.palette.code.light.operator,
+    property: tokens.palette.code.light.property,
+    paramValue: tokens.palette.code.light.paramValue,
+  },
+};
+
+export const darkThemeConstants: ThemeOptions = {
+  dark: true,
+  editorSettings: {
+    background: '#242936',
+    foreground: '#cccac2',
+    gutterForeground: '#8a919966',
+    selection: '#409fff40',
+    textMatchingSelection: '#695380',
+    cursor: tokens.colors.neutral['10'],
+    autoCompletionPanel: {
+      selectedColor: '#062f4a',
+      matchingTextColor: '#0097fb',
+      backgroundColor: '#1C212B',
+    },
+    searchPanel: {
+      background: tokens.theme.dark.palette.neutral.bg.default,
+      text: tokens.theme.dark.palette.neutral.text.default,
+      buttonHoverBackground: tokens.theme.dark.palette.neutral.bg.strong,
+    },
+  },
+  highlightStyles: {
+    comment: tokens.palette.code.dark.comment,
+    keyword: tokens.palette.code.dark.keyword,
+    keywordLiteral: tokens.palette.code.dark.keywordLiteral,
+    label: tokens.palette.code.dark.label,
+    predicateFunction: tokens.palette.code.dark.predicateFunction,
+    function: tokens.palette.code.dark.function,
+    procedure: tokens.palette.code.dark.procedure,
+    stringLiteral: tokens.palette.code.dark.stringLiteral,
+    numberLiteral: tokens.palette.code.dark.numberLiteral,
+    booleanLiteral: tokens.palette.code.dark.booleanLiteral,
+    operator: tokens.palette.code.dark.operator,
+    property: tokens.palette.code.dark.property,
+    paramValue: tokens.palette.code.dark.paramValue,
+  },
+};
+
+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/src/viteEnv.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />