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

<script>
    import Icon from "../../common/Icon.svelte";
    import {insertBlock} from "./block";

    export let blockId;
    export let blockData;
    export let blockSchema;
    $: showOptions = false;
    let validUis = ["heading", "textarea", "rich", "reference"];

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

</script>
<div class="d-flex justify-content-left mb-2 ">
    <button
            type="button"
            class:is-first={!blockId}
            class=" btn btn-lg btn-link text-decoration-none block-buttons"
            on:click|preventDefault={(e) => (showOptions = !showOptions)}
    >
        <Icon width={24} height={24} icon="circle-plus"/>
    </button>
    {#if showOptions}
        <div class="d-flex  ">
            {#each blockSchema.fields as validUi}
                <div class="ms-2">
                    <button
                            class="btn btn-sm btn-primary"
                            on:click={(e) => createBlock(e, validUi)}
                    >{validUi.label}
                    </button>
                </div>
            {/each}
        </div>

    {/if}
</div>
<style>
    :global(.block-field-wrapper) {
        display: flex;
        flex-direction: column;
    }

    :global(.block-field-wrapper .block-buttons) {
        visibility: hidden;
    }


    :global(.block-field-wrapper:hover .block-buttons) {
        visibility: visible;
    }

    .block-buttons {
         padding: 0px;
        z-index: 1;
        margin: 0px ;
    }
</style>