UBER-395: Allow to drop images into description (#3382)

Signed-off-by: Andrey Sobolev <haiodo@gmail.com>

packages/text-editor/src/components/StyledTextBox.svelte

@@ -16,7 +16,9 @@
   import { Completion } from '../Completion'
   import textEditorPlugin from '../plugin'
   import StyledTextEditor from './StyledTextEditor.svelte'
-  import { completionConfig, imagePlugin } from './extensions'
+  import { completionConfig } from './extensions'
+  import { ImageRef, FileAttachFunction } from './imageExt'
+  import { Node as ProseMirrorNode } from '@tiptap/pm/model'
 
   export let label: IntlString | undefined = undefined
   export let content: string
@@ -38,6 +40,8 @@
   export let enableBackReferences: boolean = false
   export let isScrollable: boolean = true
 
+  export let attachFile: FileAttachFunction | undefined = undefined
+
   const Mode = {
     View: 1,
     Edit: 2
@@ -129,6 +133,27 @@
       dispatch('open-document', { event, _id, _class })
     }
   })
+
+  const attachments = new Map<string, ProseMirrorNode>()
+
+  const imagePlugin = ImageRef.configure({
+    inline: false,
+    HTMLAttributes: {},
+    attachFile,
+    reportNode: (id, node) => {
+      attachments.set(id, node)
+    }
+  })
+
+  /**
+   * @public
+   */
+  export function removeAttachment (id: string): void {
+    const nde = attachments.get(id)
+    if (nde !== undefined) {
+      textEditor.removeNode(nde)
+    }
+  }
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->