Add widgettypearound integration

Created on 17 July 2024, 4 months ago
Updated 19 September 2024, about 2 months ago

Problem/Motivation

In CKEditor 5, the equivalent of the magic line is the widgettypearound. It adds yellow border around the template and handles to add a new line before or after the inserted template.
Integration between CK Templates and this plugin was already implemented in https://www.drupal.org/project/ckeditor_templates/issues/3273358 ✨ CKEditor 5 support for Content Templates Needs review but did not make its way to beta1.

Proposed resolution

Added is a patch that simply brings the integration with widgettypearound back. There was an idea to make it configurable. The open question is: Should it be configurable per template or should it be a module-level configuration?

✨ Feature request
Status

Needs work

Component

Code

Created by

πŸ‡ΊπŸ‡ΈUnited States edwardsay

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

Comments & Activities

  • Issue created by @edwardsay
  • πŸ‡ΊπŸ‡ΈUnited States edwardsay
  • πŸ‡¬πŸ‡§United Kingdom jacobupal Leeds

    Amazing, thank you! Can't wait to try this... just need to untangle myself from my previous solution so I can test it.

    Configurable-per-template is ideal for now. Not every template will need the extra markup, as it may not contain divs or similar. E.g. I'm using this module to store common tokens, and no wrapper elements are needed there. Cleaner markup is going to be preferred wherever possible which a toggle would allow.

    In the long term we will want this to be addressed by this upstream issue in CKEditor5: https://github.com/ckeditor/ckeditor5/issues/6462 making these wrapper elements obsolete. In which case the fewer the instances of these wrapper elements being used now, the fewer will need to be removed later, also made possible by the use of a per-template-toggle. That is of course, if we ever get a solution to the upstream issue.

  • πŸ‡«πŸ‡·France steveoriol Grenoble πŸ‡«πŸ‡·

    Patch #2 works very well for me, thank you.

  • πŸ‡«πŸ‡·France steveoriol Grenoble πŸ‡«πŸ‡·

    A template like this :

    <div class="grid-x grid-margin-x">
        <div class="cell small-12 medium-6">
            <div class="zonetemplate">
                <p>colonne 1</p>
            </div>
        </div>
        <div class="cell small-12 medium-6">
            <div class="zonetemplate">
                <p>colonne 2</p>
            </div>
        </div>
    </div>
    

    Gives this render :

    <section class="ckeditor-template-wrapper">
        <div class="ckeditor-template-content">
            <div class="grid-x grid-margin-x">
                <div class="cell small-12 medium-6">
                    <div class="zonetemplate"><p>colonne 1</p></div>
                </div>
                <div class="cell small-12 medium-6">
                    <div class="zonetemplate"><p>colonne 2</p></div>
                </div>
            </div>
        </div>
    </section>
    

    But, it could be a little better if there was a way to do something like this:

    <section class="ckeditor-template-wrapper">
            <div class="grid-x grid-margin-x">
                <div class="cell small-12 medium-6">
                    <div class="ckeditor-template-content"><p>colonne 1</p></div>
                </div>
                <div class="cell small-12 medium-6">
                    <div class="ckeditor-template-content"><p>colonne 2</p></div>
                </div>
            </div>
    </section>
    
Production build 0.71.5 2024