@neo4j-cypher/react-codemirror 2.0.0-alpha.0 → 2.0.0-canary-a1ed8f3

package/src/index.ts

@@ -0,0 +1,4 @@
+export { CypherParser } from '@neo4j-cypher/language-support';
+export { CypherEditor } from './CypherEditor';
+export { cypher } from './lang-cypher/langCypher';
+export { darkThemeConstants, lightThemeConstants } from './themes';

package/src/lang-cypher/autocomplete.ts

@@ -0,0 +1,81 @@
+import { CompletionSource, snippet } from '@codemirror/autocomplete';
+import { autocomplete } from '@neo4j-cypher/language-support';
+import { CompletionItemKind } from 'vscode-languageserver-types';
+import { CompletionItemIcons } from '../icons';
+import type { CypherConfig } from './langCypher';
+
+const completionKindToCodemirrorIcon = (c: CompletionItemKind) => {
+  const map: Record<CompletionItemKind, CompletionItemIcons> = {
+    [CompletionItemKind.Text]: 'Text',
+    [CompletionItemKind.Method]: 'Method',
+    [CompletionItemKind.Function]: 'Function',
+    [CompletionItemKind.Constructor]: 'Constructor',
+    [CompletionItemKind.Field]: 'Field',
+    [CompletionItemKind.Variable]: 'Variable',
+    [CompletionItemKind.Class]: 'Class',
+    [CompletionItemKind.Interface]: 'Interface',
+    [CompletionItemKind.Module]: 'Module',
+    [CompletionItemKind.Property]: 'Property',
+    [CompletionItemKind.Unit]: 'Unit',
+    [CompletionItemKind.Value]: 'Value',
+    [CompletionItemKind.Enum]: 'Enum',
+    [CompletionItemKind.Keyword]: 'Keyword',
+    [CompletionItemKind.Snippet]: 'Snippet',
+    [CompletionItemKind.Color]: 'Color',
+    [CompletionItemKind.File]: 'File',
+    [CompletionItemKind.Reference]: 'Reference',
+    [CompletionItemKind.Folder]: 'Folder',
+    [CompletionItemKind.EnumMember]: 'EnumMember',
+    [CompletionItemKind.Constant]: 'Constant',
+    [CompletionItemKind.Struct]: 'Struct',
+    // we're miss-using the enum here as there is no `Console` kind in the predefined list
+    [CompletionItemKind.Event]: 'Console',
+    [CompletionItemKind.Operator]: 'Operator',
+    [CompletionItemKind.TypeParameter]: 'TypeParameter',
+  };
+
+  return map[c];
+};
+
+export const cypherAutocomplete: (config: CypherConfig) => CompletionSource =
+  (config) => (context) => {
+    const textUntilCursor = context.state.doc.toString().slice(0, context.pos);
+
+    const triggerCharacters = ['.', ':', '{', '$', ')'];
+    const lastCharacter = textUntilCursor.slice(-1);
+
+    const lastWord = context.matchBefore(/\w*/);
+    const inWord = lastWord.from !== lastWord.to;
+
+    const shouldTriggerCompletion =
+      inWord || context.explicit || triggerCharacters.includes(lastCharacter);
+
+    if (config.useLightVersion && !context.explicit) {
+      return null;
+    }
+
+    if (!shouldTriggerCompletion) {
+      return null;
+    }
+
+    const options = autocomplete(
+      textUntilCursor,
+      config.schema ?? {},
+      undefined,
+      context.explicit,
+    );
+
+    return {
+      from: context.matchBefore(/(\w|\$)*$/).from,
+      options: options.map((o) => ({
+        label: o.label,
+        type: completionKindToCodemirrorIcon(o.kind),
+        apply:
+          o.kind === CompletionItemKind.Snippet
+            ? // codemirror requires an empty snippet space to be able to tab out of the completion
+              snippet((o.insertText ?? o.label) + '${}')
+            : undefined,
+        detail: o.detail,
+      })),
+    };
+  };

package/src/lang-cypher/constants.ts

@@ -0,0 +1,84 @@
+import { languageDataProp } from '@codemirror/language';
+import type { Facet } from '@codemirror/state';
+import { NodeSet, NodeType } from '@lezer/common';
+import { styleTags, Tag, tags } from '@lezer/highlight';
+import { CypherTokenType } from '@neo4j-cypher/language-support';
+
+export const cypherTokenTypeToNode = (facet: Facet<unknown>) => ({
+  topNode: NodeType.define({
+    id: 0,
+    name: 'topNode',
+    props: [languageDataProp.add({ topNode: facet })],
+  }),
+  comment: NodeType.define({ id: 1, name: 'comment' }),
+  keyword: NodeType.define({ id: 2, name: 'keyword' }),
+  label: NodeType.define({ id: 3, name: 'label' }),
+  predicateFunction: NodeType.define({ id: 4, name: 'predicateFunction' }),
+  function: NodeType.define({ id: 5, name: 'function' }),
+  procedure: NodeType.define({ id: 6, name: 'procedure' }),
+  variable: NodeType.define({ id: 7, name: 'variable' }),
+  paramDollar: NodeType.define({ id: 8, name: 'paramDollar' }),
+  paramValue: NodeType.define({ id: 9, name: 'paramValue' }),
+  symbolicName: NodeType.define({ id: 10, name: 'symbolicName' }),
+  operator: NodeType.define({ id: 11, name: 'operator' }),
+  stringLiteral: NodeType.define({ id: 12, name: 'stringLiteral' }),
+  numberLiteral: NodeType.define({ id: 13, name: 'numberLiteral' }),
+  booleanLiteral: NodeType.define({ id: 14, name: 'booleanLiteral' }),
+  keywordLiteral: NodeType.define({ id: 15, name: 'keywordLiteral' }),
+  property: NodeType.define({ id: 16, name: 'property' }),
+  namespace: NodeType.define({ id: 17, name: 'namespace' }),
+  bracket: NodeType.define({ id: 18, name: 'bracket' }),
+  none: NodeType.define({ id: 19, name: 'none' }),
+  separator: NodeType.define({ id: 20, name: 'separator' }),
+  punctuation: NodeType.define({ id: 21, name: 'punctuation' }),
+  consoleCommand: NodeType.define({ id: 22, name: 'consoleCommand' }),
+  // also include prism token types
+  'class-name': NodeType.define({ id: 23, name: 'label' }),
+  // this is escaped variables
+  identifier: NodeType.define({ id: 24, name: 'variable' }),
+  string: NodeType.define({ id: 25, name: 'stringLiteral' }),
+  relationship: NodeType.define({ id: 26, name: 'label' }),
+  boolean: NodeType.define({ id: 27, name: 'booleanLiteral' }),
+  number: NodeType.define({ id: 28, name: 'numberLiteral' }),
+});
+
+export type PrismSpecificTokenType =
+  | 'class-name'
+  | 'identifier'
+  | 'string'
+  | 'relationship'
+  | 'boolean'
+  | 'number';
+
+export type CodemirrorParseTokenType =
+  | CypherTokenType
+  | PrismSpecificTokenType
+  | 'topNode';
+
+export type HighlightedCypherTokenTypes = Exclude<CypherTokenType, 'none'>;
+export const tokenTypeToStyleTag: Record<HighlightedCypherTokenTypes, Tag> = {
+  comment: tags.comment,
+  keyword: tags.keyword,
+  label: tags.typeName,
+  predicateFunction: tags.function(tags.variableName),
+  function: tags.function(tags.variableName),
+  procedure: tags.function(tags.variableName),
+  variable: tags.variableName,
+  paramDollar: tags.atom,
+  paramValue: tags.atom,
+  symbolicName: tags.variableName,
+  operator: tags.operator,
+  stringLiteral: tags.string,
+  numberLiteral: tags.number,
+  booleanLiteral: tags.bool,
+  keywordLiteral: tags.operatorKeyword,
+  property: tags.propertyName,
+  namespace: tags.namespace,
+  bracket: tags.bracket,
+  punctuation: tags.punctuation,
+  separator: tags.separator,
+  consoleCommand: tags.macroName,
+};
+
+export const parserAdapterNodeSet = (nodes: Record<string, NodeType>) =>
+  new NodeSet(Object.values(nodes)).extend(styleTags(tokenTypeToStyleTag));

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

@@ -0,0 +1,104 @@
+import { tags } from '@lezer/highlight';
+import { applySyntaxColouring } from '@neo4j-cypher/language-support';
+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 === '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,240 @@
+import {
+  HighlightStyle,
+  syntaxHighlighting,
+  TagStyle,
+} from '@codemirror/language';
+import { Extension } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+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: '100%',
+    },
+    '& .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-description': {
+      padding: '5px',
+    },
+
+    '.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 === '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,41 @@
+import {
+  defineLanguageFacet,
+  Language,
+  LanguageSupport,
+} from '@codemirror/language';
+import {
+  setConsoleCommandsEnabled,
+  type DbSchema,
+} from '@neo4j-cypher/language-support';
+import { cypherAutocomplete } from './autocomplete';
+import { ParserAdapter } from './parser-adapter';
+import { signatureHelpTooltip } from './signatureHelp';
+import { cypherLinter, semanticAnalysisLinter } from './syntaxValidation';
+
+const facet = defineLanguageFacet({
+  commentTokens: { block: { open: '/*', close: '*/' }, line: '//' },
+  closeBrackets: { brackets: ['(', '[', '{', "'", '"', '`'] },
+});
+
+export type CypherConfig = {
+  lint?: boolean;
+  schema?: DbSchema;
+  useLightVersion: boolean;
+  setUseLightVersion?: (useLightVersion: boolean) => void;
+};
+
+export function cypher(config: CypherConfig) {
+  setConsoleCommandsEnabled(true);
+  const parserAdapter = new ParserAdapter(facet, config);
+
+  const cypherLanguage = new Language(facet, parserAdapter, [], 'cypher');
+
+  return new LanguageSupport(cypherLanguage, [
+    cypherLanguage.data.of({
+      autocomplete: cypherAutocomplete(config),
+    }),
+    cypherLinter(config),
+    semanticAnalysisLinter(config),
+    signatureHelpTooltip(config),
+  ]);
+}

package/src/lang-cypher/lintWorker.ts

@@ -0,0 +1,14 @@
+import { validateSemantics } from '@neo4j-cypher/language-support';
+import workerpool from 'workerpool';
+
+workerpool.worker({ validateSemantics });
+
+type LinterArgs = Parameters<typeof validateSemantics>;
+
+export type LinterTask = workerpool.Promise<
+  ReturnType<typeof validateSemantics>
+>;
+
+export type LintWorker = {
+  validateSemantics: (...args: LinterArgs) => LinterTask;
+};