fix: tiptap bugs (#10768)

Signed-off-by: Matt Krick <[email protected]>

packages/client/components/DiscussionThreadInput.tsx

@@ -6,14 +6,13 @@ import {DiscussionThreadInput_viewer$key} from '~/__generated__/DiscussionThread
 import useAtmosphere from '~/hooks/useAtmosphere'
 import useMutationProps from '~/hooks/useMutationProps'
 import AddCommentMutation from '~/mutations/AddCommentMutation'
-import EditCommentingMutation from '~/mutations/EditCommentingMutation'
 import {SORT_STEP} from '~/utils/constants'
 import dndNoise from '~/utils/dndNoise'
-import {useBeforeUnload} from '../hooks/useBeforeUnload'
 import useClickAway from '../hooks/useClickAway'
 import useEventCallback from '../hooks/useEventCallback'
 import useInitialLocalState from '../hooks/useInitialLocalState'
 import {useTipTapCommentEditor} from '../hooks/useTipTapCommentEditor'
+import {useTipTapTypingStatus} from '../hooks/useTipTapTypingStatus'
 import CreateTaskMutation from '../mutations/CreateTaskMutation'
 import {convertTipTapTaskContent} from '../shared/tiptap/convertTipTapTaskContent'
 import anonymousAvatar from '../styles/theme/images/anonymous-avatar.svg'
@@ -129,7 +128,6 @@ const DiscussionThreadInput = (props: Props) => {
   const allowPolls = false // TODO: change to "allowedThreadables.includes('poll')" once feature is done
   const onSubmit = useEventCallback(() => {
     if (submitting || !editor || editor.isEmpty) return
-    ensureNotCommenting()
     addComment(JSON.stringify(editor.getJSON()))
   })
   const {editor, setLinkState, linkState} = useTipTapCommentEditor(initialContent, {
@@ -141,39 +139,10 @@ const DiscussionThreadInput = (props: Props) => {
     onEscape: clearReplyingTo
   })
 
+  useTipTapTypingStatus(editor, discussionId)
   const {submitting, onError, onCompleted, submitMutation} = useMutationProps()
-  const [isCommenting, setIsCommenting] = useState(false)
-  const [lastTypedTimestamp, setLastTypedTimestamp] = useState<Date>()
-  useInitialLocalState(discussionId, 'isAnonymousComment', false)
-  useBeforeUnload(() => {
-    EditCommentingMutation(
-      atmosphere,
-      {
-        isCommenting: false,
-        discussionId
-      },
-      {onError, onCompleted}
-    )
-  })
 
-  useEffect(() => {
-    const inactiveCommenting = setTimeout(() => {
-      if (isCommenting) {
-        EditCommentingMutation(
-          atmosphere,
-          {
-            isCommenting: false,
-            discussionId
-          },
-          {onError, onCompleted}
-        )
-        setIsCommenting(false)
-      }
-    }, 5000)
-    return () => {
-      clearTimeout(inactiveCommenting)
-    }
-  }, [lastTypedTimestamp])
+  useInitialLocalState(discussionId, 'isAnonymousComment', false)
 
   const toggleAnonymous = () => {
     commitLocalUpdate(atmosphere, (store) => {
@@ -203,35 +172,6 @@ const DiscussionThreadInput = (props: Props) => {
     editor?.commands.clearContent()
     clearReplyingTo()
   }
-
-  const ensureCommenting = () => {
-    const timestamp = new Date()
-    setLastTypedTimestamp(timestamp)
-    if (isAnonymousComment || isCommenting) return
-    EditCommentingMutation(
-      atmosphere,
-      {
-        isCommenting: true,
-        discussionId
-      },
-      {onError, onCompleted}
-    )
-    setIsCommenting(true)
-  }
-
-  const ensureNotCommenting = () => {
-    if (isAnonymousComment || !isCommenting) return
-    EditCommentingMutation(
-      atmosphere,
-      {
-        isCommenting: false,
-        discussionId
-      },
-      {onError, onCompleted}
-    )
-    setIsCommenting(false)
-  }
-
   const addTask = () => {
     const {viewerId} = atmosphere
     const threadParentId = replyingTo?.threadParentId ?? replyingTo?.id
@@ -279,8 +219,6 @@ const DiscussionThreadInput = (props: Props) => {
             editor={editor}
             linkState={linkState}
             setLinkState={setLinkState}
-            onBlur={ensureNotCommenting}
-            onFocus={ensureCommenting}
           />
         </div>
         <SendCommentButton commentSubmitState={commentSubmitState} onSubmit={onSubmit} />

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 px-4 text-sm leading-none', className)}
+        className={cn('min-h-10 break-all px-4 text-sm leading-none', className)}
       />
     </>
   )

packages/client/hooks/useTipTapTypingStatus.ts

@@ -0,0 +1,49 @@
+import type {Editor} from '@tiptap/core'
+import {useEffect, useRef, useState} from 'react'
+import EditCommentingMutation from '../mutations/EditCommentingMutation'
+import useAtmosphere from './useAtmosphere'
+
+export const useTipTapTypingStatus = (editor: Editor | null, discussionId: string) => {
+  const [isTyping, setIsTyping] = useState<boolean | null>(null)
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null)
+  const atmosphere = useAtmosphere()
+
+  useEffect(() => {
+    if (!editor) return
+    const handleUpdate = () => {
+      setIsTyping(true)
+      if (timeoutRef.current) clearTimeout(timeoutRef.current)
+      timeoutRef.current = setTimeout(() => setIsTyping(false), 5000)
+    }
+
+    const handleBlur = () => {
+      setIsTyping(false)
+      if (timeoutRef.current) clearTimeout(timeoutRef.current)
+    }
+
+    editor.on('update', handleUpdate)
+    editor.on('focus', handleUpdate)
+    editor.on('blur', handleBlur)
+
+    return () => {
+      editor.off('update', handleUpdate)
+      editor.off('focus', handleUpdate)
+      editor.off('blur', handleBlur)
+      if (timeoutRef.current) clearTimeout(timeoutRef.current)
+    }
+  }, [editor])
+
+  useEffect(() => {
+    if (isTyping === null) return
+    EditCommentingMutation(
+      atmosphere,
+      {
+        isCommenting: isTyping,
+        discussionId
+      },
+      {}
+    )
+  }, [isTyping])
+
+  return isTyping
+}

packages/client/mutations/EditCommentingMutation.ts

@@ -1,7 +1,7 @@
 import graphql from 'babel-plugin-relay/macro'
 import {commitMutation} from 'react-relay'
 import {EditCommentingMutation as TEditCommentingMutation} from '../__generated__/EditCommentingMutation.graphql'
-import {StandardMutation} from '../types/relayMutations'
+import {StandardMutation, type OptionalHandlers} from '../types/relayMutations'
 
 graphql`
   fragment EditCommentingMutation_meeting on EditCommentingSuccess {
@@ -28,7 +28,7 @@ const mutation = graphql`
   }
 `
 
-const EditCommentingMutation: StandardMutation<TEditCommentingMutation> = (
+const EditCommentingMutation: StandardMutation<TEditCommentingMutation, OptionalHandlers> = (
   atmosphere,
   variables
 ) => {