feat: clone external pictures when added to a page

Signed-off-by: Matt Krick <matt.krick@gmail.com>

Author: mattkrick

packages/client/styles/theme/global.css

@@ -191,6 +191,15 @@
     }
   }
 
+  --animate-shimmer: shimmer 2.5s infinite;
+  @keyframes shimmer {
+    from {
+      mask-position: right;
+    }
+    to {
+      mask-position: left;
+    }
+  }
 }
 
 :root {

packages/client/tiptap/extensions/imageBlock/ImageBlockView.tsx

@@ -1,17 +1,38 @@
 import {type NodeViewProps, NodeViewWrapper} from '@tiptap/react'
-import {useCallback, useRef, useState} from 'react'
+import {useCallback, useEffect, useRef, useState} from 'react'
+import type {AssetScopeEnum} from '~/__generated__/useEmbedUserAssetMutation.graphql'
+import useAtmosphere from '~/hooks/useAtmosphere'
+import {useEmbedUserAsset} from '~/mutations/useEmbedUserAsset'
+import {GQLID} from '~/utils/GQLID'
 import {useBlockResizer} from '../../../hooks/useBlockResizer'
 import {cn} from '../../../ui/cn'
 import {BlockResizer} from './BlockResizer'
 import {ImageBlockBubbleMenu} from './ImageBlockBubbleMenu'
+
+const getRelativeSrc = (src: string) => {
+  if (src.startsWith('/')) return src
+  try {
+    const url = new URL(src)
+    return url.pathname
+  } catch {
+    return ''
+  }
+}
+const getIsHosted = (src: string, scopeKey: string, assetScope: AssetScopeEnum) => {
+  const relativeSrc = getRelativeSrc(src)
+  const scopeCode = assetScope === 'Page' ? GQLID.fromKey(scopeKey)[0] : scopeKey
+  const hostedPath = `/assets/${assetScope}/${scopeCode}`
+  return relativeSrc.startsWith(hostedPath)
+}
 export const ImageBlockView = (props: NodeViewProps) => {
   const {editor, getPos, node, updateAttributes} = props
   const imageWrapperRef = useRef<HTMLDivElement>(null)
   const {attrs} = node
   const {src, align, height, width} = attrs
   const alignClass =
     align === 'left' ? 'justify-start' : align === 'right' ? 'justify-end' : 'justify-center'
-
+  const {scopeKey, assetScope} = editor.extensionStorage.imageUpload
+  const isHosted = getIsHosted(src, scopeKey, assetScope)
   const onClick = useCallback(() => {
     const pos = getPos()
     if (!pos) return
@@ -32,13 +53,41 @@ export const ImageBlockView = (props: NodeViewProps) => {
   )
   const onMouseDownLeft = onMouseDown('left')
   const onMouseDownRight = onMouseDown('right')
+  const atmosphere = useAtmosphere()
+  const [commit] = useEmbedUserAsset()
+  useEffect(() => {
+    if (isHosted) return
+    commit({
+      variables: {url: src, scope: assetScope, scopeKey},
+      onCompleted: (res, error) => {
+        const {embedUserAsset} = res
+        if (!embedUserAsset) {
+          // Since this is triggered without user input, we log it silently
+          console.error(error?.[0]?.message)
+          return
+        }
+        const {url} = embedUserAsset
+        const message = embedUserAsset?.error?.message
+        if (message) {
+          atmosphere.eventEmitter.emit('addSnackbar', {
+            key: 'errorEmbeddingAsset',
+            message,
+            autoDismiss: 5
+          })
+          return
+        }
+        updateAttributes({src: url})
+      }
+    })
+  }, [isHosted])
   return (
     <NodeViewWrapper>
       <div className={cn('flex', alignClass)}>
         <div contentEditable={false} ref={imageWrapperRef} className='group relative w-fit'>
           <img
             draggable={false}
-            className='block'
+            data-uploading={isHosted ? undefined : ''}
+            className='block data-uploading:animate-shimmer data-uploading:[mask:linear-gradient(-60deg,#000_30%,#0005,#000_70%)_right/350%_100%]'
             src={src}
             alt=''
             onClick={onClick}

packages/server/fileStorage/FileStoreManager.ts

@@ -26,6 +26,7 @@ export default abstract class FileStoreManager {
     partialPath: string
   ): Promise<string>
 
+  abstract copyFile(oldKey: PartialPath, newKey: PartialPath): Promise<string>
   abstract moveFile(oldKey: PartialPath, newKey: PartialPath): Promise<void>
   abstract presignUrl(partialPath: PartialPath): Promise<string>
   async putUserFile(file: ArrayBufferLike | Buffer<ArrayBufferLike>, partialPath: PartialPath) {

packages/server/fileStorage/GCSManager.ts

@@ -1,7 +1,9 @@
 import {fetch} from '@whatwg-node/fetch'
 import {sign} from 'jsonwebtoken'
 import mime from 'mime-types'
+import makeAppURL from 'parabol-client/utils/makeAppURL'
 import path from 'path'
+import appOrigin from '../appOrigin'
 import {Logger} from '../utils/Logger'
 import FileStoreManager, {type FileAssetDir, type PartialPath} from './FileStoreManager'
 
@@ -150,6 +152,25 @@ export default class GCSManager extends FileStoreManager {
     return this.getPublicFileLocation(fullPath)
   }
 
+  async copyFile(oldPartialPath: PartialPath, newPartialPath: PartialPath) {
+    const accessToken = await this.getAccessToken()
+    const oldFullPath = encodeURIComponent(this.prependPath(oldPartialPath))
+    const newFullPath = encodeURIComponent(this.prependPath(newPartialPath))
+    const copyURL = `https://storage.googleapis.com/storage/v1/b/${this.bucket}/o/${oldFullPath}/rewriteTo/b/${this.bucket}/o/${newFullPath}`
+    const moveRes = await fetch(copyURL, {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+        Accept: 'application/json',
+        'User-Agent': 'parabol'
+      }
+    })
+    if (!moveRes.ok) {
+      const text = await moveRes.text()
+      throw new Error(`GCS Copy Error: ${moveRes.status} ${text}. ${copyURL}`)
+    }
+    return makeAppURL(appOrigin, `/assets/${newPartialPath}`)
+  }
   async moveFile(oldPartialPath: PartialPath, newPartialPath: PartialPath): Promise<void> {
     const accessToken = await this.getAccessToken()
     const oldFullPath = encodeURIComponent(this.prependPath(oldPartialPath))
@@ -165,7 +186,7 @@ export default class GCSManager extends FileStoreManager {
     })
     if (!moveRes.ok) {
       const text = await moveRes.text()
-      throw new Error(`GCS Copy Error: ${moveRes.status} ${text}. ${moveURL}`)
+      throw new Error(`GCS Move Error: ${moveRes.status} ${text}. ${moveURL}`)
     }
   }
   prependPath(partialPath: string, assetDir: FileAssetDir = 'store') {

packages/server/fileStorage/LocalFileStoreManager.ts

@@ -29,6 +29,13 @@ export default class LocalFileStoreManager extends FileStoreManager {
     return makeAppURL(appOrigin, fullPath)
   }
 
+  async copyFile(oldKey: PartialPath, newKey: PartialPath) {
+    const oldFullPath = this.prependPath(oldKey)
+    const newFullPath = this.prependPath(newKey)
+    await fs.promises.copyFile(oldFullPath, newFullPath)
+    return makeAppURL(appOrigin, newFullPath)
+  }
+
   async moveFile(oldKey: PartialPath, newKey: PartialPath): Promise<void> {
     const oldFullPath = this.prependPath(oldKey)
     const newFullPath = this.prependPath(newKey)

packages/server/fileStorage/S3FileStoreManager.ts

@@ -10,7 +10,9 @@ import {getSignedUrl} from '@aws-sdk/s3-request-presigner'
 import type {RetryErrorInfo, StandardRetryToken} from '@smithy/types'
 import {StandardRetryStrategy} from '@smithy/util-retry'
 import mime from 'mime-types'
+import makeAppURL from 'parabol-client/utils/makeAppURL'
 import path from 'path'
+import appOrigin from '../appOrigin'
 import {Logger} from '../utils/Logger'
 import FileStoreManager, {type FileAssetDir, type PartialPath} from './FileStoreManager'
 
@@ -122,7 +124,7 @@ export default class S3Manager extends FileStoreManager {
     return true
   }
 
-  async moveFile(oldPartialPath: PartialPath, newPartialPath: PartialPath) {
+  async copyFile(oldPartialPath: PartialPath, newPartialPath: PartialPath) {
     const oldFullPath = decodeURI(this.prependPath(oldPartialPath))
     const newFullPath = decodeURI(this.prependPath(newPartialPath))
 
@@ -133,6 +135,12 @@ export default class S3Manager extends FileStoreManager {
         Key: newFullPath
       })
     )
+    return makeAppURL(appOrigin, `/assets/${newPartialPath}`)
+  }
+
+  async moveFile(oldPartialPath: PartialPath, newPartialPath: PartialPath) {
+    const oldFullPath = decodeURI(this.prependPath(oldPartialPath))
+    await this.copyFile(oldPartialPath, newPartialPath)
     await this.s3.send(
       new DeleteObjectCommand({
         Bucket: this.bucket,

packages/server/graphql/public/mutations/embedUserAsset.ts

@@ -1,10 +1,15 @@
 import {fetch} from '@whatwg-node/fetch'
 import base64url from 'base64url'
 import {createHash} from 'crypto'
+import {GraphQLError} from 'graphql'
 import mime from 'mime-types'
+import makeAppURL from 'parabol-client/utils/makeAppURL'
+import appOrigin from '../../../appOrigin'
+import type {AssetType, PartialPath} from '../../../fileStorage/FileStoreManager'
 import getFileStoreManager from '../../../fileStorage/getFileStoreManager'
 import {compressImage} from '../../../utils/compressImage'
-import type {MutationResolvers} from '../resolverTypes'
+import {Logger} from '../../../utils/Logger'
+import type {AssetScopeEnum, MutationResolvers} from '../resolverTypes'
 import {validateScope} from './uploadUserAsset'
 
 const fetchImage = async (url: string) => {
@@ -37,6 +42,27 @@ const embedUserAsset: MutationResolvers['embedUserAsset'] = async (
   const scopeCode = await validateScope(authToken, scope, scopeKey, dataLoader)
   if (typeof scopeCode !== 'string') return scopeCode
 
+  const hostedPrefix = makeAppURL(appOrigin, '/assets')
+  const isParabolHostedAsset = url.startsWith(hostedPrefix)
+  if (isParabolHostedAsset) {
+    // if we host it, just make a copy of it in the new directory
+    const manager = getFileStoreManager()
+    const sourcePartialPath = url.slice(hostedPrefix.length + 1) as PartialPath
+    const [scope, _sourceScopeCode, assetType, filename] = sourcePartialPath.split('/') as [
+      AssetScopeEnum,
+      string,
+      AssetType,
+      string
+    ]
+    const targetPartialPath = `${scope}/${scopeCode}/${assetType}/${filename}` as PartialPath
+    try {
+      const url = await manager.copyFile(sourcePartialPath, targetPartialPath)
+      return {url}
+    } catch (e) {
+      Logger.warn(e)
+      throw new GraphQLError('Could not copy parabol asset')
+    }
+  }
   const asset = await fetchImage(url)
   if (!asset) {
     return {error: {message: 'Unable to fetch asset'}}