Fix #2903

microsoft · Dec 18, 2024 · 575643c · 575643c
1 parent 61f4923
commit 575643c
Showing 1 changed file with 24 additions and 11 deletions.
diff --git a/packages/roosterjs-content-model-plugins/lib/watermark/WatermarkPlugin.ts b/packages/roosterjs-content-model-plugins/lib/watermark/WatermarkPlugin.ts
@@ -43,6 +43,11 @@ export class WatermarkPlugin implements EditorPlugin {
      */
     initialize(editor: IEditor) {
         this.editor = editor;
+        this.editor.attachDomEvent({
+            compositionstart: {
+                beforeDispatch: this.onCompositionStart,
+            },
+        });
     }
 
     /**
@@ -63,10 +68,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 +94,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) {