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

[Volodymyr1011101]

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) 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 ( <> <Wrapper /> <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)