rich editor files

front/js/svelte/records/FilePreview.svelte

@@ -40,7 +40,7 @@
                 <span>{record._file.checksum}</span>
             </div>
             <div class="file-details-item">
-                <a class="button primary" target="_blank" style="display: inline-flex" href="{fileurl(record)}">Download</a>
+                <a class="button primary" target="_blank" style="display: inline-flex" href="{fileurl(channel,record)}">Download</a>
             </div>
         </div>
     </div>

front/js/svelte/records/FormField.svelte

@@ -96,6 +96,16 @@
             {isCreateMode}
             {id}
         />
+    {:else if field.info.name === "rich"}
+        <RichEditor
+                bind:value={data[field.name]}
+                {schema}
+                {field}
+                {validationErrors}
+                {isCreateMode}
+                bind:graph
+                {record}
+        />
     {:else}
         <svelte:component
             this={formElement}

front/js/svelte/records/Graph.svelte

@@ -37,5 +37,7 @@
                 {graph}
         />
     </div>
+{:else}
+    Nothing links to this record
 {/each}
 </div>

front/js/svelte/records/elements/RichEditor.svelte

@@ -1,20 +1,44 @@
 <script>
     import Tinymce from "../../libs/Tinymce.svelte";
+    import RichEditorFiles from "./RichEditorFiles.svelte";
     import {getErrorMessage} from "./errorMessage";
 
     export let value;
     export let field;
     export let isCreateMode;
-    export let schema;
+    export let graph;
+    export let record;
     export let validationErrors;
+
+    let editor;
+
     $: errorMessage = getErrorMessage(validationErrors, field.name);
     let additionalConfig = {
         readonly: field.readonly && !isCreateMode,
     };
+
+    function insertMedia(e){
+        editor.insertMedia(e.detail)
+    }
 </script>
 
 <div class="mb-0">
-    <Tinymce bind:value {additionalConfig} {schema}/>
+
+
+    <Tinymce  bind:this={editor} bind:value {additionalConfig}/>
+    {#if field.collections}
+        <RichEditorFiles
+                bind:graph
+                {record}
+                {field}
+                {validationErrors}
+                on:editor-insert={insertMedia}
+        >
+
+
+        </RichEditorFiles>
+    {/if}
+    <!--    <TipTap bind:value />-->
 
     {#if errorMessage}
         <div class="invalid-feedback d-block">

front/js/svelte/records/elements/RichEditorFiles.svelte

@@ -0,0 +1,77 @@
+<script>
+    import {sortByField} from "../../edges/sortEdges";
+    import Sortable from "../../libs/Sortable.svelte";
+    import PreviewFile from "../previews/PreviewFile.svelte";
+    import Dropdown from "../../common/Dropdown.svelte";
+    import Dialog from "../../dialog/Dialog.svelte";
+    import {insertEdges} from "./reference.js";
+    import {getContext} from "svelte";
+
+    const channel = getContext("channel");
+    export let field;
+    export let record;
+    export let graph
+    let browseModal;
+    $: references = graph?.edges
+        .filter((edge) => edge.field === field.name)
+        .map((edge) => {
+            return graph.records.find((increc) => increc.id === edge.target && record.id === edge.source);
+        }).filter((rec) => (rec?.id ? true : false)) ?? [];
+
+    let collections = channel.schemas.filter((aschema) =>
+        field.collections.includes(aschema.name)
+    );
+
+    function removeReference(e) {
+        e.preventDefault();
+        graph.edges = graph.edges.filter(
+            (edge) => !(edge.target === e.detail && edge.field === field.name)
+        );
+    }
+
+    function openBrowseModal(e, schema) {
+        e.preventDefault();
+        browseModal.open(schema);
+    }
+
+    function insert(e) {
+        e.preventDefault();
+        browseModal.close();
+        graph = insertEdges(graph, record, e.detail.records, field.name, e.detail.action);
+    }
+</script>
+
+<div class="mb-3">
+    <label class="mt-4 mb-3">Rich editor files</label>
+    {#if field.collections.length === 1}
+        <button
+                class="button"
+                on:click={(e) => openBrowseModal(e, collections[0].name)}
+        >
+            Browse
+        </button>
+    {:else}
+        <Dropdown>
+            <div slot="button">
+                Browse
+            </div>
+            {#each collections as collection}
+                <!-- {`${channelurl}/content/${collection.name}?parent=${record.id}&parentfield=${field.name}`} -->
+                <a
+                        class="dropdown-item"
+                        on:click={(e) => openBrowseModal(e, collection.name)}
+                        href="/">{collection.label}</a
+                >
+            {/each}
+        </Dropdown>
+    {/if}
+</div>
+{#if references.length > 0}
+    {#each references as reference (reference.id)}
+        <!--This div helps the sorting thing-->
+        <div>
+            <PreviewFile record={reference} hasDelete={true} hasInsert={true} on:remove={removeReference} on:editor-insert></PreviewFile>
+        </div>
+    {/each}
+{/if}
+<Dialog bind:this={browseModal} on:insert={insert}></Dialog>

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>