@codemirror/autocomplete 6.5.0 → 6.6.0

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## 6.6.0 (2023-04-27)
+
+### Bug fixes
+
+Fix a bug in `insertCompletionText` that caused it to replace the wrong range when a result set's `to` fell after the cursor.
+
+### New features
+
+Functions returned by `snippet` can now be called without a completion object.
+
+## 6.5.1 (2023-04-13)
+
+### Bug fixes
+
+Keep completions open when interaction with an info tooltip moves focus out of the editor.
+
 ## 6.5.0 (2023-04-13)
 
 ### Bug fixes

package/dist/index.cjs

@@ -166,14 +166,14 @@ completion's text in the main selection range, and any other
 selection range that has the same text in front of it.
 */
 function insertCompletionText(state$1, text, from, to) {
-    let { main } = state$1.selection, len = to - from;
+    let { main } = state$1.selection, fromOff = from - main.from, toOff = to - main.from;
     return Object.assign(Object.assign({}, state$1.changeByRange(range => {
-        if (range != main && len &&
-            state$1.sliceDoc(range.from - len, range.from + to - main.from) != state$1.sliceDoc(from, to))
+        if (range != main && from != to &&
+            state$1.sliceDoc(range.from + fromOff, range.from + toOff) != state$1.sliceDoc(from, to))
             return { range };
         return {
-            changes: { from: range.from - len, to: to == main.from ? range.to : range.from + to - main.from, insert: text },
-            range: state.EditorSelection.cursor(range.from - len + text.length)
+            changes: { from: range.from + fromOff, to: to == main.from ? range.to : range.from + toOff, insert: text },
+            range: state.EditorSelection.cursor(range.from + fromOff + text.length)
         };
     })), { userEvent: "input.complete" });
 }
@@ -194,6 +194,8 @@ function asSource(source) {
         SourceCache.set(source, known = completeFromList(source));
     return known;
 }
+const startCompletionEffect = state.StateEffect.define();
+const closeCompletionEffect = state.StateEffect.define();
 
 // A pattern matcher for fuzzy completion matching. Create an instance
 // once for a pattern, and then use that to match any number of
@@ -475,6 +477,12 @@ class CompletionTooltip {
                 }
             }
         });
+        this.dom.addEventListener("focusout", (e) => {
+            let state = view.state.field(this.stateField, false);
+            if (state && state.tooltip && view.state.facet(completionConfig).closeOnBlur &&
+                e.relatedTarget != view.contentDOM)
+                view.dispatch({ effects: closeCompletionEffect.of(null) });
+        });
         this.list = this.dom.appendChild(this.createListBox(options, cState.id, this.range));
         this.list.addEventListener("scroll", () => {
             if (this.info)
@@ -905,8 +913,6 @@ function checkValid(validFor, state, from, to) {
     let text = state.sliceDoc(from, to);
     return typeof validFor == "function" ? validFor(text, from, to, state) : ensureAnchor(validFor, true).test(text);
 }
-const startCompletionEffect = state.StateEffect.define();
-const closeCompletionEffect = state.StateEffect.define();
 const setActiveEffect = state.StateEffect.define({
     map(sources, mapping) { return sources.map(s => s.map(mapping)); }
 });
@@ -1113,10 +1119,13 @@ const completionPlugin = view.ViewPlugin.fromClass(class {
     }
 }, {
     eventHandlers: {
-        blur() {
+        blur(event) {
             let state = this.view.state.field(completionState, false);
-            if (state && state.tooltip && this.view.state.facet(completionConfig).closeOnBlur)
-                this.view.dispatch({ effects: closeCompletionEffect.of(null) });
+            if (state && state.tooltip && this.view.state.facet(completionConfig).closeOnBlur) {
+                let dialog = state.open && view.getTooltip(this.view, state.open.tooltip);
+                if (!dialog || !dialog.dom.contains(event.relatedTarget))
+                    this.view.dispatch({ effects: closeCompletionEffect.of(null) });
+            }
         },
         compositionstart() {
             this.composing = 1 /* CompositionState.Started */;
@@ -1423,7 +1432,7 @@ function snippet(template) {
         let spec = {
             changes: { from, to, insert: state.Text.of(text) },
             scrollIntoView: true,
-            annotations: pickedCompletion.of(completion)
+            annotations: completion ? pickedCompletion.of(completion) : undefined
         };
         if (ranges.length)
             spec.selection = fieldSelection(ranges, 0);

package/dist/index.d.ts

@@ -384,7 +384,7 @@ interpreted as indicating a placeholder.
 declare function snippet(template: string): (editor: {
     state: EditorState;
     dispatch: (tr: Transaction) => void;
-}, completion: Completion, from: number, to: number) => void;
+}, completion: Completion | null, from: number, to: number) => void;
 /**
 A command that clears the active snippet, if any.
 */

package/dist/index.js

@@ -1,4 +1,4 @@
-import { Annotation, EditorSelection, codePointAt, codePointSize, fromCodePoint, Facet, combineConfig, StateEffect, StateField, Prec, Text, MapMode, RangeValue, RangeSet, CharCategory } from '@codemirror/state';
+import { Annotation, StateEffect, EditorSelection, codePointAt, codePointSize, fromCodePoint, Facet, combineConfig, StateField, Prec, Text, MapMode, RangeValue, RangeSet, CharCategory } from '@codemirror/state';
 import { Direction, logException, showTooltip, EditorView, ViewPlugin, getTooltip, Decoration, WidgetType, keymap } from '@codemirror/view';
 import { syntaxTree, indentUnit } from '@codemirror/language';
 
@@ -162,14 +162,14 @@ completion's text in the main selection range, and any other
 selection range that has the same text in front of it.
 */
 function insertCompletionText(state, text, from, to) {
-    let { main } = state.selection, len = to - from;
+    let { main } = state.selection, fromOff = from - main.from, toOff = to - main.from;
     return Object.assign(Object.assign({}, state.changeByRange(range => {
-        if (range != main && len &&
-            state.sliceDoc(range.from - len, range.from + to - main.from) != state.sliceDoc(from, to))
+        if (range != main && from != to &&
+            state.sliceDoc(range.from + fromOff, range.from + toOff) != state.sliceDoc(from, to))
             return { range };
         return {
-            changes: { from: range.from - len, to: to == main.from ? range.to : range.from + to - main.from, insert: text },
-            range: EditorSelection.cursor(range.from - len + text.length)
+            changes: { from: range.from + fromOff, to: to == main.from ? range.to : range.from + toOff, insert: text },
+            range: EditorSelection.cursor(range.from + fromOff + text.length)
         };
     })), { userEvent: "input.complete" });
 }
@@ -190,6 +190,8 @@ function asSource(source) {
         SourceCache.set(source, known = completeFromList(source));
     return known;
 }
+const startCompletionEffect = /*@__PURE__*/StateEffect.define();
+const closeCompletionEffect = /*@__PURE__*/StateEffect.define();
 
 // A pattern matcher for fuzzy completion matching. Create an instance
 // once for a pattern, and then use that to match any number of
@@ -471,6 +473,12 @@ class CompletionTooltip {
                 }
             }
         });
+        this.dom.addEventListener("focusout", (e) => {
+            let state = view.state.field(this.stateField, false);
+            if (state && state.tooltip && view.state.facet(completionConfig).closeOnBlur &&
+                e.relatedTarget != view.contentDOM)
+                view.dispatch({ effects: closeCompletionEffect.of(null) });
+        });
         this.list = this.dom.appendChild(this.createListBox(options, cState.id, this.range));
         this.list.addEventListener("scroll", () => {
             if (this.info)
@@ -901,8 +909,6 @@ function checkValid(validFor, state, from, to) {
     let text = state.sliceDoc(from, to);
     return typeof validFor == "function" ? validFor(text, from, to, state) : ensureAnchor(validFor, true).test(text);
 }
-const startCompletionEffect = /*@__PURE__*/StateEffect.define();
-const closeCompletionEffect = /*@__PURE__*/StateEffect.define();
 const setActiveEffect = /*@__PURE__*/StateEffect.define({
     map(sources, mapping) { return sources.map(s => s.map(mapping)); }
 });
@@ -1109,10 +1115,13 @@ const completionPlugin = /*@__PURE__*/ViewPlugin.fromClass(class {
     }
 }, {
     eventHandlers: {
-        blur() {
+        blur(event) {
             let state = this.view.state.field(completionState, false);
-            if (state && state.tooltip && this.view.state.facet(completionConfig).closeOnBlur)
-                this.view.dispatch({ effects: closeCompletionEffect.of(null) });
+            if (state && state.tooltip && this.view.state.facet(completionConfig).closeOnBlur) {
+                let dialog = state.open && getTooltip(this.view, state.open.tooltip);
+                if (!dialog || !dialog.dom.contains(event.relatedTarget))
+                    this.view.dispatch({ effects: closeCompletionEffect.of(null) });
+            }
         },
         compositionstart() {
             this.composing = 1 /* CompositionState.Started */;
@@ -1419,7 +1428,7 @@ function snippet(template) {
         let spec = {
             changes: { from, to, insert: Text.of(text) },
             scrollIntoView: true,
-            annotations: pickedCompletion.of(completion)
+            annotations: completion ? pickedCompletion.of(completion) : undefined
         };
         if (ranges.length)
             spec.selection = fieldSelection(ranges, 0);

package/package.json

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