LoadHTMLContent gives 'Cannot read property 'emit' of undefined'

[danielheddelin]

I have a texteditor defined like this:

BlazoredTextEditor TextEditor { get; set; }

And the markup:

<BlazoredTextEditor @ref="@TextEditor">
	<ToolbarContent>
		...
	</ToolbarContent>
	<EditorContent>
		<h4>This Toolbar works with HTML</h4>
		<a href="http://BlazorHelpWebsite.com">
			BlazorHelpWebsite.com
		</a>
	</EditorContent>
</BlazoredTextEditor>

In an @OnClick handler I do the following:

string QuillContent = @"<div>yada</div>";
await TextEditor.LoadHTMLContent(QuillContent);

What happens is - the TextEditor's content is removed and replaced by the default placeholder text "Compose an epic..." and the console says

quill.js:4329 Uncaught TypeError: Cannot read property 'emit' of undefined
    at Scroll.update (quill.js:4329)
    at MutationObserver.<anonymous> (quill.js:7118)

This is the js that crashes:

 if (mutations.length > 0) {
     this.emitter.emit(_emitter2.default.events.SCROLL_BEFORE_UPDATE, source, mutations);
 }

I can't think of a much simpler example but it doesn't seem to work anyhow.

[ADefWebserver]

Please download the code and see if the sample run for you.
The examples are here:

https://github.com/Blazored/TextEditor/blob/main/samples/BlazorServerSide/Pages/Index.razor

    public async void SetHTML()
    {
        string QuillContent =
            @"<a href='http://BlazorHelpWebsite.com/'>" +
            "<img src='images/BlazorHelpWebsite.gif' /></a>";

        await this.QuillHtml.LoadHTMLContent(QuillContent);
        StateHasChanged();
    }

[danielheddelin]

Thanks for the response. Okay so I've figured out when the problem occurs.

I was in the belief that you could load the Quill editor with any HTML content, but this is definitely not the case.

Try editing your example - replace the img with a simple div, and the same error occurs.
It seems like what happens beneath

loadQuillHTMLContent: function (quillElement, quillHTMLContent) {
            return quillElement.__quill.root.innerHTML = quillHTMLContent;
        },
```
causes this.

[ADefWebserver]

Thank you for following up.

Yeah we just set quill.root.innerHTML and if it works it works, if it doesn't then it isn't support by Quill.js (and Quill.js is not so happy with < div >s - it wants you to use the Delta format)

It was a deliberate decision to implement a 'minimal wrapper' around Quill.js.

You will find other Blazor Quill implementations that take a more 'opinionated approach'. I believe this is a mistake because we don't have control over Quill.js so for many use cases the 'wrapper' causes issues.

The negative of this decision is that situations like this can arise. However, in all cases I have found an acceptable workaround.