How to paste into a text input contained within a custom Quill Embed Blot?

Question

I've successfully used Quill to create a custom Blot that extends the Embed blot. My blot contains a text input field and a button.

When I place my cursor inside of the text input and try to paste some text, the text is pasted into the Quill editor just outside of my blot.

I know that the Clipboard Module handles paste and I've reviewed the module but I'm unsure of how to proceed.

My idea is to detect when focus is on any input element in the editor. When it is, the Clipboard Module should be disabled or otherwise allow the normal paste behavior.

My initial thought is to register my own extended the Clipboard module and do the detection there. However, I'm not sure how to instruct the clipboard to butt out and let normal paste behavior execute.

Any guidance is appreciated!

Answer 1

I've been facing the exact same problem. You'll have to create your own Keyboard module that extends the default one to prevent that to happen, by overriding the onPaste method.

Here is what I used:

import Quill from 'quill'
const QuillClipboard = Quill.import('modules/clipboard')

export default class Clipboard extends QuillClipboard {
  onPaste (event) {
    // Contenteditables, inputs and textarea are embeded into rich elements
    // Do not capture the copy paste with Quill
    if (['DIV', 'INPUT', 'TEXTAREA'].indexOf(event.target.nodeName) !== -1) {
      return
    }

    super.onPaste(event)
  }
}

Quill.register('modules/clipboard', Clipboard, true)