<template>
  <ckeditor v-if="editor && config" :model-value="editorContent" :editor="editor" :config="config" @ready="onReady" @update:model-value="updateContents" />
</template>
<script>
/**
 * This configuration was generated using the CKEditor 5 Builder. You can modify it anytime using this link:
 * https://ckeditor.com/ckeditor-5/builder/#installation/NoNgNARATAdAzPCkCMAGKIAcmCsrdwghzICcUqqyyALESDnKXFKW6djTdkhANYB7JKjDBkYEZIlhkAXUggAZmxwBjVRFlA==
 */
import { Ckeditor } from '@ckeditor/ckeditor5-vue';
import {
  ClassicEditor,
  Alignment,
  AutoLink,
  BlockQuote,
  Bold,
  Essentials,
  FontBackgroundColor,
  FontColor,
  FontFamily,
  FontSize,
  HorizontalLine,
  Indent,
  IndentBlock,
  Italic,
  Link,
  Paragraph,
  RemoveFormat,
  Strikethrough,
  Subscript,
  Superscript,
  Table,
  TableCaption,
  TableCellProperties,
  TableColumnResize,
  TableProperties,
  TableToolbar,
  TextPartLanguage,
  Underline,
} from 'ckeditor5';
import translations from 'ckeditor5/translations/ko.js';
import 'ckeditor5/ckeditor5.css';
const LICENSE_KEY = 'GPL';
export default {
  name: 'EditorComponent',
  components: {
    Ckeditor
  },
  props: {
    contents: {
      type: String,
      default: ''
    }
  },
  emits: ['update:contents'],
  data() {
    return {
      isLayoutReady: false,
      editor: ClassicEditor,
      editorInstance: null,
    };
  },
  computed: {
    editorContent() {
      return this.contents || '';
    },
    config() {
      if (!this.isLayoutReady) {
        return null;
      }
      return {
        toolbar: {
          items: [
            'fontSize',
            'fontFamily',
            'fontColor',
            'fontBackgroundColor',
            '|',
            'bold',
            'italic',
            'underline',
            'strikethrough',
            'subscript',
            'superscript',
            'removeFormat',
            '|',
            'horizontalLine',
            'link',
            'insertTable',
            'blockQuote',
            '|',
            'alignment',
            '|',
            'outdent',
            'indent'
          ],
          shouldNotGroupWhenFull: true
        },
        plugins: [
          Alignment,
          AutoLink,
          BlockQuote,
          Bold,
          Essentials,
          FontBackgroundColor,
          FontColor,
          FontFamily,
          FontSize,
          HorizontalLine,
          Indent,
          IndentBlock,
          Italic,
          Link,
          Paragraph,
          RemoveFormat,
          Strikethrough,
          Subscript,
          Superscript,
          Table,
          TableCaption,
          TableCellProperties,
          TableColumnResize,
          TableProperties,
          TableToolbar,
          TextPartLanguage,
          Underline,
        ],
        fontFamily: {
          supportAllValues: true
        },
        fontSize: {
          options: [10, 12, 14, 'default', 18, 20, 22],
          supportAllValues: true
        },
        language: 'ko',
        licenseKey: LICENSE_KEY,
        link: {
          addTargetToExternalLinks: true,
          defaultProtocol: 'https://',
        },
        placeholder: '내용을 입력하세요.',
        table: {
          contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells', 'tableProperties', 'tableCellProperties']
        },
        translations: [translations],
      };
    }
  },
  mounted() {
    this.isLayoutReady = true;
  },
  methods: {
    onReady(editor) {
      this.editorInstance = editor;
    },
    updateContents(data) {
      this.$emit('update:contents', data);
    }
  }
};
</script>