<template>
    <Editor :api-key="editorKey" :init="init" />
</template>

<script setup>
import Editor from '@tinymce/tinymce-vue';
import { reactive } from 'vue';

const editorKey = '71nhna4fusscfsf8qvo9cg3ul4uydwt346izxa6ra6zwjsz7';
const init = reactive({
    toolbar_mode: 'sliding',
    plugins: [
        // Core editing features
        'anchor',
        'autolink',
        'charmap',
        'codesample',
        'emoticons',
        'image',
        'link',
        'lists',
        'media',
        'searchreplace',
        'table',
        'visualblocks',
        'wordcount',
        // Your account includes a free trial of TinyMCE premium features
        // Try the most popular premium features until Dec 30, 2024:
        'checklist',
        'mediaembed',
        'casechange',
        'export',
        'formatpainter',
        'pageembed',
        'a11ychecker',
        'tinymcespellchecker',
        'permanentpen',
        'powerpaste',
        'advtable',
        'advcode',
        'editimage',
        'advtemplate',
        'ai',
        'mentions',
        'tinycomments',
        'tableofcontents',
        'footnotes',
        'mergetags',
        'autocorrect',
        'typography',
        'inlinecss',
    ],
    toolbar:
        'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table mergetags | addcomment showcomments | spellcheckdialog a11ycheck typography | align lineheight | checklist numlist bullist indent outdent | emoticons charmap | removeformat',
    tinycomments_mode: 'embedded',
    tinycomments_author: 'Author name',
    mergetags_list: [
        { value: 'First.Name', title: 'First Name' },
        { value: 'Email', title: 'Email' },
    ],
    ai_request: (request, respondWith) => respondWith.string(() => Promise.reject('See docs to implement AI Assistant')),
});
</script>

<style>
.tox-statusbar{
    display: none !important;
}
</style>
