Content model: fix keyboard delete issue on Android

demo/scripts/controls/sidePane/eventViewer/ContentModelEventViewPane.tsx

@@ -249,6 +249,9 @@ export default class ContentModelEventViewPane extends React.Component<
             case PluginEventType.BeforeKeyboardEditing:
                 return <span>Key code={event.rawEvent.which}</span>;
 
+            case PluginEventType.Input:
+                return <span>Input type={event.rawEvent.inputType}</span>;
+
             default:
                 return null;
         }

packages-content-model/roosterjs-content-model-plugins/lib/edit/EditPlugin.ts

@@ -7,6 +7,9 @@ import type {
     PluginEvent,
 } from 'roosterjs-content-model-types';
 
+const BACKSPACE_KEY = 8;
+const DELETE_KEY = 46;
+
 /**
  * ContentModel edit plugins helps editor to do editing operation on top of content model.
  * This includes:
@@ -15,6 +18,8 @@ import type {
  */
 export class EditPlugin implements EditorPlugin {
     private editor: IStandaloneEditor | null = null;
+    private disposer: (() => void) | null = null;
+    private shouldHandleNextInputEvent = false;
 
     /**
      * Get name of this plugin
@@ -31,6 +36,13 @@ export class EditPlugin implements EditorPlugin {
      */
     initialize(editor: IStandaloneEditor) {
         this.editor = editor;
+        if (editor.getEnvironment().isAndroid) {
+            this.disposer = this.editor.attachDomEvent({
+                beforeinput: {
+                    beforeDispatch: e => this.handleBeforeInputEvent(editor, e),
+                },
+            });
+        }
     }
 
     /**
@@ -40,6 +52,8 @@ export class EditPlugin implements EditorPlugin {
      */
     dispose() {
         this.editor = null;
+        this.disposer?.();
+        this.disposer = null;
     }
 
     /**
@@ -70,11 +84,58 @@ export class EditPlugin implements EditorPlugin {
                     keyboardDelete(editor, rawEvent);
                     break;
 
+                case 'Unidentified':
+                    if (editor.getEnvironment().isAndroid) {
+                        this.shouldHandleNextInputEvent = true;
+                    }
+                    break;
+
                 case 'Enter':
                 default:
                     keyboardInput(editor, rawEvent);
                     break;
             }
         }
     }
+
+    private handleBeforeInputEvent(editor: IStandaloneEditor, rawEvent: Event) {
+        // Some Android IMEs doesn't fire correct keydown event for BACKSPACE/DELETE key
+        // Here we translate input event to BACKSPACE/DELETE keydown event to be compatible with existing logic
+        if (
+            !this.shouldHandleNextInputEvent ||
+            !(rawEvent instanceof InputEvent) ||
+            rawEvent.defaultPrevented
+        ) {
+            return;
+        }
+        this.shouldHandleNextInputEvent = false;
+
+        let handled = false;
+        switch (rawEvent.inputType) {
+            case 'deleteContentBackward':
+                handled = keyboardDelete(
+                    editor,
+                    new KeyboardEvent('keydown', {
+                        key: 'Backspace',
+                        keyCode: BACKSPACE_KEY,
+                        which: BACKSPACE_KEY,
+                    })
+                );
+                break;
+            case 'deleteContentForward':
+                handled = keyboardDelete(
+                    editor,
+                    new KeyboardEvent('keydown', {
+                        key: 'Delete',
+                        keyCode: DELETE_KEY,
+                        which: DELETE_KEY,
+                    })
+                );
+                break;
+        }
+
+        if (handled) {
+            rawEvent.preventDefault();
+        }
+    }
 }

packages-content-model/roosterjs-content-model-plugins/lib/edit/keyboardDelete.ts

@@ -26,8 +26,10 @@ import type {
  * Do keyboard event handling for DELETE/BACKSPACE key
  * @param editor The Content Model Editor
  * @param rawEvent DOM keyboard event
+ * @returns True if the event is handled by content model, otherwise false
  */
 export function keyboardDelete(editor: IStandaloneEditor, rawEvent: KeyboardEvent) {
+    let handled = false;
     const selection = editor.getDOMSelection();
 
     if (shouldDeleteWithContentModel(selection, rawEvent)) {
@@ -39,7 +41,8 @@ export function keyboardDelete(editor: IStandaloneEditor, rawEvent: KeyboardEven
                     context
                 ).deleteResult;
 
-                return handleKeyboardEventResult(editor, model, rawEvent, result, context);
+                handled = handleKeyboardEventResult(editor, model, rawEvent, result, context);
+                return handled;
             },
             {
                 rawEvent,
@@ -48,9 +51,9 @@ export function keyboardDelete(editor: IStandaloneEditor, rawEvent: KeyboardEven
                 apiName: rawEvent.key == 'Delete' ? 'handleDeleteKey' : 'handleBackspaceKey',
             }
         );
-
-        return true;
     }
+
+    return handled;
 }
 
 function getDeleteSteps(rawEvent: KeyboardEvent, isMac: boolean): (DeleteSelectionStep | null)[] {

packages-content-model/roosterjs-content-model-plugins/test/edit/EditPluginTest.ts

@@ -1,20 +1,40 @@
 import * as keyboardDelete from '../../lib/edit/keyboardDelete';
 import * as keyboardInput from '../../lib/edit/keyboardInput';
 import { EditPlugin } from '../../lib/edit/EditPlugin';
-import { IStandaloneEditor } from 'roosterjs-content-model-types';
+import { DOMEventRecord, IStandaloneEditor } from 'roosterjs-content-model-types';
 
 describe('EditPlugin', () => {
+    let plugin: EditPlugin;
     let editor: IStandaloneEditor;
+    let eventMap: Record<string, any>;
+    let attachDOMEventSpy: jasmine.Spy;
+    let getEnvironmentSpy: jasmine.Spy;
 
     beforeEach(() => {
+        attachDOMEventSpy = jasmine
+            .createSpy('attachDOMEvent')
+            .and.callFake((handlers: Record<string, DOMEventRecord>) => {
+                eventMap = handlers;
+            });
+
+        getEnvironmentSpy = jasmine.createSpy('getEnvironment').and.returnValue({
+            isAndroid: true,
+        });
+
         editor = ({
+            attachDomEvent: attachDOMEventSpy,
+            getEnvironment: getEnvironmentSpy,
             getDOMSelection: () =>
                 ({
                     type: -1,
                 } as any), // Force return invalid range to go through content model code
         } as any) as IStandaloneEditor;
     });
 
+    afterEach(() => {
+        plugin.dispose();
+    });
+
     describe('onPluginEvent', () => {
         let keyboardDeleteSpy: jasmine.Spy;
         let keyboardInputSpy: jasmine.Spy;
@@ -25,7 +45,7 @@ describe('EditPlugin', () => {
         });
 
         it('Backspace', () => {
-            const plugin = new EditPlugin();
+            plugin = new EditPlugin();
             const rawEvent = { key: 'Backspace' } as any;
 
             plugin.initialize(editor);
@@ -40,7 +60,7 @@ describe('EditPlugin', () => {
         });
 
         it('Delete', () => {
-            const plugin = new EditPlugin();
+            plugin = new EditPlugin();
             const rawEvent = { key: 'Delete' } as any;
 
             plugin.initialize(editor);
@@ -55,7 +75,7 @@ describe('EditPlugin', () => {
         });
 
         it('Other key', () => {
-            const plugin = new EditPlugin();
+            plugin = new EditPlugin();
             const rawEvent = { which: 41, key: 'A' } as any;
             const addUndoSnapshotSpy = jasmine.createSpy('addUndoSnapshot');
 
@@ -73,7 +93,7 @@ describe('EditPlugin', () => {
         });
 
         it('Default prevented', () => {
-            const plugin = new EditPlugin();
+            plugin = new EditPlugin();
             const rawEvent = { key: 'Delete', defaultPrevented: true } as any;
 
             plugin.initialize(editor);
@@ -87,7 +107,7 @@ describe('EditPlugin', () => {
         });
 
         it('Trigger entity event first', () => {
-            const plugin = new EditPlugin();
+            plugin = new EditPlugin();
             const wrapper = 'WRAPPER' as any;
 
             plugin.initialize(editor);
@@ -122,4 +142,68 @@ describe('EditPlugin', () => {
             expect(keyboardInputSpy).not.toHaveBeenCalled();
         });
     });
+
+    describe('onBeforeInputEvent', () => {
+        let keyboardDeleteSpy: jasmine.Spy;
+
+        beforeEach(() => {
+            keyboardDeleteSpy = spyOn(keyboardDelete, 'keyboardDelete');
+        });
+
+        it('Handle deleteContentBackward event when key is unidentified', () => {
+            plugin = new EditPlugin();
+            const rawEvent = { key: 'Unidentified' } as any;
+
+            plugin.initialize(editor);
+
+            plugin.onPluginEvent({
+                eventType: 'keyDown',
+                rawEvent,
+            });
+
+            eventMap.beforeinput.beforeDispatch(
+                new InputEvent('beforeinput', {
+                    inputType: 'deleteContentBackward',
+                })
+            );
+
+            expect(keyboardDeleteSpy).toHaveBeenCalledTimes(1);
+            expect(keyboardDeleteSpy).toHaveBeenCalledWith(
+                editor,
+                new KeyboardEvent('keydown', {
+                    key: 'Backspace',
+                    keyCode: 8,
+                    which: 8,
+                })
+            );
+        });
+
+        it('Handle deleteContentForward event when key is unidentified', () => {
+            plugin = new EditPlugin();
+            const rawEvent = { key: 'Unidentified' } as any;
+
+            plugin.initialize(editor);
+
+            plugin.onPluginEvent({
+                eventType: 'keyDown',
+                rawEvent,
+            });
+
+            eventMap.beforeinput.beforeDispatch(
+                new InputEvent('beforeinput', {
+                    inputType: 'deleteContentForward',
+                })
+            );
+
+            expect(keyboardDeleteSpy).toHaveBeenCalledTimes(1);
+            expect(keyboardDeleteSpy).toHaveBeenCalledWith(
+                editor,
+                new KeyboardEvent('keydown', {
+                    key: 'Delete',
+                    keyCode: 46,
+                    which: 46,
+                })
+            );
+        });
+    });
 });

packages-content-model/roosterjs-content-model-plugins/test/edit/keyboardDeleteTest.ts

@@ -65,7 +65,7 @@ describe('keyboardDelete', () => {
 
                 const result = keyboardDelete(editor, mockedEvent);
 
-                expect(result).toBeTrue();
+                expect(result).toBe(expectedDelete == 'range' || expectedDelete == 'singleChar');
             },
             input,
             expectedResult,
@@ -589,9 +589,8 @@ describe('keyboardDelete', () => {
             getDOMSelection: () => range,
         } as any;
 
-        const result = keyboardDelete(editor, rawEvent);
+        keyboardDelete(editor, rawEvent);
 
-        expect(result).toBeTrue();
         expect(formatWithContentModelSpy).toHaveBeenCalledTimes(1);
     });
 
@@ -613,9 +612,8 @@ describe('keyboardDelete', () => {
             getDOMSelection: () => range,
         } as any;
 
-        const result = keyboardDelete(editor, rawEvent);
+        keyboardDelete(editor, rawEvent);
 
-        expect(result).toBeTrue();
         expect(formatWithContentModelSpy).toHaveBeenCalledTimes(1);
     });
 });