Respond to clicks on the top/bottom of incomplete option lists by moving selection

FIX: Clicking the horizontal dots at the top/bottom of a list of completion options
now moves the selection there, so that more completions become visible.

See https://discuss.codemirror.net/t/autocomplete-list-show-more-not-clickable/9627

Author: marijnh

src/index.ts

@@ -1,7 +1,8 @@
 import {Prec, Extension, EditorState, StateEffect} from "@codemirror/state"
 import {keymap, KeyBinding} from "@codemirror/view"
 import {Completion, Option} from "./completion"
-import {completionState, State, setSelectedEffect} from "./state"
+import {completionState, State} from "./state"
+import {setSelectedEffect} from "./tooltip"
 import {CompletionConfig, completionConfig} from "./config"
 import {completionPlugin, moveCompletionSelection, acceptCompletion,
         startCompletion, closeCompletion, commitCharacters} from "./view"

src/state.ts

@@ -5,7 +5,7 @@ import {Option, CompletionSource, CompletionResult, cur, asSource,
         startCompletionEffect, closeCompletionEffect,
         insertCompletionText, pickedCompletion} from "./completion"
 import {FuzzyMatcher, StrictMatcher} from "./filter"
-import {completionTooltip} from "./tooltip"
+import {completionTooltip, setSelectedEffect} from "./tooltip"
 import {CompletionConfig, completionConfig} from "./config"
 
 // Used to pick a preferred option when two options with the same
@@ -316,7 +316,6 @@ function checkValid(validFor: undefined | RegExp | ((text: string, from: number,
 export const setActiveEffect = StateEffect.define<readonly ActiveSource[]>({
   map(sources, mapping) { return sources.map(s => s.map(mapping)) }
 })
-export const setSelectedEffect = StateEffect.define<number>()
 
 export const completionState = StateField.define<CompletionState>({
   create() { return CompletionState.start() },

src/tooltip.ts

@@ -1,9 +1,11 @@
 import {EditorView, ViewUpdate, logException, TooltipView, Rect} from "@codemirror/view"
-import {StateField, EditorState} from "@codemirror/state"
+import {StateField, StateEffect, EditorState} from "@codemirror/state"
 import {CompletionState} from "./state"
 import {completionConfig, CompletionConfig} from "./config"
 import {Option, Completion, CompletionInfo, closeCompletionEffect} from "./completion"
 
+export const setSelectedEffect = StateEffect.define<number>()
+
 type OptionContentSource =
   (completion: Completion, state: EditorState, view: EditorView, match: readonly number[]) => Node | null
 
@@ -102,6 +104,16 @@ class CompletionTooltip {
           return
         }
       }
+      if (e.target == this.list) {
+        let move = this.list.classList.contains("cm-completionListIncompleteTop") &&
+          e.clientY < (this.list.firstChild as HTMLElement).getBoundingClientRect().top ? this.range.from - 1 :
+          this.list.classList.contains("cm-completionListIncompleteBottom") &&
+          e.clientY > (this.list.lastChild as HTMLElement).getBoundingClientRect().bottom ? this.range.to : null
+        if (move != null) {
+          view.dispatch({effects: setSelectedEffect.of(move)})
+          e.preventDefault()
+        }
+      }
     })
     this.dom.addEventListener("focusout", (e: FocusEvent) => {
       let state = view.state.field(this.stateField, false)
@@ -129,7 +141,7 @@ class CompletionTooltip {
     if (cState != prevState) {
       let {options, selected, disabled} = cState.open!
       if (!prevState.open || prevState.open.options != options) {
-         this.range = rangeAroundSelected(options.length, selected, update.state.facet(completionConfig).maxRenderedOptions)
+        this.range = rangeAroundSelected(options.length, selected, update.state.facet(completionConfig).maxRenderedOptions)
         this.showOptions(options, cState.id)
       }
       this.updateSel()

src/view.ts

@@ -1,8 +1,9 @@
 import {EditorView, Command, ViewPlugin, PluginValue, ViewUpdate, logException,
         getTooltip, TooltipView} from "@codemirror/view"
 import {Transaction, Prec} from "@codemirror/state"
-import {completionState, setSelectedEffect, setActiveEffect, State,
+import {completionState, setActiveEffect, State,
         ActiveSource, ActiveResult, getUpdateType, UpdateType, applyCompletion} from "./state"
+import {setSelectedEffect} from "./tooltip"
 import {completionConfig} from "./config"
 import {cur, CompletionResult, CompletionContext, startCompletionEffect, closeCompletionEffect} from "./completion"