We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
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
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, }, } ), []) /*
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)
The text was updated successfully, but these errors were encountered:
No branches or pull requests
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,
},
}
), [])
/*
*/
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)
The text was updated successfully, but these errors were encountered: