changes

app/components/common/Editor.vue

@@ -1,63 +1,36 @@
-<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>
+<script lang="ts" 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 });
+const emit = defineEmits(["content"]);
 
-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
+  ["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" }],
-
-  // 🔗 Media
-  ["link", "image", "video"],
-
+  ["link", "image", "video"], // Media
   ["clean"], // Xóa định dạng
 ];
 
-var content = props.text;
+const content = ref(props.text);
 
 function textChange() {
-  emit("content", content);
-  emit("modalevent", { name: "content", data: content });
+  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>