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" @update:modelValue="handleInput"></comment-editor>`,
    data() {
      return {
        content,
      };
    },
    methods: {
      handleInput() {
        field.value = this.content;
      },
    },
  }).mount(div);

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