Contrib.social

HTML tags are mixed when Enter is entered

Open on Drupal.org →
Created on 30 January 2024, 5 months ago
Updated 16 February 2024, 4 months ago

Problem/Motivation

HTML tags are mixed when Enter is entered.

Steps to reproduce

  1. Register the following 2 HTML templates

    2. Template 1
    <div class=\"o-title__border\"><h2 class=\"o-title__xl\">Heading2</h2></div><p>&nbsp;</p>
    Template 2
    <div class=\"o-title__border2\"><h3 class=\"o-title__l\">Heading3</h3></div><p>&nbsp;</p>

  2. When this template is inserted in order from CKEditor5, the HTML will look like this (works as expected)
    3. <div class="o-title__border">
    <h2 class="o-title__xl">
        Heading2
    </h2>
</div>
<div class="o-title__border2">
    <h3 class="o-title__l">
        Heading3
    </h3>
</div>
<p>
    &nbsp;
</p>
  3. After inserting Template 1, place the cursor immediately after "Heading" and press Enter. If I then insert Template 2, the HTML of Template 2 will be inside the div of Template 1, as shown below.
    4. <div class="o-title__border">
    <h2 class="o-title__xl">
        Heading2
    </h2>
    <div class="o-title__border2">
        <h3 class="o-title__l">
            Heading3
        </h3>
    </div>
    <p>
        &nbsp;
    </p>
</div>
<p>
    &nbsp;
</p>

Proposed resolution

With CKEditor4 and the CKEditor Template module, this did not occur and the templates were inserted individually in succession.
Of course, I understand that CKEditor5 and CKEditor5 Template are completely different from those.
I would like to know if this behavior is a specification of CKEditor5 or CKEditor5 Tempalate module or if there is a solution to the problem.

Remaining tasks

User interface changes

API changes

Data model changes

💬 Support request
Status

Closed: duplicate

Version

1.0

Component

Miscellaneous

Created by

🇯🇵Japan kentaono

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

Comments & Activities

  • Issue created by @kentaono
  • Status changed to Closed: duplicate 5 months ago
  • Comment 5 months ago →
    🇩🇪Germany dbielke1986

    Dear Kentaono,

    Thanks for bringing this issue to our attention. It seems to be a duplicate. Please take a look at this issue and my comment:

    https://www.drupal.org/project/ckeditor5_template/issues/3402691#comment... 💬 Inserted HTML template goes wrong Closed: works as designed

    If this is not the case, please feel free to reopen this issue again.

    BR
    Daniel

  • Comment 5 months ago →
    🇩🇪Germany dbielke1986

    After inserting Template 1, place the cursor immediately after "Heading" and press Enter.

    And that's exactly what I meant in the other comment. Here you get stuck in the div. This behavior has nothing to do with this module, but is the CKEditor itself.

    You COULD always make a line break before inserting a new template. But this would break the possibility of nested templates, which we should not do as it breaks backward compatibility.

  • Comment 5 months ago →
    🇯🇵Japan kentaono

    Hello Daniel,

    Thanks for the reply.
    I could understand what was happening.

    Best regards,
    Kentaro Ono

  • Comment 4 months ago →
    🇩🇪Germany dbielke1986

    This "trapped cursor" thing is an issue with CKEditor 5 in general, as reported here in core: [GHS] Allow the cursor to leave divs and other HTML elements at document start or end (3344462) 🐛 [GHS] Allow the cursor to leave s and other HTML elements at document start or end Postponed: needs info and upstream on CKEditor's github: [GHS] It is not possible to leave DIV element #10220 back in 2021 with sadly little movement. It happens whenever you try and use a <div> (or simmilar) in CKEditor 5.

contrib.social Blog FAQ Discussions
Production build 0.69.0 2024