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

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

Open
maifeeulasad opened this issue Nov 19, 2021 · 1 comment

Comments

@maifeeulasad
Copy link

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

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

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

2 participants