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

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

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

// #region --Declaration--.
const runtimeConfig = useRuntimeConfig();
// #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("updateModelValue", 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>