New Major Version of the Neos UI

Large areas of the Neos UI have been re-written with TypeScript and CKEditor 5 has become the default editor

– Written by


TL;DR

  1. We have re-written major parts of the Neos UI with TypeScript. This will help us prevent bugs.

  2. We have fixed 57 bugs along the way (in 290 commits with 11,432 additions and 17,435 deletions!)

  3. It's easy to upgrade, the new major version has only a few breaking changes.

  4. 2.x releases are Neos 3.3 compatible; 3.x releases are compatible with Neos 4.x.

  5. CKEditor 5 is now the default text editor. It's cool, check it out!

  6. Edge and IE11 are finally supported!

TypeScript Conversion

At the last code sprint in Salzburg, we sat down together and tried to analyze, how to make UI development less error-prone. We looked back at the last 100 bugfixes, and it appeared that about 50% of them had something to do with type safety (undefined is not a function and the like). This is exactly the problem, that TypeScript claims to address.

We have split the work to convert the whole app into smaller chunks, and started with re-writing all the leaf packages of our UI (i.e. packages that are used by other packages, but that in turn don't require anything else).

The task proved to be too huge to tackle in a single code sprint, so the UI team had to apply for some of the budget donated by the community and was able to invest over a hundred more hours to finish the conversion of the leaf packages.

By today the conversion process is far from being over, but we have laid a solid foundation based upon which we can incrementally continue the effort to make the whole of UI type-safe. While the biggest benefits from the conversion may be reaped once we have converted the entire codebase, even to this point the conversion to TypeScript already helped us to fix a number of bugs that were sneaking under the hood.

So converting a huge codebase to TypeScript is far from being a piece of cake, but we feel like it was a good investment into the future stability of the Neos UI.

CKEditor 5 is now the default editor

Half a year ago we integrated CKEditor 5 into Neos CMS. Now we are making it the default editing experience.

The integration is feature-complete and shouldn't cause any pain while upgrading, except for one issue: if you used table headers in CKEditor 4, the markup is currently not compatible with CKEditor 5 and may cause issues. You may either migrate the markup manually or wait until we try to fix this issue and switch back to CKEditor 4.

Naturally CKEditor 4 plugins are not compatible with version 5, so you would have to re-write them or find alternatives. Luckily it is much easier to write CKEditor 5 plugins and the API is much slimmer.

If you have decided to stay with CKEditor 4 for now, you may switch the default editor back by putting this config into Settings.yaml:

Neos:
  Neos:
    Ui:
      defaultInlineEditor: 'ckeditor'

Edge and IE11

Nobody likes developing for Microsoft browsers, and it seems we are no exception. This time we got ourselves together and fixed the support for Edge and IE11. Keep in mind that IE11 is not supported by CKEditor 5, so in order to use it you would have to switch back to CKEditor 4, which still supports it. We really don't recommend it, but if you desperately need to support IE11, now you have the option!

Breaking Changes

Besides changing the default text editor, we have a few changes in the UI Extensibility API. Only the UI extension authors should be concerned with this, all the rest can just upgrade without doing any extra work! See the list of breaking changes at the release page.

Have fun doing awesome things with now improved Neos!

Always yours,
Neos UI team