Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Two way binding with Editor #132

Closed
kvinita opened this issue May 15, 2024 · 2 comments
Closed

Two way binding with Editor #132

kvinita opened this issue May 15, 2024 · 2 comments

Comments

@kvinita
Copy link

kvinita commented May 15, 2024 •
edited
Loading

I have installed and configured the BlazorMonaco in my Blazor WebAssembly application as directed here: https://github.com/serdarciplak/BlazorMonaco

The editor is shown below:
image

Below is my razor file:
Home.razor

@page "/"

<PageTitle>Home</PageTitle>

<div class="parent">
    <div class="header">
        <button data-toggle="tooltip" data-placement="bottom" title="Format"
                @onclick=@(()=>FormatXml())>
            <svg version="1.1" class="fa-icon svelte-1mc5hvj" fill="white" width="16" height="16" aria-label="" role="presentation" viewBox="0 0 512 512" style=""><path d="M 0,32 v 64 h 416 v -64 z M 160,160 v 64 h 352 v -64 z M 160,288 v 64 h 288 v -64 z M 0,416 v 64 h 320 v -64 z"></path></svg>
        </button>

        <button data-toggle="tooltip" data-placement="bottom" title="Compact"
                @onclick=@(()=>CompactXml())>
            <svg version="1.1" class="fa-icon svelte-1mc5hvj" fill="white" width="16" height="16" aria-label="" role="presentation" viewBox="0 0 512 512" style=""><path d="M 0,32 v 64 h 512 v -64 z M 0,160 v 64 h 512 v -64 z M 0,288 v 64 h 352 v -64 z"></path></svg>
        </button>
    </div>
    <StandaloneCodeEditor Id="my-editor-id" ConstructionOptions="EditorConstructionOptions" CssClass="my-editor-class" />
</div>

@code {
    private StandaloneEditorConstructionOptions EditorConstructionOptions(StandaloneCodeEditor editor)
    {
        return new StandaloneEditorConstructionOptions
            {
                AutomaticLayout = true,
                Language = "xml"
            };
    }
}

On click of a button, I need to get the entire text in the editor and perform some operations on it and display the modified text in the editor. Basically I need a way to do two-way binding with the editor. How do I achieve this?

Let me know if additional details are required. Any leads would be appreciated.
@kvinita kvinita changed the title Styling issue Two way binding with Editor May 16, 2024
@CHL-NexAIoT
Copy link

My workarouond for now is to use a reference with GetValue and SetValue.
Simple example is like this:

<button data-toggle="tooltip" data-placement="bottom" title="Compact"
                @onclick=@(()=>CompactXml())>
<StandaloneCodeEditor @ref="editor" OnDidChangeModelContent="OnChange" />

@code {
    private StandaloneCodeEditor editor = null!;
    private string cache = "";

    protected override void OnInitialized()
    {
        editor = new();
    }

    private async Task OnChange()
    {
        cache = await editor.GetValue();
    }

    private async Task CompactXml()
    {
        // modify the cache
        await editor.SetValue(cache);
    }
}

@serdarciplak
Copy link
Owner

BlazorMonaco does not support two-way value binding as that would require the whole editor value to be passed between JS and Blazor on every value change. And it's even worse for Blazor server apps, as the data also needs to be transferred between the client and the server. As the value gets bigger, things would get even slower and completely break at some point.

As suggested in the above comment, you can manually call editor.GetValue() to get the value only when you need it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@serdarciplak @kvinita @CHL-NexAIoT