Custom paste-handler does not recognize image pasting

[schtucks]

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.

<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

[KillerCodeMonkey]

the question is what changed in your project in the mean time.. Since you are using an older ngx-quill version i did not changed anything there in a long time. And since you are using the native quilljs api there, i would guess that this has nothing to do with ngx-quill.

[schtucks]

After I extracted my quill component from my project into this repo that I posted here, this problem still exists. So I guess it is not due to changes in my project. Because I have already reduced my component to the minimum. I am aware that you have not changed anything in this package for a long time, but am I doing it right in the first place?

[KillerCodeMonkey]

to be honest i never used clipboard.addMatcher so it would be better to ask at the quilljs repo.

but the way to grab the editor instance looks correct.

[schtucks]

All right, thanks for the help anyway - will try my luck there

[KillerCodeMonkey]

do you maybe restrict the formats in your editor? if image is not there as format, it will not paste them

[schtucks]

What do you mean by restrict the formats?

[KillerCodeMonkey]

if you pass formats to the editor or set in the config of the editor, quill will only allow to paste those formats.

[schtucks]

The only thing i do with formats is linking them with gui elements:

<div quill-editor-toolbar>
            <span class="ql-formats">
                <button class="ql-bold"></button>
                <button class="ql-italic"></button>
                <button class="ql-underline"></button>
            </span>
            <span class="ql-formats" style="margin-left: 10px;">
                <button class="ql-list" value="ordered"></button>
                <button class="ql-list" value="bullet"></button>
            </span>
            <span class="ql-formats" style="margin-left: 10px;">
                <button class="ql-image"></button>
                <select class="ql-color"></select>
            </span>
        </div>

But that shouldn't restrict them, should it?

[KillerCodeMonkey]

nope i guess not

[schtucks]

I have fixed it. So basically, the native quill api no longer registered any <img> tags in the matcher. After I included the module: quill-paste-smart it worked again. More of a workaround, but I'll take it.

[KillerCodeMonkey]

okay, but then i guess it is not a ngx-quill problem. so closed