Improvement of watermark (#2546)

* Improvement of watermark * add test
microsoft · Apr 1, 2024 · d8f0bf0 · d8f0bf0
1 parent 9c41703
commit d8f0bf0
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 17 deletions.
diff --git a/packages/roosterjs-content-model-plugins/lib/watermark/WatermarkPlugin.ts b/packages/roosterjs-content-model-plugins/lib/watermark/WatermarkPlugin.ts
@@ -58,26 +58,37 @@ export class WatermarkPlugin implements EditorPlugin {
     onPluginEvent(event: PluginEvent) {
         const editor = this.editor;
 
-        if (
-            editor &&
-            (event.eventType == 'editorReady' ||
-                event.eventType == 'contentChanged' ||
-                event.eventType == 'input' ||
-                event.eventType == 'beforeDispose')
+        if (!editor) {
+            return;
+        }
+
+        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 (
+            event.eventType == 'editorReady' ||
+            event.eventType == 'contentChanged' ||
+            event.eventType == 'input' ||
+            event.eventType == 'beforeDispose'
         ) {
             editor.formatContentModel(model => {
                 const isEmpty = isModelEmptyFast(model);
 
-                if (this.isShowing && !isEmpty) {
-                    this.hide(editor);
-                } else if (!this.isShowing && isEmpty) {
-                    this.show(editor);
-                }
+                this.showHide(editor, isEmpty);
+
                 return false;
             });
         }
     }
 
+    private showHide(editor: IEditor, isEmpty: boolean) {
+        if (this.isShowing && !isEmpty) {
+            this.hide(editor);
+        } else if (!this.isShowing && isEmpty) {
+            this.show(editor);
+        }
+    }
+
     protected show(editor: IEditor) {
         let rule = `position: absolute; pointer-events: none; content: "${this.watermark}";`;
 

diff --git a/packages/roosterjs-content-model-plugins/test/watermark/WatermarkPluginTest.ts b/packages/roosterjs-content-model-plugins/test/watermark/WatermarkPluginTest.ts
@@ -44,13 +44,13 @@ describe('WatermarkPlugin', () => {
             'before'
         );
 
-        plugin.onPluginEvent({ eventType: 'input' } as any);
+        plugin.onPluginEvent({ eventType: 'input', rawEvent: {} } as any);
         expect(formatContentModelSpy).toHaveBeenCalledTimes(2);
         expect(setEditorStyleSpy).toHaveBeenCalledTimes(1);
 
         isModelEmptyFastSpy.and.returnValue(false);
 
-        plugin.onPluginEvent({ eventType: 'input' } as any);
+        plugin.onPluginEvent({ eventType: 'input', rawEvent: {} } as any);
         expect(formatContentModelSpy).toHaveBeenCalledTimes(3);
         expect(setEditorStyleSpy).toHaveBeenCalledTimes(2);
         expect(setEditorStyleSpy).toHaveBeenCalledWith('_WatermarkContent', null);
@@ -68,13 +68,13 @@ describe('WatermarkPlugin', () => {
         expect(formatContentModelSpy).toHaveBeenCalledTimes(1);
         expect(setEditorStyleSpy).not.toHaveBeenCalled();
 
-        plugin.onPluginEvent({ eventType: 'input' } as any);
+        plugin.onPluginEvent({ eventType: 'input', rawEvent: {} } as any);
         expect(formatContentModelSpy).toHaveBeenCalledTimes(2);
         expect(setEditorStyleSpy).not.toHaveBeenCalled();
 
         isModelEmptyFastSpy.and.returnValue(true);
 
-        plugin.onPluginEvent({ eventType: 'input' } as any);
+        plugin.onPluginEvent({ eventType: 'input', rawEvent: {} } as any);
         expect(formatContentModelSpy).toHaveBeenCalledTimes(3);
         expect(setEditorStyleSpy).toHaveBeenCalledTimes(1);
         expect(setEditorStyleSpy).toHaveBeenCalledWith(
@@ -105,15 +105,41 @@ describe('WatermarkPlugin', () => {
             'before'
         );
 
-        plugin.onPluginEvent({ eventType: 'input' } as any);
+        plugin.onPluginEvent({ eventType: 'input', rawEvent: {} } as any);
         expect(formatContentModelSpy).toHaveBeenCalledTimes(2);
         expect(setEditorStyleSpy).toHaveBeenCalledTimes(1);
 
         isModelEmptyFastSpy.and.returnValue(false);
 
-        plugin.onPluginEvent({ eventType: 'input' } as any);
+        plugin.onPluginEvent({ eventType: 'input', rawEvent: {} } as any);
         expect(formatContentModelSpy).toHaveBeenCalledTimes(3);
         expect(setEditorStyleSpy).toHaveBeenCalledTimes(2);
         expect(setEditorStyleSpy).toHaveBeenCalledWith('_WatermarkContent', null);
     });
+
+    it('Input event with insertText', () => {
+        isModelEmptyFastSpy.and.returnValue(true);
+
+        const plugin = new WatermarkPlugin('test', {
+            fontFamily: 'Arial',
+            fontSize: '20pt',
+            textColor: 'red',
+        });
+
+        plugin.initialize(editor);
+
+        plugin.onPluginEvent({ eventType: 'editorReady' });
+
+        expect(formatContentModelSpy).toHaveBeenCalledTimes(1);
+        expect(setEditorStyleSpy).toHaveBeenCalledTimes(1);
+        expect(setEditorStyleSpy).toHaveBeenCalledWith(
+            '_WatermarkContent',
+            'position: absolute; pointer-events: none; content: "test";font-family: Arial!important;font-size: 20pt!important;color: red!important;',
+            'before'
+        );
+
+        plugin.onPluginEvent({ eventType: 'input', rawEvent: { inputType: 'insertText' } } as any);
+        expect(formatContentModelSpy).toHaveBeenCalledTimes(1);
+        expect(setEditorStyleSpy).toHaveBeenCalledTimes(2);
+    });
 });