Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

CKEditor 5 HTML normalization leading to bugs/unwanted html modification #17455

Open
andybayer-grp opened this issue Nov 13, 2024 · 0 comments
Open

CKEditor 5 HTML normalization leading to bugs/unwanted html modification #17455

andybayer-grp opened this issue Nov 13, 2024 · 0 comments
Labels
type:bug This issue reports a buggy (incorrect) behavior.

Comments

@andybayer-grp
Copy link

andybayer-grp commented Nov 13, 2024 •
edited
Loading

📝 Provide detailed reproduction steps (if any)

  1. When typing in the main editor, not in source mode, if i type in $> then change to source mode the $> is changed to </body>gt; . Seemingly this is because the > is changed to &gt; and then seemingly the verion 5 html normalization model changes $& to </body> so $> becomes </body>gt;.
  2. So my original html that i pass into the editor is:
    "<html><head><title></title></head><body><style>#activate a,#activate a:hover {color: #ffffff!important;text-decoration: none!important;text-decoration-color: #ffffff!important;}</style><p style="font-size: 16px; font-family: Helvetica, Arial, sans-serif;">Hello, <$FirstName$>. </p><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td><table border="0" cellspacing="0" cellpadding="0" id="activate"><tr><td align="center" style="border-radius: 3px;" bgcolor="#ff8820"><a title="Activate" href="<$Link$>" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; color: #ffffff !important; text-decoration: none; text-decoration: none;border-radius: 3px; padding: 12px 18px; border: 1px solid #ff8820; display: inline-block;"><span style="color:#FFFFFF !important;">Click here to begin &#x25ba;</span></a><!-- _!txtlnk!_ <$SubLink$> --></td></tr></table></td></tr></table><p style="font-size: 16px; font-family: Helvetica, Arial, sans-serif;">Have a good day</p></body></html>"

Then when i click source mode i see:

<html><head><title></title></head><body><style>#activate a,#activate a:hover {color: #ffffff!important;text-decoration: none!important;text-decoration-color: #ffffff!important;}</style>
<p style="font-family:Helvetica, Arial, sans-serif;font-size:16px;">
    Hello, &lt;$FirstName</body>gt;.
</p>
<figure class="table">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tbody>
            <tr>
                <td>
                    <figure class="table">
                        <table border="0" cellspacing="0" cellpadding="0" id="activate">
                            <tbody>
                                <tr>
                                    <td style="border-radius:3px;text-align:center;" bgcolor="#ff8820">
                                        <a style="border-radius:3px;border:1px solid #ff8820;color:#ffffff !important;display:inline-block;font-family:Helvetica, Arial, sans-serif;font-size:16px;padding:12px 18px;text-decoration:none;" href="<$Link$>" title="Activate" target="_blank"><span style="color:#FFFFFF!important;">Click here to begin ►</span></a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </figure>
                </td>
            </tr>
        </tbody>
    </table>
</figure>
<p style="font-family:Helvetica, Arial, sans-serif;font-size:16px;">
    Have a good day
</p>
</body></html>
  1. NOTE: This is only when running full page plugin but we need full page html.

✔️ Expected result

  1. I would expect <$FirstName$> to be &lt;$FirstName$&gt; in source mode
  2. <!-- _!txtlnk!_ <$SubLink$> --> is completely removed and shouldnt be
  3. The final html source and data i get from editor.getData() i would expect to be:
<html>
<head>
	<title></title>
</head>
<body>
<style type="text/css">#activate a,#activate a:hover {color: #ffffff!important;text-decoration: none!important;text-decoration-color: #ffffff!important;}
</style>
<p style="font-size: 16px; font-family: Helvetica, Arial, sans-serif;">Hello, &lt;$FirstName$&gt;.</p>

<table border="0" cellpadding="0" cellspacing="0" width="100%">
	<tbody>
		<tr>
			<td>
			<table border="0" cellpadding="0" cellspacing="0" id="activate">
				<tbody>
					<tr>
						<td align="center" bgcolor="#ff8820" style="border-radius: 3px;"><a href="&lt;$Link$&gt;" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; color: #ffffff !important; text-decoration: none; text-decoration: none;border-radius: 3px; padding: 12px 18px; border: 1px solid #ff8820; display: inline-block;" target="_blank" title="Activate"><span style="color:#FFFFFF !important;">Click here to begin ►</span></a><!-- _!txtlnk!_ <$SubLink$> --></td>
					</tr>
				</tbody>
			</table>
			</td>
		</tr>
	</tbody>
</table>

<p style="font-size: 16px; font-family: Helvetica, Arial, sans-serif;">Have a good day</p>
</body>
</html>

❌ Actual result

  1. <$FirstName$> becomes &lt;$FirstName</body>gt; in source mode
  2. <!-- _!txtlnk!_ <$SubLink$> --> is completely removed and shouldnt be
  3. Source code is normalized in ways we dont want it to be.

❓ Possible solution

Change HTML normalization to avoid these unwanted changes.

📃 Other details

  • Browser: Chrome
  • First affected CKEditor version: unsure first but we are using "ckeditor5": "^43.2.0" - but an old project we have is using ckeditor4 and it works as expected/doesnt cause HTML normalization issues
  • Installed CKEditor plugins:
    plugins: [
    AccessibilityHelp,
    Alignment,
    Autoformat,
    AutoImage,
    Autosave,
    BlockQuote,
    Bold,
    CloudServices,
    Code,
    Essentials,
    FontBackgroundColor,
    FontColor,
    FontFamily,
    FontSize,
    FullPage,
    GeneralHtmlSupport,
    Heading,
    ImageBlock,
    ImageCaption,
    ImageInline,
    ImageInsertViaUrl,
    ImageResize,
    ImageStyle,
    ImageTextAlternative,
    ImageToolbar,
    ImageUpload,
    Indent,
    IndentBlock,
    Italic,
    Link,
    LinkImage,
    List,
    ListProperties,
    MediaEmbed,
    Paragraph,
    PasteFromOffice,
    SelectAll,
    SourceEditing,
    Strikethrough,
    Table,
    TableCaption,
    TableCellProperties,
    TableColumnResize,
    TableProperties,
    TableToolbar,
    TextPartLanguage,
    TextTransformation,
    TodoList,
    Underline,
    Undo
    ],

If you'd like to see this fixed sooner, add a 👍 reaction to this post.
@andybayer-grp andybayer-grp added the type:bug This issue reports a buggy (incorrect) behavior. label Nov 13, 2024
@andybayer-grp andybayer-grp changed the title CKEditor 5 HTML normalization leading to bugs/unwanted html elements CKEditor 5 HTML normalization leading to bugs/unwanted html modification Nov 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
type:bug This issue reports a buggy (incorrect) behavior.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@andybayer-grp