From 95ac4223e6b44a4b2b4d4ff7418337931d97b178 Mon Sep 17 00:00:00 2001
From: Matt Krick <matt.krick@gmail.com>
Date: Tue, 17 Dec 2024 12:49:53 -0800
Subject: [PATCH] fix missing content on drag

Signed-off-by: Matt Krick <matt.krick@gmail.com>
---
 .../components/ReflectionCard/ReflectionCard.tsx      | 11 ++++-------
 .../components/RetroReflectPhase/PhaseItemEditor.tsx  |  2 +-
 .../client/components/promptResponse/TipTapEditor.tsx |  2 +-
 packages/client/hooks/useDraggableReflectionCard.tsx  |  3 ++-
 packages/client/hooks/useTipTapReflectionEditor.ts    |  2 +-
 packages/client/styles/theme/global.css               |  3 +++
 6 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/packages/client/components/ReflectionCard/ReflectionCard.tsx b/packages/client/components/ReflectionCard/ReflectionCard.tsx
index fabb5b61988..7ef82a45d52 100644
--- 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
index 98d03af1177..1b94ac46480 100644
--- 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
index 597b94225c4..59a5d5f5dbe 100644
--- 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
index 35fb59d29c7..c860c501734 100644
--- 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
index 151eb90e1d2..978d7fd45c3 100644
--- 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
index 0d36add3f84..3d11fe8cdff 100644
--- 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;