@codemirror/autocomplete 6.0.4 → 6.1.0

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 6.1.0 (2022-07-19)
+
+### New features
+
+You can now provide a `compareCompletions` option to autocompletion to influence the way completions with the same match score are sorted.
+
+The `selectOnOpen` option to autocompletion can be used to require explicitly selecting a completion option before `acceptCompletion` does anything.
+
 ## 6.0.4 (2022-07-07)
 
 ### Bug fixes

package/dist/index.cjs

@@ -322,6 +322,7 @@ const completionConfig = state.Facet.define({
     combine(configs) {
         return state.combineConfig(configs, {
             activateOnTyping: true,
+            selectOnOpen: true,
             override: null,
             closeOnBlur: true,
             maxRenderedOptions: 100,
@@ -329,7 +330,8 @@ const completionConfig = state.Facet.define({
             optionClass: () => "",
             aboveCursor: false,
             icons: true,
-            addToOptions: []
+            addToOptions: [],
+            compareCompletions: (a, b) => a.label.localeCompare(b.label)
         }, {
             defaultKeymap: (a, b) => a && b,
             closeOnBlur: (a, b) => a && b,
@@ -392,6 +394,8 @@ function optionContent(config) {
 function rangeAroundSelected(total, selected, max) {
     if (total <= max)
         return { from: 0, to: total };
+    if (selected < 0)
+        selected = 0;
     if (selected <= (total >> 1)) {
         let off = Math.floor(selected / max);
         return { from: off * max, to: (off + 1) * max };
@@ -599,7 +603,8 @@ function sortOptions(active, state) {
             }
         }
     let result = [], prev = null;
-    for (let opt of options.sort(cmpOption)) {
+    let compare = state.facet(completionConfig).compareCompletions;
+    for (let opt of options.sort((a, b) => (b.match[0] - a.match[0]) || compare(a.completion, b.completion))) {
         if (!prev || prev.label != opt.completion.label || prev.detail != opt.completion.detail ||
             (prev.type != null && opt.completion.type != null && prev.type != opt.completion.type) ||
             prev.apply != opt.completion.apply)
@@ -626,8 +631,8 @@ class CompletionDialog {
         let options = sortOptions(active, state);
         if (!options.length)
             return null;
-        let selected = 0;
-        if (prev && prev.selected) {
+        let selected = state.facet(completionConfig).selectOnOpen ? 0 : -1;
+        if (prev && prev.selected != selected && prev.selected != -1) {
             let selectedValue = prev.options[prev.selected].completion;
             for (let i = 0; i < options.length; i++)
                 if (options[i].completion == selectedValue) {
@@ -697,20 +702,16 @@ const baseAttrs = {
     "aria-autocomplete": "list"
 };
 function makeAttrs(id, selected) {
-    return {
+    let result = {
         "aria-autocomplete": "list",
         "aria-haspopup": "listbox",
-        "aria-activedescendant": id + "-" + selected,
         "aria-controls": id
     };
+    if (selected > -1)
+        result["aria-activedescendant"] = id + "-" + selected;
+    return result;
 }
 const none = [];
-function cmpOption(a, b) {
-    let dScore = b.match[0] - a.match[0];
-    if (dScore)
-        return dScore;
-    return a.completion.label.localeCompare(b.completion.label);
-}
 function getUserEvent(tr) {
     return tr.isUserEvent("input.type") ? "input" : tr.isUserEvent("delete.backward") ? "delete" : null;
 }
@@ -818,7 +819,8 @@ function moveCompletionSelection(forward, by = "option") {
         if (by == "page" && (tooltip = view.getTooltip(view$1, cState.open.tooltip)))
             step = Math.max(2, Math.floor(tooltip.dom.offsetHeight /
                 tooltip.dom.querySelector("li").offsetHeight) - 1);
-        let selected = cState.open.selected + step * (forward ? 1 : -1), { length } = cState.open.options;
+        let { length } = cState.open.options;
+        let selected = cState.open.selected > -1 ? cState.open.selected + step * (forward ? 1 : -1) : forward ? 0 : length - 1;
         if (selected < 0)
             selected = by == "page" ? 0 : length - 1;
         else if (selected >= length)
@@ -832,7 +834,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)
+    if (view.state.readOnly || !cState || !cState.open || Date.now() - cState.open.timestamp < CompletionInteractMargin ||
+        cState.open.selected < 0)
         return false;
     applyCompletion(view, cState.open.options[cState.open.selected]);
     return true;
@@ -1745,7 +1748,7 @@ Return the currently selected completion, if any.
 function selectedCompletion(state) {
     var _a;
     let open = (_a = state.field(completionState, false)) === null || _a === void 0 ? void 0 : _a.open;
-    return open ? open.options[open.selected].completion : null;
+    return open && open.selected >= 0 ? open.options[open.selected].completion : null;
 }
 /**
 Returns the currently selected position in the active completion
@@ -1754,7 +1757,7 @@ list, or null if no completions are active.
 function selectedCompletionIndex(state) {
     var _a;
     let open = (_a = state.field(completionState, false)) === null || _a === void 0 ? void 0 : _a.open;
-    return open ? open.selected : null;
+    return open && open.selected >= 0 ? open.selected : null;
 }
 /**
 Create an effect that can be attached to a transaction to change

package/dist/index.d.ts

@@ -10,6 +10,15 @@ interface CompletionConfig {
     */
     activateOnTyping?: boolean;
     /**
+    By default, when completion opens, the first option is selected
+    and can be confirmed with
+    [`acceptCompletion`](https://codemirror.net/6/docs/ref/#autocomplete.acceptCompletion). When this
+    is set to false, the completion widget starts with no completion
+    selected, and the user has to explicitly move to a completion
+    before you can confirm one.
+    */
+    selectOnOpen?: boolean;
+    /**
     Override the completion sources used. By default, they will be
     taken from the `"autocomplete"` [language
     data](https://codemirror.net/6/docs/ref/#state.EditorState.languageDataAt) (which should hold
@@ -63,6 +72,12 @@ interface CompletionConfig {
         render: (completion: Completion, state: EditorState) => Node | null;
         position: number;
     }[];
+    /**
+    The comparison function to use when sorting completions with the same
+    match score. Defaults to using
+    [`localeCompare`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare).
+    */
+    compareCompletions?: (a: Completion, b: Completion) => number;
 }
 
 /**

package/dist/index.js

@@ -318,6 +318,7 @@ const completionConfig = /*@__PURE__*/Facet.define({
     combine(configs) {
         return combineConfig(configs, {
             activateOnTyping: true,
+            selectOnOpen: true,
             override: null,
             closeOnBlur: true,
             maxRenderedOptions: 100,
@@ -325,7 +326,8 @@ const completionConfig = /*@__PURE__*/Facet.define({
             optionClass: () => "",
             aboveCursor: false,
             icons: true,
-            addToOptions: []
+            addToOptions: [],
+            compareCompletions: (a, b) => a.label.localeCompare(b.label)
         }, {
             defaultKeymap: (a, b) => a && b,
             closeOnBlur: (a, b) => a && b,
@@ -388,6 +390,8 @@ function optionContent(config) {
 function rangeAroundSelected(total, selected, max) {
     if (total <= max)
         return { from: 0, to: total };
+    if (selected < 0)
+        selected = 0;
     if (selected <= (total >> 1)) {
         let off = Math.floor(selected / max);
         return { from: off * max, to: (off + 1) * max };
@@ -595,7 +599,8 @@ function sortOptions(active, state) {
             }
         }
     let result = [], prev = null;
-    for (let opt of options.sort(cmpOption)) {
+    let compare = state.facet(completionConfig).compareCompletions;
+    for (let opt of options.sort((a, b) => (b.match[0] - a.match[0]) || compare(a.completion, b.completion))) {
         if (!prev || prev.label != opt.completion.label || prev.detail != opt.completion.detail ||
             (prev.type != null && opt.completion.type != null && prev.type != opt.completion.type) ||
             prev.apply != opt.completion.apply)
@@ -622,8 +627,8 @@ class CompletionDialog {
         let options = sortOptions(active, state);
         if (!options.length)
             return null;
-        let selected = 0;
-        if (prev && prev.selected) {
+        let selected = state.facet(completionConfig).selectOnOpen ? 0 : -1;
+        if (prev && prev.selected != selected && prev.selected != -1) {
             let selectedValue = prev.options[prev.selected].completion;
             for (let i = 0; i < options.length; i++)
                 if (options[i].completion == selectedValue) {
@@ -693,20 +698,16 @@ const baseAttrs = {
     "aria-autocomplete": "list"
 };
 function makeAttrs(id, selected) {
-    return {
+    let result = {
         "aria-autocomplete": "list",
         "aria-haspopup": "listbox",
-        "aria-activedescendant": id + "-" + selected,
         "aria-controls": id
     };
+    if (selected > -1)
+        result["aria-activedescendant"] = id + "-" + selected;
+    return result;
 }
 const none = [];
-function cmpOption(a, b) {
-    let dScore = b.match[0] - a.match[0];
-    if (dScore)
-        return dScore;
-    return a.completion.label.localeCompare(b.completion.label);
-}
 function getUserEvent(tr) {
     return tr.isUserEvent("input.type") ? "input" : tr.isUserEvent("delete.backward") ? "delete" : null;
 }
@@ -814,7 +815,8 @@ function moveCompletionSelection(forward, by = "option") {
         if (by == "page" && (tooltip = getTooltip(view, cState.open.tooltip)))
             step = Math.max(2, Math.floor(tooltip.dom.offsetHeight /
                 tooltip.dom.querySelector("li").offsetHeight) - 1);
-        let selected = cState.open.selected + step * (forward ? 1 : -1), { length } = cState.open.options;
+        let { length } = cState.open.options;
+        let selected = cState.open.selected > -1 ? cState.open.selected + step * (forward ? 1 : -1) : forward ? 0 : length - 1;
         if (selected < 0)
             selected = by == "page" ? 0 : length - 1;
         else if (selected >= length)
@@ -828,7 +830,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)
+    if (view.state.readOnly || !cState || !cState.open || Date.now() - cState.open.timestamp < CompletionInteractMargin ||
+        cState.open.selected < 0)
         return false;
     applyCompletion(view, cState.open.options[cState.open.selected]);
     return true;
@@ -1741,7 +1744,7 @@ Return the currently selected completion, if any.
 function selectedCompletion(state) {
     var _a;
     let open = (_a = state.field(completionState, false)) === null || _a === void 0 ? void 0 : _a.open;
-    return open ? open.options[open.selected].completion : null;
+    return open && open.selected >= 0 ? open.options[open.selected].completion : null;
 }
 /**
 Returns the currently selected position in the active completion
@@ -1750,7 +1753,7 @@ list, or null if no completions are active.
 function selectedCompletionIndex(state) {
     var _a;
     let open = (_a = state.field(completionState, false)) === null || _a === void 0 ? void 0 : _a.open;
-    return open ? open.selected : null;
+    return open && open.selected >= 0 ? open.selected : null;
 }
 /**
 Create an effect that can be attached to a transaction to change

package/package.json

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