@codemirror/autocomplete 0.19.14 → 0.19.15

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 0.19.15 (2022-03-23)
+
+### New features
+
+The `selectedCompletionIndex` function tells you the position of the currently selected completion.
+
+The new `setSelectionCompletion` function creates a state effect that moves the selected completion to a given index.
+
+A completion's `info` method may now return null to indicate that no further info is available.
+
 ## 0.19.14 (2022-03-10)
 
 ### Bug fixes

package/dist/index.cjs

@@ -374,22 +374,6 @@ function optionContent(config) {
     });
     return content.sort((a, b) => a.position - b.position).map(a => a.render);
 }
-function createInfoDialog(option, view$1) {
-    let dom = document.createElement("div");
-    dom.className = "cm-tooltip cm-completionInfo";
-    let { info } = option.completion;
-    if (typeof info == "string") {
-        dom.textContent = info;
-    }
-    else {
-        let content = info(option.completion);
-        if (content.then)
-            content.then(node => dom.appendChild(node), e => view.logException(view$1.state, e, "completion info"));
-        else
-            dom.appendChild(content);
-    }
-    return dom;
-}
 function rangeAroundSelected(total, selected, max) {
     if (total <= max)
         return { from: 0, to: total };
@@ -458,13 +442,31 @@ class CompletionTooltip {
                 this.info.remove();
                 this.info = null;
             }
-            let option = open.options[open.selected];
-            if (option.completion.info) {
-                this.info = this.dom.appendChild(createInfoDialog(option, this.view));
-                this.view.requestMeasure(this.placeInfo);
+            let { completion } = open.options[open.selected];
+            let { info } = completion;
+            if (!info)
+                return;
+            let infoResult = typeof info === 'string' ? document.createTextNode(info) : info(completion);
+            if (!infoResult)
+                return;
+            if ('then' in infoResult) {
+                infoResult.then(node => {
+                    if (node && this.view.state.field(this.stateField, false) == cState)
+                        this.addInfoPane(node);
+                }).catch(e => view.logException(this.view.state, e, "completion info"));
+            }
+            else {
+                this.addInfoPane(infoResult);
             }
         }
     }
+    addInfoPane(content) {
+        let dom = this.info = document.createElement("div");
+        dom.className = "cm-tooltip cm-completionInfo";
+        dom.appendChild(content);
+        this.dom.appendChild(dom);
+        this.view.requestMeasure(this.placeInfo);
+    }
     updateSelectedOption(selected) {
         let set = null;
         for (let opt = this.list.firstChild, i = this.range.from; opt; opt = opt.nextSibling, i++) {
@@ -1435,13 +1437,19 @@ function completionStatus(state) {
     return cState && cState.active.some(a => a.state == 1 /* Pending */) ? "pending"
         : cState && cState.active.some(a => a.state != 0 /* Inactive */) ? "active" : null;
 }
+const completionArrayCache = new WeakMap;
 /**
 Returns the available completions as an array.
 */
 function currentCompletions(state) {
     var _a;
     let open = (_a = state.field(completionState, false)) === null || _a === void 0 ? void 0 : _a.open;
-    return open ? open.options.map(o => o.completion) : [];
+    if (!open)
+        return [];
+    let completions = completionArrayCache.get(open.options);
+    if (!completions)
+        completionArrayCache.set(open.options, completions = open.options.map(o => o.completion));
+    return completions;
 }
 /**
 Return the currently selected completion, if any.
@@ -1451,6 +1459,22 @@ function selectedCompletion(state) {
     let open = (_a = state.field(completionState, false)) === null || _a === void 0 ? void 0 : _a.open;
     return open ? open.options[open.selected].completion : null;
 }
+/**
+Returns the currently selected position in the active completion
+list, or null if no completions are active.
+*/
+function selectedCompletionIndex(state) {
+    var _a;
+    let open = (_a = state.field(completionState, false)) === null || _a === void 0 ? void 0 : _a.open;
+    return open ? open.selected : null;
+}
+/**
+Create an effect that can be attached to a transaction to change
+the currently selected completion.
+*/
+function setSelectedCompletion(index) {
+    return setSelectedEffect.of(index);
+}
 
 exports.CompletionContext = CompletionContext;
 exports.acceptCompletion = acceptCompletion;
@@ -1469,6 +1493,8 @@ exports.nextSnippetField = nextSnippetField;
 exports.pickedCompletion = pickedCompletion;
 exports.prevSnippetField = prevSnippetField;
 exports.selectedCompletion = selectedCompletion;
+exports.selectedCompletionIndex = selectedCompletionIndex;
+exports.setSelectedCompletion = setSelectedCompletion;
 exports.snippet = snippet;
 exports.snippetCompletion = snippetCompletion;
 exports.snippetKeymap = snippetKeymap;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as _codemirror_state from '@codemirror/state';
-import { EditorState, Transaction, StateCommand, Facet, Extension } from '@codemirror/state';
+import { EditorState, Transaction, StateCommand, Facet, Extension, StateEffect } from '@codemirror/state';
 import { EditorView, KeyBinding, Command } from '@codemirror/view';
 import * as _lezer_common from '@lezer/common';
 
@@ -81,7 +81,7 @@ interface Completion {
     a plain string or a function that'll render the DOM structure to
     show when invoked.
     */
-    info?: string | ((completion: Completion) => (Node | Promise<Node>));
+    info?: string | ((completion: Completion) => (Node | null | Promise<Node | null>));
     /**
     How to apply the completion. The default is to replace it with
     its [label](https://codemirror.net/6/docs/ref/#autocomplete.Completion.label). When this holds a
@@ -362,5 +362,15 @@ declare function currentCompletions(state: EditorState): readonly Completion[];
 Return the currently selected completion, if any.
 */
 declare function selectedCompletion(state: EditorState): Completion | null;
+/**
+Returns the currently selected position in the active completion
+list, or null if no completions are active.
+*/
+declare function selectedCompletionIndex(state: EditorState): number | null;
+/**
+Create an effect that can be attached to a transaction to change
+the currently selected completion.
+*/
+declare function setSelectedCompletion(index: number): StateEffect<unknown>;
 
-export { Completion, CompletionContext, CompletionResult, CompletionSource, acceptCompletion, autocompletion, clearSnippet, closeCompletion, completeAnyWord, completeFromList, completionKeymap, completionStatus, currentCompletions, ifIn, ifNotIn, moveCompletionSelection, nextSnippetField, pickedCompletion, prevSnippetField, selectedCompletion, snippet, snippetCompletion, snippetKeymap, startCompletion };
+export { Completion, CompletionContext, CompletionResult, CompletionSource, acceptCompletion, autocompletion, clearSnippet, closeCompletion, completeAnyWord, completeFromList, completionKeymap, completionStatus, currentCompletions, ifIn, ifNotIn, moveCompletionSelection, nextSnippetField, pickedCompletion, prevSnippetField, selectedCompletion, selectedCompletionIndex, setSelectedCompletion, snippet, snippetCompletion, snippetKeymap, startCompletion };

package/dist/index.js

@@ -1,5 +1,5 @@
 import { Annotation, Facet, combineConfig, StateEffect, StateField, Prec, EditorSelection, Text, MapMode } from '@codemirror/state';
-import { Direction, logException, EditorView, ViewPlugin, Decoration, WidgetType, keymap } from '@codemirror/view';
+import { logException, Direction, EditorView, ViewPlugin, Decoration, WidgetType, keymap } from '@codemirror/view';
 import { showTooltip, getTooltip } from '@codemirror/tooltip';
 import { syntaxTree, indentUnit } from '@codemirror/language';
 import { codePointAt, codePointSize, fromCodePoint } from '@codemirror/text';
@@ -370,22 +370,6 @@ function optionContent(config) {
     });
     return content.sort((a, b) => a.position - b.position).map(a => a.render);
 }
-function createInfoDialog(option, view) {
-    let dom = document.createElement("div");
-    dom.className = "cm-tooltip cm-completionInfo";
-    let { info } = option.completion;
-    if (typeof info == "string") {
-        dom.textContent = info;
-    }
-    else {
-        let content = info(option.completion);
-        if (content.then)
-            content.then(node => dom.appendChild(node), e => logException(view.state, e, "completion info"));
-        else
-            dom.appendChild(content);
-    }
-    return dom;
-}
 function rangeAroundSelected(total, selected, max) {
     if (total <= max)
         return { from: 0, to: total };
@@ -454,13 +438,31 @@ class CompletionTooltip {
                 this.info.remove();
                 this.info = null;
             }
-            let option = open.options[open.selected];
-            if (option.completion.info) {
-                this.info = this.dom.appendChild(createInfoDialog(option, this.view));
-                this.view.requestMeasure(this.placeInfo);
+            let { completion } = open.options[open.selected];
+            let { info } = completion;
+            if (!info)
+                return;
+            let infoResult = typeof info === 'string' ? document.createTextNode(info) : info(completion);
+            if (!infoResult)
+                return;
+            if ('then' in infoResult) {
+                infoResult.then(node => {
+                    if (node && this.view.state.field(this.stateField, false) == cState)
+                        this.addInfoPane(node);
+                }).catch(e => logException(this.view.state, e, "completion info"));
+            }
+            else {
+                this.addInfoPane(infoResult);
             }
         }
     }
+    addInfoPane(content) {
+        let dom = this.info = document.createElement("div");
+        dom.className = "cm-tooltip cm-completionInfo";
+        dom.appendChild(content);
+        this.dom.appendChild(dom);
+        this.view.requestMeasure(this.placeInfo);
+    }
     updateSelectedOption(selected) {
         let set = null;
         for (let opt = this.list.firstChild, i = this.range.from; opt; opt = opt.nextSibling, i++) {
@@ -1431,13 +1433,19 @@ function completionStatus(state) {
     return cState && cState.active.some(a => a.state == 1 /* Pending */) ? "pending"
         : cState && cState.active.some(a => a.state != 0 /* Inactive */) ? "active" : null;
 }
+const completionArrayCache = /*@__PURE__*/new WeakMap;
 /**
 Returns the available completions as an array.
 */
 function currentCompletions(state) {
     var _a;
     let open = (_a = state.field(completionState, false)) === null || _a === void 0 ? void 0 : _a.open;
-    return open ? open.options.map(o => o.completion) : [];
+    if (!open)
+        return [];
+    let completions = completionArrayCache.get(open.options);
+    if (!completions)
+        completionArrayCache.set(open.options, completions = open.options.map(o => o.completion));
+    return completions;
 }
 /**
 Return the currently selected completion, if any.
@@ -1447,5 +1455,21 @@ function selectedCompletion(state) {
     let open = (_a = state.field(completionState, false)) === null || _a === void 0 ? void 0 : _a.open;
     return open ? open.options[open.selected].completion : null;
 }
+/**
+Returns the currently selected position in the active completion
+list, or null if no completions are active.
+*/
+function selectedCompletionIndex(state) {
+    var _a;
+    let open = (_a = state.field(completionState, false)) === null || _a === void 0 ? void 0 : _a.open;
+    return open ? open.selected : null;
+}
+/**
+Create an effect that can be attached to a transaction to change
+the currently selected completion.
+*/
+function setSelectedCompletion(index) {
+    return setSelectedEffect.of(index);
+}
 
-export { CompletionContext, acceptCompletion, autocompletion, clearSnippet, closeCompletion, completeAnyWord, completeFromList, completionKeymap, completionStatus, currentCompletions, ifIn, ifNotIn, moveCompletionSelection, nextSnippetField, pickedCompletion, prevSnippetField, selectedCompletion, snippet, snippetCompletion, snippetKeymap, startCompletion };
+export { CompletionContext, acceptCompletion, autocompletion, clearSnippet, closeCompletion, completeAnyWord, completeFromList, completionKeymap, completionStatus, currentCompletions, ifIn, ifNotIn, moveCompletionSelection, nextSnippetField, pickedCompletion, prevSnippetField, selectedCompletion, selectedCompletionIndex, setSelectedCompletion, snippet, snippetCompletion, snippetKeymap, startCompletion };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codemirror/autocomplete",
-  "version": "0.19.14",
+  "version": "0.19.15",
   "description": "Autocompletion for the CodeMirror code editor",
   "scripts": {
     "test": "cm-runtests",