TypeError: Cannot read properties of null (reading 'getContent')

[SalomonHenke]

Specific code that throws the error:

const updateTinyVal = (id, val) => { if (getTiny() && getTiny().get(id).getContent() !== val) { getTiny().get(id).setContent(val); } };

Happens when i try to build it dynamically e.g.

This works:

foreach (var item in listOfItems)
{
    <Editor @bind-Text="item.Text"/>
}

This doesnt:

<Button OnClick="AddItemToListOfItems"/>
foreach (var item in listOfItems)
{
    <Editor @bind-Text="item.Text"/>
}

Not sure why.

[MRmP]

Same issue here when Editor was loaded multiple times

Maybe its related to #46 ?
I solved it temporary by just checking if get(id) is null or not.

[SalomonHenke]

Same issue here when Editor was loaded multiple times

Maybe its related to #46 ? I solved it temporary by just checking if get(id) is null or not.

So before you call it e.g. say you create it via a lifecycle? or do you update the tinymce code?

A working example would be so helpful!! @MRmP

[MRmP]

@if (EditMode)
{
    <Editor @bind-Text="item.Text"/>
}

When i toggle EditMode On the first time, it loads correctly, When i set EditMode false, i've also tried to call the Editors dispose method manually, and EditMode back to true, it fails.

My quick solution was the following in tinymce-blazor.js

const updateTinyVal = (id, val) => {
    if (getTiny()?.get(id)?.getContent() !== val) {
        getTiny()?.get(id)?.setContent(val);
    }
};

[tiny-ben-tran]

Sounds like a race condition where the wrapper tries updating the editor content before it has finished initialization.
I created an internal ticket to address this issue.

[tiny-ben-tran]

Ref: INT-3418