<script setup lang="ts">
  import { computed } from 'vue';
  import EditorComp from '@tinymce/tinymce-vue';
  import tinymceUrl from 'tinymce/tinymce.min.js?url';
  import './plugins';
  import langs from './langs/';
  import { tinymceProps, type TinymceEvents } from './props';
  import type { RawEditorOptions } from 'tinymce';

  import { useLocale } from '@/locales/useLocale';

  defineEmits<TinymceEvents>();
  const props = defineProps(tinymceProps);

  const modelValue = defineModel<string>('value');

  const langName = computed(() => {
    const lang = useLocale().getLocale.value;
    return ['zh_CN', 'en'].includes(lang) ? lang : 'zh_CN';
  });

  const initOptions = computed((): RawEditorOptions => {
    const { height, init, toolbar, plugins } = props;

    return {
      height,
      toolbar,
      menubar: 'file edit insert view format table',
      plugins,
      language_url: langs[langName.value],
      language: langName.value,
      branding: false,
      default_link_target: '_blank',
      link_title: false,
      promotion: false,
      object_resizing: false,
      auto_focus: true,
      resize: true,
      ...init,
    };
  });
</script>

<template>
  <EditorComp
    v-bind="{ ...$attrs, ...props }"
    v-model="modelValue"
    :tinymce-script-src="tinymceUrl"
    :init="initOptions"
  />
</template>

<style scoped></style>
