Fix an issue when call onKeyUp handler in PickerPlugin (#297)

* Check isSuggesting for function key in PickerPlugin

* 7.3.2

* Fix emoji reappear issue when space after backspace

package.json

@@ -1,6 +1,6 @@
 {
     "name": "roosterjs",
-    "version": "7.3.1",
+    "version": "7.3.2",
     "description": "Framework-independent javascript editor",
     "repository": {
         "type": "git",

packages/roosterjs-editor-core/lib/coreAPI/attachDomEvent.ts

@@ -1,5 +1,5 @@
 import EditorCore, { AttachDomEvent } from '../interfaces/EditorCore';
-import isModifierKey from '../eventApi/isModifierKey';
+import isCharacterValue from '../eventApi/isCharacterValue';
 import { PluginDomEvent, PluginEventType } from 'roosterjs-editor-types';
 
 const attachDomEvent: AttachDomEvent = (
@@ -14,10 +14,7 @@ const attachDomEvent: AttachDomEvent = (
         // event.key is longer than 1 for num pad input. But here we just want to improve performance as much as possible.
         // So if we missed some case here it is still acceptable.
         if (
-            (isKeyboardEvent(event) &&
-                !isModifierKey(event) &&
-                event.key &&
-                event.key.length == 1) ||
+            (isKeyboardEvent(event) && isCharacterValue(event)) ||
             pluginEventType == PluginEventType.Input
         ) {
             event.stopPropagation();

packages/roosterjs-editor-core/lib/eventApi/isCharacterValue.ts

@@ -0,0 +1,12 @@
+import isModifierKey from './isModifierKey';
+
+/**
+ * Returns true when the event was fired from a key that produces a character value, otherwise false
+ * This detection is not 100% accurate. event.key is not fully supported by all browsers, and in some browsers (e.g. IE),
+ * event.key is longer than 1 for num pad input. But here we just want to improve performance as much as possible.
+ * So if we missed some case here it is still acceptable.
+ * @param event The keyboard event object
+ */
+export default function isCharacterValue(event: KeyboardEvent): boolean {
+    return !isModifierKey(event) && event.key && event.key.length == 1;
+}

packages/roosterjs-editor-core/lib/eventApi/isModifierKey.ts

@@ -2,7 +2,10 @@ const CTRL_CHARCODE = 'Control';
 const ALT_CHARCODE = 'Alt';
 const META_CHARCODE = 'Meta';
 
-// Returns true when the event was fired from a modifier key, otherwise false
+/**
+ * Returns true when the event was fired from a modifier key, otherwise false
+ * @param event The keyboard event object
+ */
 export default function isModifierKey(event: KeyboardEvent): boolean {
     const isCtrlKey = event.ctrlKey || event.key === CTRL_CHARCODE;
     const isAltKey = event.altKey || event.key === ALT_CHARCODE;

packages/roosterjs-editor-core/lib/index.ts

@@ -44,3 +44,4 @@ export {
 } from './eventApi/cacheGetContentSearcher';
 export { default as cacheGetElementAtCursor } from './eventApi/cacheGetElementAtCursor';
 export { default as isModifierKey } from './eventApi/isModifierKey';
+export { default as isCharacterValue } from './eventApi/isCharacterValue';

packages/roosterjs-plugin-picker/lib/PickerDataProvider.ts

@@ -46,7 +46,7 @@ export interface PickerDataProvider {
     onIsSuggestingChanged: (isSuggesting: boolean) => void;
 
     // Function called when the query string (text after the trigger symbol) is updated.
-    queryStringUpdated: (queryString: string) => void;
+    queryStringUpdated: (queryString: string, isExactMatch: boolean) => void;
 
     // Function called when a keypress is issued that would "select" a currently highlighted option.
     selectOption?: () => void;

packages/roosterjs-plugin-picker/lib/PickerPlugin.ts

@@ -1,8 +1,13 @@
 import { Browser, createRange, PartialInlineElement } from 'roosterjs-editor-dom';
-import { cacheGetContentSearcher, Editor, EditorPlugin } from 'roosterjs-editor-core';
-import { isModifierKey } from 'roosterjs-editor-core';
 import { PickerDataProvider, PickerPluginOptions } from './PickerDataProvider';
 import { replaceWithNode } from 'roosterjs-editor-api';
+import {
+    cacheGetContentSearcher,
+    Editor,
+    EditorPlugin,
+    isCharacterValue,
+    isModifierKey,
+} from 'roosterjs-editor-core';
 import {
     NodePosition,
     PluginKeyboardEvent,
@@ -128,6 +133,11 @@ export default class PickerPlugin<T extends PickerDataProvider = PickerDataProvi
             event.source == ChangeSource.SetContent &&
             this.dataProvider.onContentChanged
         ) {
+            // Stop suggesting since content is fully changed
+            if (this.isSuggesting) {
+                this.setIsSuggesting(false);
+            }
+
             // Undos and other major changes to document content fire this type of event.
             // Inform the data provider of the current picker placed elements in the body.
             let elementIds: string[] = [];
@@ -148,7 +158,8 @@ export default class PickerPlugin<T extends PickerDataProvider = PickerDataProvi
         if (
             event.eventType == PluginEventType.KeyUp &&
             !this.eventHandledOnKeyDown &&
-            !isModifierKey(event.rawEvent)
+            (isCharacterValue(event.rawEvent) ||
+                (!isModifierKey(event.rawEvent) && this.isSuggesting))
         ) {
             this.onKeyUpDomEvent(event);
         } else if (event.eventType == PluginEventType.MouseUp) {
@@ -231,7 +242,8 @@ export default class PickerPlugin<T extends PickerDataProvider = PickerDataProvi
         if (this.isSuggesting) {
             // Word before cursor represents the text prior to the cursor, up to and including the trigger symbol.
             const wordBeforeCursor = this.getWord(event);
-            const trimmedWordBeforeCursor = wordBeforeCursor.substring(1).trim();
+            const wordBeforeCursorWithoutTriggerChar = wordBeforeCursor.substring(1);
+            const trimmedWordBeforeCursor = wordBeforeCursorWithoutTriggerChar.trim();
 
             // If we hit a case where wordBeforeCursor is just the trigger character,
             // that means we've gotten a onKeyUp event right after it's been typed.
@@ -246,7 +258,10 @@ export default class PickerPlugin<T extends PickerDataProvider = PickerDataProvi
                     trimmedWordBeforeCursor.length > 0 &&
                     trimmedWordBeforeCursor.split(' ').length <= 4)
             ) {
-                this.dataProvider.queryStringUpdated(trimmedWordBeforeCursor);
+                this.dataProvider.queryStringUpdated(
+                    trimmedWordBeforeCursor,
+                    wordBeforeCursorWithoutTriggerChar == trimmedWordBeforeCursor
+                );
                 this.setLastKnownRange(this.editor.getSelectionRange());
             } else {
                 this.setIsSuggesting(false);
@@ -260,8 +275,12 @@ export default class PickerPlugin<T extends PickerDataProvider = PickerDataProvi
                     wordBeforeCursor[0] == this.pickerOptions.triggerCharacter
                 ) {
                     this.setIsSuggesting(true);
-                    let shortWord = wordBeforeCursor.substring(1).trim();
-                    this.dataProvider.queryStringUpdated(shortWord);
+                    const wordBeforeCursorWithoutTriggerChar = wordBeforeCursor.substring(1);
+                    let trimmedWordBeforeCursor = wordBeforeCursorWithoutTriggerChar.trim();
+                    this.dataProvider.queryStringUpdated(
+                        trimmedWordBeforeCursor,
+                        wordBeforeCursorWithoutTriggerChar == trimmedWordBeforeCursor
+                    );
                     this.setLastKnownRange(this.editor.getSelectionRange());
                     if (this.dataProvider.setCursorPoint) {
                         // Determine the bounding rectangle for the @mention