@codemirror/autocomplete 6.3.1 → 6.3.3

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## 6.3.3 (2022-11-18)
+
+### Bug fixes
+
+Set an explicit `box-sizing` style on completion icons so CSS resets don't mess them up.
+
+Allow closing braces in templates to be escaped with a backslash.
+
+## 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

package/dist/index.cjs

@@ -712,6 +712,8 @@ class CompletionState {
         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()))
@@ -1134,7 +1136,8 @@ const baseTheme = view.EditorView.baseTheme({
         display: "inline-block",
         textAlign: "center",
         paddingRight: ".6em",
-        opacity: "0.6"
+        opacity: "0.6",
+        boxSizing: "content-box"
     },
     ".cm-completionIcon-function, .cm-completionIcon-method": {
         "&:after": { content: "'ƒ'" }
@@ -1236,8 +1239,8 @@ class Snippet {
                 positions.push(new FieldPos(found, lines.length, m.index, m.index + name.length));
                 line = line.slice(0, m.index) + name + line.slice(m.index + m[0].length);
             }
-            for (let esc; esc = /([$#])\\{/.exec(line);) {
-                line = line.slice(0, esc.index) + esc[1] + "{" + line.slice(esc.index + esc[0].length);
+            for (let esc; esc = /\\([{}])/.exec(line);) {
+                line = line.slice(0, esc.index) + esc[1] + line.slice(esc.index + esc[0].length);
                 for (let pos of positions)
                     if (pos.line == lines.length && pos.from > esc.index) {
                         pos.from--;
@@ -1328,10 +1331,9 @@ The order of fields defaults to textual order, but you can add
 numbers to placeholders (`${1}` or `${1:defaultText}`) to provide
 a custom order.
 
-To include a literal `${` or `#{` in your template, put a
-backslash after the dollar or hash and before the brace (`$\\{`).
-This will be removed and the sequence will not be interpreted as a
-placeholder.
+To include a literal `{` or `}` in your template, put a backslash
+in front of it. This will be removed and the brace will not be
+interpreted as indicating a placeholder.
 */
 function snippet(template) {
     let snippet = Snippet.parse(template);

package/dist/index.d.ts

@@ -326,10 +326,9 @@ The order of fields defaults to textual order, but you can add
 numbers to placeholders (`${1}` or `${1:defaultText}`) to provide
 a custom order.
 
-To include a literal `${` or `#{` in your template, put a
-backslash after the dollar or hash and before the brace (`$\\{`).
-This will be removed and the sequence will not be interpreted as a
-placeholder.
+To include a literal `{` or `}` in your template, put a backslash
+in front of it. This will be removed and the brace will not be
+interpreted as indicating a placeholder.
 */
 declare function snippet(template: string): (editor: {
     state: EditorState;

package/dist/index.js

@@ -708,6 +708,8 @@ class CompletionState {
         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()))
@@ -1130,7 +1132,8 @@ const baseTheme = /*@__PURE__*/EditorView.baseTheme({
         display: "inline-block",
         textAlign: "center",
         paddingRight: ".6em",
-        opacity: "0.6"
+        opacity: "0.6",
+        boxSizing: "content-box"
     },
     ".cm-completionIcon-function, .cm-completionIcon-method": {
         "&:after": { content: "'ƒ'" }
@@ -1232,8 +1235,8 @@ class Snippet {
                 positions.push(new FieldPos(found, lines.length, m.index, m.index + name.length));
                 line = line.slice(0, m.index) + name + line.slice(m.index + m[0].length);
             }
-            for (let esc; esc = /([$#])\\{/.exec(line);) {
-                line = line.slice(0, esc.index) + esc[1] + "{" + line.slice(esc.index + esc[0].length);
+            for (let esc; esc = /\\([{}])/.exec(line);) {
+                line = line.slice(0, esc.index) + esc[1] + line.slice(esc.index + esc[0].length);
                 for (let pos of positions)
                     if (pos.line == lines.length && pos.from > esc.index) {
                         pos.from--;
@@ -1324,10 +1327,9 @@ The order of fields defaults to textual order, but you can add
 numbers to placeholders (`${1}` or `${1:defaultText}`) to provide
 a custom order.
 
-To include a literal `${` or `#{` in your template, put a
-backslash after the dollar or hash and before the brace (`$\\{`).
-This will be removed and the sequence will not be interpreted as a
-placeholder.
+To include a literal `{` or `}` in your template, put a backslash
+in front of it. This will be removed and the brace will not be
+interpreted as indicating a placeholder.
 */
 function snippet(template) {
     let snippet = Snippet.parse(template);

package/package.json

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