Use Quill's clipboard matcher instead of addEventListener on Quill.root

[lee195]

I've run into an issue where the paste listener on Qill.root prevents the intended behavior for Quill's clipboard matchers. My own Node.TEXT_NODE matcher cannot execute, because the text paste is prevented and (through the pasteHandler) always inserted as plaintext.

Using the intended clipboard matcher syntax of Quill would allow developers to decide in which order the matchers should trigger. This would make it more flexible to combine with other paste handlers one might want to use with Quill.

Alternatively allowing developers to pass a handler for non-image text could also work.

Another alternative could be to not always prevent the paste event, but only in the case that a text which can be converted to an image is pasted.

https://github.com/chenjuneking/quill-image-drop-and-paste/blob/7209a1349b8792c67b489b9f9a118864adffa5dd/src/ImageDropAndPaste.ts#L133-L145

file.getAsString((s) => {
  utils
    .urlIsImage(s)
    .then(() => {
      e.preventDefault();
      that.insert(s, 'image');
    });
});

[chenjuneking]

I've run into an issue where the paste listener on Qill.root prevents the intended behavior for Quill's clipboard matchers. My own Node.TEXT_NODE matcher cannot execute, because the text paste is prevented and (through the pasteHandler) always inserted as plaintext.

Using the intended clipboard matcher syntax of Quill would allow developers to decide in which order the matchers should trigger. This would make it more flexible to combine with other paste handlers one might want to use with Quill.

Alternatively allowing developers to pass a handler for non-image text could also work.

Another alternative could be to not always prevent the paste event, but only in the case that a text which can be converted to an image is pasted.

https://github.com/chenjuneking/quill-image-drop-and-paste/blob/7209a1349b8792c67b489b9f9a118864adffa5dd/src/ImageDropAndPaste.ts#L133-L145

file.getAsString((s) => {
  utils
    .urlIsImage(s)
    .then(() => {
      e.preventDefault();
      that.insert(s, 'image');
    });
});

Hi @lee195 , could you provide more details about your issue?

• what's the version of quill-image-drop-and-paste?
• what's the content you paste to the editor?
• and what's your expect behavior?

At this stage, the module will have the following performance:

• paste plain text: insert plain text
• paste rich text: insert rich text
• paste image's url: insert the image
• paste the image from clipboard: execute the image handler

[lee195]

Hi, I have already decided on a different approach to paste-handling, but maybe this issue can still affect others.

The version is 1.2.7 The paste content is a plaintext URL My expectation was that Quill's clipboard matchers would handle non-image content

Because of image-drop-and-paste calling preventDefault on the paste event, the event is not passed to Quill's clipboard matchers.

Expected: quill-image-drop-and-paste -> Quill clipboard -> my handler

Actual: quill-image-drop-and-paste -> nothing, because of preventDefault

[chenjuneking]

Hi @lee195 , it's indeed a bug, and will be fixed in the next version. Would you mind to paste the code of your Quill's configuration(expecially the part of setting Quill's clipboard matchers)? Thanks and Good luck!

[lee195]

Hey, here is the project's quill config:

editorOptions: {
  theme: "fuji",
  placeholder: this.placeHolder,
  scrollingContainer: this.scrollingContainer,
  modules: {
    imageDropAndPaste: {
      handler: this.imageHandler
    }
    toolbar: "#" + this.toolbarId,
    clipboard: {
      matchers: [
        [Node.TEXT_NODE, (node) => quillPasteHandler(node.data)],
      ],
    },
  },
}

quillPasteHandler boils down to isUrl ? new Delta().insert(text, { link: text }) : new Delta().insert(text);

[chenjuneking]

fixed on v1.2.10