BlazorMonaco
BlazorMonaco copied to clipboard
Saving the editor value between page changes causes issues for some use-cases
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 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)
Hello - i have the same problem.
The solution with Dispose() did not work...
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.
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?
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"));
}
I think this is the same issue as: #136
Seems like this PR would fix this: #137