collective.outputfilters.tinymceaccordion 1.0a6

Addon for Plone 6 - Plone Outputfilter to transform TinyMCE Markup to Bootstrap5 Accordion

README

• README
  • Who need this addon?
  • Registry Settings
  • Install Addon via buildout
  • Install Addon via pip
  • Install a Testenvironment
  • Start the instance
  • Format and Linting
  • Testing

[!IMPORTANT]
This addon works only with Plone 6.1 and higher

For Plone 6.0 use plone.staticresources >= 2.2.x

Who need this addon?

This addon provide a transform for HTML Markup. TinyMCE Plugin "accordion" insert the following Markup

<details class="mce-accordion" open="open">
<summary>Accordion Summary 1</summary>
<p>Text in the collapsible 1</p>
</details>
<details class="mce-accordion" open="open">
<summary>Accordion Summary 2</summary>
<p>Text in the collapsible 2</p>
</details>

it will be transformed to Bootstrap5 Accordion Markup

<div class="accordion" id="acc-bs0">
 <div class="accordion-item">
  <h2 class="accordion-header" id="heading-0-0">
   <button aria-controls="collapse-0-0" aria-expanded="true" class="accordion-button" data-bs-target="#collapse-0-0" data-bs-toggle="collapse" type="button">
    Accordion Summary 1
   </button>
  </h2>
  <div aria-labelledby="heading-0-0" class="accordion-collapse collapse show" data-bs-parent="#acc-bs0" id="collapse-0-0">
   <div class="accordion-body">
    <p>Text in the collapsible 1</p>
   </div>
  </div>
 </div>
 <div class="accordion-item">
  <h2 class="accordion-header" id="heading-0-1">
   <button aria-controls="collapse-0-1" aria-expanded="true" class="accordion-button" data-bs-target="#collapse-0-1" data-bs-toggle="collapse" type="button">
    Accordion Summary 2
   </button>
  </h2>
  <div aria-labelledby="heading-0-1" class="accordion-collapse collapse show" data-bs-parent="#acc-bs0" id="collapse-0-1">
   <div class="accordion-body">
    <p>Text in the collapsible 2</p>
   </div>
  </div>
 </div>
</div>

Registry Settings

Some values in registry records are set:

"plone.plugins"

• accordion

plone.valid_tags

• summary
• details
• button

plone.custom_attributes

• open
• type
• data-bs-toggle
• data-bs-target
• aria-expanded
• aria-controls
• aria-labelledby
• data-bs-parent

Enable the accordion toolbar button in the Menu JSON Structure in the TinyMCE Controlpanel. Per default this addon enable the accordion option in the insert menu section.

Menu

{
    "insert": {
        "title": "Insert",
        "items": "link media | template hr | accordion"
    },
}

Please check the TinyMCE controlpanel that the values are set correct.

Install Addon via buildout

add collective.outputfilters.tinymceaccordion to your egg section in buildout.cfg

Install Addon via pip

pip install collective.outputfilters.tinymceaccordion

[!IMPORTANT]
The package is currently not on pypi please checkout the git repro

Install a Testenvironment

Create a configfile instance.yaml for cookiecutter

default_context:
  initial_user_name: "admin"
  initial_user_password: "admin"
  wsgi_listen: "localhost:8080"
  db_storage: direct
  debug_mode: true
  verbose_security: true

create a plone instance via pip

install cookiecutter, if needed

python3 -m venv ./venv
source venv/bin/activate
pip install mxdev
pip install -r requirements-mxdev.txt
pip install cookiecutter
cookiecutter -f --no-input --config-file instance.yaml https://github.com/plone/cookiecutter-zope-instance
deactivate

Start the instance

source venv/bin/activate
runwsgi -v instance/etc/zope.ini
deactivate

Instance Shutdown via ctrl+c

Format and Linting

use tox

tox -e init

tox -e format

tox -e lint

Testing

use tox

tox -e init

tox -e test

debugging a single test, run the a specific test

zope-testrunner -pvc --test-path=./src -t FilterFunctionalTest

Contributors

• 1letter

Changelog

1.0a6 (2024-04-28)

Internal:

• Update README @1letter

1.0a5 (2024-04-28)

Internal:

• Update README @1letter

1.0a4 (2024-04-28)

Internal:

• remove unused files @1letter

1.0a3 (2024-04-28)

Internal:

• Update configuration files @plone

1.0a3 (unreleased)

• Nothing changed yet.

1.0a2 (2024-04-19)

• Initial release. @1letter