<script>
    import {onDestroy, onMount} from "svelte";
    import Trix from "trix"
    import "trix/dist/trix.css"

    export let value = "";
    export let field;
    let editor;


    function updateValue(e) {
        value = e.target.value;
    }

    export function insertMedia(info){
        if(info.record._file.width > 0){
            var attachment = new Trix.Attachment({ content: info.html })
            editor.editor.insertAttachment(attachment)
        }else{
            editor.editor.insertHTML(`<a href="${info.originalUrl}">${info.record._file.originalName}</a>`)

        }


    }

    onMount(() => {
        editor.addEventListener("trix-file-accept", (e) => {
            e.preventDefault();
        })
    })
    // onDestroy(() => {
    //     editor.removeEventListener("trix-before-initialize")
    // })


    Trix.config.blockAttributes.default.breakOnReturn = false
    console.log(Trix.config)

</script>

<div class="tox-wrapper">
    <input id="x-{field.name}" {value} type="hidden">
    <trix-editor
            bind:this={editor}
            class=" content"
            input="x-{field.name}"
            role="textbox"
            tabindex="0"
            on:trix-change={updateValue}

    ></trix-editor>
</div>
