<script>
    import {onDestroy, onMount} from "svelte";

    import tinymce from "tinymce/tinymce";
    import "tinymce/models/dom";
    import "tinymce/icons/default";
    import "tinymce/themes/silver";
    import "tinymce/skins/ui/oxide/skin.css";
    import contentUiSkinCss from "tinymce/skins/ui/oxide/content.css";

    import "tinymce/plugins/link";
    import "tinymce/plugins/code";
    import "tinymce/plugins/image";
    import "tinymce/plugins/table";
    import "tinymce/plugins/codesample";
    import "tinymce/plugins/media";

    import "tinymce/plugins/lists";
    import "tinymce/plugins/autoresize";
    import "tinymce/plugins/wordcount";

    export let value = "";
    export let additionalConfig = {};
    let lastVal = "";
    let textareaEl;
    let activeEditor;
    let editorWrapper;
    const plugins = [
        "autoresize",
        "code",
        "image",
        "table",
        "codesample",
        "link",
        "lists",
        "media",
        "wordcount",
    ];
    const toolbar =
        "bold italic underline strikethrough removeformat  | link | subscript superscript bullist numlist  media image codesample table code wordcount  blockquote indent outdent blocks";

    onDestroy(() => {
        if (activeEditor) {
            activeEditor.destroy();
        }
    });

    onMount(() => {
        const config = {
            target: textareaEl,
            toolbar_mode: "sliding",
            toolbar_sticky: true,
            skin: false,
            content_css: false,
            content_style: contentUiSkinCss.toString(),
            branding: false,
            inline: false,
            plugins: plugins,
            contextmenu: false,
            menubar: false,
            statusbar: false,
            entity_encoding: "raw",
            convert_urls: false,
            toolbar: toolbar,
            image_caption: true,
            relative_urls: false,
            browser_spellcheck: true,
            max_height: 600,
            // media_poster: false,
            content_style:
                "img {max-width: 100%;height: auto;",
            setup: function (editor) {
                activeEditor = editor;

                editor.on("init", function (e) {
                    editor.setContent(value ?? "");
                });

                // editor.on("blur", function (e) {
                //     let content = setImageDimensions(editor.getContent());
                //     dispatch("editorBlur", content);
                //     editorWrapper.classList.remove("editorFocus");
                //     // return false;
                // });

                // editor.on("focus", function (e) {
                //     editorWrapper.classList.add("editorFocus");
                //     // return false;
                // });

                editor.on("change input undo redo", function (e) {
                    lastVal = editor.getContent();
                    if (lastVal !== value) {
                        value = lastVal;
                    }
                });
            },
        };

        tinymce.init({...config, ...additionalConfig});
    });


</script>

<div bind:this={editorWrapper} class="tox-wrapper">
    <div class="form-control" bind:this={textareaEl}>
        {@html value}
    </div>
</div>

<style>
    :global(.tox:not(.tox-tinymce-inline) .tox-editor-header) {
        background-color: #fff;
        border-bottom: 1px solid #ced4da;
        box-shadow: none;
        padding: 4px 0;
        transition: box-shadow 0.5s;
    }

    :global(.tox-tinymce) {
        border: 1px solid #ced4da;
    }


</style>
