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

package/src/lang-cypher/autocomplete.ts

@@ -1,8 +1,16 @@
-import { CompletionSource } from '@codemirror/autocomplete';
+import {
+  Completion,
+  CompletionSource,
+  snippet,
+} from '@codemirror/autocomplete';
 import { autocomplete } from '@neo4j-cypher/language-support';
-import { CompletionItemKind } from 'vscode-languageserver-types';
+import {
+  CompletionItemKind,
+  CompletionItemTag,
+} from 'vscode-languageserver-types';
 import { CompletionItemIcons } from '../icons';
-import type { CypherConfig } from './lang-cypher';
+import type { CypherConfig } from './langCypher';
+import { getDocString } from './utils';
 
 const completionKindToCodemirrorIcon = (c: CompletionItemKind) => {
   const map: Record<CompletionItemKind, CompletionItemIcons> = {
@@ -28,7 +36,8 @@ const completionKindToCodemirrorIcon = (c: CompletionItemKind) => {
     [CompletionItemKind.EnumMember]: 'EnumMember',
     [CompletionItemKind.Constant]: 'Constant',
     [CompletionItemKind.Struct]: 'Struct',
-    [CompletionItemKind.Event]: 'Event',
+    // 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',
   };
@@ -36,12 +45,22 @@ const completionKindToCodemirrorIcon = (c: CompletionItemKind) => {
   return map[c];
 };
 
+export const completionStyles: (
+  completion: Completion & { deprecated?: boolean },
+) => string = (completion) => {
+  if (completion.deprecated) {
+    return 'cm-deprecated-completion';
+  } else {
+    return null;
+  }
+};
+
 export const cypherAutocomplete: (config: CypherConfig) => CompletionSource =
   (config) => (context) => {
-    const textUntilCursor = context.state.doc.toString().slice(0, context.pos);
+    const documentText = context.state.doc.toString();
 
-    const triggerCharacters = ['.', ':', '{', '$'];
-    const lastCharacter = textUntilCursor.slice(-1);
+    const triggerCharacters = ['.', ':', '{', '$', ')'];
+    const lastCharacter = documentText.at(context.pos - 1);
 
     const lastWord = context.matchBefore(/\w*/);
     const inWord = lastWord.from !== lastWord.to;
@@ -49,17 +68,90 @@ export const cypherAutocomplete: (config: CypherConfig) => CompletionSource =
     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 ?? {});
+    const options = autocomplete(
+      documentText,
+      config.schema ?? {},
+      context.pos,
+      context.explicit,
+    );
 
-    return {
-      from: context.matchBefore(/(\w|\$)*$/).from,
-      options: options.map((o) => ({
-        label: o.label,
-        type: completionKindToCodemirrorIcon(o.kind),
-      })),
-    };
+    if (config.featureFlags?.signatureInfoOnAutoCompletions) {
+      return {
+        from: context.matchBefore(/(\w|\$)*$/).from,
+        options: options.map((o) => {
+          let maybeInfo = {};
+          let emptyInfo = true;
+          const newDiv = document.createElement('div');
+
+          if (o.signature) {
+            const header = document.createElement('p');
+            header.setAttribute('class', 'cm-completionInfo-signature');
+            header.textContent = o.signature;
+            if (header.textContent.length > 0) {
+              emptyInfo = false;
+              newDiv.appendChild(header);
+            }
+          }
+
+          if (o.documentation) {
+            const paragraph = document.createElement('p');
+            paragraph.textContent = getDocString(o.documentation);
+            if (paragraph.textContent.length > 0) {
+              emptyInfo = false;
+              newDiv.appendChild(paragraph);
+            }
+          }
+
+          if (!emptyInfo) {
+            maybeInfo = {
+              info: () => Promise.resolve(newDiv),
+            };
+          }
+          const deprecated =
+            o.tags?.find((tag) => tag === CompletionItemTag.Deprecated) ??
+            false;
+          // The negative boost moves the deprecation down the list
+          // so we offer the user the completions that are
+          // deprecated the last
+          const maybeDeprecated = deprecated
+            ? { boost: -99, deprecated: true }
+            : {};
+
+          return {
+            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,
+            ...maybeDeprecated,
+            ...maybeInfo,
+          };
+        }),
+      };
+    } else {
+      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

@@ -31,8 +31,30 @@ export const cypherTokenTypeToNode = (facet: Facet<unknown>) => ({
   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,
@@ -55,6 +77,7 @@ export const tokenTypeToStyleTag: Record<HighlightedCypherTokenTypes, Tag> = {
   bracket: tags.bracket,
   punctuation: tags.punctuation,
   separator: tags.separator,
+  consoleCommand: tags.macroName,
 };
 
 export const parserAdapterNodeSet = (nodes: Record<string, NodeType>) =>

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

@@ -1,5 +1,9 @@
 import { tags } from '@lezer/highlight';
-import { applySyntaxColouring } from '@neo4j-cypher/language-support';
+import {
+  applySyntaxColouring,
+  CypherTokenType,
+} from '@neo4j-cypher/language-support';
+import { expect, test } from 'vitest';
 import { tokenTypeToStyleTag } from './constants';
 
 const cypherQueryWithAllTokenTypes = `MATCH (variable :Label)-[:REL_TYPE]->() 
@@ -54,7 +58,7 @@ test('correctly parses all cypher token types to style tags', () => {
   ]);
 
   const styleTags = tokenTypes.map((tokenType) => {
-    if (tokenType === 'none') return undefined;
+    if (tokenType === CypherTokenType.none) return undefined;
     return tokenTypeToStyleTag[tokenType];
   });
   const correctTags = [

package/src/lang-cypher/{create-cypher-theme.ts → createCypherTheme.ts}

@@ -5,6 +5,7 @@ import {
 } 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 {
@@ -15,7 +16,7 @@ import {
   replaceAllSvg,
   replaceSvg,
   upArrowSvg,
-} from './theme-icons';
+} from './themeIcons';
 
 export interface ThemeOptions {
   dark: boolean;
@@ -53,6 +54,9 @@ export const createCypherTheme = ({
       color: settings.foreground,
       fontVariantLigatures: 'none',
     },
+    '& .cm-snippetField': {
+      backgroundColor: settings.autoCompletionPanel.selectedColor,
+    },
     '&.cm-focused': {
       outline: 'none',
     },
@@ -61,8 +65,9 @@ export const createCypherTheme = ({
       color: settings.gutterForeground,
       border: 'none',
     },
-    '&.cm-editor .cm-scroller': {
+    '&.cm-editor': {
       fontFamily: 'Fira Code, Menlo, Monaco, Lucida Console, monospace',
+      height: '100%',
     },
     '.cm-content': {
       caretColor: settings.cursor,
@@ -80,6 +85,9 @@ export const createCypherTheme = ({
     '& .cm-selectionMatch': {
       backgroundColor: settings.textMatchingSelection,
     },
+    '& .cm-bold': {
+      fontWeight: 'bold',
+    },
     '& .cm-panels': {
       backgroundColor: settings.searchPanel.background,
       fontFamily: 'Fira Code, Menlo, Monaco, Lucida Console, monospace',
@@ -93,7 +101,37 @@ export const createCypherTheme = ({
       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-description': {
+      padding: '5px',
+    },
+    '.cm-completionInfo-signature': {
+      color: 'darkgrey',
+    },
+    '.cm-deprecated-completion': {
+      'text-decoration': 'line-through',
+    },
     '.cm-tooltip-autocomplete': {
+      maxWidth: '430px',
       '& > ul > li[aria-selected]': {
         backgroundColor: settings.autoCompletionPanel.selectedColor,
         color: settings.foreground,
@@ -198,6 +236,7 @@ export const createCypherTheme = ({
     ([token, color]: [HighlightedCypherTokenTypes, string]): TagStyle => ({
       tag: tokenTypeToStyleTag[token],
       color,
+      class: token === CypherTokenType.consoleCommand ? 'cm-bold' : undefined,
     }),
   );
   const highlightStyle = HighlightStyle.define(styles);

package/src/lang-cypher/langCypher.ts

@@ -0,0 +1,53 @@
+import { autocompletion } from '@codemirror/autocomplete';
+import {
+  defineLanguageFacet,
+  Language,
+  LanguageSupport,
+} from '@codemirror/language';
+import {
+  _internalFeatureFlags,
+  type DbSchema,
+} from '@neo4j-cypher/language-support';
+import { completionStyles, 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;
+  showSignatureTooltipBelow?: boolean;
+  featureFlags?: {
+    signatureInfoOnAutoCompletions?: boolean;
+    consoleCommands?: boolean;
+  };
+  schema?: DbSchema;
+  useLightVersion: boolean;
+  setUseLightVersion?: (useLightVersion: boolean) => void;
+};
+
+export function cypher(config: CypherConfig) {
+  const featureFlags = config.featureFlags;
+  // We allow to override the consoleCommands feature flag
+  if (featureFlags.consoleCommands !== undefined) {
+    _internalFeatureFlags.consoleCommands = featureFlags.consoleCommands;
+  }
+
+  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),
+    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;
+};

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,
+    ]);
+  }
+}

package/src/lang-cypher/signatureHelp.ts

@@ -0,0 +1,133 @@
+import { EditorState, StateField } from '@codemirror/state';
+import { showTooltip, Tooltip } from '@codemirror/view';
+import { signatureHelp } from '@neo4j-cypher/language-support';
+import { SignatureInformation } from 'vscode-languageserver-types';
+import { CypherConfig } from './langCypher';
+import { getDocString } from './utils';
+
+function getTriggerCharacter(query: string, caretPosition: number) {
+  let i = caretPosition - 1;
+  let triggerCharacter = query.at(i);
+
+  // Discard all space characters. Note that a space can be more than just a ' '
+  while (/\s/.test(triggerCharacter) && i > 0) {
+    i -= 1;
+    triggerCharacter = query.at(i);
+  }
+
+  return triggerCharacter;
+}
+
+const createSignatureHelpElement =
+  ({
+    signature,
+    activeParameter,
+  }: {
+    signature: SignatureInformation;
+    activeParameter: number;
+  }) =>
+  () => {
+    const parameters = signature.parameters;
+    const doc = getDocString(signature.documentation);
+    const dom = document.createElement('div');
+    dom.className = 'cm-signature-help-panel';
+
+    const contents = document.createElement('div');
+    contents.className = 'cm-signature-help-panel-contents';
+    dom.appendChild(contents);
+
+    const signatureLabel = document.createElement('div');
+    signatureLabel.className = 'cm-signature-help-panel-name';
+    signatureLabel.appendChild(document.createTextNode(`${signature.label}(`));
+
+    parameters.forEach((param, index) => {
+      if (typeof param.documentation === 'string') {
+        const span = document.createElement('span');
+        span.appendChild(document.createTextNode(param.documentation));
+        if (index !== parameters.length - 1) {
+          span.appendChild(document.createTextNode(', '));
+        }
+
+        if (index === activeParameter) {
+          span.className = 'cm-signature-help-panel-current-argument';
+        }
+        signatureLabel.appendChild(span);
+      }
+    });
+
+    signatureLabel.appendChild(document.createTextNode(')'));
+
+    contents.appendChild(signatureLabel);
+
+    const separator = document.createElement('div');
+    separator.className = 'cm-signature-help-panel-separator';
+
+    contents.appendChild(separator);
+
+    const description = document.createElement('div');
+    description.className = 'cm-signature-help-panel-description';
+    description.appendChild(document.createTextNode(doc));
+
+    contents.appendChild(description);
+
+    return { dom };
+  };
+
+function getSignatureHelpTooltip(
+  state: EditorState,
+  config: CypherConfig,
+): Tooltip[] {
+  let result: Tooltip[] = [];
+  const schema = config.schema;
+  const ranges = state.selection.ranges;
+  const range = ranges.at(0);
+
+  if (schema && ranges.length === 1 && range.from === range.to) {
+    const caretPosition = range.from;
+    const query = state.doc.toString();
+
+    const triggerCharacter = getTriggerCharacter(query, caretPosition);
+
+    if (triggerCharacter === '(' || triggerCharacter === ',') {
+      const signatureHelpInfo = signatureHelp(query, schema, caretPosition);
+      const activeSignature = signatureHelpInfo.activeSignature;
+      const signatures = signatureHelpInfo.signatures;
+      const activeParameter = signatureHelpInfo.activeParameter;
+
+      if (
+        activeSignature !== undefined &&
+        activeSignature >= 0 &&
+        activeSignature < signatures.length &&
+        signatures[activeSignature].documentation !== undefined
+      ) {
+        const signature = signatures[activeSignature];
+        const showSignatureTooltipBelow =
+          config.showSignatureTooltipBelow ?? true;
+
+        result = [
+          {
+            pos: caretPosition,
+            above: !showSignatureTooltipBelow,
+            arrow: true,
+            create: createSignatureHelpElement({ signature, activeParameter }),
+          },
+        ];
+      }
+    }
+  }
+
+  return result;
+}
+
+export function signatureHelpTooltip(config: CypherConfig) {
+  return StateField.define<readonly Tooltip[]>({
+    create: (state) => getSignatureHelpTooltip(state, config),
+
+    update(tooltips, tr) {
+      if (!tr.docChanged && !tr.selection) return tooltips;
+      return getSignatureHelpTooltip(tr.state, config);
+    },
+
+    provide: (f) => showTooltip.computeN([f], (state) => state.field(f)),
+  });
+}