Monaco editor to edit CSS for Richtext Editor

[bjarnef]

Currently we have a textarea to edit CSS in backoffice for Richtext Editor

However I wonder if we can use Monaco Editor to edit the CSS properties and get syntax highlighting:
microsoft/monaco-editor#953

There's a proof of concept to define a read-only range in the Monaco editor here:
https://gist.github.com/corbane/37c8751b6c60018a03fa4dd3ea48bf3e

[bjarnef]

I noticed there's a plugin named constrained-editor-plugin:
microsoft/monaco-editor#953 (comment)

https://github.com/Pranomvignesh/constrained-editor-plugin
https://www.npmjs.com/package/constrained-editor-plugin

[bjarnef]

@iOvergaard @loivsen @warrenbuckley it would be cool, if we could improve this with syntax highlighting for the editable part of the CSS in the new backoffice.
I recall when Angular was brand new many tutorials had something similar to fill in the missing parts of the code and the rest of the code was locked.

[bjarnef]

In this example it seems to use Monaco editor as well and the bottom part is readonly:
https://typehero.dev/aot-2023