@neo4j-cypher/react-codemirror 2.0.0-next.4 → 2.0.0-next.41

package/src/inlinePanel.ts

@@ -0,0 +1,140 @@
+import { StateEffect, StateField, type Extension } from '@codemirror/state';
+import {
+  Decoration,
+  type DecorationSet,
+  EditorView,
+  WidgetType,
+} from '@codemirror/view';
+
+import type { HostPortalCallbacks } from './hostCallbacks';
+
+/** Lifecycle callbacks for an inline panel. See {@link HostPortalCallbacks}. */
+export type InlinePanelCallbacks = HostPortalCallbacks;
+
+type InlinePanelShowOptions = {
+  /** Document position the panel anchors to. */
+  pos: number;
+  /**
+   * Where to render the panel relative to the line at `pos`. `'above'`
+   * places it before the line, `'below'` after it.
+   *
+   * @default 'above'
+   */
+  placement?: 'above' | 'below';
+} & InlinePanelCallbacks;
+
+type ShowPayload = InlinePanelShowOptions | null;
+
+export type InlinePanelController = {
+  /** CodeMirror extension to register on the editor. */
+  extension: Extension;
+  /** Build an effect that mounts the panel with the given options. */
+  show: (options: InlinePanelShowOptions) => StateEffect<ShowPayload>;
+  /** Build an effect that unmounts the panel. */
+  hide: () => StateEffect<ShowPayload>;
+  updateCallbacks: (callbacks: InlinePanelCallbacks) => void;
+};
+
+export function createInlinePanelController(): InlinePanelController {
+  const showEffect = StateEffect.define<ShowPayload>();
+
+  let callbacksRef: InlinePanelCallbacks | null = null;
+
+  class InlinePanelWidget extends WidgetType {
+    private resizeObserver: ResizeObserver | null = null;
+
+    constructor(readonly options: InlinePanelShowOptions) {
+      super();
+    }
+
+    toDOM(view: EditorView): HTMLElement {
+      const container = document.createElement('div');
+      container.className = 'cm-inline-panel';
+      this.resizeObserver = new ResizeObserver(() => view.requestMeasure());
+      this.resizeObserver.observe(container);
+      callbacksRef?.onMount(container);
+      return container;
+    }
+
+    destroy(): void {
+      this.resizeObserver?.disconnect();
+      this.resizeObserver = null;
+      callbacksRef?.onUnmount();
+    }
+
+    eq(other: InlinePanelWidget): boolean {
+      return (
+        other.options.pos === this.options.pos &&
+        other.options.placement === this.options.placement
+      );
+    }
+
+    ignoreEvent(): boolean {
+      return true;
+    }
+  }
+
+  const buildDecoration = (options: InlinePanelShowOptions): DecorationSet =>
+    Decoration.set([
+      Decoration.widget({
+        widget: new InlinePanelWidget(options),
+        block: true,
+        side: options.placement === 'below' ? 1 : -1,
+      }).range(options.pos),
+    ]);
+
+  const readOptions = (
+    decorations: DecorationSet,
+  ): InlinePanelShowOptions | null => {
+    const widget = decorations.iter().value?.spec?.widget;
+    return widget instanceof InlinePanelWidget ? widget.options : null;
+  };
+
+  const field = StateField.define<DecorationSet>({
+    create() {
+      return Decoration.none;
+    },
+    update(decorations, transaction) {
+      for (const effect of transaction.effects) {
+        if (effect.is(showEffect)) {
+          return effect.value === null
+            ? Decoration.none
+            : buildDecoration(effect.value);
+        }
+      }
+
+      // Nothing to do when the panel is closed, or when the document is unchanged
+      if (decorations.size === 0 || !transaction.docChanged) {
+        return decorations.map(transaction.changes);
+      }
+
+      // Re-anchor manually because CodeMirror's default mapping silently drops
+      // block-widget decorations when their anchor line is deleted
+      const options = readOptions(decorations);
+      if (options === null) {
+        return decorations.map(transaction.changes);
+      }
+      const side = options.placement === 'below' ? 1 : -1;
+      const lineNumber = Math.min(
+        transaction.startState.doc.lineAt(options.pos).number,
+        transaction.newDoc.lines,
+      );
+      const line = transaction.newDoc.line(lineNumber);
+
+      return buildDecoration({
+        ...options,
+        pos: side === 1 ? line.to : line.from,
+      });
+    },
+    provide: (f) => EditorView.decorations.from(f),
+  });
+
+  return {
+    extension: field,
+    show: (options) => showEffect.of(options),
+    hide: () => showEffect.of(null),
+    updateCallbacks: (callbacks) => {
+      callbacksRef = callbacks;
+    },
+  };
+}

package/src/lang-cypher/autocomplete.ts

@@ -1,8 +1,13 @@
-import { CompletionSource } from '@codemirror/autocomplete';
-import { autocomplete } from '@neo4j-cypher/language-support';
-import { CompletionItemKind } from 'vscode-languageserver-types';
-import { CompletionItemIcons } from '../icons';
-import type { CypherConfig } from './lang-cypher';
+import type { Completion, CompletionSource } from '@codemirror/autocomplete';
+import { snippet } from '@codemirror/autocomplete';
+import { shouldAutoCompleteYield } from '@neo4j-cypher/language-support';
+import {
+  CompletionItemKind,
+  CompletionItemTag,
+} from 'vscode-languageserver-types';
+import type { CompletionItemIcons } from '../icons';
+import type { CypherConfig } from './langCypher';
+import { getDocString } from './utils';
 
 const completionKindToCodemirrorIcon = (c: CompletionItemKind) => {
   const map: Record<CompletionItemKind, CompletionItemIcons> = {
@@ -28,7 +33,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,30 +42,101 @@ const completionKindToCodemirrorIcon = (c: CompletionItemKind) => {
   return map[c];
 };
 
+export const completionStyles: (
+  completion: Completion & { deprecated?: boolean },
+) => string = (completion) => {
+  if (completion.deprecated) {
+    return 'cm-deprecated-element';
+  } else {
+    return null;
+  }
+};
+
 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 documentText = context.state.doc.toString();
+    const offset = context.pos;
+    const triggerCharacters = ['.', ':', '{', '$', ')', ']', '-', '<'];
+    const lastCharacter = documentText.at(offset - 1);
+    const yieldTriggered = shouldAutoCompleteYield(documentText, offset);
     const lastWord = context.matchBefore(/\w*/);
     const inWord = lastWord.from !== lastWord.to;
-
     const shouldTriggerCompletion =
-      inWord || context.explicit || triggerCharacters.includes(lastCharacter);
+      inWord ||
+      context.explicit ||
+      triggerCharacters.includes(lastCharacter) ||
+      yieldTriggered;
+
+    if (config.useLightVersion && !context.explicit) {
+      return null;
+    }
 
     if (!shouldTriggerCompletion) {
       return null;
     }
 
-    const options = autocomplete(textUntilCursor, config.schema ?? {});
+    const options = config.languageService.autocomplete(
+      documentText,
+      config.schema ?? {},
+      {
+        caretPosition: offset,
+        manual: context.explicit,
+      },
+    );
 
     return {
-      from: context.matchBefore(/(\w|\$)*$/).from,
-      options: options.map((o) => ({
-        label: o.label,
-        type: completionKindToCodemirrorIcon(o.kind),
-      })),
+      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.insertText ? o.insertText : o.label,
+          displayLabel: 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,
+        };
+      }),
     };
   };

package/src/lang-cypher/constants.ts

@@ -1,8 +1,9 @@
 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';
+import type { Tag } from '@lezer/highlight';
+import { styleTags, tags } from '@lezer/highlight';
+import type { CypherTokenType } from '@neo4j-cypher/language-support';
 
 export const cypherTokenTypeToNode = (facet: Facet<unknown>) => ({
   topNode: NodeType.define({
@@ -31,8 +32,36 @@ 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' }),
+  setting: NodeType.define({ id: 29, name: 'setting' }),
+  settingValue: NodeType.define({ id: 30, name: 'settingValue' }),
+  interpolationDelimiter: NodeType.define({
+    id: 31,
+    name: 'interpolationDelimiter',
+  }),
 });
 
+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,
@@ -44,6 +73,7 @@ export const tokenTypeToStyleTag: Record<HighlightedCypherTokenTypes, Tag> = {
   variable: tags.variableName,
   paramDollar: tags.atom,
   paramValue: tags.atom,
+  interpolationDelimiter: tags.atom,
   symbolicName: tags.variableName,
   operator: tags.operator,
   stringLiteral: tags.string,
@@ -55,6 +85,9 @@ export const tokenTypeToStyleTag: Record<HighlightedCypherTokenTypes, Tag> = {
   bracket: tags.bracket,
   punctuation: tags.punctuation,
   separator: tags.separator,
+  consoleCommand: tags.macroName,
+  setting: tags.attributeName,
+  settingValue: tags.attributeValue,
 };
 
 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 {
+  highlightSyntax,
+  CypherTokenType,
+} from '@neo4j-cypher/language-support';
+import { expect, test } from 'vitest';
 import { tokenTypeToStyleTag } from './constants';
 
 const cypherQueryWithAllTokenTypes = `MATCH (variable :Label)-[:REL_TYPE]->() 
@@ -10,7 +14,7 @@ WHERE variable.property = "String"
 RETURN variable;`;
 
 test('correctly parses all cypher token types to style tags', () => {
-  const tokens = applySyntaxColouring(cypherQueryWithAllTokenTypes);
+  const tokens = highlightSyntax(cypherQueryWithAllTokenTypes);
   const tokenTypes = tokens.map((token) => token.tokenType);
   expect(tokenTypes).toEqual([
     'keyword',
@@ -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}

@@ -1,12 +1,11 @@
-import {
-  HighlightStyle,
-  syntaxHighlighting,
-  TagStyle,
-} from '@codemirror/language';
-import { Extension } from '@codemirror/state';
+import type { TagStyle } from '@codemirror/language';
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import type { Extension } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
-import { StyleSpec } from 'style-mod';
-import { HighlightedCypherTokenTypes, tokenTypeToStyleTag } from './constants';
+import { CypherTokenType } from '@neo4j-cypher/language-support';
+import type { StyleSpec } from 'style-mod';
+import type { HighlightedCypherTokenTypes } from './constants';
+import { tokenTypeToStyleTag } from './constants';
 import {
   byWordSvg,
   caseSensitiveSvg,
@@ -15,7 +14,18 @@ import {
   replaceAllSvg,
   replaceSvg,
   upArrowSvg,
-} from './theme-icons';
+} from './themeIcons';
+
+export interface DiffColors {
+  /** Background fill for the whole inserted/changed line. */
+  insertedLine: string;
+  /** Highlight for the exact inserted text within a changed line. */
+  insertedText: string;
+  /** Background fill for the whole deleted line widget. */
+  deletedLine: string;
+  /** Highlight for the exact deleted text within a deleted chunk. */
+  deletedText: string;
+}
 
 export interface ThemeOptions {
   dark: boolean;
@@ -39,6 +49,7 @@ export interface ThemeOptions {
   };
   highlightStyles: Partial<Record<HighlightedCypherTokenTypes, string>>;
   inheritBgColor?: boolean;
+  diffColors?: DiffColors;
 }
 
 export const createCypherTheme = ({
@@ -46,6 +57,7 @@ export const createCypherTheme = ({
   editorSettings: settings,
   highlightStyles,
   inheritBgColor,
+  diffColors,
 }: ThemeOptions): Extension => {
   const themeOptions: Record<string, StyleSpec> = {
     '&': {
@@ -53,6 +65,9 @@ export const createCypherTheme = ({
       color: settings.foreground,
       fontVariantLigatures: 'none',
     },
+    '& .cm-snippetField': {
+      backgroundColor: settings.autoCompletionPanel.selectedColor,
+    },
     '&.cm-focused': {
       outline: 'none',
     },
@@ -61,8 +76,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,9 +96,13 @@ 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',
+      zIndex: 0,
     },
     '& .cm-completionLabel': {
       fontFamily: 'Fira Code, Menlo, Monaco, Lucida Console, monospace',
@@ -93,7 +113,40 @@ 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-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,
@@ -118,24 +171,16 @@ export const createCypherTheme = ({
         border: 'none',
         verticalAlign: 'middle',
         '&[name=next]::before': {
-          content: `url("data:image/svg+xml;base64,${window.btoa(
-            downArrowSvg,
-          )}")`,
+          content: `url("data:image/svg+xml;base64,${window.btoa(downArrowSvg)}")`,
         },
         '&[name=prev]::before': {
-          content: `url("data:image/svg+xml;base64,${window.btoa(
-            upArrowSvg,
-          )}")`,
+          content: `url("data:image/svg+xml;base64,${window.btoa(upArrowSvg)}")`,
         },
         '&[name=replace]::before': {
-          content: `url("data:image/svg+xml;base64,${window.btoa(
-            replaceSvg,
-          )}")`,
+          content: `url("data:image/svg+xml;base64,${window.btoa(replaceSvg)}")`,
         },
         '&[name=replaceAll]::before': {
-          content: `url("data:image/svg+xml;base64,${window.btoa(
-            replaceAllSvg,
-          )}")`,
+          content: `url("data:image/svg+xml;base64,${window.btoa(replaceAllSvg)}")`,
         },
         width: '20px',
         height: '20px',
@@ -167,19 +212,13 @@ export const createCypherTheme = ({
           borderRadius: '4px',
 
           '&[name=case]::before': {
-            content: `url("data:image/svg+xml;base64,${window.btoa(
-              caseSensitiveSvg,
-            )}")`,
+            content: `url("data:image/svg+xml;base64,${window.btoa(caseSensitiveSvg)}")`,
           },
           '&[name=re]::before': {
-            content: `url("data:image/svg+xml;base64,${window.btoa(
-              regexSvg,
-            )}")`,
+            content: `url("data:image/svg+xml;base64,${window.btoa(regexSvg)}")`,
           },
           '&[name=word]::before': {
-            content: `url("data:image/svg+xml;base64,${window.btoa(
-              byWordSvg,
-            )}")`,
+            content: `url("data:image/svg+xml;base64,${window.btoa(byWordSvg)}")`,
           },
           '&:hover': {
             backgroundColor: settings.searchPanel.buttonHoverBackground,
@@ -190,14 +229,39 @@ export const createCypherTheme = ({
         },
       },
     },
+    ...(diffColors && {
+      '&.cm-merge-b .cm-changedLine': {
+        backgroundColor: diffColors.insertedLine,
+      },
+      '&.cm-merge-b .cm-changedText': {
+        background: diffColors.insertedText,
+      },
+      '&.cm-merge-b .cm-deletedChunk': {
+        backgroundColor: diffColors.deletedLine,
+      },
+      '&.cm-merge-b .cm-deletedChunk .cm-deletedText': {
+        background: diffColors.deletedText,
+      },
+      // Hide the empty deletion widget that unifiedMergeView renders
+      // when the original document is empty (its only line is an empty <del>).
+      '&.cm-merge-b .cm-deletedChunk:has(> .cm-deletedLine:only-child > del > br:only-child)':
+        {
+          display: 'none',
+        },
+    }),
   };
 
   const themeExtension = EditorView.theme(themeOptions, { dark });
 
-  const styles = Object.entries(highlightStyles).map(
-    ([token, color]: [HighlightedCypherTokenTypes, string]): TagStyle => ({
+  const styles = (
+    Object.entries(highlightStyles) as Array<
+      [HighlightedCypherTokenTypes, string]
+    >
+  ).map(
+    ([token, color]): 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,44 @@
+import { autocompletion } from '@codemirror/autocomplete';
+import {
+  defineLanguageFacet,
+  Language,
+  LanguageSupport,
+} from '@codemirror/language';
+import type { CypherLanguageService } from '@neo4j-cypher/language-support';
+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 = {
+  languageService: CypherLanguageService;
+  lint?: boolean;
+  showSignatureTooltipBelow?: boolean;
+  featureFlags?: {
+    consoleCommands?: 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),
+  ]);
+}