use input instead of keydown event in Quill

Question

I have this unicode converter opensource application in which I'm using Quill. The issue right now is, the application works on PC browser but not on mobile. Reason is event.key passes Unidentified on mobile.

My attempt was to use catch the input event, when the pressed key can be converted, preventDefault() and insert the text manually to the editor based on event.data property. However, Quill writes the data on to the editor on keydown which needs to be stopped.

Current implementation:

@HostListener('keydown', ['$event'])
onKeyPress(event: KeyboardEvent) {
    this.editorService.onKeyDown.emit(event)
}

convert(event: KeyboardEvent): void {
    if (!this.converting) return

    /*
     * keydown event passes keys like backspace as "Backspace" this is to
     * try to eliminate those keys being typed literally on to the editor
     */
    if (event.key.length > 1) return

    event.preventDefault()
    const currentWord = this.editorComponent.getCurrentWord()
    const rule = this.converter.convert(event.key, currentWord)

    this.editorComponent.type(rule.result)
}

When I add a new event handler to input (to document), Quill already have typed the entered letter since keydown is emitted before input.

Is it possible to make it use input event to write stuff instead?

Does this [check if text change on Form Submit](https://stackoverflow.com/questions/50107174/quill-js-check-if-text-change-on-form-submit) answer your question? — Sameer, Jul 13 '22 at 19:37
I need it to be realtime. If I press 'a', I need to catch the event, preventDefault() so Quill will not insert 'a' to the editor, and insert 'අ' instead. One of the solutions is `text-change` event which I don't believe have a preventDefault or a way to prevent Quill from inserting the text — s1n7ax, Jul 13 '22 at 20:02

score -1 · Answer 1 · answered Jul 14 '22 at 04:58

Check out also this first get the keycode and cast it to String this might help, if not see the below answer.

I am able to prevent keydown event (example below)

this.editor = new Quill(editorEle, {
    ...
});

this.editor.root.addEventListener('keydown', evt => {
  this.editorService.onKeyPress.emit(evt); //Call your event emitter
  evt.preventDefault(); //prevent further
});

You can also add input event listener

this.editor.root.addEventListener('input', evt => {
  this.editorService.onKeyPress.emit(evt); //Call your event emitter
});

But there is one problem though, quill is creating context and something else on keydown event, you will lose all of that if you preventDefault

Check quills keydown event

use input instead of keydown event in Quill

1 Answers1