Open maifeeulasad opened 2 years ago
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:
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.
Change import "react-quill-with-table/dist/quill.bubble.css"; to import 'quill-better-table/dist/quill-better-table.css';
import "react-quill-with-table/dist/quill.bubble.css";
import 'quill-better-table/dist/quill-better-table.css';
When trying to create a new column at right I get this error:
Part of
package.json
:Code is simple:
This should be also available on this sandbox.