<script lang="ts" setup>
//#region --Import--.
import Editor from "@tinymce/tinymce-vue";
import { ref, watch } from "vue";
//#endregion

//#region --Declaration--.
const runtimeConfig = useRuntimeConfig();
//#endregion

//#region --Emit--.
const emit = defineEmits<{
  (e: "update:modelValue", value: string): void;
}>();
//#endregion

//#region --Props--.
const props = defineProps<{
  modelValue: string;
  errorMessage: string;
}>();
//#endregion

//#region --Data/ref--.
const content = ref(props.modelValue);
const init = {
  height: 300,
  menubar: false,
  plugins: [
    // Core editing features
    "advlist",
    "autolink",
    "lists",
    "link",
    "image",
    "charmap",
    "preview",
    "anchor",
    "searchreplace",
    "visualblocks",
    "code",
    "fullscreen",
    "insertdatetime",
    "media",
    "table",
    "code",
    "help",
    "wordcount",
  ],
  toolbar:
    "undo redo | blocks |  bold italic underline strikethrough |" +
    "bold italic forecolor | alignleft aligncenter " +
    "alignright alignjustify | bullist numlist outdent indent | " +
    "removeformat | help",
  content_style: "body { font-family:Helvetica,Arial,sans-serif; font-size:14px }",
  skin: "oxide-dark",
  content_css: "dark",
  // forced_root_block: false,
  // valid_elements: [],
  // entity_encoding : "raw",
};
//#endregion

//#region --Watch--.
watch(content, (newValue) => {
  emit("update:modelValue", newValue);
});

watch(
  () => props.modelValue,
  (newValue) => {
    if (newValue !== content.value) {
      content.value = newValue;
    }
  },
);
//#endregion
</script>

<template>
  <div>
    <editor v-model="content" :api-key="runtimeConfig.public.apiTinyMceSecret" :init="init" />
  </div>
  <div v-if="errorMessage" class="text-red-500 text-sm mt-1">
    {{ errorMessage }}
  </div>
</template>

<style scoped></style>