Do NOT trigger event when input within IME for Safari

packages/roosterjs-content-model-core/lib/corePlugin/domEvent/DOMEventPlugin.ts

@@ -18,6 +18,11 @@ const EventTypeMap: Record<string, 'keyDown' | 'keyUp' | 'keyPress'> = {
     keypress: 'keyPress',
 };
 
+// According to https://lists.w3.org/Archives/Public/www-dom/2010JulSep/att-0182/keyCode-spec.html
+// Key code will be 229 when keydown happens during IME
+// We actually only see it happens in Safari
+const IME_KeyDown = 229;
+
 /**
  * DOMEventPlugin handles customized DOM events, including:
  * 1. Keyboard event
@@ -33,6 +38,7 @@ class DOMEventPlugin implements PluginWithState<DOMEventPluginState> {
     private editor: IEditor | null = null;
     private disposer: (() => void) | null = null;
     private state: DOMEventPluginState;
+    private isSafari = false;
 
     /**
      * Construct a new instance of DOMEventPlugin
@@ -63,6 +69,8 @@ class DOMEventPlugin implements PluginWithState<DOMEventPluginState> {
     initialize(editor: IEditor) {
         this.editor = editor;
 
+        this.isSafari = !!this.editor.getEnvironment().isSafari;
+
         const document = this.editor.getDocument();
         const eventHandlers: Partial<
             { [P in keyof HTMLElementEventMap]: DOMEventRecord<HTMLElementEventMap[P]> }
@@ -156,7 +164,7 @@ class DOMEventPlugin implements PluginWithState<DOMEventPluginState> {
                 event.stopPropagation();
             }
 
-            if (this.editor && eventType && !event.isComposing && !this.state.isInIME) {
+            if (this.editor && eventType && !this.isEventInIME(event)) {
                 this.editor.triggerEvent(eventType, {
                     rawEvent: event,
                 });
@@ -168,7 +176,7 @@ class DOMEventPlugin implements PluginWithState<DOMEventPluginState> {
         beforeDispatch: event => {
             event.stopPropagation();
 
-            if (this.editor && !(event as InputEvent).isComposing && !this.state.isInIME) {
+            if (this.editor && !this.isEventInIME(event as InputEvent)) {
                 this.editor.triggerEvent('input', {
                     rawEvent: event as InputEvent,
                 });
@@ -222,6 +230,16 @@ class DOMEventPlugin implements PluginWithState<DOMEventPluginState> {
             this.editor.getDocument().removeEventListener('mouseup', this.onMouseUp, true);
         }
     }
+
+    private isEventInIME(event: KeyboardEvent | InputEvent): boolean {
+        return (
+            event.isComposing ||
+            this.state.isInIME ||
+            (this.isSafari &&
+                event.type == 'keydown' &&
+                (event as KeyboardEvent).keyCode == IME_KeyDown)
+        );
+    }
 }
 
 /**

packages/roosterjs-content-model-core/test/corePlugin/domEvent/DomEventPluginTest.ts

@@ -244,6 +244,69 @@ describe('DOMEventPlugin verify event handlers while disallow keyboard event pro
     });
 });
 
+describe('DOMEventPlugin verify event handlers while disallow keyboard event propagation (Safari)', () => {
+    let eventMap: Record<string, any>;
+    let plugin: PluginWithState<DOMEventPluginState>;
+    let triggerEventSpy: jasmine.Spy;
+
+    beforeEach(() => {
+        const div = <any>{
+            addEventListener: jasmine.createSpy('addEventListener1'),
+            removeEventListener: jasmine.createSpy('removeEventListener'),
+        };
+
+        triggerEventSpy = jasmine.createSpy('triggerEvent');
+
+        plugin = createDOMEventPlugin({}, div);
+        plugin.initialize(<IEditor>(<any>{
+            getDocument,
+            attachDomEvent: (map: Record<string, any>) => {
+                eventMap = map;
+                return jasmine.createSpy('disposer');
+            },
+            getEnvironment: () => ({
+                isSafari: true,
+            }),
+            triggerEvent: triggerEventSpy,
+        }));
+    });
+
+    afterEach(() => {
+        plugin.dispose();
+        eventMap = undefined!;
+    });
+
+    it('verify keydown event within IME for Safari - 1', () => {
+        spyOn(eventUtils, 'isCharacterValue').and.returnValue(true);
+        const stopPropagation = jasmine.createSpy();
+        const mockedEvent = {
+            stopPropagation,
+            type: 'keydown',
+            keyCode: 65,
+        } as any;
+
+        eventMap.keydown.beforeDispatch(mockedEvent);
+
+        expect(stopPropagation).toHaveBeenCalled();
+        expect(triggerEventSpy).toHaveBeenCalled();
+    });
+
+    it('verify keydown event within IME for Safari - 2', () => {
+        spyOn(eventUtils, 'isCharacterValue').and.returnValue(true);
+        const stopPropagation = jasmine.createSpy();
+        const mockedEvent = {
+            stopPropagation,
+            type: 'keydown',
+            keyCode: 229,
+        } as any;
+
+        eventMap.keydown.beforeDispatch(mockedEvent);
+
+        expect(stopPropagation).toHaveBeenCalled();
+        expect(triggerEventSpy).not.toHaveBeenCalled();
+    });
+});
+
 describe('DOMEventPlugin handle mouse down and mouse up event', () => {
     let plugin: PluginWithState<DOMEventPluginState>;
     let addEventListener: jasmine.Spy;