BlazorMonaco icon indicating copy to clipboard operation
BlazorMonaco copied to clipboard

Component is not recreated/rendered

Open Tealons opened this issue 10 months ago • 6 comments

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?

Tealons avatar Apr 24 '24 12:04 Tealons

@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 StandaloneCodeEditor component)

georgedaters avatar Apr 26 '24 15:04 georgedaters

Hello - i have the same problem.

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

chrisonmoon avatar May 19 '24 16:05 chrisonmoon

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 avatar Jun 17 '24 19:06 StephenOTT

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?

StephenOTT avatar Jun 17 '24 20:06 StephenOTT

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"));
}

mmauri avatar Jun 18 '24 16:06 mmauri

I think this is the same issue as: #136

Seems like this PR would fix this: #137

adamdriscoll avatar Aug 05 '24 21:08 adamdriscoll