serdarciplak / BlazorMonaco

Blazor component for Microsoft's Monaco Editor which powers Visual Studio Code.
https://serdarciplak.github.io/BlazorMonaco/
MIT License
458 stars 98 forks source link

Component is not recreated/rendered #129

Open Tealons opened 6 months ago

Tealons commented 6 months ago

I'm using Blazor server and added the editor like this on my AddScript page:

<StandaloneCodeEditor @ref="_editor" OnDidChangeModelContent="HandleInput" Id="my-editor-instance-id" CssClass="editor-500" ConstructionOptions="EditorConstructionOptions" />

I now see however that when I visit the same page the second time, the script I typed earlier is still there. It looks like the component is is persistent and not re-rendered when visiting the page for the second time? What is it that I'm missing here?

georgedaters commented 6 months ago

@Tealons I think I've experienced that same issue. In every page that uses the editor, try have the page implement the IDisposable interface then in the Dispose method call Editor.DisposeEditor() (where Editor is a reference to the StandaloneCodeEditorcomponent)

chrisonmoon commented 5 months ago

Hello - i have the same problem.

The solution with Dispose() did not work...

StephenOTT commented 5 months ago

Having the same issue.

public async ValueTask DisposeAsync()
    {
        await editor.DisposeEditor();
        editor.Dispose();
    }

or just

public async ValueTask DisposeAsync()
    {
        await editor.DisposeEditor(); 
   }

does NOT work.

StephenOTT commented 5 months ago

So:

doing (pulled from the readme)

private StandaloneEditorConstructionOptions EditorConstructionOptions(StandaloneCodeEditor editor)
{
    return new StandaloneEditorConstructionOptions
    {
        AutomaticLayout = true,
        Language = "javascript",
        Value = "function xyz() {\n" +
                "   console.log(\"Hello world!\");\n" +
                "}"
    };
}

/ using the Value prop seems to be what causes the problem.

If you create a method on the

<StandaloneCodeEditor @ref="@editor" Id="my-editor" ConstructionOptions="@EditorConstructionOptions" OnDidInit="InitEditor"/>

private async Task InitEditor()
    {
        await editor.SetModel(await Global.CreateModel("some content here", "javascript"));
    }

Then everything seems to work. And i did not have to implement IDisposable

Though it raises suspicions / concerns that there is a memory leak or something is being cached?

mmauri commented 4 months ago

The approach shown by @StephenOTT works, but I had to inject the JS runtime to make it work with Blazor server

private async Task InitEditor()
{
  await editor.SetModel(await Global.CreateModel(jsRuntime, "SELECT * FROM TABLE", "sql"));
}
adamdriscoll commented 3 months ago

I think this is the same issue as: #136

Seems like this PR would fix this: #137