TYPO3 Core

The highlight module allows to set colors and backgrounds for text selections.
In CKEditor4 it was nessesary to define a styleset to enable text-highlights.

stylesSet:
    - { name: "Muted", element: "span", attributes: { 'class': 'text-muted' } }
    - { name: "Primary", element: "span", attributes: { 'class': 'text-primary' } }
    - { name: "Secondary", element: "span", attributes: { 'class': 'text-secondary' } }
    - { name: "Tertiary", element: "span", attributes: { 'class': 'text-tertiary' } }
    - { name: "Quaternary", element: "span", attributes: { 'class': 'text-quaternary' } }
    - { name: "Success", element: "span", attributes: { 'class': 'text-success' } }
    - { name: "Info", element: "span", attributes: { 'class': 'text-info' } }
    - { name: "Warning", element: "span", attributes: { 'class': 'text-warning' } }
    - { name: "Danger", element: "span", attributes: { 'class': 'text-danger' } }

Add basic migrations for common frameworks like bootstrap to the new highlight definition format,
instead of adding them to the new styles section.

The highlight plugin has 2 types of markers that can be used. "marker" and "pen"
- Marker is used as background
- Pen is used as text color

Currently it is unknown if the model is fixed or it can be extended with custom values

Example definitions:

highlight.options = [
    { 
        model: 'primaryMarker', 
        class: 'bg-primary', 
        title: 'Primary Marker', 
        color: 'var(--bs-primary)', 
        type: 'marker' 
    }
]

highlight.options = [
    { 
        model: 'primaryPen', 
        class: 'text-primary', 
        title: 'Primary Pen', 
        color: 'var(--bs-primary)', 
        type: 'pen' 
    }
]