Merge remote-tracking branch 'upstream/main' into main-overleaf

Author: aeaton-overleaf

CHANGELOG.md

@@ -1,3 +1,33 @@
+## 6.12.0 (2024-01-12)
+
+### Bug fixes
+
+Make sure snippet completions also set `userEvent` to `input.complete`.
+
+Fix a crash when the editor lost focus during an update and autocompletion was active.
+
+Fix a crash when using a snippet that has only one field, but multiple instances of that field.
+
+### New features
+
+The new `activateOnTypingDelay` option allows control over the debounce time before the completions are queried when the user types.
+
+## 6.11.1 (2023-11-27)
+
+### Bug fixes
+
+Fix a bug that caused typing over closed brackets after pressing enter to still not work in many situations.
+
+## 6.11.0 (2023-11-09)
+
+### Bug fixes
+
+Fix an issue that would prevent typing over closed brackets after starting a new line with enter.
+
+### New features
+
+Additional elements rendered in completion options with `addToOptions` are now given access to the editor view.
+
 ## 6.10.2 (2023-10-13)
 
 ### Bug fixes

package.json

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

src/closebrackets.ts

@@ -51,13 +51,11 @@ closedBracket.startSide = 1; closedBracket.endSide = -1
 const bracketState = StateField.define<RangeSet<typeof closedBracket>>({
   create() { return RangeSet.empty },
   update(value, tr) {
+    value = value.map(tr.changes)
     if (tr.selection) {
-      let lineStart = tr.state.doc.lineAt(tr.selection.main.head).from
-      let prevLineStart = tr.startState.doc.lineAt(tr.startState.selection.main.head).from
-      if (lineStart != tr.changes.mapPos(prevLineStart, -1))
-        value = RangeSet.empty
+      let line = tr.state.doc.lineAt(tr.selection.main.head)
+      value = value.update({filter: from => from >= line.from && from <= line.to})
     }
-    value = value.map(tr.changes)
     for (let effect of tr.effects) if (effect.is(closeBracketEffect))
       value = value.update({add: [closedBracket.range(effect.value, effect.value + 1)]})
     return value

src/config.ts

@@ -7,6 +7,12 @@ export interface CompletionConfig {
   /// When enabled (defaults to true), autocompletion will start
   /// whenever the user types something that can be completed.
   activateOnTyping?: boolean
+  /// The amount of time to wait for further typing before querying
+  /// completion sources via
+  /// [`activateOnTyping`](#autocomplete.autocompletion^config.activateOnTyping).
+  /// Defaults to 100, which should be fine unless your completion
+  /// source is very slow and/or doesn't use `validFor`.
+  activateOnTypingDelay?: number
   /// By default, when completion opens, the first option is selected
   /// and can be confirmed with
   /// [`acceptCompletion`](#autocomplete.acceptCompletion). When this
@@ -52,7 +58,7 @@ export interface CompletionConfig {
   /// other added widgets and the standard content. The default icons
   /// have position 20, the label position 50, and the detail position
   /// 80.
-  addToOptions?: {render: (completion: Completion, state: EditorState) => Node | null,
+  addToOptions?: {render: (completion: Completion, state: EditorState, view: EditorView) => Node | null,
                   position: number}[]
   /// By default, [info](#autocomplete.Completion.info) tooltips are
   /// placed to the side of the selected completion. This option can
@@ -82,6 +88,7 @@ export const completionConfig = Facet.define<CompletionConfig, Required<Completi
   combine(configs) {
     return combineConfig<Required<CompletionConfig>>(configs, {
       activateOnTyping: true,
+      activateOnTypingDelay: 100,
       selectOnOpen: true,
       override: null,
       closeOnBlur: true,

src/snippet.ts

@@ -197,13 +197,12 @@ export function snippet(template: string) {
         }
       }),
       scrollIntoView: true,
-      annotations: completion ? pickedCompletion.of(completion) : undefined,
+      annotations: completion ? [pickedCompletion.of(completion), Transaction.userEvent.of("input.complete")] : undefined,
       effects: [],
     }
 
     if (ranges.length) spec.selection = fieldSelection(ranges, 0)
-
-    if (ranges.length > 1) {
+    if (ranges.some(r => r.field > 0)) {
       let active = new ActiveSnippet(ranges, 0)
       spec.effects.push(setActive.of(active))
       if (editor.state.field(snippetState, false) === undefined) {

src/tooltip.ts

@@ -4,7 +4,8 @@ import {CompletionState} from "./state"
 import {completionConfig, CompletionConfig} from "./config"
 import {Option, Completion, CompletionInfo, closeCompletionEffect} from "./completion"
 
-type OptionContentSource = (completion: Completion, state: EditorState, match: readonly number[]) => Node | null
+type OptionContentSource =
+  (completion: Completion, state: EditorState, view: EditorView, match: readonly number[]) => Node | null
 
 function optionContent(config: Required<CompletionConfig>): OptionContentSource[] {
   let content = config.addToOptions.slice() as {render: OptionContentSource, position: number}[]
@@ -20,7 +21,7 @@ function optionContent(config: Required<CompletionConfig>): OptionContentSource[
     position: 20
   })
   content.push({
-    render(completion: Completion, _s: EditorState, match: readonly number[]) {
+    render(completion: Completion, _s: EditorState, _v: EditorView, match: readonly number[]) {
       let labelElt = document.createElement("span")
       labelElt.className = "cm-completionLabel"
       let label = completion.displayLabel || completion.label, off = 0
@@ -267,7 +268,7 @@ class CompletionTooltip {
       let cls = this.optionClass(completion)
       if (cls) li.className = cls
       for (let source of this.optionContent) {
-        let node = source(completion, this.view.state, match)
+        let node = source(completion, this.view.state, this.view, match)
         if (node) li.appendChild(node)
       }
     }

src/view.ts

@@ -72,6 +72,7 @@ export const completionPlugin = ViewPlugin.fromClass(class implements PluginValu
   debounceUpdate = -1
   running: RunningQuery[] = []
   debounceAccept = -1
+  pendingStart = false
   composing = CompositionState.None
 
   constructor(readonly view: EditorView) {
@@ -102,8 +103,10 @@ export const completionPlugin = ViewPlugin.fromClass(class implements PluginValu
     }
 
     if (this.debounceUpdate > -1) clearTimeout(this.debounceUpdate)
+    if (update.transactions.some(tr => tr.effects.some(e => e.is(startCompletionEffect)))) this.pendingStart = true
+    let delay = this.pendingStart ? 50 : update.state.facet(completionConfig).activateOnTypingDelay
     this.debounceUpdate = cState.active.some(a => a.state == State.Pending && !this.running.some(q => q.active.source == a.source))
-      ? setTimeout(() => this.startUpdate(), 50) : -1
+      ? setTimeout(() => this.startUpdate(), delay) : -1
 
     if (this.composing != CompositionState.None) for (let tr of update.transactions) {
       if (getUserEvent(tr) == "input")
@@ -115,6 +118,7 @@ export const completionPlugin = ViewPlugin.fromClass(class implements PluginValu
 
   startUpdate() {
     this.debounceUpdate = -1
+    this.pendingStart = false
     let {state} = this.view, cState = state.field(completionState)
     for (let active of cState.active) {
       if (active.state == State.Pending && !this.running.some(r => r.active.source == active.source))
@@ -196,7 +200,7 @@ export const completionPlugin = ViewPlugin.fromClass(class implements PluginValu
       if (state && state.tooltip && this.view.state.facet(completionConfig).closeOnBlur) {
         let dialog = state.open && getTooltip(this.view, state.open.tooltip)
         if (!dialog || !dialog.dom.contains(event.relatedTarget as HTMLElement))
-          this.view.dispatch({effects: closeCompletionEffect.of(null)})
+          setTimeout(() => this.view.dispatch({effects: closeCompletionEffect.of(null)}), 10)
       }
     },
     compositionstart() {

test/webtest-autocomplete.ts

@@ -37,7 +37,10 @@ class Runner {
       state: EditorState.create({
         doc: spec.doc,
         selection,
-        extensions: [autocompletion({override: spec.sources, interactionDelay: 0, updateSyncTime: 40}), EditorState.allowMultipleSelections.of(true)]
+        extensions: [
+          autocompletion({override: spec.sources, interactionDelay: 0, updateSyncTime: 40, activateOnTypingDelay: 10}),
+          EditorState.allowMultipleSelections.of(true)
+        ]
       }),
       parent: document.querySelector("#workspace")! as HTMLElement,
       dispatchTransactions: trs => {