lucent-laravel/front/js/svelte/records/block/BlockElements.svelte

<script>
    import Heading from "./elements/Heading.svelte";
    import Textarea from "./elements/Textarea.svelte";
    import Rich from "./elements/Rich.svelte";
    import Markdown from "./elements/Markdown.svelte";
    import Reference from "./elements/Reference.svelte";
    import Icon from "../../common/Icon.svelte";
    import {insertBlock} from "./block";
    import {getContext} from "svelte";
    import {findIndex} from "lodash";
    import File from "./elements/File.svelte";

    const channel = getContext("channel");
    export let record;
    export let blockData;
    export let field;
    export let graph;


    export let block;
    let blockSchema = channel.schemas.find((s) => s.name === field.schema);

    function createBlock(e, ui, blockId) {
        e.preventDefault();
        blockData = insertBlock(blockData, ui, blockId);
    }

    function deleteBlock(e, blockId) {
        e.preventDefault();
        blockData = blockData.filter(b => b.id !== blockId)
    }

    function upBlock(e, blockId) {
        e.preventDefault();
        let blockIndex = findIndex(blockData, (b) => b.id === blockId);
        let tempBlock = blockData[blockIndex];
        blockData[blockIndex] = blockData[blockIndex - 1];
        blockData[blockIndex - 1] = tempBlock;
    }

    function downBlock(e, blockId) {
        e.preventDefault();
        let blockIndex = findIndex(blockData, (b) => b.id === blockId);
        let tempBlock = blockData[blockIndex];
        blockData[blockIndex] = blockData[blockIndex + 1];
        blockData[blockIndex + 1] = tempBlock;
    }

    function blockIsFirst(blockId) {
        return findIndex(blockData, (b) => b.id === blockId) === 0;
    }

    function blockIsLast(blockId) {
        return findIndex(blockData, (b) => b.id === blockId) === blockData.length - 1;
    }

</script>

<div class="card  block-editor-field d-flex">
    <div class="d-flex justify-content-between">
        <span class="text-muted d-block fs-6 mb-1">{block.meta.label}</span>
        <div class="dropdown d-inline-block">
            <button
                    class="btn btn-link btn-sm"
                    type="button"
                    data-bs-toggle="dropdown"
                    aria-expanded="false"
            >
                <Icon icon="ellipsis"/>
            </button>
            <div class="dropdown-menu">

                <h6 class="dropdown-header">
                    Block id: <input class="form-control-plaintext" readonly value={block.id}/>
                    Block name: <input class="form-control-plaintext" readonly value={block.meta.name}/>
                </h6>
                <div>
                    <hr class="dropdown-divider">
                </div>
                <h6 class="dropdown-header">Actions</h6>
                <button

                        class="dropdown-item"
                        class:d-none={blockIsFirst(block.id)}
                        on:click={(e) => upBlock(e, block.id)}
                >Move up
                </button>
                <button
                        class="dropdown-item"
                        class:d-none={blockIsLast(block.id)}
                        on:click={(e) => downBlock(e, block.id)}
                >Move down
                </button>
                <button
                        class="dropdown-item text-danger"
                        on:click={(e) => deleteBlock(e, block.id)}
                >Delete
                </button
                >
                <h6 class="dropdown-header">Insert after</h6>

                {#each blockSchema.fields as blockField}
                    <button
                            class="dropdown-item"
                            on:click={(e) => createBlock(e, blockField, block.id)}
                    >{blockField.label}
                    </button
                    >
                {/each}
            </div>
        </div>
    </div>
    {#if block.meta.info.name === "heading"}

        <Heading
                bind:block={block}
        />

    {:else if block.meta.info.name === "textarea"}

        <Textarea
                bind:block={block}
        />

    {:else if block.meta.info.name === "rich"}
        <Rich
                bind:block={block}
        />
    {:else if block.meta.info.name === "markdown"}
        <Markdown
                bind:block={block}
        />
    {:else if block.meta.info.name === "file"}
        <File
                {record}
                {field}
                bind:graph
                bind:block={block}
        />
    {:else if block.meta.info.name === "reference"}
        <Reference
                {record}
                {field}
                bind:graph
                bind:block={block}
        />
    {/if}

</div>


<style>
    .block-editor-field{

        margin: 10px 0;
        border-color: transparent;
    }
</style>