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.

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

Render <style> elements from <head> section of editor data content when using fullPage plugin. #17880

Conversation

pszczesniak
Copy link
Contributor

@pszczesniak pszczesniak commented Feb 4, 2025

Suggested merge commit message (convention)

Feature(html-support): Introducing the ability to render <style> elements from the <head> section of editor data content using FullPage plugin. See #13482.


Additional information

For example – encountered issues, assumptions you had to make, other affected tickets, etc.

@pszczesniak pszczesniak changed the title Render styles elements from head when using fullPage plugin. Render <style> elements from <head> section of editor data content when using fullPage plugin. Feb 6, 2025
@pszczesniak pszczesniak marked this pull request as ready for review February 6, 2025 12:24
@Mati365
Copy link
Member

Mati365 commented Feb 6, 2025

Looks fine imo, I'll test it tomorrow.

* it is strongly recommended to define a sanitize function that will clean up the CSS
* which is present in the `<head>` in editors content in order to avoid XSS vulnerability.
*
* For a detailed overview, check the {@glink TODO} documentation.
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When docs will be updated, proper link will be added.

@Mati365
Copy link
Member

Mati365 commented Feb 7, 2025

@pszczesniak I'm not sure if simple copying of the styles is good enough. Consider that situation.

That's the content of HTML passed to the full style HTML plugin:

<head>
  <style>
  p { color: red; }
  </style>
  <body>
     <p>Hello</p>
  </body>
</head>

Does it mean that the plugin will copy p style to the root window scope and override every paragraph on the page outside the editor? Maybe it'll be better to wrap these styles with .ck-content selector somehow? wdyt

@pszczesniak
Copy link
Contributor Author

@Mati365 Yes, now it will work exactly like you wrote.

Was thinking about scoping it with ck-content class but:

  • we don't know how the selecors are written,
  • do they contains already a ck-content class or not,
  • how the scope is written - if scope starts from, for example, body we cant add before ck-content class cause it will break them all (eg. .ck-content body),
  • if we would like to add ck-content class to the user styles we would need to make some parser that scans every <style> tag and every style rule to make some steps.

@Witoso
Copy link
Member

Witoso commented Feb 7, 2025

This is a FullPage plugin for a reason, let's not bother with .ck-content.

@Mati365
Copy link
Member

Mati365 commented Feb 7, 2025

Works fine.

Copy link
Contributor

@mmotyczynska mmotyczynska left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Works as expected 👍

packages/ckeditor5-html-support/src/augmentation.ts Outdated Show resolved Hide resolved
packages/ckeditor5-html-support/src/fullpageconfig.ts Outdated Show resolved Hide resolved
packages/ckeditor5-html-support/src/fullpageconfig.ts Outdated Show resolved Hide resolved
Comment on lines 186 to 187
const domParser = editor.data.htmlProcessor.domParser;
const doc = domParser.parseFromString( fullPageData, 'text/html' );
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we could avoid double parsing by extending HtmlPageDataProcessor so it could expose a dedicated property for styles?

@pszczesniak pszczesniak merged commit 72a5a99 into ck/epic/email-editing Feb 11, 2025
7 checks passed
@pszczesniak pszczesniak deleted the ck/13482-render-style-element-from-head-using-fullpage-plugin branch February 11, 2025 08:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants