lucent-laravel/front/js/svelte/records/elements/Markdown.svelte

<script>
    import { getContext } from "svelte";
    import { htmlurl, presetUrl } from "../../files/imageserver";
    import Codemirror from "../../libs/CodemirrorMarkdown.svelte";
    import { getErrorMessage } from "./errorMessage";
    import RichEditorFiles from "./RichEditorFiles.svelte";
    const channel = getContext("channel");
    export let value;
    export let field;

    export let record;
    export let isCreateMode;
    // export let id;
    export let validationErrors;
    $: errorMessage = getErrorMessage(validationErrors, field.name);
    let editor;

    function insertMedia(e) {
        editor.insertMedia(e.detail);
    }

    function onFilesInserted(e) {
        console.log(e.detail);
        const presetPath = e.detail.preset.path;

        e.detail.files.map((aFile) => {
            let html = htmlurl(channel, record, presetPath);

            editor.insertMedia({
                html: html,
                url: presetUrl(channel, aFile, presetPath),
                originalUrl: channel.filesUrl + "/" + aFile.path,
                file: aFile,
            });
        });
    }
</script>

<div class="mb-3">
    <RichEditorFiles
        {record}
        {field}
        {validationErrors}
        {onFilesInserted}
        on:editor-insert={insertMedia}
    ></RichEditorFiles>
    <Codemirror
        bind:this={editor}
        bind:value
        editable={!field.readonly || isCreateMode}
    />

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