rich editor files

front/js/svelte/records/previews/PreviewFile.svelte

@@ -4,21 +4,31 @@
     import {createEventDispatcher, getContext} from "svelte";
     import Preview from "../../files/Preview.svelte";
     import {previewTitle} from "./../Preview";
+    import {htmlurl} from "../../files/imageserver.js"
     import Status from "./../Status.svelte";
+    import Dropdown from "../../common/Dropdown.svelte";
 
     const dispatch = createEventDispatcher();
     const channel = getContext("channel");
     export let record;
     export let hasDelete = false;
+    export let hasInsert = false;
 
     let schema = channel.schemas.find((aschema) => aschema.name === record.schema);
     let cardTitle = previewTitle(channel.schemas, record);
+    let imagePresets = Object.keys(channel.imageFilters);
 
     function remove(e) {
         e.preventDefault();
-
         dispatch("remove", record.id);
     }
+
+    function insert(e, preset) {
+        e.preventDefault();
+        let html = htmlurl(channel,record, preset)
+        dispatch("editor-insert", html);
+    }
+
 </script>
 
 <div class="preview-file">
@@ -45,15 +55,31 @@
 
         </div>
     </div>
-    {#if hasDelete}
-        <div class="trash-action">
-            <button
-                    class="button"
-                    on:click={remove}
-            >
-                <Icon icon="trash-can"/>
-            </button>
-        </div>
-    {/if}
+    <div style="display: flex;gap:4px; align-items: center;  margin-right: 10px;">
+        {#if hasInsert}
+            <div class="reference-action">
+                <Dropdown>
+                    <div slot="button">
+                        <Icon icon="photo-film"/>
+                    </div>
+                    <button class="dropdown-item button" on:click={e => insert(e,null)}>original</button>
+                    {#each imagePresets as preset}
+                        <button class="dropdown-item button" on:click={e => insert(e,preset)}>{preset}</button>
+                    {/each}
+                </Dropdown>
+
+            </div>
+        {/if}
+        {#if hasDelete}
+            <div class="reference-action">
+                <button
+                        class="button"
+                        on:click={remove}
+                >
+                    <Icon icon="trash-can"/>
+                </button>
+            </div>
+        {/if}
+    </div>
 </div>