<template>
  <editor v-model="editorValue" :init="init"></editor>
</template>

<script setup>
import { reactive, ref, watch, toRefs } from 'vue';

import tinymce from 'tinymce/tinymce.js';
// import 'tinymce/models/dom'; (TinyMCE 6)

// 外觀
import 'tinymce/skins/ui/oxide/skin.css';
import 'tinymce/themes/silver';

// Icon
import 'tinymce/icons/default';

// 用到的外掛
import 'tinymce/plugins/emoticons';
import 'tinymce/plugins/emoticons/js/emojis.js';
// import 'tinymce/plugins/table';
import 'tinymce/plugins/quickbars';
import 'tinymce/plugins/link';
import 'tinymce/plugins/code';
import 'tinymce/plugins/letterspacing';


// 語言包
import 'tinymce-i18n/langs5/zh_TW.js';
// import 'tinymce-i18n/langs/zh_Hans.js' (TinyMCE 6 的簡體中文)

// TinyMCE-Vue
import Editor from '@tinymce/tinymce-vue';

const props = defineProps({
  modelValue: {
    type: String,
    default: '',
  },
  plugins: {
    type: [String, Array],
    default: 'quickbars emoticons link code letterspacing',
  },
  toolbar: {
    type: [String, Array],
    default:
        'undo redo |  bold italic underline strikethrough | fontsizeselect forecolor | letterspacing lineheight | alignleft aligncenter alignright | link emoticons | code',
  },
});

const emit = defineEmits(['update:modelValue']);

const init = reactive({
  language: 'zh_TW',
  height: 200,
  menubar: false,
  content_css: false,
  skin: false,
  plugins: props.plugins,
  toolbar: props.toolbar,
  quickbars_insert_toolbar: false,
  branding: false,
  // letterspacing_formats: '0 0.5pt 1pt 1.5pt 2pt 3pt'
  // fontsize_formats:''
});

const { modelValue } = toRefs(props);
const editorValue = ref(modelValue.value);

watch(modelValue, (newValue) => {
  editorValue.value = newValue;
});

watch(editorValue, (newValue) => {
  console.log('newValue',newValue)
  emit('update:modelValue', newValue);
});
</script>
