feat: Support image resizing in TipTap

packages/client/components/ReflectionCard/ReflectionCard.tsx

@@ -201,14 +201,16 @@ const ReflectionCard = (props: Props) => {
   } = useTooltip<HTMLDivElement>(MenuPosition.UPPER_CENTER)
   const handleEditorFocus = () => {
     if (isTempId(reflectionId)) return
+    if (reflection.isEditing) {
+      return
+    }
+    updateIsEditing(true)
     EditReflectionMutation(atmosphere, {isEditing: true, meetingId, promptId})
   }
 
   const updateIsEditing = (isEditing: boolean) => {
     commitLocalUpdate(atmosphere, (store) => {
-      const reflection = store.get(reflectionId)
-      if (!reflection) return
-      reflection.setValue(isEditing, 'isEditing')
+      store.get(reflectionId)?.setValue(isEditing, 'isEditing')
     })
   }
 
@@ -244,16 +246,22 @@ const ReflectionCard = (props: Props) => {
       {content: contentStr, reflectionId},
       {onError, onCompleted}
     )
-    commitLocalUpdate(atmosphere, (store) => {
-      const reflection = store.get(reflectionId)
-      if (!reflection) return
-      reflection.setValue(false, 'isEditing')
-    })
   }
 
-  const handleEditorBlur = () => {
+  const handleEditorBlur = (e: React.FocusEvent<HTMLDivElement>) => {
     if (isTempId(reflectionId)) return
+    const newFocusedElement = e.relatedTarget as Node
+    // don't trigger a blur if a button inside the element is clicked
+    if (e.currentTarget.contains(newFocusedElement)) return
+    const isClickInModal = !(
+      newFocusedElement === null || document.getElementById('root')?.contains(newFocusedElement)
+    )
+    // If they clicked in a modal, then ignore the blur event, we'll refocus the editor after the modal closes
+    if (isClickInModal) {
+      return
+    }
     handleContentUpdate()
+    updateIsEditing(false)
     EditReflectionMutation(atmosphere, {isEditing: false, meetingId, promptId})
   }
 

packages/client/components/RetroReflectPhase/PhaseItemEditor.tsx

@@ -1,6 +1,5 @@
 import styled from '@emotion/styled'
 import {useEventCallback} from '@mui/material'
-import {generateHTML} from '@tiptap/core'
 import graphql from 'babel-plugin-relay/macro'
 import * as React from 'react'
 import {MutableRefObject, RefObject, useEffect, useRef, useState} from 'react'
@@ -12,7 +11,6 @@ import usePortal from '../../hooks/usePortal'
 import {useTipTapReflectionEditor} from '../../hooks/useTipTapReflectionEditor'
 import CreateReflectionMutation from '../../mutations/CreateReflectionMutation'
 import EditReflectionMutation from '../../mutations/EditReflectionMutation'
-import {serverTipTapExtensions} from '../../shared/tiptap/serverTipTapExtensions'
 import {Elevation} from '../../styles/elevation'
 import {BezierCurve, ZIndex} from '../../types/constEnums'
 import {cn} from '../../ui/cn'
@@ -101,7 +99,7 @@ const PhaseItemEditor = (props: Props) => {
     const {top, left} = getBBox(phaseEditorRef.current)!
     const cardInFlight = {
       transform: `translate(${left}px,${top}px)`,
-      html: generateHTML(contentJSON, serverTipTapExtensions),
+      html: editor.getHTML(),
       key: content,
       isStart: true
     }

packages/client/components/RetroReflectPhase/ReflectionStack.tsx

@@ -6,12 +6,7 @@ import {useFragment} from 'react-relay'
 import {ReflectionStack_meeting$key} from '~/__generated__/ReflectionStack_meeting.graphql'
 import {PhaseItemColumn_meeting$data} from '../../__generated__/PhaseItemColumn_meeting.graphql'
 import useExpandedReflections from '../../hooks/useExpandedReflections'
-import {
-  Breakpoint,
-  ElementHeight,
-  ElementWidth,
-  ReflectionStackPerspective
-} from '../../types/constEnums'
+import {ElementWidth, ReflectionStackPerspective} from '../../types/constEnums'
 import ReflectionCard from '../ReflectionCard/ReflectionCard'
 import ExpandedReflectionStack from './ExpandedReflectionStack'
 import ReflectionStackPlaceholder from './ReflectionStackPlaceholder'
@@ -26,22 +21,6 @@ interface Props {
   stackTopRef: RefObject<HTMLDivElement>
 }
 
-const CardStack = styled('div')({
-  alignItems: 'flex-start',
-  display: 'flex',
-  flex: 1,
-  margin: '0 0 24px', // stacked cards + row gutter = 6 + 6 + 12 = 24
-  position: 'relative',
-  justifyContent: 'center',
-  [`@media screen and (min-width: ${Breakpoint.SINGLE_REFLECTION_COLUMN}px)`]: {
-    minHeight: ElementHeight.REFLECTION_CARD_MAX
-  }
-})
-
-const CenteredCardStack = styled('div')({
-  position: 'relative'
-})
-
 const ReflectionWrapper = styled('div')<{idx: number}>(({idx}): any => {
   const multiple = Math.min(idx, 2)
   const scaleX =
@@ -94,9 +73,15 @@ const ReflectionStack = (props: Props) => {
           closePortal={collapse}
         />
       )}
+
       <div>
-        <CardStack data-cy={dataCy} onClick={expand} ref={stackRef}>
-          <CenteredCardStack>
+        <div
+          data-cy={dataCy}
+          onClick={expand}
+          ref={stackRef}
+          className='relative mb-6 flex flex-1 select-none items-start justify-center single-reflection-column:min-h-[104px]'
+        >
+          <div className='relative'>
             {reflectionStack.map((reflection, idx) => {
               return (
                 <ReflectionWrapper
@@ -115,8 +100,8 @@ const ReflectionStack = (props: Props) => {
                 </ReflectionWrapper>
               )
             })}
-          </CenteredCardStack>
-        </CardStack>
+          </div>
+        </div>
       </div>
     </React.Fragment>
   )

packages/client/hooks/useBlockResizer.tsx

@@ -0,0 +1,69 @@
+import {useRef, type RefObject} from 'react'
+import getIsDrag from '../utils/retroGroup/getIsDrag'
+import useEventCallback from './useEventCallback'
+
+const makeDrag = () => ({
+  isDrag: false,
+  startX: 0,
+  lastX: 0,
+  side: 'left'
+})
+export const useBlockResizer = (
+  width: number,
+  setWidth: (width: number) => void,
+  updateAttributes: (attrs: Record<string, any>) => void,
+  aspectRatioRef: RefObject<number>
+) => {
+  const dragRef = useRef(makeDrag())
+  const onMouseUp = useEventCallback((e: MouseEvent | TouchEvent) => {
+    if (e.type === 'touchend') {
+      document.removeEventListener('touchmove', onMouseMove)
+    } else {
+      document.removeEventListener('mousemove', onMouseMove)
+    }
+    const aspectRatio = aspectRatioRef.current!
+    updateAttributes({width, height: Math.round(width / aspectRatio)})
+    dragRef.current = makeDrag()
+  })
+
+  const onMouseMove = useEventCallback((e: MouseEvent | TouchEvent) => {
+    // required to prevent address bar scrolling & other strange browser things on mobile view
+    e.preventDefault()
+    const isTouchMove = e.type === 'touchmove'
+    const {clientX} = isTouchMove ? (e as TouchEvent).touches[0]! : (e as MouseEvent)
+    const {current: drag} = dragRef
+    const wasDrag = drag.isDrag
+    if (!wasDrag) {
+      const isDrag = getIsDrag(clientX, 0, drag.startX, 0)
+      drag.isDrag = isDrag
+      if (!drag.isDrag) return
+    }
+    const sideCoefficient = drag.side === 'left' ? 1 : -1
+    const delta = (drag.lastX - clientX) * sideCoefficient
+    drag.lastX = clientX
+    const nextWidth = Math.max(48, width + delta)
+    setWidth(nextWidth)
+  })
+
+  const onMouseDown = useEventCallback(
+    (side: 'left' | 'right') =>
+      (e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>) => {
+        const isTouchStart = e.type === 'touchstart'
+        if (isTouchStart) {
+          document.addEventListener('touchmove', onMouseMove)
+          document.addEventListener('touchend', onMouseUp, {once: true})
+        } else {
+          document.addEventListener('mousemove', onMouseMove)
+          document.addEventListener('mouseup', onMouseUp, {once: true})
+        }
+        const {clientX} = isTouchStart
+          ? (e as React.TouchEvent<HTMLDivElement>).touches[0]!
+          : (e as React.MouseEvent<HTMLDivElement>)
+        dragRef.current.side = side
+        dragRef.current.startX = clientX
+        dragRef.current.lastX = clientX
+        dragRef.current.isDrag = false
+      }
+  )
+  return {onMouseDown, onMouseMove, onMouseUp, width}
+}

packages/client/hooks/useTipTapReflectionEditor.ts

@@ -70,7 +70,7 @@ export const useTipTapReflectionEditor = (
           'To-do list': false
         }),
         Focus,
-        ImageUpload.configure({editorWidth: ElementWidth.REFLECTION_CARD}),
+        ImageUpload.configure({editorWidth: ElementWidth.REFLECTION_CARD, editorHeight: 88}),
         ImageBlock,
         LoomExtension,
         Placeholder.configure({

packages/client/shared/tiptap/serverTipTapExtensions.ts

@@ -5,7 +5,7 @@ import {TaskItem} from '@tiptap/extension-task-item'
 import {TaskList} from '@tiptap/extension-task-list'
 import StarterKit from '@tiptap/starter-kit'
 import {LoomExtension} from '../../components/promptResponse/loomExtension'
-import ImageBlock from '../../tiptap/extensions/imageBlock/ImageBlock'
+import {ImageBlockBase} from '../../tiptap/extensions/imageBlock/ImageBlockBase'
 import {tiptapTagConfig} from '../../utils/tiptapTagConfig'
 import {ImageUploadBase} from './extensions/ImageUploadBase'
 
@@ -24,7 +24,7 @@ export const serverTipTapExtensions = [
     nested: true
   }),
   ImageUploadBase,
-  ImageBlock,
+  ImageBlockBase,
   LoomExtension,
   Mention.configure(mentionConfig),
   Mention.extend({name: 'taskTag'}).configure(tiptapTagConfig),

packages/client/styles/theme/global.css

@@ -235,17 +235,17 @@
     }
     &.ProseMirror-selectednode::after {
       content: '';
-      @apply absolute inset-0 h-full w-full rounded bg-[#2383e247];
+      @apply pointer-events-none absolute inset-0 h-full w-full select-none rounded bg-[#2383e247];
     }
   }
   .node-imageBlock {
     @apply relative;
     &.has-focus > div::after {
       content: '';
-      @apply absolute inset-0 h-full w-full bg-[#2383e247];
+      @apply pointer-events-none absolute inset-0 h-full w-full select-none bg-[#2383e247];
     }
     & img {
-      @apply overflow-hidden rounded-md border-2 border-transparent;
+      @apply overflow-hidden rounded-md;
     }
   }
 }

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

@@ -0,0 +1,21 @@
+import {cn} from '../../../ui/cn'
+
+interface Props {
+  className?: string
+  onMouseDown: (e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>) => void
+}
+export const BlockResizer = (props: Props) => {
+  const {className, onMouseDown} = props
+  return (
+    <div
+      onMouseDown={onMouseDown}
+      onTouchStart={onMouseDown}
+      className={cn(
+        ' absolute top-0 flex h-full w-4 items-center justify-center opacity-0 transition-opacity group-hover:opacity-100',
+        className
+      )}
+    >
+      <div className='h-[25%] w-1 cursor-col-resize rounded-3xl border-[1px] border-white/90 bg-slate-900/60 '></div>
+    </div>
+  )
+}

packages/client/tiptap/extensions/imageBlock/ImageBlock.ts

@@ -1,28 +1,8 @@
-import {mergeAttributes, Range} from '@tiptap/core'
-import {Image} from '@tiptap/extension-image'
 import {ReactNodeViewRenderer} from '@tiptap/react'
+import {ImageBlockBase} from './ImageBlockBase'
 import {ImageBlockView} from './ImageBlockView'
 
-declare module '@tiptap/core' {
-  interface Commands<ReturnType> {
-    imageBlock: {
-      setImageBlock: (attributes: {src: string}) => ReturnType
-      setImageBlockAt: (attributes: {src: string; pos: number | Range}) => ReturnType
-      setImageBlockAlign: (align: 'left' | 'center' | 'right') => ReturnType
-      setImageBlockWidth: (width: number) => ReturnType
-    }
-  }
-}
-
-export const ImageBlock = Image.extend({
-  name: 'imageBlock',
-
-  group: 'block',
-
-  defining: true,
-
-  isolating: true,
-
+export const ImageBlock = ImageBlockBase.extend({
   addAttributes() {
     return {
       src: {
@@ -32,11 +12,18 @@ export const ImageBlock = Image.extend({
           src: attributes.src
         })
       },
+      height: {
+        default: '100%',
+        parseHTML: (element) => element.getAttribute('height'),
+        renderHTML: (attributes) => ({
+          height: attributes.height
+        })
+      },
       width: {
         default: '100%',
-        parseHTML: (element) => element.getAttribute('data-width'),
+        parseHTML: (element) => element.getAttribute('width'),
         renderHTML: (attributes) => ({
-          'data-width': attributes.width
+          width: attributes.width
         })
       },
       align: {
@@ -55,19 +42,6 @@ export const ImageBlock = Image.extend({
       }
     }
   },
-
-  parseHTML() {
-    return [
-      {
-        tag: 'img[src]:not([src^="data:"])'
-      }
-    ]
-  },
-
-  renderHTML({HTMLAttributes}) {
-    return ['img', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)]
-  },
-
   addCommands() {
     return {
       setImageBlock:
@@ -90,7 +64,7 @@ export const ImageBlock = Image.extend({
       setImageBlockWidth:
         (width) =>
         ({commands}) =>
-          commands.updateAttributes('imageBlock', {width: `${Math.max(0, Math.min(100, width))}%`})
+          commands.updateAttributes('imageBlock', {width})
     }
   },