soccerloway / quill-better-table

Module for better table in Quill, more useful features are supported.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

TypeError: Cannot read properties of null (reading 'descendants')

Volodymyr1011101 opened this issue · comments

When i create a table and change some cell and click another cell receive error
Cannot read properties of null (reading 'descendants')
TypeError: Cannot read properties of null (reading 'descendants')
at table_selection_TableSelection.correctBoundary (http://localhost:3000/static/js/bundle.js:72113:45)
at table_selection_TableSelection.mouseDownHandler (http://localhost:3000/static/js/bundle.js:72089:16)
image
if i click outside of table than error disapear to the next time when i change cell again error is comeback
"dependencies": {
"@reduxjs/toolkit": "^1.9.5",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^14.0.0",
"@testing-library/react-hooks": "^8.0.1",
"@testing-library/user-event": "^13.2.1",
"@types/jest": "^27.0.1",
"@types/js-cookie": "^3.0.3",
"@types/node": "^16.7.13",
"@types/react": "^18.0.0",
"@types/react-beautiful-dnd": "^13.1.4",
"@types/react-dom": "^18.0.0",
"antd": "^5.6.3",
"axios": "^1.4.0",
"eslint": "^8.44.0",
"eslint-config-prettier": "^8.8.0",
"eslint-plugin-react": "^7.32.2",
"i18next": "^23.2.6",
"i18next-resources-for-ts": "^1.2.1",
"immutability-helper": "^3.1.1",
"jest": "^29.5.0",
"js-cookie": "^3.0.5",
"katex": "^0.16.8",
"lodash": "^4.17.21",
"moment": "^2.29.4",
"quill": "2.0",
"quill-better-table": "latest",
"react": "^18.2.0",
"react-beautiful-dnd": "^13.1.1",
"react-dnd": "^16.0.1",
"react-dnd-html5-backend": "^16.0.1",
"react-dom": "^18.2.0",
"react-google-recaptcha-v3": "^1.10.1",
"react-hook-form": "^7.45.1",
"react-i18next": "^13.0.2",
"react-phone-input-2": "^2.15.1",
"react-quill": "^2.0.0",
"react-quill-with-table": "^1.3.3",
"react-redux": "^8.1.1",
"react-router-dom": "^6.14.0",
"react-scripts": "5.0.1",
"styled-components": "^6.0.1",
"typescript": "^4.4.2",
"web-vitals": "^2.1.0"
},
There is my component
import { useMemo, useRef } from 'react'
import ReactQuill, { Quill } from "react-quill-with-table";
//@ts-ignore-next-line
import QuillBetterTable from "quill-better-table";
import 'react-quill/dist/quill.snow.css'
import { createGlobalStyle } from 'styled-components'
import { stylesConfig } from 'application/lib/stylesConfig'
import 'quill-better-table/dist/quill-better-table.css';
Quill.register("modules/better-table", QuillBetterTable);

type ReactQullPropsType = {
value: string
setTextValueToStore: (e: any) => void
}
function ReactQuillComponent({
value,
setTextValueToStore,
}: ReactQullPropsType) {
const ref = useRef<ReactQuill | undefined>(undefined);

const modules = useMemo(() => (
{
// history: {
// // Включаем модуль истории
// delay: 1000, // Задержка перед сохранением состояния
// maxStack: 500, // Максимальное количество шагов в истории
// userOnly: true, // Учитывать действия только пользователя (отключено по умолчанию)
// },
toolbar: [
// [{ 'size': ['small', false, 'large', 'huge'] }],
[{ header: [false, 2, 3, 4, 5, 6] }], // custom dropdown
[{ align: [] }],
[{ color: [
stylesConfig.colors.color1,
stylesConfig.colors.color2,
stylesConfig.colors.color3,
stylesConfig.colors.color4,
stylesConfig.colors.color5,
stylesConfig.colors.color6,
stylesConfig.colors.color7,
stylesConfig.colors.color8,
stylesConfig.colors.color9,
stylesConfig.colors.color10,
stylesConfig.colors.color11,
stylesConfig.colors.color12,
stylesConfig.colors.color13,
] }], // dropdown with defaults from theme
['table'],
['bold', 'italic', 'underline', 'strike'], // toggled buttons
[{ list: 'ordered' }, { list: 'bullet' }],
['link'],
[{ indent: '-1' }, { indent: '+1' }], // outdent/indent
['code-block'],
],
table: false,
"better-table": {
operationMenu: {
items: {
unmergeCells: {
text: 'Another unmerge cells name'
}
}
}
},
keyboard: {
bindings: QuillBetterTable.keyboardBindings
},
clipboard: {
// toggle to add extra line breaks when pasting HTML:
matchVisual: false,
},
}
), [])
/*

  • Quill editor formats
  • See https://quilljs.com/docs/formats/
    */
    const formats = [
    'header',
    'font',
    'size',
    'bold',
    'italic',
    'underline',
    'align',
    'strike',
    'script',
    'blockquote',
    'background',
    'list',
    'bullet',
    'indent',
    'link',
    'image',
    'video',
    'color',
    'code-block',
    ]
    const addTable = () => {
    const editor = ref.current!.getEditor();
    const tableModule = editor.getModule("better-table");
    tableModule.insertTable(3, 3);
    };

return (
<>

<button
type="button"
onClick={() => {
addTable();
}}
>
Add Table

<ReactQuill
theme="snow"
value={value}
modules={modules}
// formats={formats}
//@ts-ignore-next-line
ref={ref}
placeholder="Type text"
onChange={(e) => setTextValueToStore(e)}
/>
</>
)
}
export default ReactQuillComponent
Please Help me if you can)