Copy paste issue - Githubissues

I was trying to do preventDefault in the paste event I was using in 2 different approaches in both approaches even though I did event.preventDefault still the content already added to the editor.

I used directive and code is below

import { Directive, HostListener } from '@angular/core';

import {QuillEditorComponent} from 'ngx-quill'

@Directive({
  selector: '[appQuillPasteModifier]'
})

export class QuillPasteModifierDirective {

  constructor(private quill: QuillEditorComponent) {}

  @HostListener('paste', ['$event'])

  onPaste(event: ClipboardEvent): void {

    event.preventDefault();

    console.log("hello roeld");

    debugger;

    const clipboardData:any = event.clipboardData;

    const pastedData = clipboardData.getData('text/plain');

    const modifiedData = this.modifyPastedData(pastedData);

    const quillInstance:any = this.quill.quillEditor;

    const index = quillInstance.getSelection().index;

    quillInstance.insertText(index, modifiedData);

  }

  private modifyPastedData(data: string): string {

    // Modify the data as needed

    const modifiedData = data.toUpperCase();

    return modifiedData;

  }

}

I used both are not working

this.quillEditor = new Quill(this.editorElem, {

          bounds,

          debug,

          formats,

          modules,

          placeholder: 'Insert text here ...',

          readOnly,

          registry: this.registry(),

          theme: this.theme() || (this.service.config.theme ? this.service.config.theme : 'snow')

        });       

        //Handle paste event

        this.quillEditor.root.addEventListener('paste', (e: any) => {

          e.preventDefault();

            debugger;

          // Get pasted content

          var clipboardData = e.clipboardData.getData('text/html');

          // Modify the pasted content

          var tempDiv: any = document.getElementById('tempDiv');

          tempDiv.innerHTML = clipboardData;

          let elementsWithClasses = tempDiv.querySelectorAll('[class]');

          let promises: any = [];

          elementsWithClasses.forEach((element: any) => {

            let classes = element.classList;

            classes.forEach((className: any) => {

              let classElement: any = tempDiv.querySelector('.' + className);

              let styles: any = classElement ? window.getComputedStyle(classElement) : {};

              for (let styleProp in styles) {

                if (styles.hasOwnProperty(styleProp)) {

                  element.style.setProperty(styleProp, styles[styleProp]);

                }

              }

            });

            promises.push(new Promise((resolve) => {

              resolve(true);

            }));

          });

          Promise.all(promises).then(() => {

            let htmlContent = tempDiv.innerHTML;

            this.quillEditor.clipboard.dangerouslyPasteHTML(htmlContent);

          });

        });

I was listening to the paste event and I wanted to transform the data before rendering it into the quill where the curser was present. Please help me here.

Thanks & Regards,

Manoj Rejinthala

KillerCodeMonkey / ngx-quill

Copy paste issue #1935