@codemirror/autocomplete 6.1.1 → 6.3.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## 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
+
+Autocompletion now takes an `interactionDelay` option that can be used to control the delay between the time where completion opens and the time where commands like `acceptCompletion` affect it.
+
 ## 6.1.1 (2022-09-08)
 
 ### Bug fixes

package/dist/index.cjs

@@ -331,7 +331,8 @@ const completionConfig = 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,
@@ -508,7 +509,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();
@@ -826,7 +827,6 @@ const completionState = state.StateField.define({
     ]
 });
 
-const CompletionInteractMargin = 75;
 /**
 Returns a command that moves the completion selection forward or
 backward by the given amount.
@@ -834,7 +834,8 @@ 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 || Date.now() - cState.open.timestamp < CompletionInteractMargin)
+        if (!cState || !cState.open ||
+            Date.now() - cState.open.timestamp < view$1.state.facet(completionConfig).interactionDelay)
             return false;
         let step = 1, tooltip;
         if (by == "page" && (tooltip = view.getTooltip(view$1, cState.open.tooltip)))
@@ -855,8 +856,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;
@@ -1090,6 +1091,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"
     },
@@ -1473,7 +1475,8 @@ const completeAnyWord = context => {
 
 const defaults = {
     brackets: ["(", "[", "{", "'", '"'],
-    before: ")]}:;>"
+    before: ")]}:;>",
+    stringPrefixes: []
 };
 const closeBracketEffect = state.StateEffect.define({
     map(value, mapping) {
@@ -1589,7 +1592,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);
@@ -1644,13 +1647,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 },
@@ -1664,14 +1668,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) };
@@ -1687,12 +1691,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;
@@ -1706,6 +1713,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.

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;
@@ -78,6 +79,13 @@ interface CompletionConfig {
     [`localeCompare`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare).
     */
     compareCompletions?: (a: Completion, b: Completion) => number;
+    /**
+    By default, commands relating to an open completion only take
+    effect 75 milliseconds after the completion opened, so that key
+    presses made before the user is aware of the tooltip don't go to
+    the tooltip. This option can be used to configure that delay.
+    */
+    interactionDelay?: number;
 }
 
 /**
@@ -397,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

@@ -327,7 +327,8 @@ const completionConfig = /*@__PURE__*/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,
@@ -504,7 +505,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();
@@ -822,7 +823,6 @@ const completionState = /*@__PURE__*/StateField.define({
     ]
 });
 
-const CompletionInteractMargin = 75;
 /**
 Returns a command that moves the completion selection forward or
 backward by the given amount.
@@ -830,7 +830,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 = getTooltip(view, cState.open.tooltip)))
@@ -851,8 +852,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;
@@ -1086,6 +1087,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"
     },
@@ -1469,7 +1471,8 @@ const completeAnyWord = context => {
 
 const defaults = {
     brackets: ["(", "[", "{", "'", '"'],
-    before: ")]}:;>"
+    before: ")]}:;>",
+    stringPrefixes: []
 };
 const closeBracketEffect = /*@__PURE__*/StateEffect.define({
     map(value, mapping) {
@@ -1585,7 +1588,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);
@@ -1640,13 +1643,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 },
@@ -1660,14 +1664,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) };
@@ -1683,12 +1687,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;
@@ -1702,6 +1709,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.

package/package.json

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