Fix #2903 Handle watermark for IME

packages/roosterjs-content-model-plugins/lib/watermark/WatermarkPlugin.ts

@@ -18,6 +18,7 @@ export class WatermarkPlugin implements EditorPlugin {
     private format: WatermarkFormat;
     private isShowing = false;
     private darkTextColor: string | null = null;
+    private disposer: (() => void) | null = null;
 
     /**
      * Create an instance of Watermark plugin
@@ -43,12 +44,20 @@ export class WatermarkPlugin implements EditorPlugin {
      */
     initialize(editor: IEditor) {
         this.editor = editor;
+        this.disposer = this.editor.attachDomEvent({
+            compositionstart: {
+                beforeDispatch: this.onCompositionStart,
+            },
+        });
     }
 
     /**
      * Dispose this plugin
      */
     dispose() {
+        this.disposer?.();
+        this.disposer = null;
+
         this.editor = null;
     }
 
@@ -63,10 +72,7 @@ export class WatermarkPlugin implements EditorPlugin {
             return;
         }
 
-        if (
-            (event.eventType == 'input' && event.rawEvent.inputType == 'insertText') ||
-            event.eventType == 'compositionEnd'
-        ) {
+        if (event.eventType == 'input' && event.rawEvent.inputType == 'insertText') {
             // When input text, editor must not be empty, so we can do hide watermark now without checking content model
             this.showHide(editor, false /*isEmpty*/);
         } else if (
@@ -92,16 +98,27 @@ export class WatermarkPlugin implements EditorPlugin {
             event.eventType == 'editorReady' ||
             event.eventType == 'contentChanged' ||
             event.eventType == 'input' ||
-            event.eventType == 'beforeDispose'
+            event.eventType == 'beforeDispose' ||
+            event.eventType == 'compositionEnd'
         ) {
-            editor.formatContentModel(model => {
-                const isEmpty = isModelEmptyFast(model);
-
-                this.showHide(editor, isEmpty);
+            this.update(editor);
+        }
+    }
 
-                return false;
-            });
+    private onCompositionStart = () => {
+        if (this.editor) {
+            this.showHide(this.editor, false /*isEmpty*/);
         }
+    };
+
+    private update(editor: IEditor) {
+        editor.formatContentModel(model => {
+            const isEmpty = isModelEmptyFast(model);
+
+            this.showHide(editor, isEmpty);
+
+            return false;
+        });
     }
 
     private showHide(editor: IEditor, isEmpty: boolean) {

packages/roosterjs-content-model-plugins/test/watermark/WatermarkPluginTest.ts

@@ -8,12 +8,14 @@ describe('WatermarkPlugin', () => {
     let formatContentModelSpy: jasmine.Spy;
     let isModelEmptyFastSpy: jasmine.Spy;
     let setEditorStyleSpy: jasmine.Spy;
+    let attachDomEventSpy: jasmine.Spy;
 
     const mockedModel = 'Model' as any;
 
     beforeEach(() => {
         isModelEmptyFastSpy = spyOn(isModelEmptyFast, 'isModelEmptyFast');
         setEditorStyleSpy = jasmine.createSpy('setEditorStyle');
+        attachDomEventSpy = jasmine.createSpy('attachDomEvent');
 
         formatContentModelSpy = jasmine
             .createSpy('formatContentModel')
@@ -26,6 +28,7 @@ describe('WatermarkPlugin', () => {
             formatContentModel: formatContentModelSpy,
             setEditorStyle: setEditorStyleSpy,
             isDarkMode: () => false,
+            attachDomEvent: attachDomEventSpy,
         } as any;
     });
 
@@ -36,6 +39,12 @@ describe('WatermarkPlugin', () => {
 
         plugin.initialize(editor);
 
+        expect(attachDomEventSpy).toHaveBeenCalledWith({
+            compositionstart: {
+                beforeDispatch: jasmine.anything(),
+            },
+        });
+
         plugin.onPluginEvent({
             eventType: 'editorReady',
             addedBlockElements: [],
@@ -169,6 +178,8 @@ describe('WatermarkPlugin dark mode', () => {
     let setEditorStyleSpy: jasmine.Spy;
     let getDarkColorSpy: jasmine.Spy;
     let isDarkModeSpy: jasmine.Spy;
+    let attachDomEventSpy: jasmine.Spy;
+
     const DEFAULT_DARK_COLOR_SUFFIX_COLOR = 'DarkColorMock-';
 
     const mockedModel = 'Model' as any;
@@ -178,6 +189,7 @@ describe('WatermarkPlugin dark mode', () => {
         setEditorStyleSpy = jasmine.createSpy('setEditorStyle');
         getDarkColorSpy = jasmine.createSpy('getDarkColor');
         isDarkModeSpy = jasmine.createSpy('isDarkMode');
+        attachDomEventSpy = jasmine.createSpy('attachDomEvent');
 
         formatContentModelSpy = jasmine
             .createSpy('formatContentModel')
@@ -191,6 +203,7 @@ describe('WatermarkPlugin dark mode', () => {
             formatContentModel: formatContentModelSpy,
             setEditorStyle: setEditorStyleSpy,
             isDarkMode: isDarkModeSpy,
+            attachDomEvent: attachDomEventSpy,
             getColorManager: () => ({
                 getDarkColor: getDarkColorSpy.and.callFake((color: string) => {
                     return `${DEFAULT_DARK_COLOR_SUFFIX_COLOR}${color}`;