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

const props = defineProps({ text: String });
const emit = defineEmits(["content"]);

const toolbarOptions = [
  [{ font: [] }],
  [{ header: [1, 2, 3, 4, 5, 6, false] }],
  ["bold", "italic", "underline", "strike"], // Định dạng cơ bản
  ["blockquote", "code-block"],
  [{ color: [] }, { background: [] }], // Màu chữ & nền
  [{ align: [] }], // Căn lề
  [{ list: "ordered" }, { list: "bullet" }],
  ["link", "image", "video"], // Media
  ["clean"], // Xóa định dạng
];

const content = ref(props.text);

function textChange() {
  console.log("content", content.value);
  emit("content", content.value);
}
</script>
<template>
  <QuillEditor
    v-model:content="content"
    :toolbar="toolbarOptions"
    @textChange="textChange"
    content-type="html"
    theme="snow"
    style="height: 400px"
  />
</template>
