soccerloway / quill-better-table

Module for better table in Quill, more useful features are supported.
MIT License
316 stars 119 forks source link

Context menu does not properly work in Blazor #71

Open Sahara150 opened 3 years ago

Sahara150 commented 3 years ago

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.

Sahara150 commented 3 years ago

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.

Sahara150 commented 3 years ago

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