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.45k stars 3.69k forks source link

Id attribute upcasted incorrectly if contains special character sequences #14694

Open oleq opened 1 year ago

oleq commented 1 year ago

📝 Provide detailed reproduction steps (if any)

  1. Go to https://ckeditor5.github.io/docs/nightly/ckeditor5/latest/examples/builds-custom/full-featured-editor.html and load the following HTML using the source editing feature 
    <table id="b94ce347-d842-4db5-9247-f5efe84c8017" class="simple-table"><thead class="simple-table-header"><tr id="55da2842-90cf-4541-9d8b-490acf1fd9b0"><th id="v~tI" class="simple-table-header-color simple-table-header" style="width:198px">Feature</th><th id="oWu_" class="simple-table-header-color simple-table-header" style="width:200px">Foo</th><th id="jy&gt;q" class="simple-table-header-color simple-table-header" style="width:200px">Bar</th></tr></thead><tbody><tr id="5375646a-5aca-4f36-bd46-18a8f5c60f65"><td id="v~tI" class="" style="width:198px">Horizontal alignment</td><td id="oWu_" class="" style="width:200px">✅ Yes (<code>TableCellProperties</code>)</td><td id="jy&gt;q" class="" style="width:200px">✅ Yes</td></tr><tr id="7472dcee-e6e4-4a4f-b3da-4ca63ac33879"><td id="v~tI" class="" style="width:198px">Vertical alignment</td><td id="oWu_" class="" style="width:200px">✅ Yes (<code>TableCellProperties</code>)</td><td id="jy&gt;q" class="" style="width:200px">✅ Yes</td></tr><tr id="be6f4ac7-773b-4197-ac7d-dddf70c0d349"><td id="v~tI" class="" style="width:198px">Indent</td><td id="oWu_" class="" style="width:200px">✅ Yes (<code>TableCellProperties</code>), via <code>padding</code> on <code>&lt;td&gt;</code></td><td id="jy&gt;q" class="" style="width:200px">✅ Yes</td></tr><tr id="729f53d0-f224-4410-991e-b66069c05ba6"><td id="v~tI" class="" style="width:198px">Orientation (angle)</td><td id="oWu_" class="" style="width:200px">❌ No</td><td id="jy&gt;q" class="" style="width:200px">❌ No</td></tr></tbody></table>
  2. Open source editing again

✔️ Expected result

<th id="jy&gt;q" class="simple-table-header-color simple-table-header" style="width:200px">

is loaded correctly.

❌ Actual result

<th class="simple-table-header-color simple-table-header" style="width:200px;" id="jy>
                    q">Bar
image

❓ More info

HTML5 is way more permissive when it comes to allowed characters in id attributes: https://www.456bereastreet.com/archive/201011/html5_allows_almost_any_value_for_the_id_attribute_use_wisely/.

I reproduced this issue by pasting from Notion.

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

CKEditorBot commented 2 months ago

There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may still be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.