C#•7mo ago

Preview Monaco editor input as html on blazor project

Hello i have a .net 8 blazor project where i want to write html inside the monaco code editor and then see it render live just below the editor. The problem is that im not shure about how events are handled coming from react. GPT is suggesting i use " @bind-Value="EditorValue"" but it the console then complains it cant find "value".

@page "/"

@code {
    private string EditorValue = "<div>hello</div>";

    private StandaloneEditorConstructionOptions EditorConstructionOptions(StandaloneCodeEditor editor)
    {
        return new StandaloneEditorConstructionOptions
            {
                Value = EditorValue,
                AutomaticLayout = true,
                Language = "html",
                Theme = "vs-dark",
            };
    }
}

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

<StandaloneCodeEditor @bind-Value="EditorValue" CssClass="my-editor-class" Id="my-editor-instance-id" ConstructionOptions="EditorConstructionOptions" />
<div>@(new MarkupString(EditorValue))</div>

@page "/"

@code {
    private string EditorValue = "<div>hello</div>";

    private StandaloneEditorConstructionOptions EditorConstructionOptions(StandaloneCodeEditor editor)
    {
        return new StandaloneEditorConstructionOptions
            {
                Value = EditorValue,
                AutomaticLayout = true,
                Language = "html",
                Theme = "vs-dark",
            };
    }
}

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

<StandaloneCodeEditor @bind-Value="EditorValue" CssClass="my-editor-class" Id="my-editor-instance-id" ConstructionOptions="EditorConstructionOptions" />
<div>@(new MarkupString(EditorValue))</div>

I might just be stupid but any help is appreciated,

1 Reply

Joschi•7mo ago

BlazorMonaco is just a wrapper around the JS implementation and it does not support 2-Way data binding. If you want to get the code as a string available in C# you need to fetch it from a ref to the editor.

c#


<MudPaper Square Class="container">
    <div class="code-container resizable">
        <StandaloneCodeEditor 
            @ref="@_editor"
            ConstructionOptions="@GetConstructionOptions"
            OnDidChangeModelContent="@Validate"/>
        @if (!IsValid)
        {
            <MudTextM3 Typo="TypoM3.Body" Color="Color.Warning">Too many characters (@_characterCount / @MaxCharacterCount)</MudTextM3>
        }
    </div>
</MudPaper>

@code {
    [Parameter] public string Code { get; set; } = "";

    [Parameter] public bool ReadOnly { get; set; }

    [Parameter] public int MaxCharacterCount { get; set; } = int.MaxValue;

    [Parameter] public bool IsValid { get; set; } = true;

    private StandaloneEditorConstructionOptions? _constructionOptions;
    
    private StandaloneCodeEditor? _editor;

    private int _characterCount;

    private StandaloneEditorConstructionOptions GetConstructionOptions(StandaloneCodeEditor codeEditor)
    {
        return new()
        {
            AutomaticLayout = true,
            Language = "javascript",
            ReadOnly = ReadOnly,
            Value = Code,
            Theme = "vs-dark",
            GlyphMargin = true
        };
    }

    public Task<string> GetCodeAsync() => _editor?.GetValue() ?? Task.FromResult("");
    public Task SetCodeAsync(string code) => _editor?.SetValue(code) ?? Task.CompletedTask;


    private async Task Validate(ModelContentChangedEvent arg)
    {
        if (_editor is null)
        {
            return;
        }
        
        var content = await GetCodeAsync();
        _characterCount = content.Length;
        IsValid = content.Length <= MaxCharacterCount;
    }

}

c#


<MudPaper Square Class="container">
    <div class="code-container resizable">
        <StandaloneCodeEditor 
            @ref="@_editor"
            ConstructionOptions="@GetConstructionOptions"
            OnDidChangeModelContent="@Validate"/>
        @if (!IsValid)
        {
            <MudTextM3 Typo="TypoM3.Body" Color="Color.Warning">Too many characters (@_characterCount / @MaxCharacterCount)</MudTextM3>
        }
    </div>
</MudPaper>

@code {
    [Parameter] public string Code { get; set; } = "";

    [Parameter] public bool ReadOnly { get; set; }

    [Parameter] public int MaxCharacterCount { get; set; } = int.MaxValue;

    [Parameter] public bool IsValid { get; set; } = true;

    private StandaloneEditorConstructionOptions? _constructionOptions;
    
    private StandaloneCodeEditor? _editor;

    private int _characterCount;

    private StandaloneEditorConstructionOptions GetConstructionOptions(StandaloneCodeEditor codeEditor)
    {
        return new()
        {
            AutomaticLayout = true,
            Language = "javascript",
            ReadOnly = ReadOnly,
            Value = Code,
            Theme = "vs-dark",
            GlyphMargin = true
        };
    }

    public Task<string> GetCodeAsync() => _editor?.GetValue() ?? Task.FromResult("");
    public Task SetCodeAsync(string code) => _editor?.SetValue(code) ?? Task.CompletedTask;


    private async Task Validate(ModelContentChangedEvent arg)
    {
        if (_editor is null)
        {
            return;
        }
        
        var content = await GetCodeAsync();
        _characterCount = content.Length;
        IsValid = content.Length <= MaxCharacterCount;
    }

}

I used the OnDidChangeModelContent event to validate something, but you could also use it to update the current Code string in your C#.

Gaming

Programming

Preview Monaco editor input as html on blazor project