I am getting an error which briefs- ERROR TypeError: **Cannot read property 'pop' of undefined** at new quill_better_table_BetterTable **(quill-better-table.js:2979)** quill.keyboard.bindings['Backspace'].pop()
inderjitbedionebcg opened this issue · comments
I am getting an error which briefs- ERROR TypeError: Cannot read property 'pop' of undefined
at new quill_better_table_BetterTable (quill-better-table.js:2979)
quill.keyboard.bindings['Backspace'].pop()
I have never seen this error. The error occurs here: The code line. If you use the correct version of quilljs ? Quill-better-table requires: quill 2.0.x-dev.x.
First , Thanks for your effort ^^
I have also same error on above. (I am programming in React)
package.json
"quill-2.0-dev": "^2.0.0-dev.3",
"quill-better-table": "^1.2.8",
better-table Module config
import React from 'react';
import ReactQuill, { Quill } from 'react-quill';
import { ImageUpload } from 'quill-image-upload';
import { ImageDrop } from 'quill-image-drop-module';
import ImageResize from 'quill-image-resize-vue';
import QuillBetterTable from 'quill-better-table';
import './quill.snow.css';
import {
toolbarOptions,
toolbarHandlers,
formats,
imageUploadConfig
} from './QuillConfig';
Quill.register('modules/imageUpload', ImageUpload);
Quill.register('modules/imageDrop', ImageDrop);
Quill.register('modules/imageResize', ImageResize);
Quill.register({ 'modules/better-table': QuillBetterTable }, true);
window.onbeforeunload = function() {};
class Editor extends React.Component {
constructor(props) {
super(props);
this.state = { text: '', theme: 'snow' }; // You can also pass a Quill Delta here
this.handleChange = this.handleChange.bind(this);
this.handleLength = this.handleLength.bind(this);
this.handleTableInsert = this.handleTableInsert.bind(this);
this.handleThemeChange = this.handleThemeChange.bind(this);
}
editorRef = React.createRef();
handleChange(delta) {
this.setState({ text: delta });
}
handleLength(value) {
console.log(`Editor HTML :${value}`);
}
handleChange2 = e => {
this.setState({ text: e });
console.log(this.state.text);
};
handleTableInsert = e => {};
handleThemeChange(newTheme) {
if (newTheme === 'core') newTheme = null;
this.setState({ theme: newTheme });
}
render() {
return (
<div>
<div class="btn-group">
<button id="insert-table" onClick={this.handleTableInsert}>
Insert table
</button>
<button id="get-table">Get table</button>
<button id="get-contents">Get contents</button>
</div>
<div className="text-editor">
<ReactQuill
id="scrolling-container"
ref={this.editorRef}
placeholder="Write something here..."
theme={this.state.theme}
modules={Editor.modules}
formats={Editor.formats}
value={this.state.text}
onChange={delta => this.handleChange(delta)}
getHTML={this.handleLength}
></ReactQuill>
</div>
</div>
);
}
}
Editor.modules = {
toolbar: {
container: toolbarOptions,
handlers: toolbarHandlers
},
imageDrop: true,
imageUpload: imageUploadConfig,
imageResize: {
displaySize: true
},
'better-table': {
operationMenu: {
items: {
unmergeCells: {
text: 'Another unmerge cells name'
}
}
}
},
keyboard: {
bindings: QuillBetterTable.keyboardBindings
}
};
Editor.formats = formats;
export default Editor;
Error Message is ...
TypeError: Cannot read property 'pop' of undefined
new quill_better_table_BetterTable
B:/Dev/10. WebASReact/web-as-client/node_modules/quill-better-table/dist/quill-better-table.js:4324
4321 | // expected my binding callback excute first
4322 | // I changed the order of binding callbacks
4323 |
> 4324 | let thisBinding = quill.keyboard.bindings['Backspace'].pop();
| ^ 4325 | quill.keyboard.bindings['Backspace'].splice(0, 1, thisBinding); // add Matchers to match and render quill-better-table for initialization
4326 | // or pasting
4327 |
Any news on this? Running into the same issue when programming in Vue, using Vue2-Editor.
@aseidma Vue2-editor is implemented based on Quill 1.3.6, and its image drop/resize function also depends on 1.3.6. But quill-better-table needs to depend on quill 2.0.x-dev.x, so it is not possible to use quill-better-table in Vue2-editor.
@yuniwahuni I just encountered the same problem. React Quill uses Quill version ^1.3.7 which is incompatible with Quill Better Table.
I have encoured same issue in angular using ngx-quill-editor. Any solutions in angular?
Thanks.
@rahul-geeks ngx-quill-editor uses Quill version "^1.3.1" which is incompatible with Quill Better Table.
I am sorry for that, quill 1.x cannot use quill-better-table yet. Not only because of this error, and also Container Blot changes a lot in quill 2.x.
same error, using react:
package.json :
"quill-2.0-dev": "^2.0.0-dev.3",
"quill-better-table": "^1.2.10"
error on this line:
let thisBinding = quill.keyboard.bindings['Backspace'].pop();
After a debug, it seems that when the keyboard binding is added using:
quill.keyboard.addBinding({ key: 'Backspace' }, ...}
Quill normalizes the key name and instead of Backspace it makes it the actual key code: 8
Therefor, when trying to access it by the name, it doesn't find it.
Hope this helps
Just curious, why this lib was built for quill v2 (dev)? I can't find any information about when quill v2 will be released. So, I just can't use this lib, because quill v2 is not production-ready yet, and I even don't know when it will be.
I also encountered such a problem. Is there a way to solve it now?
okay, its 2022... and no didn't find solution....
Using NEXTJS
For me the solution was use this https://www.npmjs.com/package/react-quill-with-table instead of https://www.npmjs.com/package/react-quill, and use this module https://github.com/volser/quill-table-ui for the table usage
Using NEXTJS
For me the solution was use this https://www.npmjs.com/package/react-quill-with-table instead of https://www.npmjs.com/package/react-quill, and use this module https://github.com/volser/quill-table-ui for the table usage
I met the same problem. Is it really works? I would really appreciate that if you have any example or screenshot to show what it looks like.
Any solution found?? for the above issue