<script>
    import Tinymce from "../../libs/Tinymce.svelte";
    import RichEditorFiles from "./RichEditorFiles.svelte";
    import {getErrorMessage} from "./errorMessage";
    import Trix from "../../libs/Trix.svelte";

    export let value;
    export let field;
    export let isCreateMode;
    export let graph;
    export let record;
    export let validationErrors;

    let editor;

    $: errorMessage = getErrorMessage(validationErrors, field.name);
    let additionalConfig = {
        readonly: field.readonly && !isCreateMode,
    };

    function insertMedia(e){
        editor.insertMedia(e.detail)
    }
</script>

<div class="mb-0">

    <Trix {field} bind:this={editor} bind:value></Trix>
<!--    <Tinymce  bind:this={editor} bind:value {additionalConfig}/>-->
    {#if field.collections.length > 0}
        <RichEditorFiles
                bind:graph
                {record}
                {field}
                {validationErrors}
                on:editor-insert={insertMedia}
        >


        </RichEditorFiles>
    {/if}


    {#if errorMessage}
        <div class="invalid-feedback d-block">
            {errorMessage}
        </div>
    {/if}
</div>
