search

Jemt / Fit.UI

Fit.UI is a JavaScript based UI framework built on Object Oriented principles
http://fitui.org
GNU Lesser General Public License v3.0
19 stars 7 forks source link

HTML Editor (Design Mode): Input.OnChange does not fire reliably for images #132

Closed FlowIT-JIT closed 3 years ago

FlowIT-JIT commented 3 years ago

Input in Design Mode (HTML editor) does not fire OnChange reliably when working with images. Two problems have been identified.

OnChange does not fire when changing value after image paste

Follow the steps below to reproduce the problem:

1) Go to https://jsfiddle.net/w51vmqys/2/ 2) Open Developer Tools and observe the console log 3) Paste an image into the editor OK: OnChange fires for each image added 4) Now make a change such as pressing a key or remove the image BUG: OnChange does NOT fire as expected 5) Make another change OK: OnChange fires as expected.

It's worth mentioning that this bug does not occur when adding images using the image dialog (base64image plugin), so it might be the base64imagepaste plugin causing the problem somehow.

OnChange does not fire when changing image dimensions

See https://jsfiddle.net/6tomed43/ Notice how an image is already present in the editor.

1) Select the image and click the image button in the toolbar 2) Change the dimensions and click OK 3) Notice how OnChange is NOT fired

The problem does not occur when resizing the image using the resize handlers, so the problem might be related to the base64image plugin.

State and misc.

If one relies on OnChange to keep state up to date, and that state is later used to persist the value of the HTML editor, we could end up with incorrect data since state would not reflect the most current value of the editor.

Bug related to request to add image support: #100

Possible work around

If the problem can not be resolved to have OnChange fire reliably, we must at least make sure it is fired OnBlur if changes are made.

FlowIT-JIT commented 3 years ago

TODO: Test base64imagepaste with storage mode "base64" as I suspect the bug could be caused by the async behaviour related to reading blob storage. If that's the case, we could probably just add the image immediately and "later" set the image blob URL. EDIT: A quick test using Developer Tools reveal that changing the storage format to base64 does not fix the problem, unfortunately. In fact, both plugins add the new image async when using blob storage.

FlowIT-JIT commented 3 years ago

The first problem OnChange does not fire when changing value after image paste is a bug in CKEditor: https://github.com/ckeditor/ckeditor4/issues/4856

FlowIT-JIT commented 3 years ago

Regarding OnChange does not fire when changing image dimensions: The reason it works when using the resize plugin, is because it creates a snapshot (undo/redo) which in turn fires OnChange:

image

image

FlowIT-JIT commented 3 years ago

Apparently a snapshot is automatically created when using dialogs. image

We can make OnChange fire by simply invoking editor.fire("change") instead.