@codemirror/autocomplete 6.3.0 → 6.3.2

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## 6.3.2 (2022-11-15)
+
+### Bug fixes
+
+Fix a regression that could cause the completion dialog to stick around when it should be hidden.
+
+## 6.3.1 (2022-11-14)
+
+### Bug fixes
+
+Fix a regression where transactions for picking a completion (without custom `apply` method) no longer had the `pickedCompletion` annotation.
+
+Reduce flickering for completion sources without `validFor` info by temporarily showing a disabled tooltip while the completion updates.
+
+Make sure completion info tooltips are kept within the space provided by the `tooltipSpace` option.
+
 ## 6.3.0 (2022-09-22)
 
 ### New features

package/dist/index.cjs

@@ -179,7 +179,7 @@ function applyCompletion(view, option) {
     const apply = option.completion.apply || option.completion.label;
     let result = option.source;
     if (typeof apply == "string")
-        view.dispatch(insertCompletionText(view.state, apply, result.from, result.to));
+        view.dispatch(Object.assign(Object.assign({}, insertCompletionText(view.state, apply, result.from, result.to)), { annotations: pickedCompletion.of(option.completion) }));
     else
         apply(view, option.completion, result.from, result.to);
 }
@@ -414,6 +414,7 @@ class CompletionTooltip {
             write: (pos) => this.positionInfo(pos),
             key: this
         };
+        this.space = null;
         let cState = view.state.field(stateField);
         let { options, selected } = cState.open;
         let config = view.state.facet(completionConfig);
@@ -439,10 +440,17 @@ class CompletionTooltip {
     }
     mount() { this.updateSel(); }
     update(update) {
-        if (update.state.field(this.stateField) != update.startState.field(this.stateField))
+        var _a, _b, _c;
+        let cState = update.state.field(this.stateField);
+        let prevState = update.startState.field(this.stateField);
+        if (cState != prevState) {
             this.updateSel();
+            if (((_a = cState.open) === null || _a === void 0 ? void 0 : _a.disabled) != ((_b = prevState.open) === null || _b === void 0 ? void 0 : _b.disabled))
+                this.dom.classList.toggle("cm-tooltip-autocomplete-disabled", !!((_c = cState.open) === null || _c === void 0 ? void 0 : _c.disabled));
+        }
     }
-    positioned() {
+    positioned(space) {
+        this.space = space;
         if (this.info)
             this.view.requestMeasure(this.placeInfo);
     }
@@ -509,27 +517,32 @@ class CompletionTooltip {
         let sel = this.dom.querySelector("[aria-selected]");
         if (!sel || !this.info)
             return null;
-        let win = this.dom.ownerDocument.defaultView || window;
         let listRect = this.dom.getBoundingClientRect();
         let infoRect = this.info.getBoundingClientRect();
         let selRect = sel.getBoundingClientRect();
-        if (selRect.top > Math.min(win.innerHeight, listRect.bottom) - 10 || selRect.bottom < Math.max(0, listRect.top) + 10)
+        let space = this.space;
+        if (!space) {
+            let win = this.dom.ownerDocument.defaultView || window;
+            space = { left: 0, top: 0, right: win.innerWidth, bottom: win.innerHeight };
+        }
+        if (selRect.top > Math.min(space.bottom, listRect.bottom) - 10 ||
+            selRect.bottom < Math.max(space.top, listRect.top) + 10)
             return null;
         let rtl = this.view.textDirection == view.Direction.RTL, left = rtl, narrow = false, maxWidth;
         let top = "", bottom = "";
-        let spaceLeft = listRect.left, spaceRight = win.innerWidth - listRect.right;
+        let spaceLeft = listRect.left - space.left, spaceRight = space.right - listRect.right;
         if (left && spaceLeft < Math.min(infoRect.width, spaceRight))
             left = false;
         else if (!left && spaceRight < Math.min(infoRect.width, spaceLeft))
             left = true;
         if (infoRect.width <= (left ? spaceLeft : spaceRight)) {
-            top = (Math.max(0, Math.min(selRect.top, win.innerHeight - infoRect.height)) - listRect.top) + "px";
+            top = (Math.max(space.top, Math.min(selRect.top, space.bottom - infoRect.height)) - listRect.top) + "px";
             maxWidth = Math.min(400 /* Info.Width */, left ? spaceLeft : spaceRight) + "px";
         }
         else {
             narrow = true;
-            maxWidth = Math.min(400 /* Info.Width */, (rtl ? listRect.right : win.innerWidth - listRect.left) - 30 /* Info.Margin */) + "px";
-            let spaceBelow = win.innerHeight - listRect.bottom;
+            maxWidth = Math.min(400 /* Info.Width */, (rtl ? listRect.right : space.right - listRect.left) - 30 /* Info.Margin */) + "px";
+            let spaceBelow = space.bottom - listRect.bottom;
             if (spaceBelow >= infoRect.height || spaceBelow > listRect.top) // Below the completion
                 top = (selRect.bottom - listRect.top) + "px";
             else // Above it
@@ -638,21 +651,24 @@ function sortOptions(active, state) {
     return result;
 }
 class CompletionDialog {
-    constructor(options, attrs, tooltip, timestamp, selected) {
+    constructor(options, attrs, tooltip, timestamp, selected, disabled) {
         this.options = options;
         this.attrs = attrs;
         this.tooltip = tooltip;
         this.timestamp = timestamp;
         this.selected = selected;
+        this.disabled = disabled;
     }
     setSelected(selected, id) {
         return selected == this.selected || selected >= this.options.length ? this
-            : new CompletionDialog(this.options, makeAttrs(id, selected), this.tooltip, this.timestamp, selected);
+            : new CompletionDialog(this.options, makeAttrs(id, selected), this.tooltip, this.timestamp, selected, this.disabled);
     }
     static build(active, state, id, prev, conf) {
         let options = sortOptions(active, state);
-        if (!options.length)
-            return null;
+        if (!options.length) {
+            return prev && active.some(a => a.state == 1 /* State.Pending */) ?
+                new CompletionDialog(prev.options, prev.attrs, prev.tooltip, prev.timestamp, prev.selected, true) : null;
+        }
         let selected = state.facet(completionConfig).selectOnOpen ? 0 : -1;
         if (prev && prev.selected != selected && prev.selected != -1) {
             let selectedValue = prev.options[prev.selected].completion;
@@ -666,10 +682,10 @@ class CompletionDialog {
             pos: active.reduce((a, b) => b.hasResult() ? Math.min(a, b.from) : a, 1e8),
             create: completionTooltip(completionState),
             above: conf.aboveCursor,
-        }, prev ? prev.timestamp : Date.now(), selected);
+        }, prev ? prev.timestamp : Date.now(), selected, false);
     }
     map(changes) {
-        return new CompletionDialog(this.options, this.attrs, Object.assign(Object.assign({}, this.tooltip), { pos: changes.mapPos(this.tooltip.pos) }), this.timestamp, this.selected);
+        return new CompletionDialog(this.options, this.attrs, Object.assign(Object.assign({}, this.tooltip), { pos: changes.mapPos(this.tooltip.pos) }), this.timestamp, this.selected, this.disabled);
     }
 }
 class CompletionState {
@@ -692,9 +708,14 @@ class CompletionState {
         });
         if (active.length == this.active.length && active.every((a, i) => a == this.active[i]))
             active = this.active;
-        let open = tr.selection || active.some(a => a.hasResult() && tr.changes.touchesRange(a.from, a.to)) ||
-            !sameResults(active, this.active) ? CompletionDialog.build(active, state, this.id, this.open, conf)
-            : this.open && tr.docChanged ? this.open.map(tr.changes) : this.open;
+        let open = this.open;
+        if (tr.selection || active.some(a => a.hasResult() && tr.changes.touchesRange(a.from, a.to)) ||
+            !sameResults(active, this.active))
+            open = CompletionDialog.build(active, state, this.id, this.open, conf);
+        else if (open && open.disabled && !active.some(a => a.state == 1 /* State.Pending */))
+            open = null;
+        else if (open && tr.docChanged)
+            open = open.map(tr.changes);
         if (!open && active.every(a => a.state != 1 /* State.Pending */) && active.some(a => a.hasResult()))
             active = active.map(a => a.hasResult() ? new ActiveSource(a.source, 0 /* State.Inactive */) : a);
         for (let effect of tr.effects)
@@ -834,7 +855,7 @@ backward by the given amount.
 function moveCompletionSelection(forward, by = "option") {
     return (view$1) => {
         let cState = view$1.state.field(completionState, false);
-        if (!cState || !cState.open ||
+        if (!cState || !cState.open || cState.open.disabled ||
             Date.now() - cState.open.timestamp < view$1.state.facet(completionConfig).interactionDelay)
             return false;
         let step = 1, tooltip;
@@ -859,7 +880,8 @@ const acceptCompletion = (view) => {
     if (view.state.readOnly || !cState || !cState.open || cState.open.selected < 0 ||
         Date.now() - cState.open.timestamp < view.state.facet(completionConfig).interactionDelay)
         return false;
-    applyCompletion(view, cState.open.options[cState.open.selected]);
+    if (!cState.open.disabled)
+        applyCompletion(view, cState.open.options[cState.open.selected]);
     return true;
 };
 /**
@@ -1064,10 +1086,16 @@ const baseTheme = view.EditorView.baseTheme({
         background: "#17c",
         color: "white",
     },
+    "&light .cm-tooltip-autocomplete-disabled ul li[aria-selected]": {
+        background: "#777",
+    },
     "&dark .cm-tooltip-autocomplete ul li[aria-selected]": {
         background: "#347",
         color: "white",
     },
+    "&dark .cm-tooltip-autocomplete-disabled ul li[aria-selected]": {
+        background: "#444",
+    },
     ".cm-completionListIncompleteTop:before, .cm-completionListIncompleteBottom:after": {
         content: '"···"',
         opacity: 0.5,
@@ -1776,7 +1804,7 @@ 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;
-    if (!open)
+    if (!open || open.disabled)
         return [];
     let completions = completionArrayCache.get(open.options);
     if (!completions)
@@ -1789,7 +1817,7 @@ Return the currently selected completion, if any.
 function selectedCompletion(state) {
     var _a;
     let open = (_a = state.field(completionState, false)) === null || _a === void 0 ? void 0 : _a.open;
-    return open && open.selected >= 0 ? open.options[open.selected].completion : null;
+    return open && !open.disabled && open.selected >= 0 ? open.options[open.selected].completion : null;
 }
 /**
 Returns the currently selected position in the active completion
@@ -1798,7 +1826,7 @@ 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 >= 0 ? open.selected : null;
+    return open && !open.disabled && open.selected >= 0 ? open.selected : null;
 }
 /**
 Create an effect that can be attached to a transaction to change

package/dist/index.js

@@ -175,7 +175,7 @@ function applyCompletion(view, option) {
     const apply = option.completion.apply || option.completion.label;
     let result = option.source;
     if (typeof apply == "string")
-        view.dispatch(insertCompletionText(view.state, apply, result.from, result.to));
+        view.dispatch(Object.assign(Object.assign({}, insertCompletionText(view.state, apply, result.from, result.to)), { annotations: pickedCompletion.of(option.completion) }));
     else
         apply(view, option.completion, result.from, result.to);
 }
@@ -410,6 +410,7 @@ class CompletionTooltip {
             write: (pos) => this.positionInfo(pos),
             key: this
         };
+        this.space = null;
         let cState = view.state.field(stateField);
         let { options, selected } = cState.open;
         let config = view.state.facet(completionConfig);
@@ -435,10 +436,17 @@ class CompletionTooltip {
     }
     mount() { this.updateSel(); }
     update(update) {
-        if (update.state.field(this.stateField) != update.startState.field(this.stateField))
+        var _a, _b, _c;
+        let cState = update.state.field(this.stateField);
+        let prevState = update.startState.field(this.stateField);
+        if (cState != prevState) {
             this.updateSel();
+            if (((_a = cState.open) === null || _a === void 0 ? void 0 : _a.disabled) != ((_b = prevState.open) === null || _b === void 0 ? void 0 : _b.disabled))
+                this.dom.classList.toggle("cm-tooltip-autocomplete-disabled", !!((_c = cState.open) === null || _c === void 0 ? void 0 : _c.disabled));
+        }
     }
-    positioned() {
+    positioned(space) {
+        this.space = space;
         if (this.info)
             this.view.requestMeasure(this.placeInfo);
     }
@@ -505,27 +513,32 @@ class CompletionTooltip {
         let sel = this.dom.querySelector("[aria-selected]");
         if (!sel || !this.info)
             return null;
-        let win = this.dom.ownerDocument.defaultView || window;
         let listRect = this.dom.getBoundingClientRect();
         let infoRect = this.info.getBoundingClientRect();
         let selRect = sel.getBoundingClientRect();
-        if (selRect.top > Math.min(win.innerHeight, listRect.bottom) - 10 || selRect.bottom < Math.max(0, listRect.top) + 10)
+        let space = this.space;
+        if (!space) {
+            let win = this.dom.ownerDocument.defaultView || window;
+            space = { left: 0, top: 0, right: win.innerWidth, bottom: win.innerHeight };
+        }
+        if (selRect.top > Math.min(space.bottom, listRect.bottom) - 10 ||
+            selRect.bottom < Math.max(space.top, listRect.top) + 10)
             return null;
         let rtl = this.view.textDirection == Direction.RTL, left = rtl, narrow = false, maxWidth;
         let top = "", bottom = "";
-        let spaceLeft = listRect.left, spaceRight = win.innerWidth - listRect.right;
+        let spaceLeft = listRect.left - space.left, spaceRight = space.right - listRect.right;
         if (left && spaceLeft < Math.min(infoRect.width, spaceRight))
             left = false;
         else if (!left && spaceRight < Math.min(infoRect.width, spaceLeft))
             left = true;
         if (infoRect.width <= (left ? spaceLeft : spaceRight)) {
-            top = (Math.max(0, Math.min(selRect.top, win.innerHeight - infoRect.height)) - listRect.top) + "px";
+            top = (Math.max(space.top, Math.min(selRect.top, space.bottom - infoRect.height)) - listRect.top) + "px";
             maxWidth = Math.min(400 /* Info.Width */, left ? spaceLeft : spaceRight) + "px";
         }
         else {
             narrow = true;
-            maxWidth = Math.min(400 /* Info.Width */, (rtl ? listRect.right : win.innerWidth - listRect.left) - 30 /* Info.Margin */) + "px";
-            let spaceBelow = win.innerHeight - listRect.bottom;
+            maxWidth = Math.min(400 /* Info.Width */, (rtl ? listRect.right : space.right - listRect.left) - 30 /* Info.Margin */) + "px";
+            let spaceBelow = space.bottom - listRect.bottom;
             if (spaceBelow >= infoRect.height || spaceBelow > listRect.top) // Below the completion
                 top = (selRect.bottom - listRect.top) + "px";
             else // Above it
@@ -634,21 +647,24 @@ function sortOptions(active, state) {
     return result;
 }
 class CompletionDialog {
-    constructor(options, attrs, tooltip, timestamp, selected) {
+    constructor(options, attrs, tooltip, timestamp, selected, disabled) {
         this.options = options;
         this.attrs = attrs;
         this.tooltip = tooltip;
         this.timestamp = timestamp;
         this.selected = selected;
+        this.disabled = disabled;
     }
     setSelected(selected, id) {
         return selected == this.selected || selected >= this.options.length ? this
-            : new CompletionDialog(this.options, makeAttrs(id, selected), this.tooltip, this.timestamp, selected);
+            : new CompletionDialog(this.options, makeAttrs(id, selected), this.tooltip, this.timestamp, selected, this.disabled);
     }
     static build(active, state, id, prev, conf) {
         let options = sortOptions(active, state);
-        if (!options.length)
-            return null;
+        if (!options.length) {
+            return prev && active.some(a => a.state == 1 /* State.Pending */) ?
+                new CompletionDialog(prev.options, prev.attrs, prev.tooltip, prev.timestamp, prev.selected, true) : null;
+        }
         let selected = state.facet(completionConfig).selectOnOpen ? 0 : -1;
         if (prev && prev.selected != selected && prev.selected != -1) {
             let selectedValue = prev.options[prev.selected].completion;
@@ -662,10 +678,10 @@ class CompletionDialog {
             pos: active.reduce((a, b) => b.hasResult() ? Math.min(a, b.from) : a, 1e8),
             create: completionTooltip(completionState),
             above: conf.aboveCursor,
-        }, prev ? prev.timestamp : Date.now(), selected);
+        }, prev ? prev.timestamp : Date.now(), selected, false);
     }
     map(changes) {
-        return new CompletionDialog(this.options, this.attrs, Object.assign(Object.assign({}, this.tooltip), { pos: changes.mapPos(this.tooltip.pos) }), this.timestamp, this.selected);
+        return new CompletionDialog(this.options, this.attrs, Object.assign(Object.assign({}, this.tooltip), { pos: changes.mapPos(this.tooltip.pos) }), this.timestamp, this.selected, this.disabled);
     }
 }
 class CompletionState {
@@ -688,9 +704,14 @@ class CompletionState {
         });
         if (active.length == this.active.length && active.every((a, i) => a == this.active[i]))
             active = this.active;
-        let open = tr.selection || active.some(a => a.hasResult() && tr.changes.touchesRange(a.from, a.to)) ||
-            !sameResults(active, this.active) ? CompletionDialog.build(active, state, this.id, this.open, conf)
-            : this.open && tr.docChanged ? this.open.map(tr.changes) : this.open;
+        let open = this.open;
+        if (tr.selection || active.some(a => a.hasResult() && tr.changes.touchesRange(a.from, a.to)) ||
+            !sameResults(active, this.active))
+            open = CompletionDialog.build(active, state, this.id, this.open, conf);
+        else if (open && open.disabled && !active.some(a => a.state == 1 /* State.Pending */))
+            open = null;
+        else if (open && tr.docChanged)
+            open = open.map(tr.changes);
         if (!open && active.every(a => a.state != 1 /* State.Pending */) && active.some(a => a.hasResult()))
             active = active.map(a => a.hasResult() ? new ActiveSource(a.source, 0 /* State.Inactive */) : a);
         for (let effect of tr.effects)
@@ -830,7 +851,7 @@ backward by the given amount.
 function moveCompletionSelection(forward, by = "option") {
     return (view) => {
         let cState = view.state.field(completionState, false);
-        if (!cState || !cState.open ||
+        if (!cState || !cState.open || cState.open.disabled ||
             Date.now() - cState.open.timestamp < view.state.facet(completionConfig).interactionDelay)
             return false;
         let step = 1, tooltip;
@@ -855,7 +876,8 @@ const acceptCompletion = (view) => {
     if (view.state.readOnly || !cState || !cState.open || cState.open.selected < 0 ||
         Date.now() - cState.open.timestamp < view.state.facet(completionConfig).interactionDelay)
         return false;
-    applyCompletion(view, cState.open.options[cState.open.selected]);
+    if (!cState.open.disabled)
+        applyCompletion(view, cState.open.options[cState.open.selected]);
     return true;
 };
 /**
@@ -1060,10 +1082,16 @@ const baseTheme = /*@__PURE__*/EditorView.baseTheme({
         background: "#17c",
         color: "white",
     },
+    "&light .cm-tooltip-autocomplete-disabled ul li[aria-selected]": {
+        background: "#777",
+    },
     "&dark .cm-tooltip-autocomplete ul li[aria-selected]": {
         background: "#347",
         color: "white",
     },
+    "&dark .cm-tooltip-autocomplete-disabled ul li[aria-selected]": {
+        background: "#444",
+    },
     ".cm-completionListIncompleteTop:before, .cm-completionListIncompleteBottom:after": {
         content: '"···"',
         opacity: 0.5,
@@ -1772,7 +1800,7 @@ 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;
-    if (!open)
+    if (!open || open.disabled)
         return [];
     let completions = completionArrayCache.get(open.options);
     if (!completions)
@@ -1785,7 +1813,7 @@ Return the currently selected completion, if any.
 function selectedCompletion(state) {
     var _a;
     let open = (_a = state.field(completionState, false)) === null || _a === void 0 ? void 0 : _a.open;
-    return open && open.selected >= 0 ? open.options[open.selected].completion : null;
+    return open && !open.disabled && open.selected >= 0 ? open.options[open.selected].completion : null;
 }
 /**
 Returns the currently selected position in the active completion
@@ -1794,7 +1822,7 @@ 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 >= 0 ? open.selected : null;
+    return open && !open.disabled && open.selected >= 0 ? open.selected : null;
 }
 /**
 Create an effect that can be attached to a transaction to change

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codemirror/autocomplete",
-  "version": "6.3.0",
+  "version": "6.3.2",
   "description": "Autocompletion for the CodeMirror code editor",
   "scripts": {
     "test": "cm-runtests",
@@ -28,7 +28,7 @@
   "dependencies": {
     "@codemirror/language": "^6.0.0",
     "@codemirror/state": "^6.0.0",
-    "@codemirror/view": "^6.0.0",
+    "@codemirror/view": "^6.5.0",
     "@lezer/common": "^1.0.0"
   },
   "peerDependencies": {