Problem/Motivation
Inserted images in CKEditor 5 do not keep parity with attributes such as ALT tags. The initial insert action of an image works, but the necessary tags (data-insert-type and data-insert-attach) are still stripped by CKEditor. This is even with the [Insert Module] Extend HTML Tags and Attributes plugin added to the toolbar.
My issue seems similar to, but not exactly like:
https://www.drupal.org/project/insert/issues/3442271
📌
Replace text format setup with custom CKEditor plugin
Needs review
I've tried a fresh Drupal 10.4.1 install with just the Insert module installed, and I still run into issues with CKEditor 5 stripping the HTML attributes from even a basic image insert. This is regardless of whether the Limit allowed HTML tags and correct faulty HTML is checked, or if I allow all HTML tags and attributes in the text format. I've testing in Chrome, Edge, and Firefox.
With the limit HTML toggle in place, I can see the allowed attributes data-insert-attach and data-insert-type in the "Allowed HTML tags" field. As such, non-CKEditor 5 text fields are working and inserts are updating properly, as the data-insert-* attributes are not being stripped.
I feel the issue might be with the Javascript behind the scenes that links to CKEditor 5.
I've tried to debug this issue to the best of my ability, trying to see where the problem might lie. I unfortunately couldn't seem to find just one thing that was causing the issue, nor specific steps to reproduce it. Below is summary my findings.
First, when trying to use the [Insert Module] Extend HTML Tags and Attributes plugin plugin, Chrome's console for ckeditor5-dll.js reports that:
toolbarview-item-unavailable {item: 'insert_extend_allowed_html'}
I do not know if this is just CKEditor complaining that there isn't a true toolbar button, or if this is breaking something else down the line.
Second, through a roundabout way of disabling items and bits of the Javascript code, below is the only way I was able to get CKEditor 5 and Insert to link up and not strip the data attributes.
- Text format cannot limit the HTML
- Under js/plugins/ckeditor.js, comment out the following lines: 42-58. I believe these actions, and viewToModel() might be stripping the tags.
If I follow the steps above, the data-insert-* attributes remain and the HTML updates if the Image data updates in realtime (e.g. ALT tag). While the Source view may not keep parity (as in issue 3442271), the actual data that is saved will.
However, one of the glitches with this "hack", is that I can no longer limit HTML tags.
Finally, I do not know if this is expected behavior (or if it is another issue); but any time I update the alternative text of the linked image, the inserted CKEditor image resets to its original width and height even if the image had been resized. Other image attributes, such as data-align, appear to remain unchanged.