feat: embed and compress images

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

Author: mattkrick

packages/client/components/ReflectionGroup/ReflectionGroup.tsx

@@ -186,10 +186,15 @@ const ReflectionGroup = (props: Props) => {
   }
 
   const watchForClick = useEventCallback((e: MouseEvent) => {
-    const isClickOnGroup = e.composedPath().find((el) => el === groupRef.current)
+    const target = e.target as Node
+    const isClickOnGroup = groupRef.current?.contains(target)
     if (!isClickOnGroup) {
-      document.removeEventListener('click', watchForClick)
-      setIsEditing(false)
+      const isClickInRoot = document.getElementById('root')?.contains(target)
+      // If the click is in a portal, ignore it, it could be link editing inside tiptap, etc.
+      if (isClickInRoot) {
+        document.removeEventListener('click', watchForClick)
+        setIsEditing(false)
+      }
     }
   })
   const onClick = () => {

packages/client/mutations/useEmbedUserAsset.ts

@@ -0,0 +1,27 @@
+import graphql from 'babel-plugin-relay/macro'
+import {useMutation, type UseMutationConfig} from 'react-relay'
+import {useEmbedUserAssetMutation as TuseEmbedUserAssetMutation} from '../__generated__/useEmbedUserAssetMutation.graphql'
+
+const mutation = graphql`
+  mutation useEmbedUserAssetMutation($url: String!) {
+    embedUserAsset(url: $url) {
+      ... on ErrorPayload {
+        error {
+          message
+        }
+      }
+      ... on UploadUserAssetSuccess {
+        url
+      }
+    }
+  }
+`
+
+export const useEmbedUserAsset = () => {
+  const [commit, submitting] = useMutation<TuseEmbedUserAssetMutation>(mutation)
+
+  const execute = (config: UseMutationConfig<TuseEmbedUserAssetMutation>) => {
+    return commit(config)
+  }
+  return [execute, submitting] as const
+}

packages/client/tiptap/extensions/imageUpload/ImageSelector.tsx

@@ -2,6 +2,7 @@ import type {Editor} from '@tiptap/core'
 import {useState} from 'react'
 import Tab from '../../../components/Tab/Tab'
 import Tabs from '../../../components/Tabs/Tabs'
+import {ImageSelectorEmbedTab} from './ImageSelectorEmbedTab'
 import {ImageSelectorUploadTab} from './ImageSelectorUploadTab'
 
 interface Props {
@@ -17,7 +18,7 @@ const tabs = [
   {
     id: 'embedLink',
     label: 'Embed link',
-    Component: ImageSelectorUploadTab
+    Component: ImageSelectorEmbedTab
   },
   {
     id: 'addGif',

packages/client/tiptap/extensions/imageUpload/ImageSelectorEmbedTab.tsx

@@ -0,0 +1,55 @@
+import {useRef} from 'react'
+import useAtmosphere from '../../../hooks/useAtmosphere'
+import {useEmbedUserAsset} from '../../../mutations/useEmbedUserAsset'
+import {Button} from '../../../ui/Button/Button'
+
+interface Props {
+  setImageURL: (url: string) => void
+}
+
+export const ImageSelectorEmbedTab = (props: Props) => {
+  const {setImageURL} = props
+  const ref = useRef<HTMLInputElement>(null)
+  const atmosphere = useAtmosphere()
+  const [commit] = useEmbedUserAsset()
+  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    const url = ref.current?.value
+    if (!url) return
+    commit({
+      variables: {url},
+      onCompleted: (res) => {
+        const {embedUserAsset} = res
+        const {url} = embedUserAsset!
+        const message = embedUserAsset?.error?.message
+        if (message) {
+          atmosphere.eventEmitter.emit('addSnackbar', {
+            key: 'errorEmbeddingAsset',
+            message,
+            autoDismiss: 5
+          })
+          return
+        }
+        setImageURL(url!)
+      }
+    })
+  }
+  return (
+    <form
+      className='flex w-full min-w-44 flex-col items-center justify-center space-y-3 rounded-md bg-slate-100 p-2'
+      onSubmit={onSubmit}
+    >
+      <input
+        autoComplete='off'
+        autoFocus
+        placeholder='Paste the image link…'
+        type='url'
+        className='w-full outline-none focus:ring-2'
+        ref={ref}
+      />
+      <Button variant='outline' shape='pill' className='w-full' type='submit'>
+        Embed image
+      </Button>
+    </form>
+  )
+}

packages/client/tiptap/extensions/imageUpload/ImageSelectorUploadTab.tsx

@@ -56,7 +56,7 @@ export const ImageSelectorUploadTab = (props: Props) => {
   }
   return (
     <div className='flex min-w-44 items-center justify-center rounded-md bg-slate-100 p-2'>
-      <Button variant='outline' shape='pill' className='w-full' onClick={onClick}>
+      <Button variant='outline' shape='pill' className='w-full' onClick={onClick} autoFocus>
         Upload file
       </Button>
       <input

packages/client/tiptap/extensions/imageUpload/ImageUploadMenu.tsx

@@ -11,19 +11,29 @@ export const ImageUploadMenu = ({editor}: Props) => {
   const ref = useRef<HTMLDivElement>(null)
   const [transform, setTransform] = useState('')
   const isActive = editor.isActive('imageUpload')
+  useEffect(() => {
+    setOpen(isActive)
+  }, [isActive])
 
+  const [open, setOpen] = useState(isActive)
+  const onOpenChange = (willOpen: boolean) => {
+    if (!willOpen) {
+      setOpen(false)
+      return
+    }
+  }
   useEffect(() => {
     if (!ref.current) return
     if (!isActive) return
     const coords = editor.view.coordsAtPos(editor.state.selection.from)
     const {left, top, right} = coords
     const childWidth = ref.current?.getBoundingClientRect().width ?? 0
-    const widthDiff = (childWidth - (right - left)) / 2
+    const widthDiff = childWidth ? (childWidth - (right - left)) / 2 : 0
     setTransform(`translate(${left - widthDiff}px,${top + 40}px)`)
   }, [isActive, ref.current])
 
   return (
-    <Popover.Root open={isActive}>
+    <Popover.Root open={open} onOpenChange={onOpenChange}>
       <Popover.Trigger asChild />
       <Popover.Portal>
         <Popover.Content

packages/client/tiptap/extensions/imageUpload/ImageUploadView.tsx

@@ -1,10 +1,21 @@
 import ImageIcon from '@mui/icons-material/Image'
-import {NodeViewWrapper} from '@tiptap/react'
+import {NodeViewWrapper, type Editor} from '@tiptap/react'
+import {useCallback} from 'react'
+
+interface Props {
+  getPos(): number
+  editor: Editor
+}
+
+export const ImageUploadView = (props: Props) => {
+  const {getPos, editor} = props
+  const onClick = useCallback(() => {
+    editor.commands.setNodeSelection(getPos())
+  }, [getPos, editor.commands])
 
-export const ImageUploadView = () => {
   return (
     <NodeViewWrapper>
-      <div className='m-0 p-0' data-drag-handle>
+      <div className='m-0 p-0' data-drag-handle onClick={onClick}>
         <div className='flex items-center rounded bg-slate-200 p-2'>
           <ImageIcon className='size-6' />
           <span className='text-sm'>Add an image</span>

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

@@ -0,0 +1,52 @@
+import mime from 'mime-types'
+import getFileStoreManager from '../../../fileStorage/getFileStoreManager'
+import {getUserId} from '../../../utils/authorization'
+import {compressImage} from '../../../utils/compressImage'
+import {MutationResolvers} from '../resolverTypes'
+
+const fetchImage = async (url: string) => {
+  try {
+    const res = await fetch(url)
+    if (!res.ok) {
+      console.error('Failed to fetch the resource:', res.statusText)
+      return null
+    }
+
+    const contentType = res.headers.get('Content-Type')
+    if (!contentType) {
+      console.error('Content-Type header is missing')
+      return null
+    }
+
+    return {contentType, buffer: Buffer.from(await res.arrayBuffer())}
+  } catch (error) {
+    console.error('Error fetching the resource:', error)
+    return null
+  }
+}
+
+const embedUserAsset: MutationResolvers['embedUserAsset'] = async (_, {url}, {authToken}) => {
+  // AUTH
+  const userId = getUserId(authToken)
+
+  // VALIDATION
+  const asset = await fetchImage(url)
+  if (!asset) {
+    return {error: {message: 'Unable to fetch asset'}}
+  }
+  const {contentType, buffer} = asset
+  const ext = mime.extension(contentType)
+  if (!ext) {
+    return {error: {message: `Unable to determine extension for ${contentType}`}}
+  }
+  const {buffer: compressedBuffer, extension} = await compressImage(buffer, ext)
+  if (compressedBuffer.byteLength > 2 ** 23) {
+    return {error: {message: `Max asset size is ${2 ** 23} bytes`}}
+  }
+  // RESOLUTION
+  const manager = getFileStoreManager()
+  const hostedUrl = await manager.putUserAsset(compressedBuffer, userId, extension)
+  return {url: hostedUrl}
+}
+
+export default embedUserAsset

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

@@ -1,6 +1,7 @@
 import mime from 'mime-types'
 import getFileStoreManager from '../../../fileStorage/getFileStoreManager'
 import {getUserId} from '../../../utils/authorization'
+import {compressImage} from '../../../utils/compressImage'
 import {MutationResolvers} from '../resolverTypes'
 
 const uploadUserAsset: MutationResolvers['uploadUserAsset'] = async (_, {file}, {authToken}) => {
@@ -14,12 +15,13 @@ const uploadUserAsset: MutationResolvers['uploadUserAsset'] = async (_, {file},
   if (!ext) {
     return {error: {message: `Unable to determine extension for ${contentType}`}}
   }
-  if (buffer.byteLength > 2 ** 23) {
+  const {buffer: compressedBuffer, extension} = await compressImage(buffer, ext)
+  if (compressedBuffer.byteLength > 2 ** 23) {
     return {error: {message: `Max asset size is ${2 ** 23} bytes`}}
   }
   // RESOLUTION
   const manager = getFileStoreManager()
-  const url = await manager.putUserAsset(buffer, userId, ext)
+  const url = await manager.putUserAsset(compressedBuffer, userId, extension)
   return {url}
 }
 

packages/server/graphql/public/typeDefs/Mutation.graphql

@@ -1977,12 +1977,22 @@ type Mutation {
     orgId: ID!
   ): UpdateOrgPayload!
 
+  """
+  Take any asset & host it in the file store
+  """
+  embedUserAsset(
+    """
+    the asset URL
+    """
+    url: String!
+  ): UploadUserAssetPayload
+
   """
   Upload any asset owned by a user
   """
   uploadUserAsset(
     """
-    the user avatar image file
+    the asset file
     """
     file: File!
   ): UploadUserAssetPayload

packages/server/utils/compressImage.ts

@@ -0,0 +1,20 @@
+import sharp from 'sharp'
+
+export const compressImage = async (buffer: Buffer, ext: string) => {
+  const extension = ext.replace(/^\./, '')
+  if (extension === 'avif') return {buffer, extension}
+  const animationFormats = ['gif', 'webp']
+  if (animationFormats.includes(extension)) {
+    const image = sharp(buffer, {animated: true})
+    const {pages} = await image.metadata()
+    if (pages && pages > 1) {
+      if (extension === 'webp') return {buffer, extension}
+      // animated AVIF isn't supported by sharp yet, so fallback to using webp
+      const webpBuffer = await image.webp({quality: 80}).toBuffer()
+      return {buffer: webpBuffer, extension: 'webp'}
+    }
+  }
+  // AVIF is the goal format,
+  const avifBuffer = await sharp(buffer).avif({quality: 70}).toBuffer()
+  return {buffer: avifBuffer, extension: 'avif'}
+}