block editor

front/js/svelte/records/block/BlockButtons.svelte

@@ -1,50 +1,44 @@
 <script>
     import Icon from "../../common/Icon.svelte";
-    import {randomId} from "../../../helpers";
+    import {insertBlock} from "./block";
 
     export let blockId;
     export let blockData;
+    export let blockSchema;
     $: showOptions = false;
-    let validUis = ["text", "textarea", "rich", "reference"];
+    let validUis = ["heading", "textarea", "rich", "reference"];
 
-    function createBlock(e, validUI) {
+    function createBlock(e, ui) {
         e.preventDefault();
-        blockData = [...blockData, {
-            ui: validUI,
-            id: randomId(),
-            key: "",
-            value: null
-        }];
+        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>
 
-<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="bg-light lx-card d-flex">
-        {#each validUis as validUi}
-
-            <div class="me-2">
-                <button
-                    class="btn btn-sm btn-primary"
-                    on:click={(e) => createBlock(e, validUi)}
-                >{validUi}
-                </button>
-            </div>
-        {/each}
-    </div>
-{/if}
-
+    {/if}
+</div>
 <style>
     :global(.block-field-wrapper) {
         display: flex;
@@ -61,9 +55,8 @@
     }
 
     .block-buttons {
-        /* padding: 0 5px; */
-        display: inline-block;
+         padding: 0px;
         z-index: 1;
-        margin: 10px auto 0;
+        margin: 0px ;
     }
 </style>