quill-better-table
quill-better-table copied to clipboard
Context menu does not properly work in Blazor
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.