Breaking: #96575 - Update to CodeMirror 6

See forge#96575

Description

TYPO3 Core now ships with CodeMirror v6. CodeMirror is used as editor in the TYPO3 Backend for editing HTML records, TypoScript templates and plaintext files in the file module.

Impact

Existing CodeMirror v5 addons and modes need to be adapted for CodeMirror v6 which brings a completely rewritten plugin infrastructure.

Affected installations

TYPO3 Installations with third-party extensions that register custom CodeMirror addons or modes.

Migration

Please consult https://codemirror.net/docs/migration/ for details on CodeMirror migration itself.

The TYPO3 integration has been adapted to reflect the changed modes and addons in the T3editor configuration files:

Adapt the mode configuration in Configuration/Backend/T3editor/Modes.php to use JavaScriptModuleInstruction statements that pick ES6 module for a specific language mode. A RequireJS module like codemirror/mode/css/css is now shipped in @codemirror/lang-css:

use TYPO3\CMS\Core\Page\JavaScriptModuleInstruction;

return [
    'css' => [
        'module' => JavaScriptModuleInstruction::create('@codemirror/lang-css', 'css')->invoke(),
        'extensions' => ['css'],
    ],
];
Copied!

Addons no longer bring cssFiles or options, but only consist of a module and an optional keymap statement, as the options interface is gone in CodeMirror v6 and stylesheets are to be embedded into JavaScript.

See following example for the registration of the history addon via Configuration/Backend/T3editor/Modes.php:

use TYPO3\CMS\Core\Page\JavaScriptModuleInstruction;

return [
    'history' => [
        'module' => JavaScriptModuleInstruction::create('@codemirror/commands', 'history')->invoke(),
        'keymap' => JavaScriptModuleInstruction::create('@codemirror/commands', 'historyKeymap'),
    ],
];
Copied!