@neo4j-cypher/react-codemirror 2.0.0-next.6 → 2.0.0-next.8

package/src/lang-cypher/signatureHelp.ts

@@ -1,6 +1,7 @@
 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';
 
 function getTriggerCharacter(query: string, caretPosition: number) {
@@ -16,6 +17,61 @@ function getTriggerCharacter(query: string, caretPosition: number) {
   return triggerCharacter;
 }
 
+const createSignatureHelpElement =
+  ({
+    signature,
+    activeParameter,
+  }: {
+    signature: SignatureInformation;
+    activeParameter: number;
+  }) =>
+  () => {
+    const parameters = signature.parameters;
+    const doc = signature.documentation.toString();
+    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,
@@ -44,17 +100,6 @@ function getSignatureHelpTooltip(
         signatures[activeSignature].documentation !== undefined
       ) {
         const signature = signatures[activeSignature];
-        const parameters = signature.parameters;
-        let doc = signature.documentation.toString();
-
-        if (
-          activeParameter >= 0 &&
-          activeParameter <
-            (signatures[activeSignature].parameters?.length ?? 0)
-        ) {
-          doc =
-            parameters[activeParameter].documentation.toString() + '\n\n' + doc;
-        }
 
         result = [
           {
@@ -62,23 +107,7 @@ function getSignatureHelpTooltip(
             above: true,
             strictSide: true,
             arrow: true,
-            create: () => {
-              const div = document.createElement('div');
-              const methodName = document.createElement('div');
-              const argPlusDescription = document.createElement('div');
-              const separator = document.createElement('hr');
-              const lineBreak = document.createElement('br');
-
-              div.append(
-                ...[methodName, separator, lineBreak, argPlusDescription],
-              );
-              div.className = 'cm-tooltip-signature-help';
-
-              methodName.innerText = signature.label;
-              argPlusDescription.innerText = doc;
-
-              return { dom: div };
-            },
+            create: createSignatureHelpElement({ signature, activeParameter }),
           },
         ];
       }

package/src/neo4jSetup.tsx

@@ -1,9 +1,14 @@
 import {
   acceptCompletion,
   autocompletion,
+  clearSnippet,
   closeBrackets,
   closeBracketsKeymap,
+  closeCompletion,
   completionKeymap,
+  nextSnippetField,
+  prevSnippetField,
+  snippetKeymap,
 } from '@codemirror/autocomplete';
 import {
   defaultKeymap,
@@ -22,11 +27,13 @@ import {
 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';
@@ -55,7 +62,7 @@ const insertTab: StateCommand = (cmd) => {
 };
 
 export const basicNeo4jSetup = (): Extension[] => {
-  const keymaps = [
+  const keymaps: KeyBinding[] = [
     closeBracketsKeymap,
     defaultKeymap,
     searchKeymap,
@@ -125,5 +132,48 @@ export const basicNeo4jSetup = (): Extension[] => {
 
   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);
+};