<template>
  <ClientOnly>
    <v-row no-gutters class="ckeditor-container w-100">
      <ckeditor v-model="data" :editor="ClassicEditor" :config="config" @ready="onReady" :key="prop.readOnly" />
    </v-row>
  </ClientOnly>
</template>

<script setup>

const prop = defineProps({
  readOnly: {
    type: Boolean,
    required: false
  }
})
import {
  ClassicEditor,
  Essentials,
  Paragraph,
  Bold,
  Italic,
  Heading,
  List,
  Link,
  Alignment,
  Font,
} from 'ckeditor5'
import { Ckeditor } from '@ckeditor/ckeditor5-vue'
import 'ckeditor5/ckeditor5.css';

import 'ckeditor5/ckeditor5.css'

const data = defineModel({ required: true, default: "" })

const editorInstance = ref(null);

const config = computed(() => ({
  licenseKey: 'GPL',
  plugins: [Essentials, Paragraph, Bold, Italic, Heading, List, Alignment, Font],
  toolbar: [
    'undo', 'redo',
    '|', 'bold', 'italic',
    '|', 'fontSize', 'fontColor', 'fontBackgroundColor',
    '|', 'bulletedList', 'numberedList',
    '|', 'heading', '|', 'alignment:left', 'alignment:center', 'alignment:right', 'alignment:justify',
  ],
}))


function onReady(editor) {
  editorInstance.value = editor;
  toggleReadOnly(prop.readOnly);
}

function toggleReadOnly(isReadOnly) {
  if (!editorInstance.value) return;


  if (isReadOnly) {
    editorInstance.value.enableReadOnlyMode("view-mode-lock");
  } else {
    editorInstance.value.disableReadOnlyMode("view-mode-lock");
  }
}

watch(
  () => prop.readOnly,
  (newVal) => {
    toggleReadOnly(newVal);
  }
);


</script>

<style scoped>
.ckeditor-container {
  width: 100%;
  max-width: 100% !important;
  overflow: hidden;
}

:deep(.ck.ck-editor) {
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
}

:deep(.ck-editor__editable_inline) {
  min-height: 200px;
  width: 100% !important;
  box-sizing: border-box;
}
</style>
