fix: get actual range when selecting item in suggests (command menu, emoji suggest) (#673)

Author: d3m1d0v

src/extensions/behavior/Autocomplete/index.ts

@@ -1,4 +1,4 @@
-import autocomplete from 'prosemirror-autocomplete';
+import {autocomplete} from 'prosemirror-autocomplete';
 import {Plugin} from 'prosemirror-state';
 
 import type {ExtensionAuto, ExtensionDeps} from '../../../core';
@@ -8,6 +8,7 @@ import {MainHandler} from './handler';
 import type {AutocompleteItem, AutocompleteTrigger} from './types';
 
 export {openAutocomplete, closeAutocomplete} from 'prosemirror-autocomplete';
+export {getAutocompleteState} from './utils';
 export const AutocompleteDecoClassName = 'autocomplete';
 
 export type AutocompleteItemFn = (deps: ExtensionDeps) => AutocompleteItem;

src/extensions/behavior/Autocomplete/types.ts

@@ -3,6 +3,7 @@ import type {Options, Trigger} from 'prosemirror-autocomplete';
 export type {
     FromTo,
     AutocompleteAction,
+    AutocompleteState,
     Trigger as AutocompleteTrigger,
 } from 'prosemirror-autocomplete';
 

src/extensions/behavior/Autocomplete/utils.ts

@@ -0,0 +1,9 @@
+import {pluginKey} from 'prosemirror-autocomplete';
+
+import type {EditorState} from '#pm/state';
+
+import type {AutocompleteState} from './types';
+
+export function getAutocompleteState(state: EditorState): AutocompleteState | null {
+    return pluginKey.getState(state) || null;
+}

src/extensions/behavior/CommandMenu/handler.ts

@@ -9,8 +9,8 @@ import {
     type AutocompleteAction,
     AutocompleteActionKind,
     type AutocompleteHandler,
-    type FromTo,
     closeAutocomplete,
+    getAutocompleteState,
 } from '../Autocomplete';
 import {type RendererItem, getReactRendererFromState} from '../ReactRenderer';
 
@@ -40,7 +40,6 @@ export class CommandHandler implements AutocompleteHandler {
 
     #view?: EditorView;
     #anchor: Element | null = null;
-    #range?: FromTo;
     #filterText?: string;
     #popupCloser?: AutocompletePopupCloser;
 
@@ -155,13 +154,16 @@ export class CommandHandler implements AutocompleteHandler {
     }
 
     private select() {
-        if (!this.#view || !this.#range) return;
+        if (!this.#view) return;
 
         const action = this.#filteredActionsCarousel?.currentItem;
         if (!action) return;
 
+        const autocompleteState = getAutocompleteState(this.#view.state);
+        if (!autocompleteState || !autocompleteState.active) return;
+
         const view = this.#view;
-        const range = this.#range;
+        const {range} = autocompleteState;
 
         view.dispatch(view.state.tr.deleteRange(range.from, range.to).scrollIntoView());
         action.exec(this.#actionStorage);
@@ -223,14 +225,12 @@ export class CommandHandler implements AutocompleteHandler {
         this.#view?.focus();
     };
 
-    private updateState({view, range}: AutocompleteAction) {
+    private updateState({view}: AutocompleteAction) {
         this.#view = view;
-        this.#range = range;
     }
 
     private clear() {
         this.#view = undefined;
-        this.#range = undefined;
         this.#anchor = null;
         this.#filterText = undefined;
         this.#filteredActionsCarousel = undefined;

src/extensions/behavior/index.ts

@@ -13,6 +13,7 @@ import {Selection} from './Selection';
 import {SelectionContext, type SelectionContextOptions} from './SelectionContext';
 import {WidgetDecoration} from './WidgetDecoration';
 
+export * from './Autocomplete';
 export * from './ClicksOnEdges';
 export * from './Clipboard';
 export * from './CommandMenu';

src/extensions/yfm/Emoji/EmojiSuggest/EmojiHandler.ts

@@ -8,8 +8,8 @@ import {
     type AutocompleteAction,
     AutocompleteActionKind,
     type AutocompleteHandler,
-    type FromTo,
     closeAutocomplete,
+    getAutocompleteState,
 } from '../../../behavior/Autocomplete';
 import {EmojiConsts} from '../EmojiSpecs';
 
@@ -30,7 +30,6 @@ export class EmojiHandler implements AutocompleteHandler {
 
     private _view?: EditorView;
     private _anchor: Element | null = null;
-    private _range?: FromTo;
     private _popupCloser?: AutocompletePopupCloser;
 
     private _suggestProps?: EmojiSuggestComponentProps;
@@ -133,12 +132,16 @@ export class EmojiHandler implements AutocompleteHandler {
     }
 
     private select() {
-        const {_view: view, _range: range} = this;
-        if (!view || !range) return;
+        const {_view: view} = this;
+        if (!view) return;
 
         const emojiDef = this._emojiCarousel?.currentItem;
         if (!emojiDef) return;
 
+        const autocompleteState = getAutocompleteState(view.state);
+        if (!autocompleteState || !autocompleteState.active) return;
+
+        const {range} = autocompleteState;
         const {tr, schema} = view.state;
         view.dispatch(
             tr.replaceWith(range.from, range.to, createEmoji(schema, emojiDef)).scrollIntoView(),
@@ -191,14 +194,12 @@ export class EmojiHandler implements AutocompleteHandler {
         this._view?.focus();
     };
 
-    private updateState({view, range}: AutocompleteAction) {
+    private updateState({view}: AutocompleteAction) {
         this._view = view;
-        this._range = range;
     }
 
     private clear() {
         this._view = undefined;
-        this._range = undefined;
         this._anchor = null;
         this._emojiCarousel = undefined;
         this._popupCloser?.cancelTimer();