Once upon a time, somewhere back in mid 2015 I dived into a big adventure that came to an end (for the time being) - the core extension t3editor.

On my journey migrating a lot of stuff to jQuery and RequireJS during TYPO3 CMS 7 development, Benni Mack asked me to migrate the extension t3editor to jQuery as well. It sounded like an easy job - I've never been so wrong. The extension was literally a hybrid of any existing JavaScript framework that was available back then when the extension was created: CodeMirror, prototype, script.aculo.us and ExtJS.

The most challenging part was migrating our custom plugins for code completion to RequireJS, because of clean dependency handling. It also took some effort to get the layout of the code completion functional again. After two months (and a tiny patch in codemirror itself), the migration was done and the patch was merged. But, of course, there were still some glitches that were fixed in follow-up patches. Finally, the extension only uses CodeMirror, jQuery and RequireJS.

But behold - if that's the end of the story I wouldn't put it into a blog post.

The journey continues. We noticed that CodeMirror itself is really old with version 2.x, while version 5.x was out there in the wild, so the adventure continues. Several efforts were taken, all of them failed at a certain point, the latest one was after DevDays '16 in Nuremberg. After that, it went silent around t3editor. After taking weeks of thinking about how to refactor the whole codebase, I've started with one large pitfall that broke my neck before: Port everything that uses CodeMirror to FormEngine before doing any major overhaul.

Two parts of the backend were affected by this change: The "Template" and the "Filelist" backend modules. The "Template" module had a custom, dedicated edit view for sys_template records. That view is dropped and EditDocumentController is now used for this purpose. That was the easy patch. The more challenging part was the file handling stuff, as the forms had a custom structure and literally any file handling operation was affected by this. After 12 patch sets only, that patch was merged as well. Bonus: Both patches removed some hooks that were barely used at all (probably only by t3editor itself).

And now begins the fun stuff. The first thing I did was copying the most recent CodeMirror release into the core. After that, I removed any custom code and FormEngine hacks and, well, it wasn't so bad at all. The main library was working and then I noticed: CodeMirror comes with a lot of so-called "modes" (syntax highlighting) and add-ons. I didn't want to include all available modes and add-ons, so I've implemented a configuration structure that allows to register additional modes and add-ons on extension basis. After struggling with the add-ons's dependencies (even with RequireJS, you have to load any dependency by yourself), everything was fine so far. One of the last and most challenging parts was porting the syntax highlighting of TypoScript into the new CodeMirror structure. The API has completely changed and only small pieces of the old highlighting were re-usable. The second part was the so-called "hinting" (aka code completion). There was no API at all back then and the old approach was kind of hacked into CodeMirror (using a lot of custom events and drawing-into-the-DOM).

Refactoring t3editor brought a lot of benefits: The code base is up-to-date, it's faster and a lot of custom code has been dropped. Extension authors may use already existing modes and-addons or even write their own stuff. After the patch was finally merged, one huge change came in afterwards: I've learned that there is a minified distribution of CodeMirror that is 57k lines of code shorter than the original one.