UBER-187: Inline attachments

* UBER-187: Support of inline attachments. * UBER-250: Paste with Command + V * Fix Create issue attachments duplication. * Use same attachments preview for Edit issue Signed-off-by: Andrey Sobolev <haiodo@gmail.com>
hcengineering · May 26, 2023 · e34e9d9 · e34e9d9
1 parent 9d037b7
commit e34e9d9
Show file tree

Hide file tree

Showing 15 changed files with 276 additions and 29 deletions.
diff --git a/packages/text-editor/lang/en.json b/packages/text-editor/lang/en.json
@@ -37,6 +37,9 @@
     "CategoryColumn": "Columns",
     "Table": "Table",
     "InsertTable": "Insert table",
-    "TableOptions": "Customize table"
+    "TableOptions": "Customize table",
+    "Width": "Width",
+    "Height": "Height",
+    "Unset": "Unset"
   }
 }
diff --git a/packages/text-editor/lang/ru.json b/packages/text-editor/lang/ru.json
@@ -37,6 +37,9 @@
     "CategoryColumn": "Колонки",
     "Table": "Таблица",
     "InsertTable": "Добавить таблицу",
-    "TableOptions": "Настроить таблицу"
+    "TableOptions": "Настроить таблицу",
+    "Width": "Щирина",
+    "Height": "Высота",
+    "Unset": "Убрать"
   }
 }
diff --git a/packages/text-editor/src/components/StyledTextBox.svelte b/packages/text-editor/src/components/StyledTextBox.svelte
@@ -16,7 +16,7 @@
   import { Completion } from '../Completion'
   import textEditorPlugin from '../plugin'
   import StyledTextEditor from './StyledTextEditor.svelte'
-  import { completionConfig } from './extensions'
+  import { completionConfig, imagePlugin } from './extensions'
 
   export let label: IntlString | undefined = undefined
   export let content: string
@@ -161,7 +161,7 @@
       {enableFormatting}
       {autofocus}
       {isScrollable}
-      extensions={enableBackReferences ? [completionPlugin] : []}
+      extensions={enableBackReferences ? [completionPlugin, imagePlugin] : [imagePlugin]}
       bind:content={rawValue}
       bind:this={textEditor}
       on:attach

diff --git a/packages/text-editor/src/components/extensions.ts b/packages/text-editor/src/components/extensions.ts
@@ -17,6 +17,7 @@ import Link from '@tiptap/extension-link'
 import { CompletionOptions } from '../Completion'
 import MentionList from './MentionList.svelte'
 import { SvelteRenderer } from './SvelteRenderer'
+import { ImageRef } from './imageExt'
 
 export const tableExtensions = [
   Table.configure({
@@ -166,3 +167,8 @@ export const completionConfig: Partial<CompletionOptions> = {
     }
   }
 }
+
+/**
+ * @public
+ */
+export const imagePlugin = ImageRef.configure({ inline: false, HTMLAttributes: {} })
diff --git a/packages/text-editor/src/components/imageExt.ts b/packages/text-editor/src/components/imageExt.ts
@@ -0,0 +1,225 @@
+import { getEmbeddedLabel } from '@hcengineering/platform'
+import { getFileUrl } from '@hcengineering/presentation'
+import { Action, Menu, getEventPositionElement, showPopup } from '@hcengineering/ui'
+import { Node, createNodeFromContent, mergeAttributes, nodeInputRule } from '@tiptap/core'
+import { Plugin, PluginKey } from 'prosemirror-state'
+import plugin from '../plugin'
+
+export interface ImageOptions {
+  inline: boolean
+  HTMLAttributes: Record<string, any>
+
+  showPreview?: (event: MouseEvent, fileId: string) => void
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    image: {
+      /**
+       * Add an image
+       */
+      setImage: (options: { src: string, alt?: string, title?: string }) => ReturnType
+    }
+  }
+}
+
+export const inputRegex = /(?:^|\s)(!\[(.+|:?)]\((\S+)(?:(?:\s+)["'](\S+)["'])?\))$/
+
+export const ImageRef = Node.create<ImageOptions>({
+  name: 'image',
+
+  addOptions () {
+    return {
+      inline: false,
+      HTMLAttributes: {}
+    }
+  },
+
+  inline () {
+    return this.options.inline
+  },
+
+  group () {
+    return this.options.inline ? 'inline' : 'block'
+  },
+
+  draggable: true,
+  selectable: true,
+
+  addAttributes () {
+    return {
+      fileid: {
+        default: null,
+        parseHTML: (element) => element.getAttribute('file-id'),
+        renderHTML: (attributes) => {
+          // eslint-disable-next-line
+          if (!attributes.fileid) {
+            return {}
+          }
+
+          return {
+            'file-id': attributes.fileid
+          }
+        }
+      },
+      width: {
+        default: null
+      },
+      height: {
+        default: null
+      }
+    }
+  },
+
+  parseHTML () {
+    return [
+      {
+        tag: `img[data-type="${this.name}"]`
+      }
+    ]
+  },
+
+  renderHTML ({ HTMLAttributes }) {
+    const merged = mergeAttributes(
+      {
+        'data-type': this.name
+      },
+      this.options.HTMLAttributes,
+      HTMLAttributes
+    )
+    merged.src = getFileUrl(merged['file-id'], 'full')
+    merged.class = 'textEditorImage'
+    return ['img', merged]
+  },
+
+  addCommands () {
+    return {
+      setImage:
+        (options) =>
+          ({ commands }) => {
+            return commands.insertContent({
+              type: this.name,
+              attrs: options
+            })
+          }
+    }
+  },
+
+  addInputRules () {
+    return [
+      nodeInputRule({
+        find: inputRegex,
+        type: this.type,
+        getAttributes: (match) => {
+          const [, , alt, src, title] = match
+
+          return { src, alt, title }
+        }
+      })
+    ]
+  },
+  addProseMirrorPlugins () {
+    return [
+      new Plugin({
+        key: new PluginKey('handle-image-paste'),
+        props: {
+          handleDrop (view, event, slice) {
+            const uris = (event.dataTransfer?.getData('text/uri-list') ?? '')
+              .split('\r\n')
+              .filter((it) => !it.startsWith('#'))
+            let result = false
+            for (const uri of uris) {
+              if (uri !== '') {
+                const pos = view.posAtCoords({ left: event.x, top: event.y })
+
+                const url = new URL(uri)
+                if (url.hostname !== location.hostname) {
+                  return
+                }
+
+                const _file = (url.searchParams.get('file') ?? '').split('/').join('')
+
+                if (_file.trim().length === 0) {
+                  return
+                }
+                const content = createNodeFromContent(
+                  `<img data-type='image' width='25%' file-id='${_file}'></img>`,
+                  view.state.schema,
+                  {
+                    parseOptions: {
+                      preserveWhitespace: 'full'
+                    }
+                  }
+                )
+                event.preventDefault()
+                event.stopPropagation()
+                view.dispatch(view.state.tr.insert(pos?.pos ?? 0, content))
+                result = true
+              }
+            }
+            return result
+          },
+          handleClick: (view, pos, event) => {
+            if (event.button !== 0) {
+              return false
+            }
+
+            const node = event.target as unknown as HTMLElement
+            if (node != null) {
+              const fileId = (node as any).attributes['file-id']?.value
+              if (fileId === undefined) {
+                return false
+              }
+              const pos = view.posAtDOM(node, 0)
+
+              const actions: Action[] = [
+                {
+                  label: plugin.string.Width,
+                  action: async (props, event) => {},
+                  component: Menu,
+                  props: {
+                    actions: ['32px', '64px', '128px', '256px', '512px', '25%', '50%', '100%', plugin.string.Unset].map(
+                      (it) => {
+                        return {
+                          label: it === plugin.string.Unset ? it : getEmbeddedLabel(it),
+                          action: async () => {
+                            view.dispatch(
+                              view.state.tr.setNodeAttribute(pos, 'width', it === plugin.string.Unset ? null : it)
+                            )
+                          }
+                        }
+                      }
+                    )
+                  }
+                },
+                {
+                  label: plugin.string.Height,
+                  action: async (props, event) => {},
+                  component: Menu,
+                  props: {
+                    actions: ['32px', '64px', '128px', '256px', '512px', '25%', '50%', '100%', plugin.string.Unset].map(
+                      (it) => {
+                        return {
+                          label: it === plugin.string.Unset ? it : getEmbeddedLabel(it),
+                          action: async () => {
+                            view.dispatch(
+                              view.state.tr.setNodeAttribute(pos, 'height', it === plugin.string.Unset ? null : it)
+                            )
+                          }
+                        }
+                      }
+                    )
+                  }
+                }
+              ]
+              event.preventDefault()
+              event.stopPropagation()
+              showPopup(Menu, { actions }, getEventPositionElement(event))
+            }
+            return false
+          }
+        }
+      })
+    ]
+  }
+})
diff --git a/packages/text-editor/src/plugin.ts b/packages/text-editor/src/plugin.ts
@@ -64,6 +64,9 @@ export default plugin(textEditorId, {
     CategoryRow: '' as IntlString,
     CategoryColumn: '' as IntlString,
     Table: '' as IntlString,
-    TableOptions: '' as IntlString
+    TableOptions: '' as IntlString,
+    Width: '' as IntlString,
+    Height: '' as IntlString,
+    Unset: '' as IntlString
   }
 })
diff --git a/packages/theme/styles/_text-editor.scss b/packages/theme/styles/_text-editor.scss
@@ -0,0 +1,4 @@
+.textEditorImage {
+  cursor: pointer;
+  object-fit: contain;
+}
diff --git a/packages/theme/styles/global.scss b/packages/theme/styles/global.scss
@@ -23,6 +23,7 @@
 @import "./panel.scss";
 @import "./prose.scss";
 @import "./button.scss";
+@import "./_text-editor.scss";
 
 @font-face {
   font-family: 'IBM Plex Sans';

diff --git a/packages/ui/src/components/DropdownLabelsPopup.svelte b/packages/ui/src/components/DropdownLabelsPopup.svelte
@@ -29,6 +29,7 @@
   export let items: DropdownTextItem[]
   export let selected: DropdownTextItem['id'] | DropdownTextItem['id'][] | undefined = undefined
   export let multiselect: boolean = false
+  export let enableSearch = true
 
   let search: string = ''
   const dispatch = createEventDispatcher()
@@ -91,18 +92,20 @@
     dispatch('changeContent')
   }}
 >
-  <div class="header">
-    <EditWithIcon
-      icon={IconSearch}
-      size={'large'}
-      width={'100%'}
-      focus={!$deviceOptionsStore.isMobile}
-      bind:value={search}
-      {placeholder}
-      {placeholderParam}
-      on:change
-    />
-  </div>
+  {#if enableSearch}
+    <div class="header">
+      <EditWithIcon
+        icon={IconSearch}
+        size={'large'}
+        width={'100%'}
+        focus={!$deviceOptionsStore.isMobile}
+        bind:value={search}
+        {placeholder}
+        {placeholderParam}
+        on:change
+      />
+    </div>
+  {/if}
   <div class="scroll">
     <div class="box">
       <ListView bind:this={list} count={objects.length} bind:selection>

diff --git a/plugins/attachment-resources/src/components/AccordionEditor.svelte b/plugins/attachment-resources/src/components/AccordionEditor.svelte
@@ -115,7 +115,7 @@
           bind:this={attachments[i]}
           alwaysEdit
           showButtons
-          fakeAttach={withoutAttach ? 'hidden' : i < items.length - 1 ? 'fake' : 'normal'}
+          enableAttachments={!withoutAttach}
           bind:content={item.content}
           placeholder={textEditorPlugin.string.EditorPlaceholder}
           {objectId}

diff --git a/plugins/attachment-resources/src/components/AttachmentPresenter.svelte b/plugins/attachment-resources/src/components/AttachmentPresenter.svelte
@@ -83,7 +83,7 @@
       class="flex-center icon"
       class:svg={value.type === 'image/svg+xml'}
       class:image={isImage(value.type)}
-      style:background-image={isImage(value.type) ? `url(${getFileUrl(value.file)})` : 'none'}
+      style:background-image={isImage(value.type) ? `url(${getFileUrl(value.file, 'large')})` : 'none'}
     >
       {#if !isImage(value.type)}{iconLabel(value.name)}{/if}
     </div>

diff --git a/plugins/attachment-resources/src/components/AttachmentPreview.svelte b/plugins/attachment-resources/src/components/AttachmentPreview.svelte
@@ -47,7 +47,7 @@
       dispatch('open', popupInfo.id)
     }}
   >
-    <img src={getFileUrl(value.file)} alt={value.name} />
+    <img src={getFileUrl(value.file, 'large')} alt={value.name} />
     <div class="actions conner">
       <AttachmentActions attachment={value} {isSaved} />
     </div>

diff --git a/plugins/attachment-resources/src/components/AttachmentStyleBoxEditor.svelte b/plugins/attachment-resources/src/components/AttachmentStyleBoxEditor.svelte
@@ -83,7 +83,7 @@
     {focusIndex}
     enableBackReferences={true}
     bind:this={descriptionBox}
-    useAttachmentPreview={true}
+    useAttachmentPreview={false}
     objectId={object._id}
     _class={object._class}
     space={object.space}