List editors by dynamic list and get back code changes

[vcarlucci]

Hi, I would like to list some individual snippets from a json. Each snippet will be displayed and can be changed. List and initialize the editors is simple and works just by the code here. But now, when I change something on one of the snippets, how I reise a "code changed event" and how I can identify and read out the code from the specific snippet? Is there a solution to achieve that?

Note: actual I use the construction in the html "@" part as local function, and for snippet identification I used the "ExtraEditorClassName", which I use for snippet identification with wich I will identify later code changes..

html

@foreach (var item in CodeList)
{
    @*Local function (constructor)*@
    StandaloneEditorConstructionOptions EditorConstruction(StandaloneCodeEditor editor)
    {
        return new StandaloneEditorConstructionOptions
                    {
                        Language = "csharp",
                        GlyphMargin = true,
                        ExtraEditorClassName = item.Key, // i took that for snippet identification item, will have to read back that somehow
                        Value = item.Value
                    };
                    @*EditorCollection.Add(editor); // used for later data collection when inside editor changes*@
    }
    @*Editor control*@
    <StandaloneCodeEditor ConstructionOptions="EditorConstruction" OnDidInit="EditorOnDidInit" OnContextMenu="OnContextMenu" OnDidChangeModelContent="OnDidChangeModelContent" />
}

code behind

@code {
    public Dictionary<string, string> CodeList { get; set; } = new Dictionary<string, string>();

    protected override async Task OnInitializedAsync()
    {
        await Global.SetTheme("vs-dark");
        CodeList.Add("SnippetKey1", "snippet1 code.." );
        CodeList.Add("SnippetKey2", "snippet2 code.." );
    }
    public async Task OnCodeChanged(object sender) **// <- Event not available, just shows the idea what I am looking for**
    {
        // code change detected event, write back the change to code collection
        StandaloneCodeEditor editor = (StandaloneCodeEditor)sender;
        CodeList[editor.ConstructionOptions.Method.Name] = await editor.GetValue(); // <- write back snippet kec / code (value)
    }
    public void OnDidChangeModelContent(ModelContentChangedEvent changed)
    {
        // code change devection, but no object reference available to get the information..
    }
}

[vcarlucci]

@serdarciplak Here the website view of how that somehow is listed, each editor with id and specific code which needs to be read back to "CodeList" when something changed (like description on top)

[vcarlucci]

@serdarciplak Perhaps this approach is a use case that could get its own sample page in your project