Syntax Highlighting only work when I refresh my page, not when I navigate to it.

I assume this is probably an easy one and I am doing something wrong as I am not a Blazor expert.

I have a page that needs to check the query string, and then call my database for the data for the editor (diff editor specifically).

I followed the examples and first I tried using OnDidInit="EditorOnDidInit"

I have tried putting all of my code in protected override async Task OnAfterRenderAsync(bool firstRender)

I have tried putting all of my code in protected override async Task OnInitializedAsync()

I have tried calling StateHasChanged() after all of the above.

Current Code:

@page "/diff"
@using System.Web
@using Microsoft.Data.SqlClient
@inject NavigationManager NavManager
@inject AppOptions appOptions
@inject IJSRuntime jsRuntime
@rendermode InteractiveServer

<style>
    .monaco-editor-container {
        height: 600px;
    }
</style>

<h3>Diff template #@templateId</h3>

@if (loading)
{
    <FluentProgressRing></FluentProgressRing>
}

@if(sourceEnvironmentEditorTemplate is not null && destinationEnvironmentEditorTemplate is not null)
{
    <table class="table">
        <thead>
            <tr>
                <th>Field</th>
                <th>@sourceEnvironment</th>
                <th>@destinationEnvironment</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>Description</th>
                <td>@sourceEnvironmentEditorTemplate.Description</td>
                <td>@destinationEnvironmentEditorTemplate.Description</td>
            </tr>
            <!-- More redacted for brevity -->
        </tbody>
    </table>

    <FluentDivider></FluentDivider>
}

<StandaloneDiffEditor @ref="_diffEditor"
                      Id="diff-editor"
                      OnDidInit="EditorOnDidInit"
                      ConstructionOptions="DiffEditorConstructionOptions" />

@code {
    private StandaloneDiffEditor _diffEditor = null!;

    private bool loading = true;

    private string? templateId;
    private string? sourceEnvironment;
    private string? destinationEnvironment;

    private EmailTemplate? sourceEnvironmentEditorTemplate;
    private EmailTemplate? destinationEnvironmentEditorTemplate;

    private async Task EditorOnDidInit()
    {
        await LoadData();

        await InitalizeMonaco();

        loading = false;

        StateHasChanged();
    }

    private async Task InitalizeMonaco()
    {
        // Get or create the original model
        TextModel original_model = await BlazorMonaco.Editor.Global.GetModel(jsRuntime, "diff-editor-originalModel");
        if (original_model == null)
        {
            var original_value = sourceEnvironmentEditorTemplate!.EmailMessage;
            original_model = await BlazorMonaco.Editor.Global
                .CreateModel(jsRuntime, original_value, "html", "diff-editor-originalModel");
        }

        // Get or create the modified model
        TextModel modified_model = await BlazorMonaco.Editor.Global.GetModel(jsRuntime, "diff-editor-modifiedModel");
        if (modified_model == null)
        {
            var modified_value = destinationEnvironmentEditorTemplate!.EmailMessage;
            modified_model = await BlazorMonaco.Editor.Global
                .CreateModel(jsRuntime, modified_value, "html", "diff-editor-modifiedModel");
        }

        // Set the editor model
        await _diffEditor.SetModel(new DiffEditorModel
            {
                Original = original_model,
                Modified = modified_model
            });

        await jsRuntime.InvokeVoidAsync(
            "blazorMonaco.editor.trigger",
            "diff-editor",
            "anyString",
            "editor.action.formatDocument");
    }

    private async Task LoadData()
    {
        var uri = new Uri(NavManager.Uri);
        var queryStringTemplateId = HttpUtility.ParseQueryString(uri.Query).Get("templateId");
        var queryStringSourceEnvironment = HttpUtility.ParseQueryString(uri.Query).Get("sourceEnvironment");
        var queryStringDestinationEnvironment = HttpUtility.ParseQueryString(uri.Query).Get("destinationEnvironment");

        var sourcEnvironmentConnection = emailTemplateAppOptions.DatabaseEnvironments.SingleOrDefault(x => x.Name == queryStringSourceEnvironment);

        var destinationEnvironmentConnection = emailTemplateAppOptions.DatabaseEnvironments.SingleOrDefault(x => x.Name == queryStringDestinationEnvironment);

        var sourceEnvironmentEditorTemplateFromDatabase = await GetEmailTemplateAsync(
            sourcEnvironmentConnection.ConnectionString,
            queryStringTemplateId);

        var destinationEnvironmentEditorTemplateFromDatabase = await GetEmailTemplateAsync(
            destinationEnvironmentConnection.ConnectionString,
            queryStringTemplateId);

        templateId = queryStringTemplateId;
        sourceEnvironment = queryStringSourceEnvironment;
        destinationEnvironment = queryStringDestinationEnvironment;
        sourceEnvironmentEditorTemplate = sourceEnvironmentEditorTemplateFromDatabase;
        destinationEnvironmentEditorTemplate = destinationEnvironmentEditorTemplateFromDatabase;
    }

    private async Task<EmailTemplate?> GetEmailTemplateAsync(
        string connectionString,
        string templateId)
    {
        using var connection = new SqlConnection(connectionString);

        var emailTemplate = await connection
            .QueryFirstOrDefaultAsync<EmailTemplate>(@"SELECT BLAH BLAH FROM BLAH WHERE BLAH", new { emt_id_no = templateId });

        return emailTemplate;
    }

    private StandaloneDiffEditorConstructionOptions DiffEditorConstructionOptions(StandaloneDiffEditor editor)
    {
        return new StandaloneDiffEditorConstructionOptions
        {
            //  ReadOnly = true,
        };
    }
}

I am navigating here from a button click like so:

   // My other interactive server page...

    private void ButtonClick(string x, string y)
    {
        NavManager
        .NavigateTo($"/Diff?sourceEnvironment={z}&templateId={x}&destinationEnvironment={y}");
    }

serdarciplak / BlazorMonaco

Syntax Highlighting only work when I refresh my page, not when I navigate to it. #134