Multiple RichTextEditorHtml in module on same page

[vnetonline]

I am trying to use the RichTextEditorHtml in the module settings on the same module and when ... on first load it throws an error.

Can you please let me know how I can put multiple RichTextEditorHtml in the module setting of a module.

[sbwalker]

@vnetonline are you going to share details about the actual error?

[vnetonline]

Yes I will don't have the development laptop with me atm

[sbwalker]

@zyhfish do you know if there are any limitations to using multiple RichTextEditors on the same page? I am guessing that each TextEditorProvider would have to handle this internally ie. if a TextEditorProvider was using JavaScript to access specific input elements in the page then they would need unique IDs to be able to distinguish them. Although he did not mention it, I am assuming @vnetonline is using the default QuillJSEditor in his installation.

[vnetonline]

Yes I am using the default out of the box QuillJSEditor

Still done have access to my dev laptop as soon as I have access then I will update this discussion with the error I get on initial load.

But from memory it complains that it is undefined

[zyhfish]

Hi @sbwalker , yes, this need to be controlled in the text editor provider implementation.

For QuillJS, it should be a race condition, when it's loaded the first time, the backend will be called before the quilljs client libraries loaded completely, so that it will throw out a null reference exception.

[vnetonline]

here is the error finally have access to my dev laptop

An Unexpected Error Has Occurred In Amazing.Module.Payment.Request, Amazing.Module.Payment.Client.Oqtane: Could not find 'Oqtane.RichTextEditor.getQuillHTML' ('RichTextEditor' was undefined).
Error: Could not find 'Oqtane.RichTextEditor.getQuillHTML' ('RichTextEditor' was undefined).
    at http://localhost:44357/_framework/blazor.web.js:1:537
    at Array.forEach (<anonymous>)
    at l.findFunction (http://localhost:44357/_framework/blazor.web.js:1:505)
    at b (http://localhost:44357/_framework/blazor.web.js:1:5248)
    at http://localhost:44357/_framework/blazor.web.js:1:3041
    at new Promise (<anonymous>)
    at y.beginInvokeJSFromDotNet (http://localhost:44357/_framework/blazor.web.js:1:3004)
    at gn._invokeClientMethod (http://localhost:44357/_framework/blazor.web.js:1:62730)
    at gn._processIncomingData (http://localhost:44357/_framework/blazor.web.js:1:60119)
    at connection.onreceive (http://localhost:44357/_framework/blazor.web.js:1:53760)

[sbwalker]

@vnetonline I believe @zyhfish is correct - the problem is not that you are trying to use 2 RichTextEditors in the same component - the problem is that a race condition is occurring in your component, which is resulting in the razor component trying to invoke JS Interop methods before the JavaScript library has been loaded. How is your component calling the GetContent() method?

[vnetonline]

@sbwalker so how can I fix this race condition ??

[sbwalker]

@vnetonline this why I asked "How is your component calling the GetContent() method"? If you share some code it may be possible to provide some guidance.

[mdmontesinos]

This error has also been happening to me for quite a while

[sbwalker]

@mdmontesinos I assume your case is unrelated to having multiple RichTextEditor components in a component?

[mdmontesinos]

@sbwalker No, it actually also happens when I have multiple of them. The error only occurs sometimes on first load. If I receive the error, I just close it and navigate back to the component and it works.

This is my stacktrace:

An Unexpected Error Has Occurred In Organization.Module.Intranet, Organization.Client.Oqtane: Cannot read properties of null (reading '__quill')
TypeError: Cannot read properties of null (reading '__quill')
    at Object.getQuillHTML (http://localhost:44357/js/quill-interop.js:30:30)
    at http://localhost:44357/_framework/blazor.web.js:1:3244
    at new Promise (<anonymous>)
    at y.beginInvokeJSFromDotNet (http://localhost:44357/_framework/blazor.web.js:1:3201)
    at gn._invokeClientMethod (http://localhost:44357/_framework/blazor.web.js:1:62841)
    at gn._processIncomingData (http://localhost:44357/_framework/blazor.web.js:1:60316)
    at connection.onreceive (http://localhost:44357/_framework/blazor.web.js:1:53957)
    at i.onmessage (http://localhost:44357/_framework/blazor.web.js:1:82102)

And this my component (reduced to the relevant parts):

<div class="col mb-4 align-items-center">
    <Label For="lead" HelpText="Enter lead">Lead: </Label>
    <RichTextEditor Content="@_lead" AllowFileManagement=@false AllowRawHtml=@false @ref="@_leadRichTextEditor" />
    <ValidationMessage For="@(() => News.Lead)" class="text-danger" />
</div>

<div class="col mb-4 align-items-center">
    <Label For="content" HelpText="Enter content">Content: </Label>
    <RichTextEditor Content="@_content" AllowRawHtml=@false @ref="@_contentRichTextEditor"></RichTextEditor>
    <ValidationMessage For="@(() => News.Content)" class="text-danger" />
</div>

@code {
    public override SecurityAccessLevel SecurityAccessLevel => SecurityAccessLevel.Edit;

    private RichTextEditor _leadRichTextEditor = null!;
    private RichTextEditor _contentRichTextEditor = null!;
    private string _lead = string.Empty;
    private string _content = string.Empty;

    protected override async Task OnInitializedAsync()
    {
        try
        {
            ...

            _lead = Utilities.FormatContent(News.Lead, PageState.Alias, "render");
            _content = Utilities.FormatContent(News.Content, PageState.Alias, "render");
        }
        catch (Exception ex)
        {
            await logger.LogError(ex, "Error Loading News {NewsId} {Error}", _id, ex.Message);
            AddModuleMessage("Error Loading News", MessageType.Error);
        }
    }

    private async Task Save(EditContext editContext)
    {
        try
        {
            string lead = await _leadRichTextEditor.GetHtml();
            string content = await _contentRichTextEditor.GetHtml();
            News.Lead = Utilities.FormatContent(lead, PageState.Alias, "save");
            News.Content = Utilities.FormatContent(content, PageState.Alias, "save");
        }
        catch (Exception ex)
        {
            ...
        }
    }
}

[zyhfish]

Submitted PR #4636 to handle this scenario.

The root cause of this issue is that when there have multiple instances, they will register scripts with same bundle value, so for the second control, when load the scripts, the bundle name has already marked as loaded, so it will return directly, but no wait for really loaded in client.

[mdmontesinos]

Thanks, it seems to be working fine now!

[vnetonline]

I can also confirm that this change has fixed my issue as well thanks @zyhfish