[Angular 18] [ngx-quill: 26.0.10] How to disable copy paste images from Desktop in Quill Editor?

[so-amuk]

We are attempting to disable the copy-paste functionality from the desktop in the Quill Editor. However, the Quill Editor should still support image uploads. The solution should not completely block image functionality within the editor; it should only restrict copy-pasting. I have tried various solutions to prevent copy-pasting from tools like Snipping Tool or directly from the desktop, but none have been successful.

These are the following solutions that we implemented but none of them worked:

this.quillEditor.on('editor-change', () => {
  // Add paste event listener to the editor's container
  const quillContainer = this.quillEditor.container;

  if (quillContainer) {
    quillContainer.addEventListener('paste', (event: ClipboardEvent) => {
      console.log('onPaste triggered');
      const clipboardData = event.clipboardData;
      if (clipboardData && clipboardData.files.length > 0) {
        for (let i = 0; i < clipboardData.files.length; i++) {
          const file = clipboardData.files[i];
          if (file.type.startsWith('image/')) {
            // Prevent the default paste action for images
            event.preventDefault();
            console.log('Pasting image blocked');
            return;
          }
        }
      }
    });
  }
});

onPaste: (event: ClipboardEvent) => {
              console.log('onPaste');
              const clipboardData = event.clipboardData; // Use clipboardData from the event
              if (clipboardData && clipboardData.files.length > 0) {
                for (let i = 0; i < clipboardData.files.length; i++) {
                  const file = clipboardData.files[i];
                  if (file.type.startsWith('image/')) {
                    // Prevent the default paste action for clipboard images
                    event.preventDefault();
                    return;
                  }
                }
              }
   }

this.quill= {
  ...this.quill, // Keep the existing configuration
  clipboard: {
    matchers: [
      [
        Node.ELEMENT_NODE,
        (node: any, delta: any) => {
          // Allow all elements except the pasted images from the desktop
          return delta;
        },
      ],
    ],
    // Add a custom paste handler to block images from the clipboard
    onPaste: (event: ClipboardEvent) => {
      const clipboardData = event.clipboardData; // Use clipboardData from the event
      if (clipboardData && clipboardData.files.length > 0) {
        for (let i = 0; i < clipboardData.files.length; i++) {
          const file = clipboardData.files[i];
          if (file.type.startsWith('image/')) {
            // Prevent the default paste action for clipboard images
            event.preventDefault();
            return;
          }
        }
      }
    },
  },
};