[MGNLUI-7634] Richtext breaks HTML tags when editing a component Created: 17/Nov/22  Updated: 08/Dec/23  Resolved: 12/Jun/23

Status: Closed
Project: Magnolia UI
Component/s: None
Affects Version/s: 6.2.26
Fix Version/s: None

Type: Bug Priority: Neutral
Reporter: Carlos Cantalapiedra Assignee: Quach Hao Thien
Resolution: Won't Do Votes: 1
Labels: VN-Analysis, dx-core-6.3
Remaining Estimate: Not Specified
Time Spent: 6.5h
Original Estimate: Not Specified

Issue Links:
Problem/Incident
Template:
Acceptance criteria:
Empty
Task DoD:
[ ]* Doc/release notes changes? Comment present?
[ ]* Downstream builds green?
[ ]* Solution information and context easily available?
[ ]* Tests
[ ]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Bug DoR:
[ ]* Steps to reproduce, expected, and actual results filled
[ ]* Affected version filled
Date of First Response:
Epic Link: CKEditor 5
Team: Nucleus
Work Started:

 Description   

Steps to reproduce

  1. Go to demo
  2. Open Resources app and edit the config-magnolia.js file
  3. Set to true the Sources plugin and save the file
  4. Within the very same Resources app, go to /mtk2/dialogs/components and edit the textImage.yaml file
  5. Within the text field, just under the info.magnolia.dam.app.field.DamRichTextFieldDefinition property, include the line:
    configJsFile: /.resources/ckeditor/config-magnolia.js
  6. Save the dialog
  7. Go to pages app and create a new page (Basic template)
  8. Open it and within the main area, create a Text And Image component
  9. At the text field, clic on the Source plugin and type <h2>H2 test</h2>
  10. Save dialog and check that on the main area the H2 test is shown and is noticeable that is a header (bold)
  11. Go to JCR app, open the page created before and check that the Text And Image component has on its text attribute the code "<h2>H2 test</h2>"
  12. Now go back to Pages app, open the page created before and edit the Text And Image component
  13. Within the text field, clic on the Source plugin and check it switched from <h2> tags to <p> tags
  14. Now if you save the component, the <h2> tags have been switched to <p> tags and the text contained within the text field is not a header anymore


 Comments   
Comment by Roman Kovařík [ 18/Nov/22 ]

Just a guess: 

  • by specifying a custom configJsFile, all other default settings are ignored (if this is not explicitly mentioned in the docu, we could add it)
  • that most likely H2 is disabled from the toolbar
  • CKEditor (the 3th party plugin, not Magnolia integration) automatically removes/replaces all tags which are not explicitly enabled (which is expected, also a security measure)
  • so basically what you configure in the configJsFile is what you get

Would be great if somebody would just confirm if the above is true and advise customer, how to enable these tags in the config file.
https://ckeditor.com/docs/ckeditor4/.

Comment by Carlos Cantalapiedra [ 22/Nov/22 ]

Even including the format_tags the issue still happens. Wondering why <strong> , <br> and other tags are respected but the headings are not

Comment by Roman Kovařík [ 23/Nov/22 ]

You can check the config https://git.magnolia-cms.com/projects/PLATFORM/repos/ui/browse/magnolia-ui-framework-jcr/src/main/resources/mgnl-resources/ckeditor/config-magnolia.js#88.

Comment by Quach Hao Thien [ 22/May/23 ]

Hi ccantalapiedra,

It's quite tricky to understand, but please bear with it

  1. The <h2> insert and save successfully to the JCR at the first time (step 10 and 11) because the <h2> is allowed in https://git.magnolia-cms.com/projects/platform/repos/ui/browse/magnolia-ui-framework/src/main/resources/ui-framework-core/config.yaml#24
  2. <h2> then being switched to <p> while opening the editor (step 13) is as Roman said

    CKEditor (the 3th party plugin, not Magnolia integration) automatically removes/replaces all tags which are not explicitly enabled (which is expected, also a security measure)

  3. h1 - h6 and other block-level text formats like p, pre, address, div are belongs to Format plugin. To enable the Format plugin, add _ { name: "styles", items: ["Format"] }

    _ to the toolbar_Magnolia, e.g:

config.toolbar_Magnolia = [
        { name: "basicstyles",   items: [ "Bold", "Italic", "Underline", "Strike", "Subscript", "Superscript", "SpecialChar" ] },
        { name: "paragraph",     items: [ "NumberedList", "BulletedList", "JustifyLeft", "JustifyCenter", "JustifyRight", "JustifyBlock", "Image", "Table" ] },
        { name: "links",         items: [ "Link", "InternalLink", "DamLink", "Unlink" ] },
        { name: "styles",        items: [ "Font", "FontSize", "TextColor" ] },
        { name: "clipboard",     items: [ "Cut", "Copy", "Paste", "PasteText", "PasteFromWord" ] },
        { name: "undo",          items: [ "Undo", "Redo" ] },
        { name: "tools",         items: [ "Source" ] },
        { name: "view",          items: [ "Expand" ] },
        { name: "styles",         items: ["Format"] }
    ]; 
  1. To answer your question

    Even including the format_tags the issue still happens. Wondering why <strong> , <br> and other tags are respected but the headings are not 

    <strong> or <bold> are inline-level text format, which is enabled is basicstyles
Comment by Dominik Maslanka [ 12/Jun/23 ]

We're closing this ticket as our team has thoroughly investigated the matter and taken the necessary actions to resolve it. We appreciate your patience throughout the process. However, we want to emphasize that our support continues. Should you encounter any new findings or face any related issues, we encourage you to contact us again by reopening this ticket or creating a new one. This will help us maintain a detailed record of your concerns and ensure we provide you with the best possible assistance.

Generated at Mon Feb 12 09:47:55 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.