@codemirror/autocomplete 0.19.7 → 0.19.8

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 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

package/dist/index.cjs

@@ -309,6 +309,7 @@ const completionConfig = state.Facet.define({
             maxRenderedOptions: 100,
             defaultKeymap: true,
             optionClass: () => "",
+            aboveCursor: false,
             icons: true,
             addToOptions: []
         }, {
@@ -591,7 +592,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;
@@ -605,7 +606,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) {
@@ -633,7 +635,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);
@@ -969,16 +971,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
             },
         }

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: []
         }, {
@@ -587,7 +588,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;
@@ -601,7 +602,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) {
@@ -629,7 +631,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);
@@ -965,16 +967,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
             },
         }

package/package.json

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