@codemirror/autocomplete 6.2.0 → 6.3.1

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## 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
+
+Close bracket configuration now supports a `stringPrefixes` property that can be used to allow autoclosing of prefixed strings.
+
 ## 6.2.0 (2022-09-13)
 
 ### 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;
         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,12 @@ 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 && 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 +853,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 +878,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 +1084,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,
@@ -1091,6 +1117,7 @@ const baseTheme = view.EditorView.baseTheme({
         verticalAlign: "text-top",
         width: 0,
         height: "1.15em",
+        display: "inline-block",
         margin: "0 -0.7px -.7em",
         borderLeft: "1.4px dotted #888"
     },
@@ -1474,7 +1501,8 @@ const completeAnyWord = context => {
 
 const defaults = {
     brackets: ["(", "[", "{", "'", '"'],
-    before: ")]}:;>"
+    before: ")]}:;>",
+    stringPrefixes: []
 };
 const closeBracketEffect = state.StateEffect.define({
     map(value, mapping) {
@@ -1590,7 +1618,7 @@ function insertBracket(state$1, bracket) {
     for (let tok of tokens) {
         let closed = closing(state.codePointAt(tok, 0));
         if (bracket == tok)
-            return closed == tok ? handleSame(state$1, tok, tokens.indexOf(tok + tok + tok) > -1)
+            return closed == tok ? handleSame(state$1, tok, tokens.indexOf(tok + tok + tok) > -1, conf)
                 : handleOpen(state$1, tok, closed, conf.before || defaults.before);
         if (bracket == closed && closedBracketAt(state$1, state$1.selection.main.from))
             return handleClose(state$1, tok, closed);
@@ -1645,13 +1673,14 @@ function handleClose(state$1, _open, close) {
 }
 // Handles cases where the open and close token are the same, and
 // possibly triple quotes (as in `"""abc"""`-style quoting).
-function handleSame(state$1, token, allowTriple) {
+function handleSame(state$1, token, allowTriple, config) {
+    let stringPrefixes = config.stringPrefixes || defaults.stringPrefixes;
     let dont = null, changes = state$1.changeByRange(range => {
         if (!range.empty)
             return { changes: [{ insert: token, from: range.from }, { insert: token, from: range.to }],
                 effects: closeBracketEffect.of(range.to + token.length),
                 range: state.EditorSelection.range(range.anchor + token.length, range.head + token.length) };
-        let pos = range.head, next = nextChar(state$1.doc, pos);
+        let pos = range.head, next = nextChar(state$1.doc, pos), start;
         if (next == token) {
             if (nodeStart(state$1, pos)) {
                 return { changes: { insert: token + token, from: pos },
@@ -1665,14 +1694,14 @@ function handleSame(state$1, token, allowTriple) {
             }
         }
         else if (allowTriple && state$1.sliceDoc(pos - 2 * token.length, pos) == token + token &&
-            nodeStart(state$1, pos - 2 * token.length)) {
+            (start = canStartStringAt(state$1, pos - 2 * token.length, stringPrefixes)) > -1 &&
+            nodeStart(state$1, start)) {
             return { changes: { insert: token + token + token + token, from: pos },
                 effects: closeBracketEffect.of(pos + token.length),
                 range: state.EditorSelection.cursor(pos + token.length) };
         }
         else if (state$1.charCategorizer(pos)(next) != state.CharCategory.Word) {
-            let prev = state$1.sliceDoc(pos - 1, pos);
-            if (prev != token && state$1.charCategorizer(pos)(prev) != state.CharCategory.Word && !probablyInString(state$1, pos, token))
+            if (canStartStringAt(state$1, pos, stringPrefixes) > -1 && !probablyInString(state$1, pos, token, stringPrefixes))
                 return { changes: { insert: token + token, from: pos },
                     effects: closeBracketEffect.of(pos + token.length),
                     range: state.EditorSelection.cursor(pos + token.length) };
@@ -1688,12 +1717,15 @@ function nodeStart(state, pos) {
     let tree = language.syntaxTree(state).resolveInner(pos + 1);
     return tree.parent && tree.from == pos;
 }
-function probablyInString(state, pos, quoteToken) {
+function probablyInString(state, pos, quoteToken, prefixes) {
     let node = language.syntaxTree(state).resolveInner(pos, -1);
+    let maxPrefix = prefixes.reduce((m, p) => Math.max(m, p.length), 0);
     for (let i = 0; i < 5; i++) {
-        if (state.sliceDoc(node.from, node.from + quoteToken.length) == quoteToken) {
+        let start = state.sliceDoc(node.from, Math.min(node.to, node.from + quoteToken.length + maxPrefix));
+        let quotePos = start.indexOf(quoteToken);
+        if (!quotePos || quotePos > -1 && prefixes.indexOf(start.slice(0, quotePos)) > -1) {
             let first = node.firstChild;
-            while (first && first.from == node.from && first.to - first.from > quoteToken.length) {
+            while (first && first.from == node.from && first.to - first.from > quoteToken.length + quotePos) {
                 if (state.sliceDoc(first.to - quoteToken.length, first.to) == quoteToken)
                     return false;
                 first = first.firstChild;
@@ -1707,6 +1739,17 @@ function probablyInString(state, pos, quoteToken) {
     }
     return false;
 }
+function canStartStringAt(state$1, pos, prefixes) {
+    let charCat = state$1.charCategorizer(pos);
+    if (charCat(state$1.sliceDoc(pos - 1, pos)) != state.CharCategory.Word)
+        return pos;
+    for (let prefix of prefixes) {
+        let start = pos - prefix.length;
+        if (state$1.sliceDoc(start, pos) == prefix && charCat(state$1.sliceDoc(start - 1, start)) != state.CharCategory.Word)
+            return start;
+    }
+    return -1;
+}
 
 /**
 Returns an extension that enables autocompletion.
@@ -1759,7 +1802,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)
@@ -1772,7 +1815,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
@@ -1781,7 +1824,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.d.ts

@@ -66,7 +66,8 @@ interface CompletionConfig {
     completion, and should produce a DOM node to show. `position`
     determines where in the DOM the result appears, relative to
     other added widgets and the standard content. The default icons
-    have position 20, the label position 50, and the detail position 70.
+    have position 20, the label position 50, and the detail position
+    80.
     */
     addToOptions?: {
         render: (completion: Completion, state: EditorState) => Node | null;
@@ -404,6 +405,11 @@ interface CloseBracketConfig {
     whitespace. Defaults to `")]}:;>"`.
     */
     before?: string;
+    /**
+    When determining whether a given node may be a string, recognize
+    these prefixes before the opening quote.
+    */
+    stringPrefixes?: string[];
 }
 /**
 Extension to enable bracket-closing behavior. When a closeable

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;
         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,12 @@ 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 && 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 +849,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 +874,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 +1080,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,
@@ -1087,6 +1113,7 @@ const baseTheme = /*@__PURE__*/EditorView.baseTheme({
         verticalAlign: "text-top",
         width: 0,
         height: "1.15em",
+        display: "inline-block",
         margin: "0 -0.7px -.7em",
         borderLeft: "1.4px dotted #888"
     },
@@ -1470,7 +1497,8 @@ const completeAnyWord = context => {
 
 const defaults = {
     brackets: ["(", "[", "{", "'", '"'],
-    before: ")]}:;>"
+    before: ")]}:;>",
+    stringPrefixes: []
 };
 const closeBracketEffect = /*@__PURE__*/StateEffect.define({
     map(value, mapping) {
@@ -1586,7 +1614,7 @@ function insertBracket(state, bracket) {
     for (let tok of tokens) {
         let closed = closing(codePointAt(tok, 0));
         if (bracket == tok)
-            return closed == tok ? handleSame(state, tok, tokens.indexOf(tok + tok + tok) > -1)
+            return closed == tok ? handleSame(state, tok, tokens.indexOf(tok + tok + tok) > -1, conf)
                 : handleOpen(state, tok, closed, conf.before || defaults.before);
         if (bracket == closed && closedBracketAt(state, state.selection.main.from))
             return handleClose(state, tok, closed);
@@ -1641,13 +1669,14 @@ function handleClose(state, _open, close) {
 }
 // Handles cases where the open and close token are the same, and
 // possibly triple quotes (as in `"""abc"""`-style quoting).
-function handleSame(state, token, allowTriple) {
+function handleSame(state, token, allowTriple, config) {
+    let stringPrefixes = config.stringPrefixes || defaults.stringPrefixes;
     let dont = null, changes = state.changeByRange(range => {
         if (!range.empty)
             return { changes: [{ insert: token, from: range.from }, { insert: token, from: range.to }],
                 effects: closeBracketEffect.of(range.to + token.length),
                 range: EditorSelection.range(range.anchor + token.length, range.head + token.length) };
-        let pos = range.head, next = nextChar(state.doc, pos);
+        let pos = range.head, next = nextChar(state.doc, pos), start;
         if (next == token) {
             if (nodeStart(state, pos)) {
                 return { changes: { insert: token + token, from: pos },
@@ -1661,14 +1690,14 @@ function handleSame(state, token, allowTriple) {
             }
         }
         else if (allowTriple && state.sliceDoc(pos - 2 * token.length, pos) == token + token &&
-            nodeStart(state, pos - 2 * token.length)) {
+            (start = canStartStringAt(state, pos - 2 * token.length, stringPrefixes)) > -1 &&
+            nodeStart(state, start)) {
             return { changes: { insert: token + token + token + token, from: pos },
                 effects: closeBracketEffect.of(pos + token.length),
                 range: EditorSelection.cursor(pos + token.length) };
         }
         else if (state.charCategorizer(pos)(next) != CharCategory.Word) {
-            let prev = state.sliceDoc(pos - 1, pos);
-            if (prev != token && state.charCategorizer(pos)(prev) != CharCategory.Word && !probablyInString(state, pos, token))
+            if (canStartStringAt(state, pos, stringPrefixes) > -1 && !probablyInString(state, pos, token, stringPrefixes))
                 return { changes: { insert: token + token, from: pos },
                     effects: closeBracketEffect.of(pos + token.length),
                     range: EditorSelection.cursor(pos + token.length) };
@@ -1684,12 +1713,15 @@ function nodeStart(state, pos) {
     let tree = syntaxTree(state).resolveInner(pos + 1);
     return tree.parent && tree.from == pos;
 }
-function probablyInString(state, pos, quoteToken) {
+function probablyInString(state, pos, quoteToken, prefixes) {
     let node = syntaxTree(state).resolveInner(pos, -1);
+    let maxPrefix = prefixes.reduce((m, p) => Math.max(m, p.length), 0);
     for (let i = 0; i < 5; i++) {
-        if (state.sliceDoc(node.from, node.from + quoteToken.length) == quoteToken) {
+        let start = state.sliceDoc(node.from, Math.min(node.to, node.from + quoteToken.length + maxPrefix));
+        let quotePos = start.indexOf(quoteToken);
+        if (!quotePos || quotePos > -1 && prefixes.indexOf(start.slice(0, quotePos)) > -1) {
             let first = node.firstChild;
-            while (first && first.from == node.from && first.to - first.from > quoteToken.length) {
+            while (first && first.from == node.from && first.to - first.from > quoteToken.length + quotePos) {
                 if (state.sliceDoc(first.to - quoteToken.length, first.to) == quoteToken)
                     return false;
                 first = first.firstChild;
@@ -1703,6 +1735,17 @@ function probablyInString(state, pos, quoteToken) {
     }
     return false;
 }
+function canStartStringAt(state, pos, prefixes) {
+    let charCat = state.charCategorizer(pos);
+    if (charCat(state.sliceDoc(pos - 1, pos)) != CharCategory.Word)
+        return pos;
+    for (let prefix of prefixes) {
+        let start = pos - prefix.length;
+        if (state.sliceDoc(start, pos) == prefix && charCat(state.sliceDoc(start - 1, start)) != CharCategory.Word)
+            return start;
+    }
+    return -1;
+}
 
 /**
 Returns an extension that enables autocompletion.
@@ -1755,7 +1798,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)
@@ -1768,7 +1811,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
@@ -1777,7 +1820,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.2.0",
+  "version": "6.3.1",
   "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": {