I ran into this with a custom plugin where we declare a custom inline object, and noticed this odd behaviour while testing. It's reproducible with one of the included manual test cases. I cannot reproduce this behaviour with inline or block elements, or block objects, it seems to only be an issue with inline objects.
📝 Provide detailed reproduction steps (if any)
Clone this repository and change to the repository directory
Change the tag for the sample inline object element <object-inline data-foo="foo"></object-inline> to an unrecognized tag such as <object-inliney data-foo="foo"></object-inliney>
Click Source. As expected we cannot see the element in the visual editor.
Click Source. Restore the sample inline object element to the previous markup <object-inline data-foo="foo"></object-inline>
After restoring the original markup, we should be able to see the inline object in the visual editor. The inline object should be considered safe.
❌ Actual result
We cannot see the inline object in the visual editor even after restoring the original markup via the source editor. The <span> tag retains the attribute data-ck-unsafe-element="object-inliney" which is stale. For example:
My only thought (having not dug into the code on this one) is that it seems to have something to do with the span element in the editing view. My reasoning is that the span is used to represent both the unsafe element and the inline object.
I ran into this with a custom plugin where we declare a custom inline object, and noticed this odd behaviour while testing. It's reproducible with one of the included manual test cases. I cannot reproduce this behaviour with inline or block elements, or block objects, it seems to only be an issue with inline objects.
📝 Provide detailed reproduction steps (if any)
yarn install
yarn run manual
<object-inline data-foo="foo"></object-inline>
to an unrecognized tag such as<object-inliney data-foo="foo"></object-inliney>
<object-inline data-foo="foo"></object-inline>
Screen recording:
Screencast_20240410_155858.webm
✔️ Expected result
After restoring the original markup, we should be able to see the inline object in the visual editor. The inline object should be considered safe.
❌ Actual result
We cannot see the inline object in the visual editor even after restoring the original markup via the source editor. The
<span>
tag retains the attributedata-ck-unsafe-element="object-inliney"
which is stale. For example:<span data-ck-unsafe-element="object-inliney" class="html-object-embed ck-widget" data-html-object-embed-label="HTML object" contenteditable="false"><object-inline class="html-object-embed__content" data-foo="foo"></object-inline></span>
❓ Possible solution
My only thought (having not dug into the code on this one) is that it seems to have something to do with the span element in the editing view. My reasoning is that the span is used to represent both the unsafe element and the inline object.
📃 Other details
If you'd like to see this fixed sooner, add a 👍 reaction to this post.