Unable to integrate it with VueQuill

[sivasyams]

I am trying to integrate a quill editor with Vuestic

https://vueup.github.io/vue-quill/

I have written this as a component, but i am not able to pass any props to this component.

<rich-text-editor :editorContent="qnDetail.description" />

The editor content is used as a prop for the below component

import apiService from '../../components/service/api-service';
import QuillImageUploader from "quill-image-uploader";
import { ImageActions } from '@xeger/quill-image-actions';
import { ImageFormats } from '@xeger/quill-image-formats';

export default {
    name: "rich-text-editor",
    props: {
        editorContent: {
            required: true,
            type: String,
            default: ""
        }
    },
    
    currentContent: "",
    htmlRegex: "/(<([^>]+)>)/ig",

    setup() {
        const qnEditorModules = [{
            name: 'imageUploader',  
            module: QuillImageUploader, 
            options: {
                upload: async (file) => {
                    let fileUploadData = new FormData();
                    fileUploadData.append('imageFile', file);
                    const fileUploadResp = await apiService.postMultipart("/uploadImage", fileUploadData);
                    return await new Promise((resolve, reject) => {
                        if (fileUploadResp.isErrored === true) {
                            reject("Image upload failed, please retry.");
                        } else {
                            resolve(
                                import.meta.env.VITE_APP_MEDIA_SERVICE_URL + ':' + import.meta.env.VITE_APP_MEDIA_SERVICE_PORT + "/media/tenant/" + import.meta.env.VITE_APP_TENANT_NAME + "/image/" + fileUploadResp.content.data.responseObj.id
                            );
                        }
                    });
                }
            }
        },
        {
            name: "imageFormats",
            module: ImageFormats
        },
        {
            name: "imageActions",
            module: ImageActions
        },]
        return { qnEditorModules }
    },

    data() {
        return {
            qnEditorToolbar: [
                ['bold', 'italic', 'underline'],
                [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                [{ 'align': [] },{ 'font': [] }],
                ['image']
            ],
            quillEditorOptions: {
                formats: ['align', 'background', 'blockquote', 'bold', 'code-block', 'color', 'float', 'font', 'header',
                'height', 'image', 'italic', 'link', 'script', 'strike', 'size', 'underline', 'width', 'video']
            }
        }
    },

    methods: {
        updateEditorContent(e) {
   
        },

        validateEditorContent() {

        }
    }
}

The corresponding vue file is

<script src="./rich-text-editor.js"/>

<template>
    <QuillEditor :options="quillEditorOptions" :modules="qnEditorModules" :toolbar="qnEditorToolbar" theme="snow" contentType="html" :content="editorContent"/>   
</template>

[sivasyams]

Issue fixed...Was due to wrong implementation