@uiw/react-codemirror 4.12.2 → 4.12.4

package/README.md

@@ -114,6 +114,7 @@ export default function App() {
 ```
 
 - ~~`@codemirror/legacy-modes/mode/cpp`~~ => [`@codemirror/lang-cpp`](https://www.npmjs.com/package/@codemirror/lang-cpp)
+- ~~`@codemirror/legacy-modes/mode/css`~~ => [`@codemirror/lang-css`](https://www.npmjs.com/package/@codemirror/lang-css)
 - ~~`@codemirror/legacy-modes/mode/html`~~ => [`@codemirror/lang-html`](https://www.npmjs.com/package/@codemirror/lang-html)
 - ~~`@codemirror/legacy-modes/mode/java`~~ => [`@codemirror/lang-java`](https://www.npmjs.com/package/@codemirror/lang-java)
 - ~~`@codemirror/legacy-modes/mode/javascript`~~ => [`@codemirror/lang-javascript`](https://www.npmjs.com/package/@codemirror/lang-javascript)
@@ -125,6 +126,7 @@ export default function App() {
 - ~~`@codemirror/legacy-modes/mode/rust`~~ => [`@codemirror/lang-rust`](https://www.npmjs.com/package/@codemirror/lang-rust)
 - ~~`@codemirror/legacy-modes/mode/sql`~~ => [`@codemirror/lang-sql`](https://www.npmjs.com/package/@codemirror/lang-sql)
 - ~~`@codemirror/legacy-modes/mode/xml`~~ => [`@codemirror/lang-xml`](https://www.npmjs.com/package/@codemirror/lang-xml)
+- ~~`@codemirror/legacy-modes/mode/wast`~~ => [`@codemirror/lang-wast`](https://www.npmjs.com/package/@codemirror/lang-wast)
 
 ### Markdown Example
 

package/dist/mdeditor.js

@@ -2314,6 +2314,8 @@ class Rule {
         this.context = context;
         this.next = next;
     }
+    get opaque() { return this.mode == 0 /* Opaque */; }
+    get inherit() { return this.mode == 1 /* Inherit */; }
     sort(other) {
         if (!other || other.depth < this.depth) {
             this.next = other;
@@ -2324,6 +2326,7 @@ class Rule {
     }
     get depth() { return this.context ? this.context.length : 0; }
 }
+Rule.empty = new Rule([], 2 /* Normal */, null);
 /// Define a [highlighter](#highlight.Highlighter) from an array of
 /// tag/class pairs. Classes associated with more specific tags will
 /// take precedence.
@@ -2351,7 +2354,7 @@ function tagHighlighter(tags, options) {
             }
             return cls;
         },
-        scope: scope
+        scope
     };
 }
 function highlightTags(highlighters, tags) {
@@ -2404,25 +2407,17 @@ class HighlightBuilder {
         if (type.isTop)
             highlighters = this.highlighters.filter(h => !h.scope || h.scope(type));
         let cls = inheritedClass;
-        let rule = type.prop(ruleNodeProp), opaque = false;
-        while (rule) {
-            if (!rule.context || cursor.matchContext(rule.context)) {
-                let tagCls = highlightTags(highlighters, rule.tags);
-                if (tagCls) {
-                    if (cls)
-                        cls += " ";
-                    cls += tagCls;
-                    if (rule.mode == 1 /* Inherit */)
-                        inheritedClass += (inheritedClass ? " " : "") + tagCls;
-                    else if (rule.mode == 0 /* Opaque */)
-                        opaque = true;
-                }
-                break;
-            }
-            rule = rule.next;
+        let rule = getStyleTags(cursor) || Rule.empty;
+        let tagCls = highlightTags(highlighters, rule.tags);
+        if (tagCls) {
+            if (cls)
+                cls += " ";
+            cls += tagCls;
+            if (rule.mode == 1 /* Inherit */)
+                inheritedClass += (inheritedClass ? " " : "") + tagCls;
         }
         this.startSpan(cursor.from, cls);
-        if (opaque)
+        if (rule.opaque)
             return;
         let mounted = cursor.tree && cursor.tree.prop(dist_NodeProp.mounted);
         if (mounted && mounted.overlay) {
@@ -2465,6 +2460,15 @@ class HighlightBuilder {
         }
     }
 }
+/// Match a syntax node's [highlight rules](#highlight.styleTags). If
+/// there's a match, return its set of tags, and whether it is
+/// opaque (uses a `!`) or applies to all child nodes (`/...`).
+function getStyleTags(node) {
+    let rule = node.type.prop(ruleNodeProp);
+    while (rule && rule.context && !node.matchContext(rule.context))
+        rule = rule.next;
+    return rule || null;
+}
 const t = Tag.define;
 const comment = t(), dist_name = t(), typeName = t(dist_name), propertyName = t(dist_name), literal = t(), string = t(literal), number = t(literal), content = t(), heading = t(content), keyword = t(), operator = t(), punctuation = t(), bracket = t(punctuation), meta = t();
 /// The default set of highlighting [tags](#highlight.Tag).
@@ -2565,7 +2569,7 @@ const tags = {
     moduleKeyword: t(keyword),
     /// An operator.
     operator,
-    /// An [operator](#highlight.tags.operator) that defines something.
+    /// An [operator](#highlight.tags.operator) that dereferences something.
     derefOperator: t(operator),
     /// Arithmetic-related [operator](#highlight.tags.operator).
     arithmeticOperator: t(operator),
@@ -5319,35 +5323,35 @@ The line comment syntax is taken from the
 [`commentTokens`](https://codemirror.net/6/docs/ref/#commands.CommentTokens) [language
 data](https://codemirror.net/6/docs/ref/#state.EditorState.languageDataAt).
 */
-const toggleLineComment = /*@__PURE__*/command(changeLineComment, 0 /* Toggle */);
+const toggleLineComment = /*@__PURE__*/command(changeLineComment, 0 /* CommentOption.Toggle */);
 /**
 Comment the current selection using line comments.
 */
-const lineComment = /*@__PURE__*/(/* unused pure expression or super */ null && (command(changeLineComment, 1 /* Comment */)));
+const lineComment = /*@__PURE__*/(/* unused pure expression or super */ null && (command(changeLineComment, 1 /* CommentOption.Comment */)));
 /**
 Uncomment the current selection using line comments.
 */
-const lineUncomment = /*@__PURE__*/(/* unused pure expression or super */ null && (command(changeLineComment, 2 /* Uncomment */)));
+const lineUncomment = /*@__PURE__*/(/* unused pure expression or super */ null && (command(changeLineComment, 2 /* CommentOption.Uncomment */)));
 /**
 Comment or uncomment the current selection using block comments.
 The block comment syntax is taken from the
 [`commentTokens`](https://codemirror.net/6/docs/ref/#commands.CommentTokens) [language
 data](https://codemirror.net/6/docs/ref/#state.EditorState.languageDataAt).
 */
-const toggleBlockComment = /*@__PURE__*/command(changeBlockComment, 0 /* Toggle */);
+const toggleBlockComment = /*@__PURE__*/command(changeBlockComment, 0 /* CommentOption.Toggle */);
 /**
 Comment the current selection using block comments.
 */
-const blockComment = /*@__PURE__*/(/* unused pure expression or super */ null && (command(changeBlockComment, 1 /* Comment */)));
+const blockComment = /*@__PURE__*/(/* unused pure expression or super */ null && (command(changeBlockComment, 1 /* CommentOption.Comment */)));
 /**
 Uncomment the current selection using block comments.
 */
-const blockUncomment = /*@__PURE__*/(/* unused pure expression or super */ null && (command(changeBlockComment, 2 /* Uncomment */)));
+const blockUncomment = /*@__PURE__*/(/* unused pure expression or super */ null && (command(changeBlockComment, 2 /* CommentOption.Uncomment */)));
 /**
 Comment or uncomment the lines around the current selection using
 block comments.
 */
-const toggleBlockCommentByLine = /*@__PURE__*/command((o, s) => changeBlockComment(o, s, selectedLineRanges(s)), 0 /* Toggle */);
+const toggleBlockCommentByLine = /*@__PURE__*/command((o, s) => changeBlockComment(o, s, selectedLineRanges(s)), 0 /* CommentOption.Toggle */);
 function getConfig(state, pos = state.selection.main.head) {
     let data = state.languageDataAt("commentTokens", pos);
     return data.length ? data[0] : {};
@@ -5406,14 +5410,14 @@ function changeBlockComment(option, state, ranges = state.selection.ranges) {
     if (!tokens.every(c => c))
         return null;
     let comments = ranges.map((r, i) => findBlockComment(state, tokens[i], r.from, r.to));
-    if (option != 2 /* Uncomment */ && !comments.every(c => c)) {
+    if (option != 2 /* CommentOption.Uncomment */ && !comments.every(c => c)) {
         return { changes: state.changes(ranges.map((range, i) => {
                 if (comments[i])
                     return [];
                 return [{ from: range.from, insert: tokens[i].open + " " }, { from: range.to, insert: " " + tokens[i].close }];
             })) };
     }
-    else if (option != 1 /* Comment */ && comments.some(c => c)) {
+    else if (option != 1 /* CommentOption.Comment */ && comments.some(c => c)) {
         let changes = [];
         for (let i = 0, comment; i < comments.length; i++)
             if (comment = comments[i]) {
@@ -5453,7 +5457,7 @@ function changeLineComment(option, state, ranges = state.selection.ranges) {
         if (lines.length == startI + 1)
             lines[startI].single = true;
     }
-    if (option != 2 /* Uncomment */ && lines.some(l => l.comment < 0 && (!l.empty || l.single))) {
+    if (option != 2 /* CommentOption.Uncomment */ && lines.some(l => l.comment < 0 && (!l.empty || l.single))) {
         let changes = [];
         for (let { line, token, indent, empty, single } of lines)
             if (single || !empty)
@@ -5461,7 +5465,7 @@ function changeLineComment(option, state, ranges = state.selection.ranges) {
         let changeSet = state.changes(changes);
         return { changes: changeSet, selection: state.selection.map(changeSet, 1) };
     }
-    else if (option != 1 /* Comment */ && lines.some(l => l.comment >= 0)) {
+    else if (option != 1 /* CommentOption.Comment */ && lines.some(l => l.comment >= 0)) {
         let changes = [];
         for (let { line, comment, token } of lines)
             if (comment >= 0) {
@@ -5515,12 +5519,12 @@ const historyField_ = /*@__PURE__*/state_.StateField.define({
         if (fromHist) {
             let selection = tr.docChanged ? state_.EditorSelection.single(changeEnd(tr.changes)) : undefined;
             let item = HistEvent.fromTransaction(tr, selection), from = fromHist.side;
-            let other = from == 0 /* Done */ ? state.undone : state.done;
+            let other = from == 0 /* BranchName.Done */ ? state.undone : state.done;
             if (item)
                 other = updateBranch(other, other.length, config.minDepth, item);
             else
                 other = addSelection(other, tr.startState.selection);
-            return new HistoryState(from == 0 /* Done */ ? fromHist.rest : other, from == 0 /* Done */ ? other : fromHist.rest);
+            return new HistoryState(from == 0 /* BranchName.Done */ ? fromHist.rest : other, from == 0 /* BranchName.Done */ ? other : fromHist.rest);
         }
         let isolate = tr.annotation(isolateHistory);
         if (isolate == "full" || isolate == "before")
@@ -5588,37 +5592,37 @@ function cmd(side, selection) {
 Undo a single group of history events. Returns false if no group
 was available.
 */
-const undo = /*@__PURE__*/cmd(0 /* Done */, false);
+const undo = /*@__PURE__*/cmd(0 /* BranchName.Done */, false);
 /**
 Redo a group of history events. Returns false if no group was
 available.
 */
-const redo = /*@__PURE__*/cmd(1 /* Undone */, false);
+const redo = /*@__PURE__*/cmd(1 /* BranchName.Undone */, false);
 /**
 Undo a change or selection change.
 */
-const undoSelection = /*@__PURE__*/cmd(0 /* Done */, true);
+const undoSelection = /*@__PURE__*/cmd(0 /* BranchName.Done */, true);
 /**
 Redo a change or selection change.
 */
-const redoSelection = /*@__PURE__*/cmd(1 /* Undone */, true);
+const redoSelection = /*@__PURE__*/cmd(1 /* BranchName.Undone */, true);
 function depth(side) {
     return function (state) {
         let histState = state.field(historyField_, false);
         if (!histState)
             return 0;
-        let branch = side == 0 /* Done */ ? histState.done : histState.undone;
+        let branch = side == 0 /* BranchName.Done */ ? histState.done : histState.undone;
         return branch.length - (branch.length && !branch[0].changes ? 1 : 0);
     };
 }
 /**
 The amount of undoable change events available in a given state.
 */
-const undoDepth = /*@__PURE__*/(/* unused pure expression or super */ null && (depth(0 /* Done */)));
+const undoDepth = /*@__PURE__*/(/* unused pure expression or super */ null && (depth(0 /* BranchName.Done */)));
 /**
 The amount of redoable change events available in a given state.
 */
-const redoDepth = /*@__PURE__*/(/* unused pure expression or super */ null && (depth(1 /* Undone */)));
+const redoDepth = /*@__PURE__*/(/* unused pure expression or super */ null && (depth(1 /* BranchName.Undone */)));
 // History events store groups of changes or effects that need to be
 // undone/redone together.
 class HistEvent {
@@ -5796,7 +5800,7 @@ class HistoryState {
         return new HistoryState(addMappingToBranch(this.done, mapping), addMappingToBranch(this.undone, mapping), this.prevTime, this.prevUserEvent);
     }
     pop(side, state, selection) {
-        let branch = side == 0 /* Done */ ? this.done : this.undone;
+        let branch = side == 0 /* BranchName.Done */ ? this.done : this.undone;
         if (branch.length == 0)
             return null;
         let event = branch[branch.length - 1];
@@ -5804,7 +5808,7 @@ class HistoryState {
             return state.update({
                 selection: event.selectionsAfter[event.selectionsAfter.length - 1],
                 annotations: fromHistory.of({ side, rest: popSelection(branch) }),
-                userEvent: side == 0 /* Done */ ? "select.undo" : "select.redo",
+                userEvent: side == 0 /* BranchName.Done */ ? "select.undo" : "select.redo",
                 scrollIntoView: true
             });
         }
@@ -5821,7 +5825,7 @@ class HistoryState {
                 effects: event.effects,
                 annotations: fromHistory.of({ side, rest }),
                 filter: false,
-                userEvent: side == 0 /* Done */ ? "undo" : "redo",
+                userEvent: side == 0 /* BranchName.Done */ ? "undo" : "redo",
                 scrollIntoView: true
             });
         }
@@ -6288,26 +6292,34 @@ const simplifySelection = ({ state, dispatch }) => {
     dispatch(setSel(state, selection));
     return true;
 };
-function deleteBy({ state, dispatch }, by) {
-    if (state.readOnly)
+function deleteBy(target, by) {
+    if (target.state.readOnly)
         return false;
-    let event = "delete.selection";
+    let event = "delete.selection", { state } = target;
     let changes = state.changeByRange(range => {
         let { from, to } = range;
         if (from == to) {
             let towards = by(from);
-            if (towards < from)
+            if (towards < from) {
                 event = "delete.backward";
-            else if (towards > from)
+                towards = skipAtomic(target, towards, false);
+            }
+            else if (towards > from) {
                 event = "delete.forward";
+                towards = skipAtomic(target, towards, true);
+            }
             from = Math.min(from, towards);
             to = Math.max(to, towards);
         }
+        else {
+            from = skipAtomic(target, from, false);
+            to = skipAtomic(target, from, true);
+        }
         return from == to ? { range } : { changes: { from, to }, range: state_.EditorSelection.cursor(from) };
     });
     if (changes.changes.empty)
         return false;
-    dispatch(state.update(changes, {
+    target.dispatch(state.update(changes, {
         scrollIntoView: true,
         userEvent: event,
         effects: event == "delete.selection" ? view_.EditorView.announce.of(state.phrase("Selection deleted")) : undefined
@@ -6339,7 +6351,7 @@ const deleteByChar = (target, forward) => deleteBy(target, pos => {
         if (targetPos == pos && line.number != (forward ? state.doc.lines : 1))
             targetPos += forward ? 1 : -1;
     }
-    return skipAtomic(target, targetPos, forward);
+    return targetPos;
 });
 /**
 Delete the selection, or, for cursor selections, the character
@@ -6368,7 +6380,7 @@ const deleteByGroup = (target, forward) => deleteBy(target, start => {
             cat = nextCat;
         pos = next;
     }
-    return skipAtomic(target, pos, forward);
+    return pos;
 });
 /**
 Delete the selection or backward until the end of the next
@@ -6387,7 +6399,7 @@ line, delete the line break after it.
 */
 const deleteToLineEnd = view => deleteBy(view, pos => {
     let lineEnd = view.lineBlockAt(pos).to;
-    return skipAtomic(view, pos < lineEnd ? lineEnd : Math.min(view.state.doc.length, pos + 1), true);
+    return pos < lineEnd ? lineEnd : Math.min(view.state.doc.length, pos + 1);
 });
 /**
 Delete the selection, or, if it is a cursor selection, delete to
@@ -6396,7 +6408,7 @@ line, delete the line break before it.
 */
 const deleteToLineStart = view => deleteBy(view, pos => {
     let lineStart = view.lineBlockAt(pos).from;
-    return skipAtomic(view, pos > lineStart ? lineStart : Math.max(0, pos - 1), false);
+    return pos > lineStart ? lineStart : Math.max(0, pos - 1);
 });
 /**
 Delete all whitespace directly before a line end from the
@@ -7129,7 +7141,7 @@ class MultilineRegExpCursor {
         this.matchPos = toCharEnd(text, from);
         this.re = new RegExp(query, baseFlags + ((options === null || options === void 0 ? void 0 : options.ignoreCase) ? "i" : ""));
         this.test = options === null || options === void 0 ? void 0 : options.test;
-        this.flat = FlattenedDoc.get(text, from, this.chunkEnd(from + 5000 /* Base */));
+        this.flat = FlattenedDoc.get(text, from, this.chunkEnd(from + 5000 /* Chunk.Base */));
     }
     chunkEnd(pos) {
         return pos >= this.to ? this.to : this.text.lineAt(pos).to;
@@ -7509,10 +7521,10 @@ function stringWordTest(doc, categorizer) {
             bufPos = Math.max(0, from - 2);
             buf = doc.sliceString(bufPos, Math.min(doc.length, to + 2));
         }
-        return categorizer(charAfter(buf, from - bufPos)) != state_.CharCategory.Word ||
-            categorizer(charBefore(buf, to - bufPos)) != state_.CharCategory.Word ||
-            (categorizer(charBefore(buf, from - bufPos)) != state_.CharCategory.Word &&
-                categorizer(charAfter(buf, to - bufPos)) != state_.CharCategory.Word);
+        return (categorizer(charBefore(buf, from - bufPos)) != state_.CharCategory.Word ||
+            categorizer(charAfter(buf, from - bufPos)) != state_.CharCategory.Word) &&
+            (categorizer(charAfter(buf, to - bufPos)) != state_.CharCategory.Word ||
+                categorizer(charBefore(buf, to - bufPos)) != state_.CharCategory.Word);
     };
 }
 class StringQuery extends QueryType {
@@ -7529,7 +7541,7 @@ class StringQuery extends QueryType {
     // cursor, done by scanning chunk after chunk forward.
     prevMatchInRange(state, from, to) {
         for (let pos = to;;) {
-            let start = Math.max(from, pos - 10000 /* ChunkSize */ - this.spec.unquoted.length);
+            let start = Math.max(from, pos - 10000 /* FindPrev.ChunkSize */ - this.spec.unquoted.length);
             let cursor = stringCursor(this.spec, state, start, pos), range = null;
             while (!cursor.nextOverlapping().done)
                 range = cursor.value;
@@ -7537,7 +7549,7 @@ class StringQuery extends QueryType {
                 return range;
             if (start == from)
                 return null;
-            pos -= 10000 /* ChunkSize */;
+            pos -= 10000 /* FindPrev.ChunkSize */;
         }
     }
     prevMatch(state, curFrom, curTo) {
@@ -7574,10 +7586,10 @@ function charAfter(str, index) {
 }
 function regexpWordTest(categorizer) {
     return (_from, _to, match) => !match[0].length ||
-        categorizer(charAfter(match.input, match.index)) != state_.CharCategory.Word ||
-        categorizer(charBefore(match.input, match.index + match[0].length)) != state_.CharCategory.Word ||
-        (categorizer(charBefore(match.input, match.index)) != state_.CharCategory.Word &&
-            categorizer(charAfter(match.input, match.index + match[0].length)) != state_.CharCategory.Word);
+        (categorizer(charBefore(match.input, match.index)) != state_.CharCategory.Word ||
+            categorizer(charAfter(match.input, match.index)) != state_.CharCategory.Word) &&
+            (categorizer(charAfter(match.input, match.index + match[0].length)) != state_.CharCategory.Word ||
+                categorizer(charBefore(match.input, match.index + match[0].length)) != state_.CharCategory.Word);
 }
 class RegExpQuery extends QueryType {
     nextMatch(state, curFrom, curTo) {
@@ -7588,7 +7600,7 @@ class RegExpQuery extends QueryType {
     }
     prevMatchInRange(state, from, to) {
         for (let size = 1;; size++) {
-            let start = Math.max(from, to - size * 10000 /* ChunkSize */);
+            let start = Math.max(from, to - size * 10000 /* FindPrev.ChunkSize */);
             let cursor = regexpCursor(this.spec, state, start, to), range = null;
             while (!cursor.next().done)
                 range = cursor.value;
@@ -7618,7 +7630,7 @@ class RegExpQuery extends QueryType {
         return ranges;
     }
     highlight(state, from, to, add) {
-        let cursor = regexpCursor(this.spec, state, Math.max(0, from - 250 /* HighlightMargin */), Math.min(to + 250 /* HighlightMargin */, state.doc.length));
+        let cursor = regexpCursor(this.spec, state, Math.max(0, from - 250 /* RegExp.HighlightMargin */), Math.min(to + 250 /* RegExp.HighlightMargin */, state.doc.length));
         while (!cursor.next().done)
             add(cursor.value.from, cursor.value.to);
     }
@@ -7685,7 +7697,7 @@ const searchHighlighter = /*@__PURE__*/view_.ViewPlugin.fromClass(class {
         let builder = new state_.RangeSetBuilder();
         for (let i = 0, ranges = view.visibleRanges, l = ranges.length; i < l; i++) {
             let { from, to } = ranges[i];
-            while (i < l - 1 && to > ranges[i + 1].from - 2 * 250 /* HighlightMargin */)
+            while (i < l - 1 && to > ranges[i + 1].from - 2 * 250 /* RegExp.HighlightMargin */)
                 to = ranges[++i].to;
             query.highlight(view.state, from, to, (from, to) => {
                 let selected = view.state.selection.ranges.some(r => r.from == from && r.to == to);
@@ -8406,7 +8418,8 @@ const completionConfig = /*@__PURE__*/state_.Facet.define({
             aboveCursor: false,
             icons: true,
             addToOptions: [],
-            compareCompletions: (a, b) => a.label.localeCompare(b.label)
+            compareCompletions: (a, b) => a.label.localeCompare(b.label),
+            interactionDelay: 75
         }, {
             defaultKeymap: (a, b) => a && b,
             closeOnBlur: (a, b) => a && b,
@@ -8583,7 +8596,7 @@ class CompletionTooltip {
         let sel = this.dom.querySelector("[aria-selected]");
         if (!sel || !this.info)
             return null;
-        let win = this.dom.ownerDocument.defaultView;
+        let win = this.dom.ownerDocument.defaultView || window;
         let listRect = this.dom.getBoundingClientRect();
         let infoRect = this.info.getBoundingClientRect();
         let selRect = sel.getBoundingClientRect();
@@ -8901,7 +8914,6 @@ const completionState = /*@__PURE__*/state_.StateField.define({
     ]
 });
 
-const CompletionInteractMargin = 75;
 /**
 Returns a command that moves the completion selection forward or
 backward by the given amount.
@@ -8909,7 +8921,8 @@ backward by the given amount.
 function moveCompletionSelection(forward, by = "option") {
     return (view) => {
         let cState = view.state.field(completionState, false);
-        if (!cState || !cState.open || Date.now() - cState.open.timestamp < CompletionInteractMargin)
+        if (!cState || !cState.open ||
+            Date.now() - cState.open.timestamp < view.state.facet(completionConfig).interactionDelay)
             return false;
         let step = 1, tooltip;
         if (by == "page" && (tooltip = (0,view_.getTooltip)(view, cState.open.tooltip)))
@@ -8930,8 +8943,8 @@ Accept the current completion.
 */
 const acceptCompletion = (view) => {
     let cState = view.state.field(completionState, false);
-    if (view.state.readOnly || !cState || !cState.open || Date.now() - cState.open.timestamp < CompletionInteractMargin ||
-        cState.open.selected < 0)
+    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]);
     return true;
@@ -9165,6 +9178,7 @@ const autocomplete_dist_baseTheme = /*@__PURE__*/view_.EditorView.baseTheme({
         verticalAlign: "text-top",
         width: 0,
         height: "1.15em",
+        display: "inline-block",
         margin: "0 -0.7px -.7em",
         borderLeft: "1.4px dotted #888"
     },
@@ -9548,7 +9562,8 @@ const completeAnyWord = context => {
 
 const defaults = {
     brackets: ["(", "[", "{", "'", '"'],
-    before: ")]}:;>"
+    before: ")]}:;>",
+    stringPrefixes: []
 };
 const closeBracketEffect = /*@__PURE__*/state_.StateEffect.define({
     map(value, mapping) {
@@ -9664,7 +9679,7 @@ function insertBracket(state, bracket) {
     for (let tok of tokens) {
         let closed = closing((0,state_.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);
@@ -9719,13 +9734,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: state_.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 },
@@ -9739,14 +9755,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: state_.EditorSelection.cursor(pos + token.length) };
         }
         else if (state.charCategorizer(pos)(next) != state_.CharCategory.Word) {
-            let prev = state.sliceDoc(pos - 1, pos);
-            if (prev != token && state.charCategorizer(pos)(prev) != state_.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: state_.EditorSelection.cursor(pos + token.length) };
@@ -9762,12 +9778,15 @@ function nodeStart(state, pos) {
     let tree = dist_syntaxTree(state).resolveInner(pos + 1);
     return tree.parent && tree.from == pos;
 }
-function probablyInString(state, pos, quoteToken) {
+function probablyInString(state, pos, quoteToken, prefixes) {
     let node = dist_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;
@@ -9781,6 +9800,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)) != state_.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)) != state_.CharCategory.Word)
+            return start;
+    }
+    return -1;
+}
 
 /**
 Returns an extension that enables autocompletion.