Enable tinymce accordion plugin for Plone 6.1

[1letter]

see plone/plone.base#62
see plone/plone.app.upgrade#324

What should changed?

IFilterSchema and ITinyMCEPluginSchema

What is also needed?

an upgradestep to inject the new values to registry

Optional, a filter for transforming the HTML markup of tinymce plugin to bootstraps accordion markup. But this filter can be implemented by anyone if required.

TinyMCE Accordion Plugin generates the following markup per default:

<details class="mce-accordion" open>
  <summary>The summary</summary>
  <p>Lorem Ipsum....</p>
</details>

Bootstrap 5 use this markup

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
       Summary
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        Lorem Ipsum....
      </div>
    </div>
  </div>
</div>

Upgrade step should contain:

def fix_vocabulary(context):

    from plone.base.interfaces.controlpanel import ITinyMCEPluginSchema
    from plone.registry.interfaces import IRegistry
    from zope.component import getUtility

    # Make sure the interface is registered
    
    registry = getUtility(IRegistry)
    # delete the old registry record, it holds the wrong vocabulary of the old schema
    del registry.records["plone.plugins"]
    # re-register the schema in the registry
    registry.registerInterface(ITinyMCEPluginSchema, prefix="plone")

[yurj]

Optional, a filter for transforming the HTML markup of tinymce plugin to bootstraps accordion markup

For a potential implementer, beware that you need the bootstrap js loaded in TinyMCE iframe (or at least a part of it or an helper js) to make it visually editable while TinyMCE has its own js.

Actually, the HTML filter is filtering out data-bs-parent, data-bs-target, data-bs-toggle attributes. Adding them to allowed attributes work only for data-bs-parent (maybe because it is an attribute of a div?). Disabling html filtering make the BS html code above work. If you remove the show class from the code above to have the accordion closed by default, with TinyMCE you cannot edit visually the content of the accordion.

This is an example of js helper:

(function($) {
  'use strict'; // Start of use strict

  $(document).ready(function() {

    // TinyMCE accordion template
    var collapseElementList = [].slice.call(document.querySelectorAll('#accordion-button-mce'))    
    var collapseList = collapseElementList.map(function (collapseEl) {      
      $(collapseEl).on('click', function() {
        $(this).toggleClass('collapsed');  // toggle the icon
        $(this).attr('aria-expanded', $(this).attr('aria-expanded') === 'true' ? false : true);
        var el = $(this).parents().next('div.accordion-collapse.collapse');
        return new bootstrap.Collapse(el, {
          toggle: true
        });
      });
    });
  });

})(jQuery); // End of use strict

[mauritsvanrees]

Everything has been merged, right? Or is something still left to be done?

One thing perhaps: shouldn't the upgrade step also be run in Plone 6.0? 6.0 and 6.1 use the same plone.base version.

Indeed, in a coredev 6.0 Plone Classic site that was created earlier:

• Go to TinyMCE control panel.
• Go to Plugins and Toolbar.
• Check accordion.
• Save.
• Get a traceback, ending with:

zope.schema._bootstrapinterfaces.WrongContainedType: ([ConstraintNotSatisfied('accordion', '')], 'value')

[1letter]

@mauritsvanrees yes, you are right, only if the next release version is 6.0.x and not 6.1. What should i do, i'm not sure? Should i remove the upgrade step from Plone 6.1 and move it to Plone 6.0 in plone.app.upgrades?

[mauritsvanrees]

It is needed in both places. Just copying the zcml lines should work fine.

[mauritsvanrees]

All merged, and will end up in the Plone 6.0 and 6.1 release that I have planned for this week.

But how do I use this? After I enable accordion, I see no change in TinyMCE.

[1letter]

All merged, and will end up in the Plone 6.0 and 6.1 release that I have planned for this week.

But how do I use this? After I enable accordion, I see no change in TinyMCE.

https://github.com/collective/collective.outputfilters.tinymceaccordion

@mauritsvanrees the changes in the Interface is only an infrastructure work. It opens the Option to use the accordion, but the real use should happen via an addon. It means not so much "bloat" in the defaults of tinymce.

[stevepiercy]

I started a new PR to capture documentation of required upgrade steps: plone/documentation#1655

[petschki]

I think we should add a description block to the tinymce controlpanel which tells the user, that he has to do several additional steps if he activates special plugins (eg. templates, accordion etc.) and add a link to the documentation there.