fix missing content on drag

Signed-off-by: Matt Krick <[email protected]>
ParabolInc · Dec 17, 2024 · 95ac422 · 95ac422
1 parent 0510dd4
commit 95ac422
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 11 deletions.
diff --git a/packages/client/components/ReflectionCard/ReflectionCard.tsx b/packages/client/components/ReflectionCard/ReflectionCard.tsx
@@ -1,5 +1,4 @@
 import styled from '@emotion/styled'
-import {generateText} from '@tiptap/core'
 import graphql from 'babel-plugin-relay/macro'
 import {MouseEvent, useEffect, useRef, useState} from 'react'
 import {commitLocalUpdate, useFragment} from 'react-relay'
@@ -19,7 +18,6 @@ import useTooltip from '../../hooks/useTooltip'
 import EditReflectionMutation from '../../mutations/EditReflectionMutation'
 import RemoveReflectionMutation from '../../mutations/RemoveReflectionMutation'
 import UpdateReflectionContentMutation from '../../mutations/UpdateReflectionContentMutation'
-import {serverTipTapExtensions} from '../../shared/tiptap/serverTipTapExtensions'
 import {PALETTE} from '../../styles/paletteV3'
 import {Breakpoint, ZIndex} from '../../types/constEnums'
 import {cn} from '../../ui/cn'
@@ -296,7 +294,6 @@ const ReflectionCard = (props: Props) => {
     !isDemoRoute() &&
     (isHovering || !isDesktop)
   if (!editor) return null
-  console.log('render a card', generateText(editor.getJSON(), serverTipTapExtensions))
   return (
     <ReflectionCardRoot
       data-cy={`${dataCy}-root`}
@@ -309,15 +306,15 @@ const ReflectionCard = (props: Props) => {
 
       <div
         className={cn(
-          'relative   w-full overflow-auto text-sm leading-5 text-slate-700',
-          isClipped ? 'max-h-11' : 'max-h-[104px]',
-          userSelect
+          'relative w-full overflow-auto text-sm leading-5 text-slate-700',
+          isClipped ? 'max-h-11' : 'max-h-[104px]'
         )}
       ></div>
       <TipTapEditor
         className={cn(
           'flex min-h-4 w-full items-center px-4 pt-3 leading-4',
-          disableAnonymity ? 'pb-0' : 'pb-3'
+          disableAnonymity ? 'pb-0' : 'pb-3',
+          userSelect
         )}
         editor={editor}
         linkState={linkState}

diff --git a/packages/client/components/RetroReflectPhase/PhaseItemEditor.tsx b/packages/client/components/RetroReflectPhase/PhaseItemEditor.tsx
@@ -123,7 +123,7 @@ const PhaseItemEditor = (props: Props) => {
     })
   })
   const {editor, linkState, setLinkState} = useTipTapReflectionEditor(
-    JSON.stringify({type: 'doc', content: []}),
+    JSON.stringify({type: 'doc', content: [{type: 'paragraph'}]}),
     {
       atmosphere,
       teamId,

diff --git a/packages/client/components/promptResponse/TipTapEditor.tsx b/packages/client/components/promptResponse/TipTapEditor.tsx
@@ -33,7 +33,7 @@ export const TipTapEditor = (props: Props) => {
         ref={ref as any}
         {...rest}
         editor={editor}
-        className={cn('min-h-10 cursor-text px-4 text-sm leading-5', className)}
+        className={cn('min-h-10 px-4 text-sm leading-5', className)}
       />
     </>
   )

diff --git a/packages/client/hooks/useDraggableReflectionCard.tsx b/packages/client/hooks/useDraggableReflectionCard.tsx
@@ -335,8 +335,9 @@ const useDragAndDrop = (
       // We want to clone the reflection card after the properties were set correctly, especially isDragging, thus the mutation needs to run first.
       // in some cases, e.g. moving a card out of a reflection group, the component tree is shuffled which will set the drag.ref to null.
       const dragRef = drag.ref
-      StartDraggingReflectionMutation(atmosphere, {reflectionId, dragId: drag.id})
+      // clone must come first because once isViewerDragging gets set then the tiptap element disappears if dragging from an expanded stack ???
       drag.clone = cloneReflection(dragRef, reflectionId)
+      StartDraggingReflectionMutation(atmosphere, {reflectionId, dragId: drag.id})
     }
     if (!drag.clone) return
     drag.clientY = clientY

diff --git a/packages/client/hooks/useTipTapReflectionEditor.ts b/packages/client/hooks/useTipTapReflectionEditor.ts
@@ -76,7 +76,7 @@ export const useTipTapReflectionEditor = (
       ].filter(isValid),
       editable: !readOnly
     },
-    [readOnly]
+    [contentJSON, readOnly]
   )
   return {editor: editorRef.current, linkState, setLinkState}
 }
diff --git a/packages/client/styles/theme/global.css b/packages/client/styles/theme/global.css
@@ -177,6 +177,9 @@
 
 /** Customize TipTap */
 
+.ProseMirror {
+  width: 100%;
+}
 .ProseMirror :is(ul, ol) {
   list-style-position: outside;
   padding-inline-start: 16px;