Blazor does not set content of an element accurately

[FLAMESpl]

Hi there,

I am working on json editor component in a blazor: https://github.com/FLAMESpl/oaklab-blazor-components-jsoneditor/tree/repeating-brace-bug

I have a razor class https://github.com/FLAMESpl/oaklab-blazor-components-jsoneditor/blob/repeating-brace-bug/src/OakLab.Blazor.Components.JsonEditor/JsonEditor.razor with content-editable pre element where I want to put my rich text.

<pre @ref=htmlElementRef contenteditable="true" class=@Class style=@GetCssStyle()>
    @foreach (var token in documentStructure.Tokens)
    {
        @if (token is JsonEditorBrace)
        {
            <span id=@GetNewId() class="oaklab-json-editor-brace">@token.Content</span>
        }
        else if (token is JsonEditorText)
        {
            <span id=@GetNewId() class="oaklab-json-editor-neutral">@token.Content</span>
        }
    }
</pre>

For now I only detect regular text and braces, surround them in spans and give them different colors.I am using input event to trigger re-parsing of the document, but I have one problem there. If I press keys other than braces then everything is ok, for example for text
testqwer my html tree is

<pre contenteditable="true" style="--oaklab-color-json-editor-neutral: black;--oaklab-color-json-editor-brace: brown; height: 300px; width: 600px" b-sas9tomkwx="" _bl_69d0565c-35ed-43dc-a20d-0eb0d179f94c="">
  <span id="_3f63180d-480d-4768-a43a-b8c41414e83a" class="oaklab-json-editor-neutral" b-sas9tomkwx="">testqwer</span>
</pre>

but as soon as I press a brace things become wonky. Pressing one brace results in firing event, my json document is parsed and then contents of <pre>'s are overwritten by blazor with new structure, but structure I see on a blazor does not correspond with resulting DOM in the browser. In short, content of editor should be:

<span id="_8492dc8c-c6d3-4817-b389-4a9be5121f55" class="oaklab-json-editor-neutral" b-sas9tomkwx="">testqwer</span>
<span id="_9bba21fb-4681-4e16-8098-dc2b8f3515d4" class="oaklab-json-editor-brace" b-sas9tomkwx="">{</span>

but instead is

<span id="_8492dc8c-c6d3-4817-b389-4a9be5121f55" class="oaklab-json-editor-neutral" b-sas9tomkwx="">testqwer{</span>
<span id="_9bba21fb-4681-4e16-8098-dc2b8f3515d4" class="oaklab-json-editor-brace" b-sas9tomkwx="">{</span>

(note duplicated brace in first span)

I have debugged it for very long time and when I peek documentStructure.Tokens variable, extra brace is just not there. I was thinking it might be issue with render tree diffing algorithm so every time I generate new guids for tokens ids, but it changed nothing.

Can someone help me with this? My repo contains two projects, one RCL with the editor component, and another one with server-side blazor app that hosts it.