feat: move Comment to TipTap (#10576)

Signed-off-by: Matt Krick <[email protected]>
ParabolInc · Dec 11, 2024 · 2fa20b1 · 2fa20b1
1 parent 9572815
commit 2fa20b1
Show file tree

Hide file tree

Showing 66 changed files with 558 additions and 1,293 deletions.
diff --git a/codegen.json b/codegen.json
@@ -82,7 +82,7 @@
           "CreateStripeSubscriptionSuccess": "./types/CreateStripeSubscriptionSuccess#CreateStripeSubscriptionSuccessSource",
           "CreateTaskPayload": "./types/CreateTaskPayload#CreateTaskPayloadSource",
           "DeleteCommentSuccess": "./types/DeleteCommentSuccess#DeleteCommentSuccessSource",
-          "Discussion": "../../postgres/queries/generated/getDiscussionsByIdsQuery#IGetDiscussionsByIdsQueryResult",
+          "Discussion": "../../postgres/types/index#Discussion",
           "DomainJoinRequest": "../../database/types/DomainJoinRequest#default as DomainJoinRequestDB",
           "EndTeamPromptSuccess": "./types/EndTeamPromptSuccess#EndTeamPromptSuccessSource",
           "File": "./types/File#TFile",

diff --git a/packages/client/components/AddPollButton.tsx b/packages/client/components/AddPollButton.tsx
@@ -29,15 +29,14 @@ const AddPollLabel = styled('div')({
 
 interface Props {
   onClick: () => void
-  dataCy: string
   disabled?: boolean
 }
 
 const AddPollButton = (props: Props) => {
-  const {onClick, dataCy, disabled} = props
+  const {onClick, disabled} = props
 
   return (
-    <StyledPlainButton data-cy={`${dataCy}-add`} onClick={onClick} disabled={disabled}>
+    <StyledPlainButton onClick={onClick} disabled={disabled}>
       <AddPollIcon />
       <AddPollLabel>Add a poll</AddPollLabel>
     </StyledPlainButton>

diff --git a/packages/client/components/AddTaskButton.tsx b/packages/client/components/AddTaskButton.tsx
@@ -29,15 +29,14 @@ const AddTaskLabel = styled('div')({
 
 interface Props {
   onClick: () => void
-  dataCy: string
   disabled?: boolean
 }
 
 const AddTaskButton = (props: Props) => {
-  const {onClick, dataCy, disabled} = props
+  const {onClick, disabled} = props
 
   return (
-    <StyledPlainButton data-cy={`${dataCy}-add`} onClick={onClick} disabled={disabled}>
+    <StyledPlainButton onClick={onClick} disabled={disabled}>
       <AddTaskIcon />
       <AddTaskLabel>Add a task</AddTaskLabel>
     </StyledPlainButton>

diff --git a/packages/client/components/CommentAuthorOptionsButton.tsx b/packages/client/components/CommentAuthorOptionsButton.tsx
@@ -38,16 +38,14 @@ const StyledIcon = styled(MoreVert)({
 interface Props {
   commentId: string
   editComment: () => void
-  dataCy: string
   meetingId: string
 }
 
 const CommentAuthorOptionsButton = (props: Props) => {
-  const {commentId, editComment, dataCy, meetingId} = props
+  const {commentId, editComment, meetingId} = props
   const {togglePortal, originRef, menuPortal, menuProps} = useMenu(MenuPosition.UPPER_RIGHT)
   return (
     <StyledButton
-      data-cy={`${dataCy}-dropdown-menu`}
       onMouseEnter={CommentAuthorOptionsDropdown.preload}
       ref={originRef}
       onClick={togglePortal}

diff --git a/packages/client/components/DiscussionMentioned.tsx b/packages/client/components/DiscussionMentioned.tsx
@@ -1,25 +1,13 @@
-import styled from '@emotion/styled'
 import graphql from 'babel-plugin-relay/macro'
-import {Editor} from 'draft-js'
 import {useFragment} from 'react-relay'
 import NotificationAction from '~/components/NotificationAction'
 import {DiscussionMentioned_notification$key} from '../__generated__/DiscussionMentioned_notification.graphql'
-import useEditorState from '../hooks/useEditorState'
 import useRouter from '../hooks/useRouter'
-import {cardShadow} from '../styles/elevation'
+import {useTipTapCommentEditor} from '../hooks/useTipTapCommentEditor'
 import anonymousAvatar from '../styles/theme/images/anonymous-avatar.svg'
 import fromStageIdToUrl from '../utils/meetings/fromStageIdToUrl'
 import NotificationTemplate from './NotificationTemplate'
-
-const EditorWrapper = styled('div')({
-  backgroundColor: '#fff',
-  borderRadius: 4,
-  boxShadow: cardShadow,
-  fontSize: 14,
-  lineHeight: '20px',
-  margin: '4px 0 0',
-  padding: 8
-})
+import {TipTapEditor} from './promptResponse/TipTapEditor'
 
 interface Props {
   notification: DiscussionMentioned_notification$key
@@ -74,24 +62,20 @@ const DiscussionMentioned = (props: Props) => {
     )
   }
 
-  const [editorState] = useEditorState(comment.content)
-
+  const {editor} = useTipTapCommentEditor(comment.content, {
+    readOnly: true
+  })
+  if (!editor) return null
   return (
     <NotificationTemplate
       avatar={authorPicture}
       message={`${authorName} mentioned you in a discussion in ${meetingName}.`}
       notification={notification}
       action={<NotificationAction label={'See the discussion'} onClick={goThere} />}
     >
-      <EditorWrapper>
-        <Editor
-          readOnly
-          editorState={editorState}
-          onChange={() => {
-            /*noop*/
-          }}
-        />
-      </EditorWrapper>
+      <div className='my-1 rounded bg-white p-2 text-sm leading-5 shadow-card'>
+        <TipTapEditor editor={editor} />
+      </div>
     </NotificationTemplate>
   )
 }

diff --git a/packages/client/components/DiscussionThread.tsx b/packages/client/components/DiscussionThread.tsx
@@ -53,8 +53,6 @@ const DiscussionThread = (props: Props) => {
   } = props
   const {viewerId} = useAtmosphere()
   const isDrawer = !!width // hack to say this is in a poker meeting
-  const listRef = useRef<HTMLDivElement>(null)
-  const editorRef = useRef<HTMLTextAreaElement>(null)
   const ref = useRef<HTMLDivElement>(null)
   const data = usePreloadedQuery<DiscussionThreadQuery>(
     graphql`
@@ -66,7 +64,9 @@ const DiscussionThread = (props: Props) => {
             ...DiscussionThreadInput_discussion
             ...DiscussionThreadList_discussion
             id
-            replyingToCommentId
+            replyingTo {
+              id
+            }
             commentors {
               id
               preferredName
@@ -108,7 +108,7 @@ const DiscussionThread = (props: Props) => {
     return <div>No discussion found!</div>
   }
 
-  const {replyingToCommentId, thread} = discussion
+  const {replyingTo, thread} = discussion
   const edges = thread?.edges ?? [] // should never happen, but Terry reported it in demo. likely relay error
   const threadables = edges.map(({node}) => node)
   const getMaxSortOrder = () => {
@@ -119,13 +119,10 @@ const DiscussionThread = (props: Props) => {
   return (
     <Wrapper isExpanded={isExpanded} width={width} ref={ref}>
       <DiscussionThreadList
-        dataCy='discuss-thread-list'
         discussion={discussion}
         allowedThreadables={allowedThreadables}
         preferredNames={preferredNames}
         threadables={threadables}
-        ref={listRef}
-        editorRef={editorRef}
         viewer={viewer}
         header={header}
         emptyState={emptyState}
@@ -135,9 +132,7 @@ const DiscussionThread = (props: Props) => {
       {!showTranscription && (
         <DiscussionThreadInput
           allowedThreadables={allowedThreadables}
-          dataCy='discuss-input'
-          editorRef={editorRef}
-          isDisabled={!!replyingToCommentId}
+          isDisabled={!!replyingTo?.id}
           getMaxSortOrder={getMaxSortOrder}
           discussion={discussion}
           viewer={viewer}