quill-better-table icon indicating copy to clipboard operation
quill-better-table copied to clipboard

Context menu does not properly work in Blazor

Open Sahara150 opened this issue 4 years ago • 2 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.

Sahara150 avatar Jan 27 '21 12:01 Sahara150

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 avatar Jan 27 '21 14:01 Sahara150

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

Sahara150 avatar Feb 01 '21 15:02 Sahara150