I created a custom Inline Blot in my Quill editor that I want to use to listen for the keypress event on nodes. However, I am facing a problem where the keypress event is never fired, even though the click event works perfectly fine.
Below is the code snippet:
const Inline = Quill.import('blots/inline');
class Editable extends Inline {
static create(value: any) {
const node = super.create();
node.setAttribute('contenteditable', true);
node.setAttribute('editable', value);
node.addEventListener('keypress', (e: any) => {
alert('pressed'); // this doesn't work
});
node.addEventListener('click', (e: any) => {
alert('clicked'); // this works
});
return node;
}
}
Editable.blotName = 'editable';
Editable.tagName = 'edit';
Quill.register(Editable);
What could be the issue here?
UPDATE
After some research, I discovered the Keyboard Module.
const bindings = {
enter: {
key: 13,
shiftKey: null,
handler: () => {
const range = this.quill.getSelection(true);
if (range && !this.editable(range.index)) {
this.quill.insertText(range, '\n');
}
}
}
};
this.quill = new Quill('#editor-container', {
modules: {
keyboard: {
bindings
},
toolbar: '#toolbar'
},
theme: 'snow'
});