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

package/src/lang-cypher/contants.test.ts

@@ -0,0 +1,108 @@
+import { tags } from '@lezer/highlight';
+import {
+  applySyntaxColouring,
+  CypherTokenType,
+} from '@neo4j-cypher/language-support';
+import { expect, test } from 'vitest';
+import { tokenTypeToStyleTag } from './constants';
+
+const cypherQueryWithAllTokenTypes = `MATCH (variable :Label)-[:REL_TYPE]->() 
+WHERE variable.property = "String" 
+    OR namespaced.function() = false
+    // comment
+    OR $parameter > 2 
+RETURN variable;`;
+
+test('correctly parses all cypher token types to style tags', () => {
+  const tokens = applySyntaxColouring(cypherQueryWithAllTokenTypes);
+  const tokenTypes = tokens.map((token) => token.tokenType);
+  expect(tokenTypes).toEqual([
+    'keyword',
+    'bracket',
+    'variable',
+    'operator',
+    'label',
+    'bracket',
+    'separator',
+    'bracket',
+    'operator',
+    'label',
+    'bracket',
+    'separator',
+    'separator',
+    'bracket',
+    'bracket',
+    'keyword',
+    'variable',
+    'operator',
+    'property',
+    'operator',
+    'stringLiteral',
+    'keyword',
+    'function',
+    'operator',
+    'function',
+    'bracket',
+    'bracket',
+    'operator',
+    'booleanLiteral',
+    'comment',
+    'keyword',
+    'paramDollar',
+    'paramValue',
+    'operator',
+    'numberLiteral',
+    'keyword',
+    'variable',
+    'punctuation',
+  ]);
+
+  const styleTags = tokenTypes.map((tokenType) => {
+    if (tokenType === CypherTokenType.none) return undefined;
+    return tokenTypeToStyleTag[tokenType];
+  });
+  const correctTags = [
+    tags.keyword,
+    tags.bracket,
+    tags.variableName,
+    tags.operator,
+    tags.typeName,
+    tags.bracket,
+    tags.separator,
+    tags.bracket,
+    tags.operator,
+    tags.typeName,
+    tags.bracket,
+    tags.separator,
+    tags.separator,
+    tags.bracket,
+    tags.bracket,
+    tags.keyword,
+    tags.variableName,
+    tags.operator,
+    tags.propertyName,
+    tags.operator,
+    tags.string,
+    tags.keyword,
+    tags.function(tags.variableName),
+    tags.operator,
+    tags.function(tags.variableName),
+    tags.bracket,
+    tags.bracket,
+    tags.operator,
+    tags.bool,
+    tags.comment,
+    tags.keyword,
+    tags.atom,
+    tags.atom,
+    tags.operator,
+    tags.number,
+    tags.keyword,
+    tags.variableName,
+    tags.punctuation,
+  ];
+
+  styleTags.forEach((styleTag, index) => {
+    expect(styleTag).toEqual(correctTags[index]);
+  });
+});

package/src/lang-cypher/createCypherTheme.ts

@@ -0,0 +1,249 @@
+import {
+  HighlightStyle,
+  syntaxHighlighting,
+  TagStyle,
+} from '@codemirror/language';
+import { Extension } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+import { CypherTokenType } from '@neo4j-cypher/language-support';
+import { StyleSpec } from 'style-mod';
+import { HighlightedCypherTokenTypes, tokenTypeToStyleTag } from './constants';
+import {
+  byWordSvg,
+  caseSensitiveSvg,
+  downArrowSvg,
+  regexSvg,
+  replaceAllSvg,
+  replaceSvg,
+  upArrowSvg,
+} from './themeIcons';
+
+export interface ThemeOptions {
+  dark: boolean;
+  editorSettings: {
+    background: string;
+    foreground: string;
+    gutterForeground: string;
+    cursor: string;
+    selection: string;
+    textMatchingSelection: string;
+    searchPanel: {
+      background: string;
+      text: string;
+      buttonHoverBackground: string;
+    };
+    autoCompletionPanel: {
+      selectedColor: string;
+      backgroundColor: string;
+      matchingTextColor: string;
+    };
+  };
+  highlightStyles: Partial<Record<HighlightedCypherTokenTypes, string>>;
+  inheritBgColor?: boolean;
+}
+
+export const createCypherTheme = ({
+  dark,
+  editorSettings: settings,
+  highlightStyles,
+  inheritBgColor,
+}: ThemeOptions): Extension => {
+  const themeOptions: Record<string, StyleSpec> = {
+    '&': {
+      backgroundColor: inheritBgColor ? 'inherit' : settings.background,
+      color: settings.foreground,
+      fontVariantLigatures: 'none',
+    },
+    '& .cm-snippetField': {
+      backgroundColor: settings.autoCompletionPanel.selectedColor,
+    },
+    '&.cm-focused': {
+      outline: 'none',
+    },
+    '.cm-gutters': {
+      backgroundColor: inheritBgColor ? 'inherit' : settings.background,
+      color: settings.gutterForeground,
+      border: 'none',
+    },
+    '&.cm-editor': {
+      fontFamily: 'Fira Code, Menlo, Monaco, Lucida Console, monospace',
+      height: '100%',
+    },
+    '.cm-content': {
+      caretColor: settings.cursor,
+    },
+    '.cm-cursor, .cm-dropCursor': {
+      borderLeftColor: settings.cursor,
+    },
+    '.cm-activeLine ::not(::selection)': {
+      backgroundColor: settings.background,
+    },
+    '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection ':
+      {
+        backgroundColor: settings.selection,
+      },
+    '& .cm-selectionMatch': {
+      backgroundColor: settings.textMatchingSelection,
+    },
+    '& .cm-bold': {
+      fontWeight: 'bold',
+    },
+    '& .cm-panels': {
+      backgroundColor: settings.searchPanel.background,
+      fontFamily: 'Fira Code, Menlo, Monaco, Lucida Console, monospace',
+    },
+    '& .cm-completionLabel': {
+      fontFamily: 'Fira Code, Menlo, Monaco, Lucida Console, monospace',
+      verticalAlign: 'middle',
+    },
+    '& .cm-completionMatchedText': {
+      fontWeight: 'bold',
+      color: settings.autoCompletionPanel.matchingTextColor,
+      textDecoration: 'none',
+    },
+    '& .cm-signature-help-panel': {
+      backgroundColor: settings.autoCompletionPanel.backgroundColor,
+      maxWidth: '700px',
+      maxHeight: '250px',
+      fontFamily: 'Fira Code, Menlo, Monaco, Lucida Console, monospace',
+    },
+    '& .cm-signature-help-panel-contents': {
+      overflow: 'auto',
+      maxHeight: '250px',
+    },
+    '& .cm-signature-help-panel-current-argument': {
+      color: settings.autoCompletionPanel.matchingTextColor,
+      fontWeight: 'bold',
+    },
+    '& .cm-signature-help-panel-separator': {
+      borderBottom: '1px solid #ccc',
+    },
+    '& .cm-signature-help-panel-name': {
+      padding: '5px',
+    },
+    '& .cm-signature-help-panel-arg-description': {
+      padding: '5px',
+    },
+    '& .cm-signature-help-panel-description': {
+      padding: '5px',
+    },
+    '.cm-completionInfo-signature': {
+      color: 'darkgrey',
+    },
+    '.cm-deprecated-element': {
+      'text-decoration': 'line-through',
+    },
+    '.cm-tooltip-autocomplete': {
+      maxWidth: '430px',
+      '& > ul > li[aria-selected]': {
+        backgroundColor: settings.autoCompletionPanel.selectedColor,
+        color: settings.foreground,
+      },
+      '& > ul': {
+        backgroundColor: settings.autoCompletionPanel.backgroundColor,
+        color: settings.foreground,
+      },
+    },
+    '& .cm-search.cm-panel': {
+      '& input': {
+        fontFamily: 'Fira Code, Menlo, Monaco, Lucida Console, monospace',
+      },
+      backgroundColor: settings.searchPanel.background,
+      color: settings.searchPanel.text,
+
+      '& .cm-button[name=select]': { display: 'none' },
+      '& .cm-button': {
+        backgroundImage: 'none',
+        color: settings.searchPanel.text,
+        fontSize: 0,
+        border: 'none',
+        verticalAlign: 'middle',
+        '&[name=next]::before': {
+          content: `url("data:image/svg+xml;base64,${window.btoa(
+            downArrowSvg,
+          )}")`,
+        },
+        '&[name=prev]::before': {
+          content: `url("data:image/svg+xml;base64,${window.btoa(
+            upArrowSvg,
+          )}")`,
+        },
+        '&[name=replace]::before': {
+          content: `url("data:image/svg+xml;base64,${window.btoa(
+            replaceSvg,
+          )}")`,
+        },
+        '&[name=replaceAll]::before': {
+          content: `url("data:image/svg+xml;base64,${window.btoa(
+            replaceAllSvg,
+          )}")`,
+        },
+        width: '20px',
+        height: '20px',
+
+        marginRight: '1px',
+        marginLeft: '1px',
+        borderRadius: '4px',
+        padding: '2px',
+        '&:hover': {
+          backgroundColor: settings.searchPanel.buttonHoverBackground,
+        },
+      },
+
+      '& label': {
+        fontSize: '0',
+        height: '20px',
+        width: '20px',
+        verticalAlign: 'middle',
+        "& input[type='checkbox']": {
+          cursor: 'pointer',
+          appearance: 'none',
+          marginRight: '1px',
+          marginLeft: '1px',
+          padding: '2px',
+          height: '20px',
+          width: '20px',
+          verticalAlign: 'middle',
+          display: 'inline-flex',
+          borderRadius: '4px',
+
+          '&[name=case]::before': {
+            content: `url("data:image/svg+xml;base64,${window.btoa(
+              caseSensitiveSvg,
+            )}")`,
+          },
+          '&[name=re]::before': {
+            content: `url("data:image/svg+xml;base64,${window.btoa(
+              regexSvg,
+            )}")`,
+          },
+          '&[name=word]::before': {
+            content: `url("data:image/svg+xml;base64,${window.btoa(
+              byWordSvg,
+            )}")`,
+          },
+          '&:hover': {
+            backgroundColor: settings.searchPanel.buttonHoverBackground,
+          },
+          '&:checked': {
+            backgroundColor: settings.searchPanel.buttonHoverBackground,
+          },
+        },
+      },
+    },
+  };
+
+  const themeExtension = EditorView.theme(themeOptions, { dark });
+
+  const styles = Object.entries(highlightStyles).map(
+    ([token, color]: [HighlightedCypherTokenTypes, string]): TagStyle => ({
+      tag: tokenTypeToStyleTag[token],
+      color,
+      class: token === CypherTokenType.consoleCommand ? 'cm-bold' : undefined,
+    }),
+  );
+  const highlightStyle = HighlightStyle.define(styles);
+  const extension = [themeExtension, syntaxHighlighting(highlightStyle)];
+
+  return extension;
+};

package/src/lang-cypher/langCypher.ts

@@ -0,0 +1,43 @@
+import { autocompletion } from '@codemirror/autocomplete';
+import {
+  defineLanguageFacet,
+  Language,
+  LanguageSupport,
+} from '@codemirror/language';
+import { type DbSchema } from '@neo4j-cypher/language-support';
+import { completionStyles, cypherAutocomplete } from './autocomplete';
+import { ParserAdapter } from './parser-adapter';
+import { signatureHelpTooltip } from './signatureHelp';
+import { cypherLinter } from './syntaxValidation';
+
+const facet = defineLanguageFacet({
+  commentTokens: { block: { open: '/*', close: '*/' }, line: '//' },
+  closeBrackets: { brackets: ['(', '[', '{', "'", '"', '`'] },
+});
+
+export type CypherConfig = {
+  lint?: boolean;
+  showSignatureTooltipBelow?: boolean;
+  featureFlags?: {
+    consoleCommands?: boolean;
+    cypher25?: boolean;
+  };
+  schema?: DbSchema;
+  useLightVersion: boolean;
+  setUseLightVersion?: (useLightVersion: boolean) => void;
+};
+
+export function cypher(config: CypherConfig) {
+  const parserAdapter = new ParserAdapter(facet, config);
+
+  const cypherLanguage = new Language(facet, parserAdapter, [], 'cypher');
+
+  return new LanguageSupport(cypherLanguage, [
+    autocompletion({
+      override: [cypherAutocomplete(config)],
+      optionClass: completionStyles,
+    }),
+    cypherLinter(config),
+    signatureHelpTooltip(config),
+  ]);
+}

package/src/lang-cypher/lintWorker.ts

@@ -0,0 +1,31 @@
+import {
+  DbSchema,
+  lintCypherQuery as _lintCypherQuery,
+  _internalFeatureFlags,
+} from '@neo4j-cypher/language-support';
+import workerpool from 'workerpool';
+
+function lintCypherQuery(
+  query: string,
+  dbSchema: DbSchema,
+  featureFlags: { consoleCommands?: boolean; cypher25?: boolean } = {},
+) {
+  // We allow to override the consoleCommands feature flag
+  if (featureFlags.consoleCommands !== undefined) {
+    _internalFeatureFlags.consoleCommands = featureFlags.consoleCommands;
+  }
+  if (featureFlags.cypher25 !== undefined) {
+    _internalFeatureFlags.cypher25 = featureFlags.cypher25;
+  }
+  return _lintCypherQuery(query, dbSchema);
+}
+
+workerpool.worker({ lintCypherQuery });
+
+type LinterArgs = Parameters<typeof lintCypherQuery>;
+
+export type LinterTask = workerpool.Promise<ReturnType<typeof lintCypherQuery>>;
+
+export type LintWorker = {
+  lintCypherQuery: (...args: LinterArgs) => LinterTask;
+};

package/src/lang-cypher/parser-adapter.ts

@@ -0,0 +1,145 @@
+import { Facet } from '@codemirror/state';
+import { Input, NodeType, Parser, PartialParse, Tree } from '@lezer/common';
+import {
+  applySyntaxColouring,
+  ParsedCypherToken,
+} from '@neo4j-cypher/language-support';
+
+import Prism from 'prismjs';
+import {
+  CodemirrorParseTokenType,
+  cypherTokenTypeToNode,
+  parserAdapterNodeSet,
+} from './constants';
+// This import will load the cypher support in prisma
+import 'prismjs/components/prism-cypher';
+import { CypherConfig } from './langCypher';
+
+const DEFAULT_NODE_GROUP_SIZE = 4;
+Prism.manual = true;
+
+export class ParserAdapter extends Parser {
+  cypherTokenTypeToNode: Record<CodemirrorParseTokenType, NodeType>;
+
+  constructor(facet: Facet<unknown>, private config: CypherConfig) {
+    super();
+    this.cypherTokenTypeToNode = cypherTokenTypeToNode(facet);
+  }
+
+  createParse(input: Input): PartialParse {
+    return this.startParse(input);
+  }
+
+  /* There are more arguments, but since we don't do any incremental parsing, they are not useful */
+  startParse(input: string | Input): PartialParse {
+    const document =
+      typeof input === 'string' ? input : input.read(0, input.length);
+
+    const tree = this.buildTree(document);
+
+    return {
+      stoppedAt: input.length,
+      parsedPos: input.length,
+      stopAt: () => {
+        return undefined;
+      },
+      advance: () => tree,
+    };
+  }
+
+  private buildTree(document: string) {
+    const parse = this.config.useLightVersion
+      ? this.prismParse(document)
+      : this.antlrParse(document);
+
+    if (parse.tokens.length === 0) {
+      return this.createEmptyTree(document);
+    }
+
+    const buffer =
+      parse.type === 'prism'
+        ? this.createBufferForPrismTokens(parse.tokens)
+        : this.createBufferForAntlrTokens(parse.tokens);
+
+    this.addTopNodeToBuffer(buffer, document);
+
+    return Tree.build({
+      buffer: buffer.flat(),
+      nodeSet: parserAdapterNodeSet(this.cypherTokenTypeToNode),
+      topID: this.cypherTokenTypeToNode.topNode.id,
+    });
+  }
+
+  private antlrParse(document: string) {
+    const startTime = performance.now();
+    const tokens = applySyntaxColouring(document);
+    const timeTaken = performance.now() - startTime;
+    if (timeTaken > 300) {
+      this.config.setUseLightVersion?.(true);
+    }
+    return { type: 'antlr' as const, tokens };
+  }
+
+  private prismParse(document: string) {
+    if (document.length === 0) {
+      this.config.setUseLightVersion?.(false);
+    }
+    const tokens = Prism.tokenize(document, Prism.languages.cypher);
+    return {
+      type: 'prism' as const,
+      tokens,
+    };
+  }
+  private createBufferForAntlrTokens(tokens: ParsedCypherToken[]) {
+    return tokens.map((token) => {
+      const nodeTypeId = this.cypherTokenTypeToNode[token.tokenType].id;
+      const startOffset = token.position.startOffset;
+      const endOffset = token.position.startOffset + token.length;
+
+      return [nodeTypeId, startOffset, endOffset, DEFAULT_NODE_GROUP_SIZE];
+    });
+  }
+
+  private createBufferForPrismTokens(tokens: (string | Prism.Token)[]) {
+    let totalOffset = 0;
+    return tokens.map((token) => {
+      const tokenType = (
+        typeof token === 'string' ? 'variable' : token.type
+      ) as CodemirrorParseTokenType;
+
+      const nodeTypeId = this.cypherTokenTypeToNode[tokenType].id;
+      const startOffset = totalOffset;
+      const endOffset = startOffset + token.length;
+      totalOffset = endOffset;
+
+      return [nodeTypeId, startOffset, endOffset, DEFAULT_NODE_GROUP_SIZE];
+    });
+  }
+
+  private createEmptyTree(document: string) {
+    return Tree.build({
+      buffer: [
+        this.cypherTokenTypeToNode.topNode.id,
+        0,
+        document.length,
+        DEFAULT_NODE_GROUP_SIZE,
+      ],
+      nodeSet: parserAdapterNodeSet(this.cypherTokenTypeToNode),
+      topID: this.cypherTokenTypeToNode.topNode.id,
+    });
+  }
+
+  private addTopNodeToBuffer(buffer: number[][], document: string) {
+    const id = this.cypherTokenTypeToNode.topNode.id;
+    const startOffset = 0;
+    const endOffset = document.length;
+    const totalBufferLength = buffer.length * DEFAULT_NODE_GROUP_SIZE;
+
+    buffer.push([
+      id,
+      startOffset,
+      endOffset,
+      totalBufferLength + DEFAULT_NODE_GROUP_SIZE,
+    ]);
+  }
+}