Support images in markup properties

plugins/card-resources/src/components/MarkupProperties.svelte

@@ -14,8 +14,10 @@
 -->
 
 <script lang="ts">
+  import attachment from '@hcengineering/attachment'
   import { Card, Tag } from '@hcengineering/card'
-  import core, { Class, Doc, Ref, toRank } from '@hcengineering/core'
+  import core, { Blob, Class, Doc, Ref, toRank } from '@hcengineering/core'
+  import { getResource, setPlatformStatus, unknownError } from '@hcengineering/platform'
   import { getClient, KeyedAttribute, updateAttribute } from '@hcengineering/presentation'
   import { Label } from '@hcengineering/ui'
   import { MarkupEditor } from '@hcengineering/view-resources'
@@ -60,6 +62,16 @@
       objectId: doc._id
     })
   }
+
+  async function attachFile (file: File): Promise<{ file: Ref<Blob>, type: string } | undefined> {
+    try {
+      const uploadFile = await getResource(attachment.helper.UploadFile)
+      const { uuid } = await uploadFile(file)
+      return { file: uuid, type: file.type }
+    } catch (err: any) {
+      await setPlatformStatus(unknownError(err))
+    }
+  }
 </script>
 
 {#each keys as key}
@@ -73,6 +85,7 @@
         onChange(value, key)
       }}
       {readonly}
+      {attachFile}
     />
   </div>
 {/each}

plugins/view-resources/src/components/MarkupEditor.svelte

@@ -19,7 +19,7 @@
   import { Button, eventToHTMLElement, Label, showPopup } from '@hcengineering/ui'
   import MarkupEditorPopup from './MarkupEditorPopup.svelte'
   import { StyledTextBox } from '@hcengineering/text-editor-resources'
-  import type { EditorKitOptions } from '@hcengineering/text-editor-resources'
+  import type { EditorKitOptions, ImageUploadOptions } from '@hcengineering/text-editor-resources'
   import textEditorPlugin from '@hcengineering/text-editor'
 
   // export let label: IntlString
@@ -33,6 +33,7 @@
   export let justify: 'left' | 'center' = 'center'
   export let width: string | undefined = 'fit-content'
   export let kitOptions: Partial<EditorKitOptions> = { reference: true, emoji: true }
+  export let attachFile: ImageUploadOptions['attachFile'] | undefined = undefined
 
   let shown: boolean = false
 </script>
@@ -46,7 +47,7 @@
     height={value ? 'auto' : undefined}
     on:click={(ev) => {
       if (!shown && !readonly) {
-        showPopup(MarkupEditorPopup, { value, kitOptions }, eventToHTMLElement(ev), (res) => {
+        showPopup(MarkupEditorPopup, { value, kitOptions, attachFile }, eventToHTMLElement(ev), (res) => {
           if (res != null) {
             value = res
             onChange(value)
@@ -74,6 +75,7 @@
     {kitOptions}
     mode={2}
     {readonly}
+    {attachFile}
     on:value={(e) => {
       onChange(e.detail)
     }}

plugins/view-resources/src/components/MarkupEditorPopup.svelte

@@ -16,12 +16,13 @@
 <script lang="ts">
   import { Card } from '@hcengineering/presentation'
   import { StyledTextBox } from '@hcengineering/text-editor-resources'
-  import type { EditorKitOptions } from '@hcengineering/text-editor-resources'
+  import type { EditorKitOptions, ImageUploadOptions } from '@hcengineering/text-editor-resources'
   import { createEventDispatcher } from 'svelte'
   import view from '../plugin'
 
   export let value: string
   export let kitOptions: Partial<EditorKitOptions> = { reference: true, emoji: true }
+  export let attachFile: ImageUploadOptions['attachFile'] | undefined = undefined
 
   const dispatch = createEventDispatcher()
   export let maxHeight: string = '40vh'
@@ -53,6 +54,7 @@
       mode={2}
       hideExtraButtons
       {maxHeight}
+      {attachFile}
       on:value={checkValue}
     />
   </div>