Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Context menu does not properly work in Blazor #71

Open
Sahara150 opened this issue Jan 27, 2021 · 2 comments
Open

Context menu does not properly work in Blazor #71

Sahara150 opened this issue Jan 27, 2021 · 2 comments

Comments

@Sahara150
Copy link

Sahara150 commented Jan 27, 2021

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
Copy link
Author

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
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant