Add support for Completion.displayLabel

FEATURE: Completions may now provide a `displayLabel` property that overrides
the way they are displayed in the completion list.

src/completion.ts

@@ -9,6 +9,11 @@ export interface Completion {
   /// is matched agains to determine whether a completion matches (and
   /// how well it matches).
   label: string
+  /// An optional override for the completion's visible label. When
+  /// using this, matched characters will only be highlighted if you
+  /// provide a [`getMatch`](#autocomplete.CompletionResult.getMatch)
+  /// function.
+  displayLabel?: string
   /// An optional short piece of information to show (with a different
   /// style) after the label.
   detail?: string
@@ -209,11 +214,14 @@ export interface CompletionResult {
   /// is `false`, because it only works when filtering.
   filter?: boolean
   /// When [`filter`](#autocomplete.CompletionResult.filter) is set to
-  /// `false`, this may be provided to compute the ranges on the label
-  /// that match the input. Should return an array of numbers where
-  /// each pair of adjacent numbers provide the start and end of a
-  /// range.
-  getMatch?: (completion: Completion) => readonly number[]
+  /// `false` or a completion has a
+  /// [`displayLabel`](#autocomplete.Completion.displayLabel), this
+  /// may be provided to compute the ranges on the label that match
+  /// the input. Should return an array of numbers where each pair of
+  /// adjacent numbers provide the start and end of a range. The
+  /// second argument, the match found by the library, is only passed
+  /// when `filter` isn't `false`.
+  getMatch?: (completion: Completion, matched?: readonly number[]) => readonly number[]
   /// Synchronously update the completion result after typing or
   /// deletion. If given, this should not do any expensive work, since
   /// it will be called during editor state updates. The function

src/state.ts

@@ -29,15 +29,16 @@ function sortOptions(active: readonly ActiveSource[], state: EditorState) {
   }
 
   for (let a of active) if (a.hasResult()) {
+    let getMatch = a.result.getMatch
     if (a.result.filter === false) {
-      let getMatch = a.result.getMatch
       for (let option of a.result.options) {
         addOption(new Option(option, a.source, getMatch ? getMatch(option) : [], 1e9 - options.length))
       }
     } else {
       let matcher = new FuzzyMatcher(state.sliceDoc(a.from, a.to))
       for (let option of a.result.options) if (matcher.match(option.label)) {
-        addOption(new Option(option, a.source, matcher.matched, matcher.score + (option.boost || 0)))
+        let matched = !option.displayLabel ? matcher.matched : getMatch ? getMatch(option, matcher.matched) : []
+        addOption(new Option(option, a.source, matched, matcher.score + (option.boost || 0)))
       }
     }
   }

src/tooltip.ts

@@ -23,7 +23,7 @@ function optionContent(config: Required<CompletionConfig>): OptionContentSource[
     render(completion: Completion, _s: EditorState, match: readonly number[]) {
       let labelElt = document.createElement("span")
       labelElt.className = "cm-completionLabel"
-      let {label} = completion, off = 0
+      let label = completion.displayLabel || completion.label, off = 0
       for (let j = 0; j < match.length;) {
         let from = match[j++], to = match[j++]
         if (from > off) labelElt.appendChild(document.createTextNode(label.slice(off, from)))