After migration from D9 to D10,different html tags are enclosing in p tag. In D9 we were using ckeditor 4 and now in D10 core ckeditor5 is used. Is there any way to resolve it?
Ckeditor 4 source code: 

<form>
        <h1 class="hcHeading">
            Can you <span>relate?</span>
        </h1>       
            <label>label</label>       
    </form>

Ckeditor 5 souce code : label tag inside form tag is wrapped in p tag

<form>
        <h1 class="hcHeading">
            Can you <span>relate?</span>
        </h1>
        <p>
            <label>label</label>
        </p>
    </form>

Ckeditor 4 source code : 

<div class="dropdown">
   
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown button
          </button>
   
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
        <li>
            <a class="dropdown-item" href="#">Action</a>
        </li>
        <li>
            <a class="dropdown-item" href="#">Another action</a>
        </li>
        <li>
            <a class="dropdown-item" href="#">Something else here</a>
        </li>
    </ul>
</div>

Ckeditor 5 code: button is wrapped inside <p> tag

<div class="dropdown">
    <p>
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown button
          </button>
    </p>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
        <li>
            <a class="dropdown-item" href="#">Action</a>
        </li>
        <li>
            <a class="dropdown-item" href="#">Another action</a>
        </li>
        <li>
            <a class="dropdown-item" href="#">Something else here</a>
        </li>
    </ul>
</div>

Comments

Drupalite1411 created an issue. See original summary.

cilefen’s picture

cilefen commented
Issue summary: View changes

I feel like this may already have been asked.

drupalite1411’s picture

drupalite1411 commented

Hi cilefan, Could you please replicate the issue.These issues were not there in ckeditor4.

drupalite1411’s picture

drupalite1411 commented

Hi Someone ,can please check. This is issue is impacting our whole site after migration to cke5editor from ckeditor4

torresrecife’s picture

torresrecife commented

Hi @Drupalite1411,
Did you manage to resolve this? I have the same problem

cilefen’s picture

cilefen commented

Please find out if this is a CKEditor behavior or a Drupal integration or filter. Use https://ckeditor.com/ckeditor-5/demo/

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

drupalite1411’s picture

drupalite1411 commented

@torresrecife No I am still using ckeditor 4 due to this issue.

quietone’s picture

quietone commented
Component: ckeditor.module » ckeditor5.module

Moving to CKEditor5 component. The component 'ckeditor.module' refers to CKEditor 4, it was the simplest way to distinguish them when they were both in core.

mvonfrie’s picture

mvonfrie commented

@cilefen, this definitely is a CKeditor behavior. To get some context, why that happens in CKeditor5, please read https://github.com/ckeditor/ckeditor5/issues/16203.

Some support from the Drupal Core team there might be helpful.

gaele’s picture

gaele commented
Related issues: +#3274028: CKEditor 5 compatibility
niranjan_panem’s picture

niranjan_panem commented

checked in drupal 11, CKEditor5 automatically adds paragraph tags to elements. Currently, this issue cannot be resolved without an update from the CKEditor 5 maintainers.

emanaton’s picture

emanaton commented

NOTE: Pasting into ckeditor5 works on their website without it adding the extra wrapping p tag: https://ckeditor.com/docs/ckeditor5/latest/examples/builds-custom/full-f...

Given that, this is something we should be able to fix in drupal...

jvogt’s picture

jvogt commented

I'm still seeing the issue at the link from emanaton.

From the Source view, enter this outside any other element:
<span class="test">test</span>

Click Save and it turns into:

<p>
  <span class="test">test</span>
</p>
handkerchief’s picture

handkerchief
Primary language German
Location Chur, Switzerland
commented

Same problem here. For example, if you add a dl-list:

<dl>
    <dt>Some text</dt>
    <dd>Some text too</dd>
</dl>

Will result in this after saving:

<dl>
    <dt><p>Some text</p></dt>
    <dd><p>Some text too</p></dd>
</dl>

I tried it with all format filter unchecked (/admin/config/content/formats/manage/full) , and with the filters like html corrector, newline br-tag etc. on = same result.

Edit: Interesting thing, if you add a normal ul or ol-list over the ckeditor toolbar, no p-tags are added.

handkerchief’s picture

handkerchief
Primary language German
Location Chur, Switzerland
commented

Some similar issues:
#3370610: Prevent CKEdtior5 from wrapping blockquote elements with unneeded <p> tags

https://github.com/ckeditor/ckeditor5/issues/1537

handkerchief’s picture

handkerchief
Primary language German
Location Chur, Switzerland
commented

Workaround for specific cases:

/**
 * Implements hook_preprocess_HOOK().
 */
function THEME_preprocess_TEMPLATENAME(&$variables) {
  // Remove the <p>tags inside <dt> and <dd> tags.
  if ($text = $variables['items'][0]['content']['#text']??NULL) {
    if (str_contains($text, '<dt')) {
      $result = preg_replace(
        pattern: '#<(dt|dd)\s*>\s*<p>(.*?)</p>\s*</\1>#si',
        replacement: '<$1>$2</$1>',
        subject: $text
      );
      $variables['items'][0]['content']['#text'] = $result;
    }
  }
}

But be careful, for complex scenarios you go better with the DOM-API.

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.