I tried using the RichTextEditor in my app, but ran into problems reacting to user changes.
I set the ValueChangeMode of the editor to EAGER (also happed with LAZY or TIMEOUT) and recognized that when I set an unsanitized value (e.g. “Test” or “<a>Test</a>”) it triggers 2 ValueChangeEvents. 1 Event with isFromClient() = false and 1 with isFromClient() = true.
If I set a value like “<p>Test</p>” or “<p><strong>Test</strong></p>” (like vaadin-sanitized) there’s only 1 event with isFromClient() = false.
Also when I set the ValueChangeMode to ON_BLUR or ON_CHANGE or I just use the default setting there’s no additional event (even on blur/comit of the editor)(Could that be a Bug?).
I know the editor replaces tags like <b> (Bold-Tag) with <strong> (Strong-Tag) (sanitization) and it seems to trigger valueChanges because of this, but can I distinguish between this correction/sanitization and an actual user change?
My goal is, to only react to valueChanges explicitly triggered by user input and ignoring sanitization-only changes.
This is a tough one to answer. It does smell like setting an improperly formatted HTML string into the field causes the client-side editor to fix the formatting, which then causes a second value change event to happen, this time seemingly being client-originated. Then again, if you’re setting the value from the server, you should make sure it’s properly formatted to begin with. At least ev.isFromClient() returns true in RTE · Issue #1894 · vaadin/flow-components · GitHub doesn’t seem to be a problem with 24.3.9 anymore.
As for the ON_BLUR/ON_CHANGE not firing: I guess the client-side editor won’t bother, unless some actual changes have happened in the field. If you suspect that this behaviour is incorrect, then it’s best to open an issue about it at Issues · vaadin/flow-components · GitHub.
Well, now that I poked at it a bit more, the fact that you only get a single value change when the mode is ON_BLUR/ON_CHANGE also means that the server-side value is now not in sync with the client anymore, unless an explicit change has been made in the field. So if you put in an incorrectly formatted value, the server-side getValue() will still return the incorrectly formatted one. And that does actually smell like a bug, just a different bug than what you were describing.
I was thinking the same thing, but even if the client-orginated flag makes sense (the change is probably from the client-component) I would need a user-originated flag for my usecase.
May this be worth a feature request?
More Background about my App:
The editor is likely to be filled with data from another source i.e. data not created with the RichtextEditor itself and thus the data could contain tags the editor replaces, e.g. <b> with <strong>.
I’m trying to use the ValueChangeEvent to signal to the user that he explicitly changed something (making some change indicator visible and enabling the save button) but I would like to ignore sanitization-only changes.
Is there a reliable/preferable way to check my data against the formatting/sanitization of the RichtextEditor?
Then I could check my data before setting it as value of the editor and ignoring eventual initial ValueChangeEvents as a workaround, I guess.
As for the ON_BLUR/ON_CHANGE, do you still need me to open an issue or are you planing to open one following your second comment?
