import { createApp } from "vue";
import CommentEditor from "ChillMainAssets/vuejs/_components/CommentEditor/CommentEditor.vue";

const ckeditorFields: NodeListOf<HTMLTextAreaElement> =
    document.querySelectorAll("textarea[ckeditor]");
ckeditorFields.forEach((field: HTMLTextAreaElement): void => {
    const content = field.value;
    const div = document.createElement("div");

    if (field.parentNode !== null) {
        field.parentNode.insertBefore(div, field);
    } else {
        throw "parent is null";
    }

    createApp({
        components: { CommentEditor },
        template: `<comment-editor v-model="content" @input="handleInput"></comment-editor>`,
        data() {
            return {
                content,
            };
        },
        methods: {
            handleInput() {
                field.value = this.content;
            },
        },
    }).mount(div);

    field.style.display = "none";
});