Broken HTML after node update

Created on 16 April 2024, 7 months ago
Updated 17 September 2024, 2 months ago

Problem/Motivation

Thanks for this module !
But I have a major problem when I update a node wich include previously inserted buttons, all buttons get a broken html output (see screenshot here : https://ibb.co/QbQrCrS)

Steps to reproduce

When I create my node with body field wich include bootrap button everything is ok.
When I update my node with body field wich include bootrap button all previously inserted buttons are broken

🐛 Bug report
Status

Needs review

Version

1.0

Component

Code

Created by

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @jazzyjube
  • 🇷🇺Russia shra

    It looks like you have one anchor container inside of another one. Check your HTML for unclosed tags.

  • 🇺🇦Ukraine arialblack

    Nope, I faced with same issue. It happens when the button (link) has more than one class name, for example, 'btn btn-primary'. And its ok when link have only one class name.

  • 🇮🇳India ravi kant Jaipur

    The issue may appear due to some other elements not properly closing.
    The issue may be debugging on the website.

  • 🇺🇸United States EthanT Sarasota, Florida

    Same issue here. This is a critical bug.

  • 🇷🇺Russia shra

    Guys, could you please share more details. ArialBlack, could you please post here an example of old html which doesn't work? And also provide /admin/config/content/formats settings for "Bootstrap Buttons" plugin.

    It is necessary to take in account: this is an expected button template -
    button

    You may configure expected classes here /admin/config/content/formats for each text format to cover all classes you used for button and also class for container. All unregistered classes will be removed by cke5.

  • 🇷🇺Russia shra

    Thanks, ArialBlack for the video!
    I tested few cases so far, and this is nor "Convert URLs into links" nor "Linkit URL converter". I use them both, by the way, no issues.

    If it is possible, can you additionally provide full list of used modules (at least ckeditor related)? I see there are many filters, but i am not familiar with all of them.

  • 🇺🇦Ukraine arialblack

    Hm...let my try to test again

  • 🇪🇸Spain taote

    Same thing happening here. Drupal 10.3 version and the following CKEditor modules installed:

    • CKEditor 5 Bootstrap Buttons (c5bb)
    • CKEditor 5 Paste Filter (ckeditor5_paste_filter)
    • CKEditor5 Bootstrap Tabs (ckeditor_bootstrap_tabs)
    • CKEditor Bootstrap Grid (ckeditor_bs_grid)
    • CKEditor 5 Link Styles (ckeditor_link_styles)
    • CKEditor Quote (ckeditor_quote)
  • 🇷🇺Russia shra

    Finally i have reproduced the bug. As a fix i released next verstion 1.0.8.
    @taote @ArialBlack @EthanT Please test on your side and give me a feedback.

  • 🇺🇦Ukraine arialblack

    @shra I can confirm that problem is gone in 1.0.8. Great!

  • Status changed to Needs review 3 months ago
  • I was experiencing the same problem on 1.0.8 with links that had "target" attributes as well. Here's a patch.

  • Following up on #14 🐛 Broken HTML after node update Needs review , after more investigation, I found that that patch does not work, so, first, I am providing a new patch that does work as far as I have test.

    The steps to reproduce the issue with the 'target' attribute include also having the Editor Advanced Link module installed and configured.
    Steps:

    1. Install Drupal with standard profile
    2. Add this and Editor Advanced Link module to codebase and install them both
    3. Configure the Basic HTML text format/editor
    4. Add Bootstrap Buttons to the active toolbar
    5. Under "CKEditor 5 plugin settings", click on the "Advanced links" vertical tab
    6. Check the "Open in new window (<a target="_blank">)" box
    7. Save the format
    8. Create a new Basic page node
    9. Make sure Body Text format is set to "Basic HTML"
    10. Type in some text, then select it and use the BB tool
    11. Set the URL to any value, and the Target to "New Window (_blank)"
    12. Save the node
    13. Confirm on view that the link displays as expected, and clicking on the link opens the URL in a new window/tab
    14. Edit the node
    15. Click to view the body source
    16. Observe that instead of the link markup looking like this:
      <a class="btn btn-primary" href="https://example.com" target="_blank"><span class="text">some text</span></a>
      

      It is now wrapped with additional a tags with the target attribute:

      <a target="_blank"><a class="btn btn-primary" href="https://example.com" target="_blank"><span class="text"><a target="_blank">some text</a></span></a></a>
      

    Solution in the patch makes sure to consume the "target" attribute during upcast conversion, so that other plugins do not act on it.

  • 🇷🇺Russia shra

    It seems we have this fixed.
    Thank you all, guys!
    Let's make Drupal great again :)

  • Automatically closed - issue fixed for 2 weeks with no activity.

Production build 0.71.5 2024