<p>` tags are adding instead of table.

[akshaya]

I'm working in React JS apps, <p> tags are adding instead of table. I tired exposing quill js file in index.html file. but still facing same issue. Can I get help in resolving this issue.

import React, { useEffect, useMemo, useRef, useState } from "react";
import ReactQuill, { Quill } from "react-quill-with-table";
import QuillBetterTable from "quill-better-table";
import "react-quill-with-table/dist/quill.snow.css";
import "quill-better-table/dist/quill-better-table.css";

Quill.register({ "modules/better-table": QuillBetterTable });

export default function Editor() {
  const reactQuillRef = useRef(null);

  const insertTable = () => {
    const editor = reactQuillRef.current.getEditor();
    const tableModule = editor.getModule("better-table");
    tableModule.insertTable(3, 3);
  };

  useEffect(() => {
    const editor = reactQuillRef.current.getEditor();
    const toolbar = editor.getModule("toolbar");
    toolbar.addHandler("table", () => {
      insertTable();
    });
  }, []);

  const modules = useMemo(
    () => ({
      table: false,
      "better-table": {
        operationMenu: {
          items: {
            unmergeCells: {
              text: "Another unmerge cells name"
            }
          }
        }
      },
      keyboard: {
        bindings: QuillBetterTable.keyboardBindings
      },
      toolbar: [
        [
          "bold",
          "italic",
          "underline",
          "strike",
          { align: [] },
          { script: "sub" },
          { script: "super" },
          { list: "ordered" },
          { list: "bullet" },
          { indent: "-1" },
          { indent: "+1" }
        ], // toggled buttons
        ["table"]
      ]
    }),
    []
  );
  return (
    <div>
      <ReactQuill ref={reactQuillRef} modules={modules} theme="snow" />
    </div>
  );
}

[Alexander Kleshcheov]

Hey, if this still relevant to you or anyone else - make sure you have 1 instance of Quill in your node_modules and its version is ^2.0.0-dev.3. In my case I had wrong version and then 2 instances of Quill, one in root node_modules and the other in react-quill-with-table also had its own version:

node_modules/quill <- 1st instance
node_modules/react-quill-with-table/node_modules/quill <- 2nd instance

[Febriyoga BS]

Hey, if this still relevant to you or anyone else - make sure you have 1 instance of Quill in your node_modules and its version is ^2.0.0-dev.3. In my case I had wrong version and then 2 instances of Quill, one in root node_modules and the other in react-quill-with-table also had its own version:

node_modules/quill <- 1st instance
node_modules/react-quill-with-table/node_modules/quill <- 2nd instance

i confuse with your explanation, so what should i do if i have this dependencies (that have Quill instance):
"quill": "^2.0.0-dev.3",
"react-quill": "^2.0.0",
"react-quill-with-table": "^1.3.3",

(?)

[Alexander Kleshcheov]

You have correct dependencies in package.json (I have the same setup). Remove package.lock and node_modules and reinstall everything.