soccerloway / quill-better-table

Module for better table in Quill, more useful features are supported.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Context menu does not properly work in Blazor

Sahara150 opened this issue · comments

I integrated your module this morning in our blazor texteditor.
Apparently creating a table works just fine, but when I try to add columns or rows, it always throws exceptions.
Adding column to the right: Unable to get property 'next' of undefined or null reference (line 1868,4 in your js)
Adding column to the left, row up or row down: Unable to get property 'offset' of undefined or null reference (line 313,4 quill.js)

Apparently there seems to be some issue with the scrolling property. I always clicked into one cell in the table, when opening context menu, as this is what I would suppose to expect. Regarding the fact, that it is Blazor, I am just using a standard HTML-structure with variable width at that point meaning:

<div @ref="@QuillElement" style="width: @(preview? "50%;" : "100%;")">
        @((MarkupString)EditorContent)
    </div>

The QuillElement then is passed to my Javascript and used as shown in your README:

createQuill: function (quillElement) {
        Quill.register({
            "modules/better-table": QuillBetterTable
        });
        const options = {
            debug: "info",
            modules: {
                toolbar: "#toolbar",
                table: false,
                "better-table": {
                    operationMenu: {
                        items: {
                            unmergeCells: {
                                text: "Another unmerge cells name"
                            }
                        }
                    }
                },
                keyboard: {
                    bindings: QuillBetterTable.keyboardBindings
                }
            },
            bounds: document.body,
            //more settings...
        };
        //set quill at the object we can call
        //methods on later
        const quill = new Quill(quillElement, options);
        //Table option
        const tableButton = document.querySelector(".ql-table");
        tableButton.addEventListener("click", function () {
            const range = quill.getSelection();
            if (range) {
                const tableModule = quill.getModule("better-table");
                tableModule.insertTable(3, 3);
            }
        });

So I guess it is not a specifically Blazor-related issue.

So I spent some more time debugging, and broke it down to the problem, that apparently bounds is null in the Quill "this" object, thats accessed, when asking for this.scroll.
As you can see, I explicitly defined them as document.body on create though. However as fas as I could see it in the internet, a lot of people face the problem in connection with tooltips.

Apparently it only does not work in Internet Explorer. Works fine with Chrome.