search

tinymce / tinymce-angular

Official TinyMCE Angular Component
MIT License
324 stars 93 forks source link

No change event when removing line break #195

Closed tomaerden closed 3 years ago

tomaerden commented 3 years ago

What is the current behavior? When removing a line break, data binding does not receive a change event immediately.

**Please provide the steps to reproduce and if possible a minimal demo of the problem via [codesandbox.io]

What is the expected behavior? The databinding reflects the change immediately.

Which versions of TinyMCE/TinyMCE-Angular, and which browser / OS are affected by this issue? Did this work in previous versions of TinyMCE or TinyMCE-Angular? tinymce: 5.4.2 tinymce-angular: 4.1.0 tested on windows 10 with chrome and firefox

jscasca commented 3 years ago

Hi @tomaerden

It seems that the issue is the actual TinyMCE editor not triggering an event for the wrapper to emit after the line has been deleted. Here is a fiddle of TinyMCE not behaving as expected: http://fiddle.tinymce.com/cthaab/2

To work around this you can use the modelEvent property to add nodechange to the events bound to the NgModel directive. E.G.: https://codesandbox.io/s/tinymceangular-forked-9jdn4

Let me know if this works for you

karol-depka commented 3 years ago

Hi. There is also a related problem: try to select all text (e.g. Cmd/Ctrl+A) and then hit delete key. The deletion will not be reported to ng model/FormControl.

I think it's a very high priority issue as it ends up "corrupting" data.

Reproducible in the same fiddle.

Please fix!

As a temporary workaround, could You suggest how to get to the contenteditable native element in tinymce editor angular component? So I can listen to native event before this nasty bug is fixed.

karol-depka commented 3 years ago

Interestingly, hitting a character key, e.g. "A" instead of delete, does cause the change to be reported.

karol-depka commented 3 years ago

After the non-reported deletion happens, if You press another key (e.g. shift), the (empty) value gets reported.

karol-depka commented 3 years ago

@jscasca workaround https://codesandbox.io/s/tinymceangular-forked-9jdn4 also fixes the issue mentioned by me, involving delete of all selected text. Thanks, @jscasca .

Any background why modelEvent property to add nodechange helps, and why is this case of delete-all / delete-newline, special?

jscasca commented 3 years ago

Hi @karol-depka

The wrapper works by hooking a callback on the selected modelEvent events on the editor to fire a change with the current content. By default, the wrapper only hooks in change input undo redo. However, in some cases users may wish to extend those cases to address particular situations. For example, deleting a new line will trigger the input event before the line has been deleted in the editor and the last change will still have the content with the deleted line. Adding nodechange ensures that we update the content again after the content changed, and after updating on the input event.

I.E. this whole workaround is because of how the editor triggers events when deleting content.

tomaerden commented 3 years ago

thanks for your feedback @jscasca . Adding the nodechange event solves the problem I was facing. I had to add a distinctUntilChanged operator to filter out events for which the content did not change though. A bug might be opened on tinymce editor itself to trigger the change event also for this specific cass.