Problem/Motivation
Discovered in #3201820: Manually test that CKE 5 can be used in off-canvas
In core/misc/dialog/off-canvas.reset.css, there is a style that sets most elements within the dialog to all: initial;
. This overrides the user-modify
property, and makes the element (and its children) non-editable.
I created a codepen to demonstrate example of how all: initial;
breaks contenteditable (and how to potentially fix it) https://codepen.io/bbbenjamin/pen/poRNJwM
Steps to reproduce
In Chrome or Firefox: (other browsers may be impacted, but these are confirmed)
Use inspector to add a contenteditable div in the main canvas. It will be editable
Use inspector to add a contenteditable div inside an off-canvas dialog. It won't be editable.
Proposed resolution
The solution would need to target any contenteditable elements AND its child elements. Adding a rule to do this in off-canvas.reset.pcss.css shouldn't be too complicated, but it would be nice to find a solution that doesn't balloon the filesize of the off-canvas.reset.css file it compiles to.
Something like this should work
#drupal-off-canvas [contenteditable],
#drupal-off-canvas [contenteditable] * {
-webkit-user-modify: read-write;
-moz-user-modify: read-write;
}