Uncaught TypeError: Cannot read properties of undefined (reading 'next')
maifeeulasad opened this issue · 3 comments
maifeeulasad commented
When trying to create a new column at right I get this error:
Uncaught TypeError: Cannot read properties of undefined (reading 'next')
at table_TableContainer.insertColumn (quill-better-table.js:1874)
at table_operation_menu_TableOperationMenu.handler (quill-better-table.js:2373)
insertColumn @ quill-better-table.js:1874
handler @ quill-better-table.js:2373
Part of package.json
:
...
"dependencies": {
"html-to-react": "1.3.4",
"quill-better-table": "1.2.8",
"react": "16.8.6",
"react-dom": "16.8.6",
"react-quill-with-table": "1.3.3",
"react-scripts": "3.0.1"
},
"devDependencies": {
"typescript": "3.3.3"
},
...
Code is simple:
import React, { useEffect, useState, useRef } from "react";
import ReactDOM from "react-dom";
import ReactQuill, { Quill } from "react-quill-with-table";
import QuillBetterTable from "quill-better-table";
import { Parser as HtmlToReactParser } from "html-to-react";
import "./styles.css";
import "react-quill-with-table/dist/quill.snow.css";
import "react-quill-with-table/dist/quill.bubble.css";
var htmlToReactParser = new HtmlToReactParser();
Quill.register("modules/better-table", QuillBetterTable);
const editorModules = {
table: false, // disable table module
"better-table": {
operationMenu: {
items: {
unmergeCells: {
text: "Another unmerge cells name"
}
}
}
},
keyboard: {
bindings: QuillBetterTable.keyboardBindings
}
};
function App() {
const editor = useRef();
const [text, setText] = useState("");
var reactElement = htmlToReactParser.parse(text);
useEffect(() => {
const editon = editor.current.getEditor();
//console.log(editon.getModule("toolbar"));
let tableModule = editon.getModule("better-table");
tableModule.insertTable(3, 3);
console.log(tableModule);
}, []);
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<ReactQuill
ref={editor}
value={text}
modules={editorModules}
onChange={(value) => setText(value)}
theme="snow"
/>
{reactElement}
</div>
);
}
This should be also available on this sandbox.
haofiltered commented
Change
import "react-quill-with-table/dist/quill.bubble.css";
to
import 'quill-better-table/dist/quill-better-table.css';