<template>
  <ClientOnly>
    <QuillEditor
      v-model:content="content"
      content-type="html"
      theme="snow"
      :toolbar="toolbarOptions"
      @text-change="textChange"
      :style="`font-size: 16px; height: ${props.height};`"
    />
  </ClientOnly>
</template>

<script setup>
import { QuillEditor } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css";

const emit = defineEmits(["content", "modalevent"]);

const props = defineProps({
  text: String,
  row: Object,
  pagename: String,
  api: String,
  height: {
    type: String,
    default: "450px",
  },
});

// Custom toolbar options
const toolbarOptions = [
  // 🔤 Font chữ
  [{ font: [] }],

  // 🔠 Cỡ chữ
  [{ header: [1, 2, 3, 4, 5, 6, false] }],

  // ✍️ Định dạng cơ bản
  ['bold', 'italic', 'underline', 'strike'],

  // 🎨 Màu chữ & nền
  [{ color: [] }, { background: [] }],

  // 📐 Căn lề
  [{ align: [] }],

  // 📋 Danh sách
  [{ list: 'ordered' }, { list: 'bullet' }],

  // 🔗 Media
  ['link', 'image', 'video'],

  ['clean'], // Xóa định dạng
]


var content = props.text;

function textChange() {
  emit("content", content);
  emit("modalevent", { name: "content", data: content });
}
</script>
