2

I've created custom inline-blot and want to handle keyboard events on it.

In constructor i wrote code like this:

class FooBlot extends Inline {
  constructor(domNode, value){
    super(domNode, value);
    domNode.addEventListener('keydown', (event) => {this.keydown_handler(event)});
    domNode.addEventListener('click', (event) => {this.click_handler(event)});
  };

When i try to do something with my blot, only click event was handled, not keydown event.

You can see code example here. Open console, click on sometext and you will see "clicked" in console. But if you try to press some keyboard buttons, e.g. arrows, you will not see anything.

What the right way to handle keyboard events on my custom blot?

S. Zobov
  • 154
  • 2
  • 15
  • Please have a look at https://quilljs.com/docs/modules/keyboard/ – Arthur Araruna Nov 20 '17 at 03:49
  • @araruna unfortunately, this module unacceptable for me, because i want use this functionality on my own custom blots. Especially, on corresponding dom-node. I suppose, my problem has root here: https://stackoverflow.com/q/6752708/6822425 https://stackoverflow.com/q/26339719/6822425 Quill's editor container use html-attribute "contenteditable", and this attr has a bit weird behavior. – S. Zobov Nov 21 '17 at 08:25
  • Well, if you say so. But I believe that the context option, along with the fact that to every blot there is a corresponding format with the same name, would do the trick. – Arthur Araruna Nov 22 '17 at 13:22

1 Answers1

0

The right way to handle keyboard events is to use Keyboard Module

Simple example to handle Enter key: 

const bindings = {
  enter: {
    key: 13,
    shiftKey: null,
    handler: (range, context) => {
      // Handle enter
    }
  }
};

this.quill = new Quill('#editor-container', {
  modules: {
    keyboard: {
      bindings
    },
    toolbar: '#toolbar'
  },
  theme: 'snow'
});

UPDATE

Another way:

quill.root.addEventListener('keydown', evt => { // Your code goes here });

Dertsaf
  • 27
  • 8
  • Thank you for your answer, but it doesn't suite in my situation. As you can notice in this [comment](https://stackoverflow.com/questions/46620371/quill-how-to-handle-keyboard-events-on-custom-blot/51946404#comment81769938_46620371), I need a direct access to a corresponding blot, but the keyboard module give me a possibility to just handle an abstract keypress and I can't find information about on which blot it was pressed. – S. Zobov Aug 24 '18 at 08:54
  • You can add some logic in the handler and check if it is the right blot or not. To get a blot by index use [getLeaf](https://quilljs.com/docs/api/#getleaf-experimental) – Dertsaf Aug 24 '18 at 09:22