WIP: Syntax highlighting in code block

[bjarnef]

Prerequisites

• I have added steps to test this contribution in the description below

Description

Attempt to use monaco API to format code in code block element, e.g. HTML, CSS, JavaScript/TypeScript, C# etc.
#16706

The additional code examples here are just inserted directly in query builder dialog just to test different formats.

chrome_M803a6EGAz.mp4

[github-actions]

Hi there @bjarnef, thank you for this contribution! 👍

While we wait for one of the Core Collaborators team to have a look at your work, we wanted to let you know about that we have a checklist for some of the things we will consider during review:

• It's clear what problem this is solving, there's a connected issue or a description of what the changes do and how to test them
• The automated tests all pass (see "Checks" tab on this PR)
• The level of security for this contribution is the same or improved
• The level of performance for this contribution is the same or improved
• Avoids creating breaking changes; note that behavioral changes might also be perceived as breaking
• If this is a new feature, Umbraco HQ provided guidance on the implementation beforehand
• 💡 The contribution looks original and the contributor is presumably allowed to share it

Don't worry if you got something wrong. We like to think of a pull request as the start of a conversation, we're happy to provide guidance on improving your contribution.

If you realize that you might want to make some changes then you can do that by adding new commits to the branch you created for this work and pushing new commits. They should then automatically show up as updates to this pull request.

Thanks, from your friendly Umbraco GitHub bot 🤖 🙂

[bjarnef]

@iOvergaard @leekelleher how can I reference/query <code> DOM element here? I tried using ref and query element in shadow DOM.

Or perhaps is can be it can query similar to this (although I couldn't find the id searching the repository):

Umbraco-CMS/src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/views/search/components/log-viewer-messages-list.element.ts

Lines 11 to 12 in fb9a9b3

	@query('#logs-scroll-container')
	private _logsScrollContainer!: UUIScrollContainerElement;

I think it is possible to register e.g. "Umbraco" as class to be highlighted in Monarch, but anyway it would be great for HTML, CSS, JS, JSON, XML etc.
https://microsoft.github.io/monaco-editor/monarch.html

We can probably also use the uui-button-copy-text component here now:
https://uui.umbraco.com/?path=/docs/uui-button-copy-text--docs

[bjarnef]

When I formatted the existing element with slotted content, it seems to apply, but with empty content in the wrapping HTML elements.

However when I use monaco.editor.colorize(this.textContent, "csharp") it seems to work - expect when slotted content updates in template query builder, which doesn't seem to re-render.

https://stackoverflow.com/a/53162251

[bjarnef]

@warrenbuckley since you previously have worked with Monaco editor, perhaps you have some ideas for this? 😊
If you want to play around with this, feel free to have a look and commit any suggestions 😎

[bjarnef]

It seems I first needed to call ´colorizeElement()` which includes the CSS for the wrapping HTML elements, but the slotted content wasn't rendered.

If I call colorize() afterwards it insert the HTML inclusive the actual text and the wrapping HTML elements are styled.

For JSON it may need a bit more configuration.

It seems it is also possible to use shiki to customize highlighter further:
https://shiki.matsu.io/packages/monaco