Important: #107063 - CKEditor 5 v46.1.0: TypeScript imports and CSS changes
See forge#107063
Description
With the upgrade to CKEditor 5 v46.1.0, three relevant changes are made:
- The API naming of TypeScript type imports has changed a lot. Any custom
CKEditor 5 plugin using TypeScript type imports in their build chain will
need to be adapted to match these imports.
See https://ckeditor.com/docs/ckeditor5/latest/updating/nim-migration/migrating-imports.html
for a large table of "before->after" renames.
This is not considered a breaking change in context of TYPO3 integration,
because existing JavaScript modules will continue to work, as TypeScript
type imports are not part of the final output. Runtime imports that are
exposed by the
@ckeditor5/modules have not been changed and will continue to work.ckeditor-* - A new opinionated default CSS is used by CKEditor to apply some improved styling over contents displayed within the RTE interface. Most of these are overruled by TYPO3's default CSS integration though. Possible customizations need to respect this.
-
A few CSS classes have been renamed, see https://ckeditor.com/docs/ckeditor5/latest/updating/guides/update-to-46.html. These are for example referenced in custom CKEditor YAML configurations like the following diff, and need to replace the
colorsubkey:Configuration/RTE/Full.yaml - Before/After- { model: 'yellowMarker', class: 'marker-yellow', title: 'Yellow marker', type: 'marker', - color: 'var(--ck-highlight-marker-yellow)' + color: 'var(--ck-content--highlight-marker-yellow)' } - { model: 'greenMarker', class: 'marker-green', title: 'Green marker', type: 'marker', - color: 'var(--ck-highlight-marker-green)' + color: 'var(--ck-content-highlight-marker-green)' } - { model: 'redPen', class: 'pen-red', title: 'Red pen', type: 'pen', - color: 'var(--ck-highlight-pen-red)' + color: 'var(--ck-content-highlight-pen-red)' }Copied!
Affected installations
TYPO3 installation relying on custom or third-party CKEditor 5 TypeScript build chains, or CSS adaptations that no longer match the CKEditor 5 naming.
Possible Migration
Follow the CKEditor 5 upgrade guide to change CSS class names and TypeScript imports.