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

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

Open
Volodymyr1011101 opened this issue Jul 26, 2023 · 0 comments

Comments

@Volodymyr1011101
Copy link

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)

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

1 participant