@codemirror/autocomplete 0.19.5 → 0.19.9

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+## 0.19.9 (2021-11-26)
+
+### Bug fixes
+
+Fix an issue where info tooltips would be visible in an inappropriate position when there was no room to place them properly.
+
+## 0.19.8 (2021-11-17)
+
+### Bug fixes
+
+Give the completion tooltip a minimal width, and show ellipsis when completions overflow the tooltip width.
+
+### New features
+
+`autocompletion` now accepts an `aboveCursor` option to make the completion tooltip show up above the cursor.
+
+## 0.19.7 (2021-11-16)
+
+### Bug fixes
+
+Make option deduplication less aggressive, so that options with different `type` or `apply` fields don't get merged.
+
+## 0.19.6 (2021-11-12)
+
+### Bug fixes
+
+Fix an issue where parsing a snippet with a field that was labeled only by a number crashed.
+
 ## 0.19.5 (2021-11-09)
 
 ### Bug fixes

package/dist/index.cjs

@@ -309,6 +309,7 @@ const completionConfig = state.Facet.define({
             maxRenderedOptions: 100,
             defaultKeymap: true,
             optionClass: () => "",
+            aboveCursor: false,
             icons: true,
             addToOptions: []
         }, {
@@ -483,9 +484,9 @@ class CompletionTooltip {
         if (!sel || !this.info)
             return null;
         let rect = this.dom.getBoundingClientRect(), infoRect = this.info.getBoundingClientRect();
-        let top = Math.min(sel.getBoundingClientRect().top, innerHeight - infoRect.height) - rect.top;
-        if (top < 0 || top > this.list.clientHeight - 10)
+        if (rect.top > innerHeight - 10 || rect.bottom < 10)
             return null;
+        let top = Math.max(0, Math.min(sel.getBoundingClientRect().top, innerHeight - infoRect.height)) - rect.top;
         let left = this.view.textDirection == view.Direction.RTL;
         let spaceLeft = rect.left, spaceRight = innerWidth - rect.right;
         if (left && spaceLeft < Math.min(infoRect.width, spaceRight))
@@ -495,10 +496,12 @@ class CompletionTooltip {
         return { top, left };
     }
     positionInfo(pos) {
-        if (this.info && pos) {
-            this.info.style.top = pos.top + "px";
-            this.info.classList.toggle("cm-completionInfo-left", pos.left);
-            this.info.classList.toggle("cm-completionInfo-right", !pos.left);
+        if (this.info) {
+            this.info.style.top = (pos ? pos.top : -1e6) + "px";
+            if (pos) {
+                this.info.classList.toggle("cm-completionInfo-left", pos.left);
+                this.info.classList.toggle("cm-completionInfo-right", !pos.left);
+            }
         }
     }
     createListBox(options, id, range) {
@@ -570,7 +573,8 @@ function sortOptions(active, state) {
     for (let opt of options.sort(cmpOption)) {
         if (result.length == MaxOptions)
             break;
-        if (!prev || prev.label != opt.completion.label || prev.detail != opt.completion.detail)
+        if (!prev || prev.label != opt.completion.label || prev.detail != opt.completion.detail ||
+            prev.type != opt.completion.type || prev.apply != opt.completion.apply)
             result.push(opt);
         else if (score(opt.completion) > score(prev))
             result[result.length - 1] = opt;
@@ -590,7 +594,7 @@ class CompletionDialog {
         return selected == this.selected || selected >= this.options.length ? this
             : new CompletionDialog(this.options, makeAttrs(id, selected), this.tooltip, this.timestamp, selected);
     }
-    static build(active, state, id, prev) {
+    static build(active, state, id, prev, conf) {
         let options = sortOptions(active, state);
         if (!options.length)
             return null;
@@ -604,7 +608,8 @@ class CompletionDialog {
         }
         return new CompletionDialog(options, makeAttrs(id, selected), {
             pos: active.reduce((a, b) => b.hasResult() ? Math.min(a, b.from) : a, 1e8),
-            create: completionTooltip(completionState)
+            create: completionTooltip(completionState),
+            above: conf.aboveCursor,
         }, prev ? prev.timestamp : Date.now(), selected);
     }
     map(changes) {
@@ -632,7 +637,7 @@ 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)
+            !sameResults(active, this.active) ? CompletionDialog.build(active, state, this.id, this.open, conf)
             : this.open && tr.docChanged ? this.open.map(tr.changes) : this.open;
         if (!open && active.every(a => a.state != 1 /* Pending */) && active.some(a => a.hasResult()))
             active = active.map(a => a.hasResult() ? new ActiveSource(a.source, 0 /* Inactive */) : a);
@@ -968,16 +973,19 @@ const baseTheme = view.EditorView.baseTheme({
         "& > ul": {
             fontFamily: "monospace",
             whiteSpace: "nowrap",
-            overflow: "auto",
+            overflow: "hidden auto",
             maxWidth_fallback: "700px",
             maxWidth: "min(700px, 95vw)",
+            minWidth: "250px",
             maxHeight: "10em",
             listStyle: "none",
             margin: 0,
             padding: 0,
             "& > li": {
+                overflowX: "hidden",
+                textOverflow: "ellipsis",
                 cursor: "pointer",
-                padding: "1px 1em 1px 3px",
+                padding: "1px 3px",
                 lineHeight: 1.2
             },
         }
@@ -1108,7 +1116,7 @@ class Snippet {
         let lines = [], positions = [], m;
         for (let line of template.split(/\r\n?|\n/)) {
             while (m = /[#$]\{(?:(\d+)(?::([^}]*))?|([^}]*))\}/.exec(line)) {
-                let seq = m[1] ? +m[1] : null, name = m[2] || m[3], found = -1;
+                let seq = m[1] ? +m[1] : null, name = m[2] || m[3] || "", found = -1;
                 for (let i = 0; i < fields.length; i++) {
                     if (seq != null ? fields[i].seq == seq : name ? fields[i].name == name : false)
                         found = i;
@@ -1117,7 +1125,7 @@ class Snippet {
                     let i = 0;
                     while (i < fields.length && (seq == null || (fields[i].seq != null && fields[i].seq < seq)))
                         i++;
-                    fields.splice(i, 0, { seq, name: name || null });
+                    fields.splice(i, 0, { seq, name });
                     found = i;
                     for (let pos of positions)
                         if (pos.field >= found)

package/dist/index.d.ts

@@ -30,6 +30,12 @@ interface CompletionConfig {
     */
     defaultKeymap?: boolean;
     /**
+    By default, completions are shown below the cursor when there is
+    space. Setting this to true will make the extension put the
+    completions above the cursor when possible.
+    */
+    aboveCursor?: boolean;
+    /**
     This can be used to add additional CSS classes to completion
     options.
     */

package/dist/index.js

@@ -305,6 +305,7 @@ const completionConfig = /*@__PURE__*/Facet.define({
             maxRenderedOptions: 100,
             defaultKeymap: true,
             optionClass: () => "",
+            aboveCursor: false,
             icons: true,
             addToOptions: []
         }, {
@@ -479,9 +480,9 @@ class CompletionTooltip {
         if (!sel || !this.info)
             return null;
         let rect = this.dom.getBoundingClientRect(), infoRect = this.info.getBoundingClientRect();
-        let top = Math.min(sel.getBoundingClientRect().top, innerHeight - infoRect.height) - rect.top;
-        if (top < 0 || top > this.list.clientHeight - 10)
+        if (rect.top > innerHeight - 10 || rect.bottom < 10)
             return null;
+        let top = Math.max(0, Math.min(sel.getBoundingClientRect().top, innerHeight - infoRect.height)) - rect.top;
         let left = this.view.textDirection == Direction.RTL;
         let spaceLeft = rect.left, spaceRight = innerWidth - rect.right;
         if (left && spaceLeft < Math.min(infoRect.width, spaceRight))
@@ -491,10 +492,12 @@ class CompletionTooltip {
         return { top, left };
     }
     positionInfo(pos) {
-        if (this.info && pos) {
-            this.info.style.top = pos.top + "px";
-            this.info.classList.toggle("cm-completionInfo-left", pos.left);
-            this.info.classList.toggle("cm-completionInfo-right", !pos.left);
+        if (this.info) {
+            this.info.style.top = (pos ? pos.top : -1e6) + "px";
+            if (pos) {
+                this.info.classList.toggle("cm-completionInfo-left", pos.left);
+                this.info.classList.toggle("cm-completionInfo-right", !pos.left);
+            }
         }
     }
     createListBox(options, id, range) {
@@ -566,7 +569,8 @@ function sortOptions(active, state) {
     for (let opt of options.sort(cmpOption)) {
         if (result.length == MaxOptions)
             break;
-        if (!prev || prev.label != opt.completion.label || prev.detail != opt.completion.detail)
+        if (!prev || prev.label != opt.completion.label || prev.detail != opt.completion.detail ||
+            prev.type != opt.completion.type || prev.apply != opt.completion.apply)
             result.push(opt);
         else if (score(opt.completion) > score(prev))
             result[result.length - 1] = opt;
@@ -586,7 +590,7 @@ class CompletionDialog {
         return selected == this.selected || selected >= this.options.length ? this
             : new CompletionDialog(this.options, makeAttrs(id, selected), this.tooltip, this.timestamp, selected);
     }
-    static build(active, state, id, prev) {
+    static build(active, state, id, prev, conf) {
         let options = sortOptions(active, state);
         if (!options.length)
             return null;
@@ -600,7 +604,8 @@ class CompletionDialog {
         }
         return new CompletionDialog(options, makeAttrs(id, selected), {
             pos: active.reduce((a, b) => b.hasResult() ? Math.min(a, b.from) : a, 1e8),
-            create: completionTooltip(completionState)
+            create: completionTooltip(completionState),
+            above: conf.aboveCursor,
         }, prev ? prev.timestamp : Date.now(), selected);
     }
     map(changes) {
@@ -628,7 +633,7 @@ 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)
+            !sameResults(active, this.active) ? CompletionDialog.build(active, state, this.id, this.open, conf)
             : this.open && tr.docChanged ? this.open.map(tr.changes) : this.open;
         if (!open && active.every(a => a.state != 1 /* Pending */) && active.some(a => a.hasResult()))
             active = active.map(a => a.hasResult() ? new ActiveSource(a.source, 0 /* Inactive */) : a);
@@ -964,16 +969,19 @@ const baseTheme = /*@__PURE__*/EditorView.baseTheme({
         "& > ul": {
             fontFamily: "monospace",
             whiteSpace: "nowrap",
-            overflow: "auto",
+            overflow: "hidden auto",
             maxWidth_fallback: "700px",
             maxWidth: "min(700px, 95vw)",
+            minWidth: "250px",
             maxHeight: "10em",
             listStyle: "none",
             margin: 0,
             padding: 0,
             "& > li": {
+                overflowX: "hidden",
+                textOverflow: "ellipsis",
                 cursor: "pointer",
-                padding: "1px 1em 1px 3px",
+                padding: "1px 3px",
                 lineHeight: 1.2
             },
         }
@@ -1104,7 +1112,7 @@ class Snippet {
         let lines = [], positions = [], m;
         for (let line of template.split(/\r\n?|\n/)) {
             while (m = /[#$]\{(?:(\d+)(?::([^}]*))?|([^}]*))\}/.exec(line)) {
-                let seq = m[1] ? +m[1] : null, name = m[2] || m[3], found = -1;
+                let seq = m[1] ? +m[1] : null, name = m[2] || m[3] || "", found = -1;
                 for (let i = 0; i < fields.length; i++) {
                     if (seq != null ? fields[i].seq == seq : name ? fields[i].name == name : false)
                         found = i;
@@ -1113,7 +1121,7 @@ class Snippet {
                     let i = 0;
                     while (i < fields.length && (seq == null || (fields[i].seq != null && fields[i].seq < seq)))
                         i++;
-                    fields.splice(i, 0, { seq, name: name || null });
+                    fields.splice(i, 0, { seq, name });
                     found = i;
                     for (let pos of positions)
                         if (pos.field >= found)

package/package.json

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