Uncaught TypeError: Cannot read properties of undefined (reading 'next')

[Maifee Ul Asad]

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.

[Hao Wang]

Change
import "react-quill-with-table/dist/quill.bubble.css";
to
import 'quill-better-table/dist/quill-better-table.css';