search

ckeditor / ckeditor5

Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing.
https://ckeditor.com/ckeditor-5
Other
9.33k stars 3.68k forks source link

Inline object in editing view rendered invisible by stale data-ck-unsafe-element attribute after editing source #16194

Open star-szr opened 4 months ago

star-szr commented 4 months ago

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)

  1. Clone this repository and change to the repository directory
  2. yarn install
  3. yarn run manual
  4. In a browser, navigate to http://localhost:8125/ckeditor5-html-support/tests/manual/customelements.html (adjust port number if needed)
  5. Click Source
  6. 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>
  7. Click Source. As expected we cannot see the element in the visual editor.
  8. Click Source. Restore the sample inline object element to the previous markup <object-inline data-foo="foo"></object-inline>
  9. Click Source.

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 attribute data-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.

niegowski commented 4 months ago

It looks like we do not reset DomConverter#unsafeElements on DataController#set(). Custom unknown elements are registered as unsafe here:

https://github.com/ckeditor/ckeditor5/blob/08270aafcc6e7e4fb4f4a4d2ebbc7451f031d303/packages/ckeditor5-html-support/src/integrations/customelement.ts#L83-L85

And it is never removed even for completely fresh data.