slab / quill

Quill is a modern WYSIWYG editor built for compatibility and extensibility
https://quilljs.com
BSD 3-Clause "New" or "Revised" License
43.75k stars 3.4k forks source link

Custom paste-handler does not recognize image pasting #4218

Open schtucks opened 5 months ago

schtucks commented 5 months ago

First up i am using quill version 1.3.7 with angular 16.2.6.

I have a custom paste handler that should tell me all paste events. However, this does not happen. Initially, this paste handler was only intended for pasting <img> tags. But this is not recognized at all, so I have rewritten the matcher to *. In the hope that IMG was the wrong matcher. But now I realized that pasting IMG elements is not being recognized at all.

Thats my code:

<quill-editor [customToolbarPosition]="'top'" [placeholder]="'Enter message here'" (onEditorCreated)="getEditorInstance($event)">
getEditorInstance(event: Quill): void {
    this.quill = event;
    const toolbar: any = this.quill.getModule('toolbar');
    const clipboard: any = this.quill.getModule('clipboard');
    toolbar.addHandler('image', this.customImageHandler);
    clipboard.addMatcher('*', this.customImagePasteHandler);
  }
customImagePasteHandler(node: HTMLElement, delta: Delta) {
    if (node && delta) {
      console.log(node);
      console.log(delta);
    }
    return delta;
  }

I definitely know that this logic has worked before. The question I have now, however, is why not anymore?

Here is a repo where I have reproduced this behavior with the exact package versions I am using: repo

riccardinhocala commented 5 months ago

Same here. In 1.3.7 works and know I can't prevent to paste image in quill.

desertby commented 5 months ago

Same in 2.0.2.

renan-pasqueto-wpp commented 5 months ago

Same thing here, I want to prevent pasting images in my editor and I couldn't use the matchers from clipboard. It doesn't recognize images from clipboard.

Instead I used the config formats, a list of elements I want in editor excluding image and video, but then when I try to paste image, it look works (it prevents paste image there) but the editor throws an error.

ParchmentError: [Parchment] Unable to create image blot
    at _Registry.create (parchment.js:71:13)
    at Scroll.create (parchment.js:729:26)
    at Block.insertAt (parchment.js:661:34)
    at Block.insertAt (block.js:39:2305)
    at Scroll.insertAt (parchment.js:480:13)
    at Scroll.insertAt (parchment.js:756:26)
    at Scroll.insertAt (scroll.js:46:1279)
    at eval (editor.js:51:1023)
    at Array.reduce (<anonymous>)
    at Editor.applyDelta (editor.js:50:702)
riccardinhocala commented 5 months ago

I resolved creating my own clipboard module (that extends the default one)

const Clipboard = Quill.import('modules/clipboard');

class CustomClipboard extends Clipboard {
    onCapturePaste(event) {
        if (event.clipboardData.files.length === 0) {
            super.onCapturePaste(event);
        } else {
            try {
                const html = event.clipboardData?.getData("text/html");
                const parsedHtml = (new DOMParser).parseFromString(html, "text/html");
                const el = parsedHtml.body.firstElementChild;

                switch (el.tagName) {
                    case 'IMG':
                        // HERE YOU CAN DO WHAT YOU NEED
                        break;
                }
            } catch (e) {
                console.error(e);

                event.preventDefault();
                return false;
            }
        }
    }
}

Quill.register('modules/clipboard', CustomClipboard, true);