markdown insert media

front/js/svelte/dialog/FileDialog.svelte

@@ -2,13 +2,15 @@
     import { createEventDispatcher, getContext } from "svelte";
     import Icon from "../common/Icon.svelte";
     import FileIndex from "./FileIndex.svelte";
+    import Dropdown from "../common/Dropdown.svelte";
 
     let dialogEl;
+    export let presetMode = false;
 
     const dispatch = createEventDispatcher();
     const channel = getContext("channel");
     $: files = [];
-    $: selectedRecords = [];
+    $: selectedFiles = [];
     // onMount(() => {
     //     load();
     // });
@@ -19,7 +21,7 @@
         }
 
         dialogEl.close();
-        selectedRecords = [];
+        selectedFiles = [];
     }
 
     function load(recordId) {
@@ -31,14 +33,14 @@
             .catch((error) => console.log(error));
     }
 
-    function insert(e) {
+    function insert(e, preset) {
         e.preventDefault();
-        dispatch("insert_files", selectedRecords);
+        dispatch("insert_files", { files: selectedFiles, preset: preset });
     }
 
     function replace(e) {
         e.preventDefault();
-        dispatch("replace_files", selectedRecords);
+        dispatch("replace_files", selectedFiles);
     }
 
     export function open(recordId) {
@@ -49,25 +51,38 @@
 
 <dialog bind:this={dialogEl}>
     <div class="dialog-header">
-        <button
-            type="button"
-            class="button"
-            on:click={insert}
-            disabled={selectedRecords.length === 0}
-        >
-            Insert
-        </button>
-        <button
-            type="button"
-            class="button"
-            on:click={replace}
-            disabled={selectedRecords.length === 0}
-        >
-            Replace
-        </button>
-        {#if selectedRecords.length > 0}
+        {#if presetMode}
+            <Dropdown>
+                <div slot="button">Insert Preset</div>
+                {#each channel.imagePresets as preset}
+                    <button
+                        class=" dropdown-item button"
+                        on:click={(e) => insert(e, preset)}
+                        >{preset.name}</button
+                    >
+                {/each}
+            </Dropdown>
+        {:else}
+            <button
+                type="button"
+                class="button"
+                on:click={insert}
+                disabled={selectedFiles.length === 0}
+            >
+                Insert
+            </button>
+            <button
+                type="button"
+                class="button"
+                on:click={replace}
+                disabled={selectedFiles.length === 0}
+            >
+                Replace
+            </button>
+        {/if}
+        {#if selectedFiles.length > 0}
             <span class="">
-                {selectedRecords.length} records selected
+                {selectedFiles.length} records selected
             </span>
         {/if}
 
@@ -82,6 +97,6 @@
     </div>
 
     <div class="dialog-body">
-        <FileIndex {files} bind:selected={selectedRecords}></FileIndex>
+        <FileIndex {files} bind:selected={selectedFiles}></FileIndex>
     </div>
 </dialog>