Shortcode compatibility with CKeditor5

Created on 13 March 2024, 3 months ago
Updated 1 April 2024, 3 months ago

Problem/Motivation

I have a project where CKeditor4 was used to create the slick carousel from within the ckeditor4. According to some recommendations every shortcode should have its own line in the text. Everything worked well so far.

Now I have upgraded to CKeditor5 and the shortcodes are not converted into the slick carousel anymore. After testing I encountered, that when everything is written in a single line it do convert into the slick carousel. But then styling and different HTML markup or images on every slide is not possible anymore.

Since CKeditor5 stores everything in a single line, it might be the source of the problem. But I don't know what the resolution should look like.

Steps to reproduce

  1. Setup Drupal with a node, ckeditor5 and slick (and its dependencies) enabled
  2. Configure a text format with CKeditor5 as editor, enable the respective slick filter
  3. Configure a node with the default body field
  4. Create a test content that uses the shortcodes. Like
    <p>[slick]</p>
    <p>[slide]</p>
    <h3>Slide 1</h3>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    <p>[/slide]</p>
    <p>[slide]</p>
    <h3>Slide 2</h3>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    <p>[/slide]</p>
    <p>[/slick]</p>
  5. --> Slick carousel is not created
  6. Change the content to a single-line. Like <p>[slick][slide]Slide 1<br>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.[/slide][slide]Slide 2<br>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.[/slide][/slick]</p>
  7. --> Slick carousel is created

Proposed resolution

TBD

Remaining tasks

TBD

🐛 Bug report
Status

Fixed

Version

2.10

Component

Code

Created by

🇩🇪Germany Mortarion

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

Comments & Activities

  • Issue created by @Mortarion
  • 🇮🇩Indonesia gausarts

    Thank you.

    It is fine at D9 with CKEditor5 and 4.
    But I did notice it broken at D10 somehow.

    What is your Drupal version?

  • 🇮🇩Indonesia gausarts

    Let's move it to Blazy where the code to fix resides.

  • 🇩🇪Germany Mortarion

    Thank you for your response. My Drupal version is 10.2.3

    • gausarts committed e3ecf23d on 8.x-2.x
      Issue #3427632 by Mortarion: Shortcode compatibility with CKeditor5
      
  • Status changed to Fixed 3 months ago
  • 🇮🇩Indonesia gausarts

    You are correct.

    D10 looks like more stricter in terms of broken HTML tags, even though I put the HTML corrector at the end of the process, or in between.
    If any trouble, please revert your shortcode HTML to the recommended per line, not like your OP with "single-line", so that we still stick to the original convention to avoid editing every single node.

    Please also see the attachment for working sample or filter orderings.

    Ideally the fix was moved to into \Drupal\blazy\Plugin\Filter\Shortcode::replace() method.

    This will do for now till we sort this out any better, and or anyone beat me to it.

    Feel free to re-open if still an issue, and or any betterment on this.

    Thank you for contribution.

  • 🇩🇪Germany Mortarion

    Thank you for the code. It didn't worked at the first try and I needed to make some adjustments. So I want to share the changed code with you. I placed inline comments as explanation.

        // Might not be available with self-closing [TAG data="BLAH" /].
        if (stristr($string, "[$item") !== FALSE) {
          $string = self::process($string, $item);
    
          // @todo remove into self::replace().
          // Replacing "<p><$item " alone is not enough, since the shortcodes can be empty. Replace them first
          $string = str_replace("<p><$item>", "<$item>", $string);
          $string = str_replace("<p><$item ", "<$item ", $string);
          $string = str_replace("<p><$item>\n", "<$item>", $string);
          // Replacing "</$item></p>\n"  would mean, that the line break is necessary, but it isn't? It would lead to orphaned tags not properly replaced
          $string = str_replace("</$item></p>", "</$item>", $string);
        }
    
        $text = self::process($string, $container);
    
        // @todo remove into self::replace().
        // Comments above apply here, too.
        $text = str_replace("<p><$container>", "<$container>", $text);
        $text = str_replace("<p><$container ", "<$container ", $text);
        $text = str_replace("<p><$container>\n", "<$container>\n", $text);
        $text = str_replace("</$container></p>", "</$container>", $text);
        return $text;
    

    Free for discussion

  • Status changed to Active 3 months ago
  • 🇮🇩Indonesia gausarts

    Makes sense, thank you.

    The previous solutions were based on the instructed convention with line breaks.

    However expanding use cases like yours is obviously more versatile and a lot better.

    If you'd like to patch it, that would be great.

  • Status changed to Needs review 3 months ago
  • Open in Jenkins → Open on Drupal.org →
    Core: 9.5.x + Environment: PHP 7.4 & MySQL 5.7
    last update 3 months ago
    Patch Failed to Apply
  • 🇮🇩Indonesia gausarts

    @Mortarion, you may want to git pull the latest DEV release before creating patches.
    Otherwise that would conflict the latest code base. But no biggies for now.

    OOT, looks like my Drupal permissions were changed.
    I can no longer choose Author column to give credit to as seen in the screenshot which is a bit weird since I am the maintainer who should give you credits:
    https://www.drupal.org/files/issues/2024-03-16/drupal-author-credit.png
    vs.
    https://www.drupal.org/docs/develop/issues/issue-procedures-and-etiquett...

    • gausarts committed b91edbe3 on 8.x-2.x
      Issue #3427632 by Mortarion: Shortcode compatibility with CKeditor5
      
  • Status changed to Fixed 3 months ago
  • 🇮🇩Indonesia gausarts

    Committed. Thank you for contribution.

  • 🇩🇪Germany Mortarion

    @gausarts, thank you for your suggestion. I will do it as recommended the next time.

    At first I wanted to create an issue fork on drupalcode to create a respective merge request. That would have been easier, but I wasn't able to choose the correct namespace, so I stopped that attempt and instead used the patch that applies on my local machine.

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

Production build 0.69.0 2024