<template>
  <ClientOnly>
    <QuillEditor v-model:content="content" content-type="html" theme="snow" :toolbar="toolbarOptions" @text-change="textChange"
    style="font-size: 16px; height: 450px;" />
  </ClientOnly>
</template>
<script setup>
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
const emit = defineEmits(['content', 'modalevent'])
  var props = defineProps({
    text: String,
    row: Object,
    pagename: String,
    api: String
  })
  // Custom toolbar options
  const toolbarOptions = [
    [{ header: [1, 2, 3, 4, 5, 6, false] }],
    ['bold', 'italic', 'underline', 'strike'],
    ['blockquote', 'code-block'],
    [{ header: 1 }, { header: 2 }],
    [{ list: 'ordered' }, { list: 'bullet' }],
    [{ script: 'sub' }, { script: 'super' }],
    [{ indent: '-1' }, { indent: '+1' }],
    [{ color: [] }, { background: [] }],
    [{ align: [] }],
    ['clean'],
    ['link', 'image', 'video']
  ]
  var content = props.text
  function textChange() {
    emit('content', content)
    emit('modalevent', {name: 'content', data: content})
  }
</script>