Show SVG icons for toolbar in configuration of richtext editor

[bjarnef]

Prerequisites

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

If there's an existing issue for this PR then this fixes #14324

Description

Currently the configuration of richtext didn't show icons for toolbar buttons in configuration after upgrade of TinyMCE v4 to v6 since the old font icons has been replaced by SVG icons: https://www.tiny.cloud/docs/tinymce/6/editor-icon-identifiers/

Further some commands doesn't use icons equal to the alias, e.g. hr has the icon horizontal-rule.svg.

TinyMCE has as service to get a specific icon set, e.g. tinymce.IconManager.get('default').icons to load default icons, but without an instance it just returned an empty object.

In the backoffice rebuild we could use module loading to import the icons (and maybe custom icons):
https://www.tiny.cloud/docs/tinymce/6/bundling-icons/

A few custom toolbar button use existing SVG icons registered in Umbraco, but I think it may be better to register a custom icon pack https://www.tiny.cloud/docs/tinymce/6/creating-an-icon-pack/ e.g. named umbraco and if developers add a custom plugin, they could probably register a custom icon pack as well.

For now it just load the default icon pack, so we get something similar which we had with TinyMCE v4.

By default the icons didn't have viewBox so the icons were not scalable, so I modified these using DOMParser:
https://www.fabiofranchino.com/log/using-domparser-to-create-html-and-svg-fragment/

Furthermore the vertical alignment of the fields at dimensions property was no longer reflected.

I also added a few custom commands to richtext editor via appsettings.json.
However with multiple commands it seems the first one doesn't show up in the toolbar configuration of richtext editor.

"RichTextEditor": {
  "Commands": [
    {
      "Alias": "forecolor",
      "Name": "Text color",
      "Mode": "Selection"
    },
    {
      "Alias": "hilitecolor",
      "Name": "Background color",
      "Mode": "Selection"
    },
    {
      "Alias": "blockquote",
      "Name": "Blockquote",
      "Mode": "Selection"
    },
    {
      "Alias": "wordcount",
      "Name": "Word count",
      "Mode": "All"
    },
    {
      "Alias": "emoticons",
      "Name": "Emoticons",
      "Mode": "All"
    },
    {
      "Alias": "template",
      "Name": "Template",
      "Mode": "All"
    },
    {
      "Alias": "codesample",
      "Name": "Code sample",
      "Mode": "All"
    }
  ],
  "Plugins": [
    "textcolor",
    "colorpicker",
    "codesample",
    "emoticons",
    "template",
    "wordcount"
  ]
}

I would have expected text color command to be shown. If I move block quote as first object, this is the one not shown.

Reported this issue in #14405

There may be a few more commands needed to map the icons.
https://www.tiny.cloud/docs/advanced/editor-command-identifiers/#plugincommands

I wonder if the icon should be part of command object in future as it may be simpler to map the icons or use custom registered icons?

{
    "Alias": "emoticons",
    "Name": "Emoticons",
    "Icon": "emoji",
    "Mode": "All"
}

If I have left the existing icon property based on icon name (mapped from command alias) and using the SVG icon from default icon set if found.

[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 this should fix what I mentioned at Codegarden 🤓
I think it may be better to register custom icons as separate icon pack(s) with TinyMCE v6?

The TinyMCE icons may be a bit smaller (visually) because the SVG contains whitespace.

[iOvergaard]

Looks good to me. I agree with your assessment that we could register our own icons as a custom icon pack with TinyMce, however, your workaround seems to work fine for the time being.

[nul800sebastiaan]

Cherry picked for v10/11 in 62fd860