Enabled Hover capability on Monaco Editor and fixed JSON serialization issue.

[veler]

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• New feature or enhancement
• UI change (please include screenshot!)
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Internationalization and localization
• Other (please describe):

What is the current behavior?

In preparation of @btiteux work on JWT Encoder / Decoder, I was curious to demonstrate how to use Monaco Editor API to show some text on a given span when the mouse pass the mouse hover it. Like this:

Unfortunately, I quickly faced a bug where the JSON we pass from .NET code to JavaScript code has some properties that aren't expected by Monaco.

To add a message on hover of a span in Monaco, we need to create an instance of MarkdownString.
The minimum needed to make it work is to set a string to its Value property. However, that wasn't working.

The reason why is that when we send the MarkdownString to the JavaScript using IJsRuntime.InvokeAsync, we would get a JSON like this:

{
    "value": "My text",
    "isTrusted": null,
    "supportThemeIcons": null,
    "supportHtml": null,
    "baseUri": null,
}

The problem is: in these methods from Monaco, it considers that this JSON isn't good if supportThemeIcons is null (instead of undefined, or with a boolean value).
As a consequence, the hover feature doesn't work.

What is the new behavior?

As a fix, I created a method PrepareJsInterop that takes any object and convert it into a dynamic object, where null properties are excluded.

See the documentation on top of PrepareJsInterop to understand why I took this approach :-)

With this method invoked, the generated JSON is now:

{
    "value": "My text"
}

Other information

I considered some other approaches mentioned in dotnet/aspnetcore#12685 but the best in my humble opinion was that PrepareJsInterop method.

In the future, once this PR is merged, creating a tooltip on hover in Monaco will be as simple as:

TextModel model = await _monacoEditor.GetModelAsync();

if (model is not null)
{
    var decoration = new ModelDeltaDecoration
    {
        Range = new Monaco.Range
        {
            StartLineNumber = 1,
            StartColumn = 1,
            EndLineNumber = 1,
            EndColumn = 10
        },
        Options = new ModelDecorationOptions
        {
            HoverMessage
                = new[]
                {
                    new MarkdownString()
                    {
                        Value = "hello world !"
                    }
                }
        }
    };

    await _monacoEditor.ReplaceAllDecorationsByAsync(new [] { decorations });
}

Quality check

Before creating this PR:

• Did you follow the code style guideline as described in CONTRIBUTING.md
• Did you build the app and test your changes?
• Did you check for accessibility? On Windows, you can use Accessibility Insights for this.
• Did you verify that the change work in Release build configuration
• Did you verify that all unit tests pass
• If necessary and if possible, did you verify your changes on:
  • Windows
  • macOS (DevToys 2.0)
  • Linux (DevToys 2.0)

[btiteux]

Hello, everything seems ok for me. I may have feedback or updates during the JWT Decode & Encode dev.

We will see at this moment.