Text from the Watermark plugin is shown for a few miliseconds when indent is changed and input box is empty

[vhuseinova-msft]

Describe the bug
When Watermark plugin is added to editor, no text is added to the input box and indent is changed, the text for Watermark plugin is shown for a small period of time

To Reproduce
Steps to reproduce the behavior:

1. Open the demo website (https://microsoft.github.io/roosterjs/index.html#options)
2. Turn on Watermark plugin in the editor options panel
3. Select the input box
4. Click increase indent button a few times
5. Click decrease indent button a few times

Expected behavior
The Watermark plugin text should be shown all the time
or
it's shouldn't be shown at all

Screenshots
If applicable, add screenshots to help explain your problem.

Screen.Recording.2024-02-14.at.3.39.28.PM.mov

Device Information

• OS: MacOS
• Browser Edge
• Version 121.0.2277.112 (Official build) (arm64)

[romanisa]

@vhuseinova-msft Would you like to contribute a fix for this? RoosterJS core team encourages open-source contribution.

[vhuseinova-msft]

Hi @romanisa! I investigated this issue a little bit and not sure if it's possible to fix it with the current behavior.

To share more details:
Currently, Watermark plugin adds a watermark every time when the editor isn't focused and doesn't have any text. As RoosterJS editor component doesn't really know about existence of rich text format buttons, every time when there is no text in the editor and any rich text format button is clicked, editor looses focus and the watermark is shown (there are quite a few events are caught by onPluginEvent func during this time). The watermark is removed in a few milliseconds because the editor gains focus again which is caused by rich text format buttons onClick callbacks.

A few possible solutions that might need more discussions:

• change the behaviour of the watermark and start to show it when the editor is focused but empty (quick solution)
• review the events handling to handle events in more optimal and fast way (probably a big task and I'm not sure if it's even doable)

Please let me know if there is something else that I've missed
cc @JiuqingSong

[JiuqingSong]

Please try the new Watermark plugin with ContentModel in demo site. It has fully changed the behavior.