How do you get the cursor below the template?

Hi porchlight,

Can you please check the linked items? I already mentioned the following answer in issue 3402691 💬 Inserted HTML template goes wrong Closed: works as designed .

The reason for this is a standard behavior of the CKEditor. If you insert the heading, you remain in the current DIV.

You can reproduce this by simply switching to a new line after inserting the first heading and continuing to write there. Here you remain in the current DIV. The following template is therefore also inserted within the first DIV.

You can solve this by adapting your templates as follows (add the "<p>&nbsp;</p>" after the template-div):

[
    {
        "title": "Heading2",
        "icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M8 16h8v2H8zm0-4h8v2H8zm6-10H6c-1. 1 0-2 .9-2 2v16c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z\"/></svg>",
        "description": "Insert heading2 tags for this site.",
        "html": "<div class=\"o-title__border\"><h2 class=\"o-title__xl\">Heading2</h2></div><p>&nbsp;</p>"
    },
    {
        "title": "Heading3",
        "icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M8 16h8v2H8zm0-4h8v2H8zm6-10H6c-1. 1 0-2 .9-2 2v16c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z\"/></svg>",
        "description": "Insert heading3 tags for this site.",
        "html": "<div class=\"o-title__border2\"><h3 class=\"o-title__l\">Headingr3</h3></div><p>&nbsp;</p>"
    } 
] 

@dbielke1986 Nice! Thanks for the suggestion! That kinda solves it, but I think it creates other issues?

1. it prints an empty <p> tag in the textarea on the front-end page.
2. if you move your cursor to that <p> tag and then hit backspace, you erase that <p> tag and then you can get stuck in the template again
3. doesn't take into account textareas that already exist using these templates. If a textarea ends in one of these templates currently without the <p> then you still cannot get below the template.

Not trying to take it out on you! I know it's a ckeditor issue and I appreciate the suggestion; I just don't think that's going to be enough to appease my end-users.

@porchlight

You are absolutely right. All the points mentioned are correct and must be taken into account.
And you are also right to say that this is a CKEditor issue that we cannot solve on the module side.

The

is a WorkAround that at least helps to get out of the

@dbielke1986 that's totally fair. I figured it wasn't something we could solve in this module but was hoping maybe somebody had some trick to get around it. Anyways, all good. I'll monitor the other issues for a fix. I also noticed the ckeditor plugin pack https://www.drupal.org/project/ckeditor5_plugin_pack → has templates that may work, but not available until Drupal 10.3, so worse comes to worst I can wait for that. You can play with the templates on the ckeditor demo page https://ckeditor.com/docs/ckeditor5/latest/features/template.html - it looks like they incorporate widget functionality somehow.

Tested the templates provided by https://www.drupal.org/project/ckeditor5_plugin_pack → and they have the same issue...