[SOLVED] Typo3 backend t3editor custom mode

Typo3 backend t3editor custom mode

Versions: Typo3 v11, CodeMirror v5, Browser: Firefox

Summary: I have a Typo3 extension, for which I would like to include custom syntax highlighting. This should be possible using the builtin t3editor, as described in the docs.

However, in my case I can only get it to work by specifying a mode already delivered with typo3.

My setup:

For testing purposes, I've copied all the codemirror files over into my /Resources/Public/JavaScript/cm directory
In /Configuration/Backend/T3editor/Modes.php I am returning:

    return [
        'turtle' => [
            'module' => 'TYPO3/CMS/MyExtension/cm/mode/turtle/turtle',
        ],
    ];

In /Configuration/TCA/tt_content.php I am setting

    $GLOBALS['TCA']['tt_content']['types']['my_extension']['columnsOverrides']['bodytext']['config']['format'] = 'turtle';

Result: It shows a CodeMirror editor without any highlighting (black text). Console shows no errors. When debugging the turtle.js file in the browser I notice that the registering of the turtle mode (CodeMirror.defineMode) is executed, but the registered function is never used (i.e. the syntax highlighting isn't applied).

Variants that DO work

It seems I can't be too far off, because when I change any of the following, it works as expected:

When I change everything to css instead of turtle, it correctly displays css highlighting.
When I change the module to 'cm/mode/turtle/turtle' (thus loading the file directly from the t3editor, which includes all the modes), it correctly does turtle highlighting. (The reason I don't want this is that I'm writing my own mode which I need to add from my own extension)

Can anybody spot what I'm missing?

Solution

Figured out how to get it working, but not sure I understand why. Welcoming additional explanation. If inside the turtle.js file I change the parameters for require and define from "../../lib/codemirror" to "codemirror" -> everything works as expected.