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

[GHS] Handle <style> #11104

Closed
wimleers opened this issue Jan 13, 2022 · 1 comment · Fixed by #11235
Closed

[GHS] Handle <style> #11104

wimleers opened this issue Jan 13, 2022 · 1 comment · Fixed by #11235
Assignees
@maxbarnas
Labels
package:html-support squad:core Issue to be handled by the Core team. type:task This issue reports a chore (non-production change) and other types of "todos".
Milestone
iteration 51 (v33...

Comments

@wimleers
Copy link

Sibling issue of #10891.

<style> is now ignored by GHS and cannot be enabled with it in any way.

Discovered downstream, by Drupal: https://www.drupal.org/project/drupal/issues/3256566

📝 Provide detailed reproduction steps (if any)

  1. Load the htmlSupport.GeneralHtmlSupport and sourceEditing.SourceEditing CKE5 plugins, with the following htmlSupport config:
{"allow":[{"name":{"regexp":{"pattern":"/.*/"}},"attributes":true,"classes":true,"styles":true},{"name":"style"}]}
  1. Access a CKEditor 5 instance, use the Source button to paste this:
<style>p { color: red}</style>
<p>
    Hi
</p>
  1. Click the Source button again to access the rendered HTML representation
  2. Click the Source button again to access the raw HTML representation

✔️ Expected result

Exactly what we pasted:

<style>p { color: red}</style>
<p>
    Hi
</p>

❌ Actual result

<p>
    Hi
</p>

📃 Other details

  • Browser: N/A — reproduced in Chrome and Firefox.
  • OS: N/A — reproduced in macOS Big Sur
  • First affected CKEditor version: v31.0.0
  • Installed CKEditor plugins: see above.
@wimleers wimleers added the type:task This issue reports a chore (non-production change) and other types of "todos". label Jan 13, 2022
@Reinmar Reinmar added squad:core Issue to be handled by the Core team. package:html-support labels Jan 13, 2022
@Reinmar
Copy link
Member

Reinmar commented Jan 14, 2022 •
edited
Loading

  • <style> in CKEditor 4 does affect the editor content (applies to it). In CKEditor 5 we cannot go this way because we don't use an iframed editable element anymore and such a style element would affect the entire page. Hence, let's go the same way as we chose for <script>s – render a dummy <span> in the editing view.
    • Needs to be changed
      • GHS: add support for <style> (the same handling as for <script>)
      • DomConverter: _shouldRenameElement() (the same handling as for <script>)
  • Handling <style> in the clipboard pipeline:
    • When in the <body> of the pasted payload, preserve the element.
      • Scenario: copy&paste of the entire editor's content. Expected: the <style> should not be lost.
    • When somewhere outside (eg. in the <head>), make sure that it's filtered out.
      • Scenario: The big <style> that Word provides should be filtered out.
      • For sanity: let's check manually whether we didn't break paste from Word, Gdocs and copying random content from other websites.

When discussing the above we realised that this is getting more and more complex and depends on the resolution of #11110. So, let's wait for #11110.

@maxbarnas maxbarnas self-assigned this Feb 2, 2022
@pomek pomek mentioned this issue Feb 2, 2022
Closed
@maxbarnas maxbarnas mentioned this issue Feb 8, 2022
Merged
@Reinmar Reinmar added this to the iteration 51 milestone Feb 9, 2022
Reinmar added a commit that referenced this issue Feb 9, 2022
@Reinmar
Merge pull request #11235 from ckeditor/ck/11104-handling-style
483bcf9 
Other (engine): The `<style>` element will not interfere with the editing experience. See #11104.

Feature (html-support): Added `<style>` tag support in General HTML Support feature. Closes #11104.
@wimleers wimleers mentioned this issue Mar 8, 2022
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@maxbarnas maxbarnas

Labels
package:html-support squad:core Issue to be handled by the Core team. type:task This issue reports a chore (non-production change) and other types of "todos".
Projects
None yet
Milestone
iteration 51 (v33.0.0)
Development

Successfully merging a pull request may close this issue.

Handle <style> tag ckeditor/ckeditor5
3 participants
@wimleers @Reinmar @maxbarnas