(Originally written at #2544020-28: CKEditor plugin not written with CKEditor >=4.4 in mind; rewrite it based on core's `drupalimage` plugin.)
One thing I learned from https://codepen.io/f1ames/pen/arQaYJ is https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_plugins_widget.h... — which is a single property that automatically masks the embedded content:
the widget's element will be covered with a transparent mask. This will prevent its content from being clickable, which matters in case of special elements like embedded Flash or iframes that generate a separate "context".
Yay, exactly what we need for Youtube embeds for example!
Unfortunately using that masks the entire widget, we need the caption editable to still be available for interaction in #2282957: Caption should work like the drupalimage plugin (editable in WYSIWYG, not in dialog). He came up with a clever hack to solve this: figcaption { position: relative; z-index: 1; }. 😀
Unfortunately … it doesn't work at all for us. 😩 Our combination of display: table plus float: right (for a right-aligned captioned embed) on <figure class="caption align-right"> means the widget CKEditor plugin's mask functionality doesn't work, because it relies on position: absolute; top:0; left:0; width:100%; heigh:100%; display:block; to cover the parent exactly through pure CSS. But our CSS — which we've had for more than half a decade and we cannot change since it'd break BC — makes that trick impossible.
See what happens when we just enable mask: true:
Figure out a way to use https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_plugins_widget.h... that does work.
TBD
Unable to interact with embedded entities.
None.
None.
| Comment | File | Size | Author |
|---|---|---|---|
| #10 | Screenshot 2019-10-03 at 12.36.53.png | 1.4 MB | wim leers |
| #9 | 3064572-9.patch | 2.14 KB | wim leers |
| #9 | Screenshot 2019-10-03 at 12.34.52.png | 2.17 MB | wim leers |
| #2 | 3064572-2.patch | 711 bytes | wim leers |
| #2 | CKEditor Widget ineffective mask.png | 967.27 KB | wim leers |
Comments
Comment #2
wim leersComment #3
wim leersHah, interesting. It seems the mask does work in some circumstances. Probably it works when the embedded entity is not aligned? The automated tests show that in that case, the caption is not clickable, which is where the
z-indextrick from the issue summary comes in :)Comment #4
wim leersI think it's reasonable to expect that this
maskfeature of CKEditor Widgets works in all circumstances, what we're doing here doesn't seem to be very far-fetched. The fact that Widgets supports nested editables and themaskfeature doesn't support that points to an oversight/incompleteness. Which is understandable! We all have finite time. But given that the need has now clearly been established, I would hope that the CKEditor team adds support for it.Not sure if this would be a bugfix or a feature in CKEditor, I think it can be argued either way :)
Comment #5
wim leersComment #6
wim leersThis now has an upstream CKEditor issue, and is slated to ship with CKEditor 4.13: https://github.com/ckeditor/ckeditor-dev/issues/3240
Comment #7
wim leersCKEditor 4.13 was released today and includes that fix! So now we're blocked on Drupal core updating to CKEditor 4.13, which is happening in #3072382: Update CKEditor to version 4.13.
Comment #8
wim leersI'm working with the CKEditor team. I'm running into issues doing this. Will keep you posted.
Comment #9
wim leersLet's fix this first in Drupal core.
This works at least partially: a mask is created, but it still covers the entire widget:
instead of just the captioned media, despite the
partbeing updated correctly:I'm hoping the CKEditor team can provide guidance on how to fix this.
Comment #10
wim leersComment #11
wim leersComment #13
wim leers#3120022: Update CKEditor to version 4.14.0 should unblock this.
Comment #15
wim leers#3120022: Update CKEditor to version 4.14.0 landed 4 months ago, this has been unblocked since then.
Comment #16
phenaproxima