Merge branch 'codemirror:main' into main-overleaf

Author: aeaton-overleaf

CHANGELOG.md

@@ -1,3 +1,47 @@
+## 6.10.2 (2023-10-13)
+
+### Bug fixes
+
+Fix a bug that caused `updateSyncTime` to always delay the initial population of the tooltip.
+
+## 6.10.1 (2023-10-11)
+
+### Bug fixes
+
+Fix a bug where picking a selection with the mouse could use the wrong completion if the completion list was updated after being opened.
+
+## 6.10.0 (2023-10-11)
+
+### New features
+
+The new autocompletion configuration option `updateSyncTime` allows control over how long fast sources are held back waiting for slower completion sources.
+
+## 6.9.2 (2023-10-06)
+
+### Bug fixes
+
+Fix a bug in `completeAnyWord` that could cause it to generate invalid regular expressions and crash.
+
+## 6.9.1 (2023-09-14)
+
+### Bug fixes
+
+Make sure the cursor is scrolled into view after inserting completion text.
+
+Make sure scrolling completions into view doesn't get confused when the tooltip is scaled.
+
+## 6.9.0 (2023-07-18)
+
+### New features
+
+Completions may now provide a `displayLabel` property that overrides the way they are displayed in the completion list.
+
+## 6.8.1 (2023-06-23)
+
+### Bug fixes
+
+`acceptCompletion` now returns false (allowing other handlers to take effect) when the completion popup is open but disabled.
+
 ## 6.8.0 (2023-06-12)
 
 ### New features

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codemirror/autocomplete",
-  "version": "6.8.0",
+  "version": "6.10.2",
   "description": "Autocompletion for the CodeMirror code editor",
   "scripts": {
     "test": "cm-runtests",
@@ -28,7 +28,7 @@
   "dependencies": {
     "@codemirror/language": "^6.0.0",
     "@codemirror/state": "^6.0.0",
-    "@codemirror/view": "^6.6.0",
+    "@codemirror/view": "^6.17.0",
     "@lezer/common": "^1.0.0"
   },
   "peerDependencies": {

src/completion.ts

@@ -6,9 +6,14 @@ import {SyntaxNode} from "@lezer/common"
 /// Objects type used to represent individual completions.
 export interface Completion {
   /// The label to show in the completion picker. This is what input
-  /// is matched agains to determine whether a completion matches (and
+  /// is matched against 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
@@ -211,11 +216,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
@@ -277,6 +285,7 @@ export function insertCompletionText(state: EditorState, text: string | Text, fr
         range: EditorSelection.cursor(change.from + change.insert.length)
       }
     }),
+    scrollIntoView: true,
     userEvent: "input.complete"
   }
 }

src/config.ts

@@ -54,13 +54,13 @@ export interface CompletionConfig {
   /// 80.
   addToOptions?: {render: (completion: Completion, state: EditorState) => Node | null,
                   position: number}[]
-  /// By default, [info](#autocomplet.Completion.info) tooltips are
-  /// placed to the side of the selected. This option can be used to
-  /// override that. It will be given rectangles for the list of
-  /// completions, the selected option, the info element, and the
-  /// availble [tooltip space](#view.tooltips^config.tooltipSpace),
-  /// and should return style and/or class strings for the info
-  /// element.
+  /// By default, [info](#autocomplete.Completion.info) tooltips are
+  /// placed to the side of the selected completion. This option can
+  /// be used to override that. It will be given rectangles for the
+  /// list of completions, the selected option, the info element, and
+  /// the availble [tooltip
+  /// space](#view.tooltips^config.tooltipSpace), and should return
+  /// style and/or class strings for the info element.
   positionInfo?: (view: EditorView, list: Rect, option: Rect, info: Rect, space: Rect) => {style?: string, class?: string}
   /// The comparison function to use when sorting completions with the same
   /// match score. Defaults to using
@@ -71,6 +71,11 @@ export interface CompletionConfig {
   /// presses made before the user is aware of the tooltip don't go to
   /// the tooltip. This option can be used to configure that delay.
   interactionDelay?: number
+  /// When there are multiple asynchronous completion sources, this
+  /// controls how long the extension waits for a slow source before
+  /// displaying results from faster sources. Defaults to 100
+  /// milliseconds.
+  updateSyncTime?: number
 }
 
 export const completionConfig = Facet.define<CompletionConfig, Required<CompletionConfig>>({
@@ -87,9 +92,10 @@ export const completionConfig = Facet.define<CompletionConfig, Required<Completi
       aboveCursor: false,
       icons: true,
       addToOptions: [],
-      positionInfo: defaultPositionInfo,
+      positionInfo: defaultPositionInfo as any,
       compareCompletions: (a, b) => a.label.localeCompare(b.label),
-      interactionDelay: 75
+      interactionDelay: 75,
+      updateSyncTime: 100
     }, {
       defaultKeymap: (a, b) => a && b,
       closeOnBlur: (a, b) => a && b,
@@ -105,7 +111,7 @@ function joinClass(a: string, b: string) {
   return a ? b ? a + " " + b : a : b
 }
 
-function defaultPositionInfo(view: EditorView, list: Rect, option: Rect, info: Rect, space: Rect) {
+function defaultPositionInfo(view: EditorView, list: Rect, option: Rect, info: Rect, space: Rect, tooltip: HTMLElement) {
   let rtl = view.textDirection == Direction.RTL, left = rtl, narrow = false
   let side = "top", offset, maxWidth
   let spaceLeft = list.left - space.left, spaceRight = space.right - list.right
@@ -126,8 +132,10 @@ function defaultPositionInfo(view: EditorView, list: Rect, option: Rect, info: R
       offset = list.bottom - option.top
     }
   }
+  let scaleY = (list.bottom - list.top) / tooltip.offsetHeight
+  let scaleX = (list.right - list.left) / tooltip.offsetWidth
   return {
-    style: `${side}: ${offset}px; max-width: ${maxWidth}px`,
+    style: `${side}: ${offset / scaleY}px; max-width: ${maxWidth / scaleX}px`,
     class: "cm-completionInfo-" + (narrow ? (rtl ? "left-narrow" : "right-narrow") : left ? "left" : "right")
   }
 }

src/filter.ts

@@ -26,6 +26,9 @@ export class FuzzyMatcher {
   precise: number[] = []
   byWord: number[] = []
 
+  score = 0
+  matched: readonly number[] = []
+
   constructor(readonly pattern: string) {
     for (let p = 0; p < pattern.length;) {
       let char = codePointAt(pattern, p), size = codePointSize(char)
@@ -37,16 +40,22 @@ export class FuzzyMatcher {
     this.astral = pattern.length != this.chars.length
   }
 
+  ret(score: number, matched: readonly number[]) {
+    this.score = score
+    this.matched = matched
+    return true
+  }
+
   // Matches a given word (completion) against the pattern (input).
-  // Will return null for no match, and otherwise an array that starts
-  // with the match score, followed by any number of `from, to` pairs
-  // indicating the matched parts of `word`.
+  // Will return a boolean indicating whether there was a match and,
+  // on success, set `this.score` to the score, `this.matched` to an
+  // array of `from, to` pairs indicating the matched parts of `word`.
   //
   // The score is a number that is more negative the worse the match
   // is. See `Penalty` above.
-  match(word: string): number[] | null {
-    if (this.pattern.length == 0) return [Penalty.NotFull]
-    if (word.length < this.pattern.length) return null
+  match(word: string): boolean {
+    if (this.pattern.length == 0) return this.ret(Penalty.NotFull, [])
+    if (word.length < this.pattern.length) return false
     let {chars, folded, any, precise, byWord} = this
     // For single-character queries, only match when they occur right
     // at the start
@@ -55,11 +64,11 @@ export class FuzzyMatcher {
       let score = firstSize == word.length ? 0 : Penalty.NotFull
       if (first == chars[0]) {}
       else if (first == folded[0]) score += Penalty.CaseFold
-      else return null
-      return [score, 0, firstSize]
+      else return false
+      return this.ret(score, [0, firstSize])
     }
     let direct = word.indexOf(this.pattern)
-    if (direct == 0) return [word.length == this.pattern.length ? 0 : Penalty.NotFull, 0, this.pattern.length]
+    if (direct == 0) return this.ret(word.length == this.pattern.length ? 0 : Penalty.NotFull, [0, this.pattern.length])
 
     let len = chars.length, anyTo = 0
     if (direct < 0) {
@@ -69,7 +78,7 @@ export class FuzzyMatcher {
         i += codePointSize(next)
       }
       // No match, exit immediately
-      if (anyTo < len) return null
+      if (anyTo < len) return false
     }
 
     // This tracks the extent of the precise (non-folded, not
@@ -112,24 +121,25 @@ export class FuzzyMatcher {
     if (byWordTo == len && byWord[0] == 0 && wordAdjacent)
       return this.result(Penalty.ByWord + (byWordFolded ? Penalty.CaseFold : 0), byWord, word)
     if (adjacentTo == len && adjacentStart == 0)
-      return [Penalty.CaseFold - word.length + (adjacentEnd == word.length ? 0 : Penalty.NotFull), 0, adjacentEnd]
+      return this.ret(Penalty.CaseFold - word.length + (adjacentEnd == word.length ? 0 : Penalty.NotFull), [0, adjacentEnd])
     if (direct > -1)
-      return [Penalty.NotStart - word.length, direct, direct + this.pattern.length]
+      return this.ret(Penalty.NotStart - word.length, [direct, direct + this.pattern.length])
     if (adjacentTo == len)
-      return [Penalty.CaseFold + Penalty.NotStart - word.length, adjacentStart, adjacentEnd]
+      return this.ret(Penalty.CaseFold + Penalty.NotStart - word.length, [adjacentStart, adjacentEnd])
     if (byWordTo == len)
       return this.result(Penalty.ByWord + (byWordFolded ? Penalty.CaseFold : 0) + Penalty.NotStart +
         (wordAdjacent ? 0 : Penalty.Gap), byWord, word)
-    return chars.length == 2 ? null : this.result((any[0] ? Penalty.NotStart : 0) + Penalty.CaseFold + Penalty.Gap, any, word)
+    return chars.length == 2 ? false
+      : this.result((any[0] ? Penalty.NotStart : 0) + Penalty.CaseFold + Penalty.Gap, any, word)
   }
 
   result(score: number, positions: number[], word: string) {
-    let result = [score - word.length], i = 1
+    let result: number[] = [], i = 0
     for (let pos of positions) {
       let to = pos + (this.astral ? codePointSize(codePointAt(word, pos)) : 1)
-      if (i > 1 && result[i - 1] == pos) result[i - 1] = to
+      if (i && result[i - 1] == pos) result[i - 1] = to
       else { result[i++] = pos; result[i++] = to }
     }
-    return result
+    return this.ret(score - word.length, result)
   }
 }

src/snippet.ts

@@ -221,7 +221,8 @@ function moveField(dir: 1 | -1): StateCommand {
     let next = active.active + dir, last = dir > 0 && !active.ranges.some(r => r.field == next + dir)
     dispatch(state.update({
       selection: fieldSelection(active.ranges, next),
-      effects: setActive.of(last ? null : new ActiveSnippet(active.ranges, next))
+      effects: setActive.of(last ? null : new ActiveSnippet(active.ranges, next)),
+      scrollIntoView: true
     }))
     return true
   }
@@ -286,7 +287,9 @@ const snippetPointerHandler = EditorView.domEventHandlers({
     if (!match || match.field == active.active) return false
     view.dispatch({
       selection: fieldSelection(active.ranges, match.field),
-      effects: setActive.of(active.ranges.some(r => r.field > match!.field) ? new ActiveSnippet(active.ranges, match.field) : null)
+      effects: setActive.of(active.ranges.some(r => r.field > match!.field)
+        ? new ActiveSnippet(active.ranges, match.field) : null),
+      scrollIntoView: true
     })
     return true
   }

src/state.ts

@@ -29,17 +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) {
-        let match = [1e9 - options.length]
-        if (getMatch) for (let n of getMatch(option)) match.push(n)
-        addOption(new Option(option, a.source, match, match[0]))
+        addOption(new Option(option, a.source, getMatch ? getMatch(option) : [], 1e9 - options.length))
       }
     } else {
-      let matcher = new FuzzyMatcher(state.sliceDoc(a.from, a.to)), match
-      for (let option of a.result.options) if (match = matcher.match(option.label)) {
-        addOption(new Option(option, a.source, match, match[0] + (option.boost || 0)))
+      let matcher = new FuzzyMatcher(state.sliceDoc(a.from, a.to))
+      for (let option of a.result.options) if (matcher.match(option.label)) {
+        let matched = !option.displayLabel ? matcher.matched : getMatch ? getMatch(option, matcher.matched) : []
+        addOption(new Option(option, a.source, matched, matcher.score + (option.boost || 0)))
       }
     }
   }
@@ -107,7 +106,7 @@ 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, applyCompletion),
+      create: createTooltip,
       above: conf.aboveCursor,
     }, prev ? prev.timestamp : Date.now(), selected, false)
   }
@@ -307,3 +306,5 @@ export function applyCompletion(view: EditorView, option: Option) {
     apply(view, option.completion, result.from, result.to)
   return true
 }
+
+const createTooltip = completionTooltip(completionState, applyCompletion)