Switch comments/chat to rich text editor (#703)

* Switch comments/chat to rich text editor

* Remove TruncatedComment

* Re-add submit on enter

* Insert at mention on reply

* Update editor style for send button

* only submit on enter in chat

* code review: refactor

* use more specific type for upload

* fix ESlint and errors from merge

* fix trigger on every render eslint warning

* Notify people mentioned in comment

* fix type errors

common/comment.ts

@@ -1,3 +1,5 @@
+import type { JSONContent } from '@tiptap/core'
+
 // Currently, comments are created after the bet, not atomically with the bet.
 // They're uniquely identified by the pair contractId/betId.
 export type Comment = {
@@ -9,7 +11,9 @@ export type Comment = {
   replyToCommentId?: string
   userId: string
 
-  text: string
+  /** @deprecated - content now stored as JSON in content*/
+  text?: string
+  content: JSONContent
   createdTime: number
 
   // Denormalized, for rendering comments

functions/src/create-notification.ts

@@ -7,7 +7,7 @@ import {
 } from '../../common/notification'
 import { User } from '../../common/user'
 import { Contract } from '../../common/contract'
-import { getUserByUsername, getValues } from './utils'
+import { getValues } from './utils'
 import { Comment } from '../../common/comment'
 import { uniq } from 'lodash'
 import { Bet, LimitBet } from '../../common/bet'
@@ -17,6 +17,7 @@ import { removeUndefinedProps } from '../../common/util/object'
 import { TipTxn } from '../../common/txn'
 import { Group, GROUP_CHAT_SLUG } from '../../common/group'
 import { Challenge } from '../../common/challenge'
+import { richTextToString } from 'common/util/parse'
 const firestore = admin.firestore()
 
 type user_to_reason_texts = {
@@ -155,17 +156,6 @@ export const createNotification = async (
       }
   }
 
-  /** @deprecated parse from rich text instead */
-  const parseMentions = async (source: string) => {
-    const mentions = source.match(/@\w+/g)
-    if (!mentions) return []
-    return Promise.all(
-      mentions.map(
-        async (username) => (await getUserByUsername(username.slice(1)))?.id
-      )
-    )
-  }
-
   const notifyTaggedUsers = (
     userToReasonTexts: user_to_reason_texts,
     userIds: (string | undefined)[]
@@ -301,8 +291,7 @@ export const createNotification = async (
       if (sourceType === 'comment') {
         if (recipients?.[0] && relatedSourceType)
           notifyRepliedUser(userToReasonTexts, recipients[0], relatedSourceType)
-        if (sourceText)
+        if (sourceText) notifyTaggedUsers(userToReasonTexts, recipients ?? [])
-          notifyTaggedUsers(userToReasonTexts, await parseMentions(sourceText))
       }
       await notifyContractCreator(userToReasonTexts, sourceContract)
       await notifyOtherAnswerersOnContract(userToReasonTexts, sourceContract)
@@ -427,7 +416,7 @@ export const createGroupCommentNotification = async (
     sourceUserName: fromUser.name,
     sourceUserUsername: fromUser.username,
     sourceUserAvatarUrl: fromUser.avatarUrl,
-    sourceText: comment.text,
+    sourceText: richTextToString(comment.content),
     sourceSlug,
     sourceTitle: `${group.name}`,
     isSeenOnHref: sourceSlug,

functions/src/emails.ts

@@ -17,6 +17,7 @@ import { formatNumericProbability } from '../../common/pseudo-numeric'
 import { sendTemplateEmail } from './send-email'
 import { getPrivateUser, getUser } from './utils'
 import { getFunctionUrl } from '../../common/api'
+import { richTextToString } from 'common/util/parse'
 
 const UNSUBSCRIBE_ENDPOINT = getFunctionUrl('unsubscribe')
 
@@ -291,7 +292,8 @@ export const sendNewCommentEmail = async (
   const unsubscribeUrl = `${UNSUBSCRIBE_ENDPOINT}?id=${userId}&type=${emailType}`
 
   const { name: commentorName, avatarUrl: commentorAvatarUrl } = commentCreator
-  const { text } = comment
+  const { content } = comment
+  const text = richTextToString(content)
 
   let betDescription = ''
   if (bet) {

functions/src/on-create-comment-on-contract.ts

@@ -1,13 +1,13 @@
 import * as functions from 'firebase-functions'
 import * as admin from 'firebase-admin'
-import { uniq } from 'lodash'
+import { compact, uniq } from 'lodash'
-
 import { getContract, getUser, getValues } from './utils'
 import { Comment } from '../../common/comment'
 import { sendNewCommentEmail } from './emails'
 import { Bet } from '../../common/bet'
 import { Answer } from '../../common/answer'
 import { createNotification } from './create-notification'
+import { parseMentions, richTextToString } from 'common/util/parse'
 
 const firestore = admin.firestore()
 
@@ -71,7 +71,10 @@ export const onCreateCommentOnContract = functions
     const repliedUserId = comment.replyToCommentId
       ? comments.find((c) => c.id === comment.replyToCommentId)?.userId
       : answer?.userId
-    const recipients = repliedUserId ? [repliedUserId] : []
+
+    const recipients = uniq(
+      compact([...parseMentions(comment.content), repliedUserId])
+    )
 
     await createNotification(
       comment.id,
@@ -79,7 +82,7 @@ export const onCreateCommentOnContract = functions
       'created',
       commentCreator,
       eventId,
-      comment.text,
+      richTextToString(comment.content),
       { contract, relatedSourceType, recipients }
     )
 

web/components/comments-list.tsx

@@ -8,8 +8,8 @@ import { RelativeTimestamp } from './relative-timestamp'
 import { UserLink } from './user-page'
 import { User } from 'common/user'
 import { Col } from './layout/col'
-import { Linkify } from './linkify'
 import { groupBy } from 'lodash'
+import { Content } from './editor'
 
 export function UserCommentsList(props: {
   user: User
@@ -50,7 +50,8 @@ export function UserCommentsList(props: {
 
 function ProfileComment(props: { comment: Comment; className?: string }) {
   const { comment, className } = props
-  const { text, userUsername, userName, userAvatarUrl, createdTime } = comment
+  const { text, content, userUsername, userName, userAvatarUrl, createdTime } =
+    comment
   // TODO: find and attach relevant bets by comment betId at some point
   return (
     <Row className={className}>
@@ -64,7 +65,7 @@ function ProfileComment(props: { comment: Comment; className?: string }) {
           />{' '}
           <RelativeTimestamp time={createdTime} />
         </p>
-        <Linkify text={text} />
+        <Content content={content || text} />
       </div>
     </Row>
   )

web/components/contract/contract-leaderboard.tsx

@@ -107,7 +107,6 @@ export function ContractTopTrades(props: {
               comment={commentsById[topCommentId]}
               tips={tips[topCommentId]}
               betsBySameUser={[betsById[topCommentId]]}
-              truncate={false}
               smallAvatar={false}
             />
           </div>

web/components/editor.tsx

@@ -41,14 +41,16 @@ export function useTextEditor(props: {
   max?: number
   defaultValue?: Content
   disabled?: boolean
+  simple?: boolean
 }) {
-  const { placeholder, max, defaultValue = '', disabled } = props
+  const { placeholder, max, defaultValue = '', disabled, simple } = props
 
   const users = useUsers()
 
   const editorClass = clsx(
     proseClass,
-    'min-h-[6em] resize-none outline-none border-none pt-3 px-4 focus:ring-0'
+    !simple && 'min-h-[6em]',
+    'outline-none pt-2 px-4'
   )
 
   const editor = useEditor(
@@ -56,7 +58,8 @@ export function useTextEditor(props: {
       editorProps: { attributes: { class: editorClass } },
       extensions: [
         StarterKit.configure({
-          heading: { levels: [1, 2, 3] },
+          heading: simple ? false : { levels: [1, 2, 3] },
+          horizontalRule: simple ? false : {},
         }),
         Placeholder.configure({
           placeholder,
@@ -120,8 +123,9 @@ function isValidIframe(text: string) {
 export function TextEditor(props: {
   editor: Editor | null
   upload: ReturnType<typeof useUploadMutation>
+  children?: React.ReactNode // additional toolbar buttons
 }) {
-  const { editor, upload } = props
+  const { editor, upload, children } = props
   const [iframeOpen, setIframeOpen] = useState(false)
 
   return (
@@ -143,20 +147,10 @@ export function TextEditor(props: {
             images!
           </FloatingMenu>
         )}
-        <div className="overflow-hidden rounded-lg border border-gray-300 shadow-sm focus-within:border-indigo-500 focus-within:ring-1 focus-within:ring-indigo-500">
+        <div className="rounded-lg border border-gray-300 shadow-sm focus-within:border-indigo-500 focus-within:ring-1 focus-within:ring-indigo-500">
           <EditorContent editor={editor} />
-          {/* Spacer element to match the height of the toolbar */}
+          {/* Toolbar, with buttons for images and embeds */}
-          <div className="py-2" aria-hidden="true">
+          <div className="flex h-9 items-center gap-5 pl-4 pr-1">
-            {/* Matches height of button in toolbar (1px border + 36px content height) */}
-            <div className="py-px">
-              <div className="h-9" />
-            </div>
-          </div>
-        </div>
-
-        {/* Toolbar, with buttons for image and embeds */}
-        <div className="absolute inset-x-0 bottom-0 flex justify-between py-2 pl-3 pr-2">
-          <div className="flex items-center space-x-5">
             <div className="flex items-center">
               <FileUploadButton
                 onFiles={upload.mutate}
@@ -181,6 +175,8 @@ export function TextEditor(props: {
                 <span className="sr-only">Embed an iframe</span>
               </button>
             </div>
+            <div className="ml-auto" />
+            {children}
           </div>
         </div>
       </div>

web/components/feed/feed-answer-comment-group.tsx

@@ -31,9 +31,9 @@ export function FeedAnswerCommentGroup(props: {
   const { answer, contract, comments, tips, bets, user } = props
   const { username, avatarUrl, name, text } = answer
 
-  const [replyToUsername, setReplyToUsername] = useState('')
+  const [replyToUser, setReplyToUser] =
+    useState<Pick<User, 'id' | 'username'>>()
   const [showReply, setShowReply] = useState(false)
-  const [inputRef, setInputRef] = useState<HTMLTextAreaElement | null>(null)
   const [highlighted, setHighlighted] = useState(false)
   const router = useRouter()
 
@@ -70,9 +70,14 @@ export function FeedAnswerCommentGroup(props: {
 
   const scrollAndOpenReplyInput = useEvent(
     (comment?: Comment, answer?: Answer) => {
-      setReplyToUsername(comment?.userUsername ?? answer?.username ?? '')
+      setReplyToUser(
+        comment
+          ? { id: comment.userId, username: comment.userUsername }
+          : answer
+          ? { id: answer.userId, username: answer.username }
+          : undefined
+      )
       setShowReply(true)
-      inputRef?.focus()
     }
   )
 
@@ -80,7 +85,7 @@ export function FeedAnswerCommentGroup(props: {
     // Only show one comment input for a bet at a time
     if (
       betsByCurrentUser.length > 1 &&
-      inputRef?.textContent?.length === 0 &&
+      // inputRef?.textContent?.length === 0 && //TODO: editor.isEmpty
       betsByCurrentUser.sort((a, b) => b.createdTime - a.createdTime)[0]
         ?.outcome !== answer.number.toString()
     )
@@ -89,10 +94,6 @@ export function FeedAnswerCommentGroup(props: {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [betsByCurrentUser.length, user, answer.number])
 
-  useEffect(() => {
-    if (showReply && inputRef) inputRef.focus()
-  }, [inputRef, showReply])
-
   useEffect(() => {
     if (router.asPath.endsWith(`#${answerElementId}`)) {
       setHighlighted(true)
@@ -154,7 +155,6 @@ export function FeedAnswerCommentGroup(props: {
         commentsList={commentsList}
         betsByUserId={betsByUserId}
         smallAvatar={true}
-        truncate={false}
         bets={bets}
         tips={tips}
         scrollAndOpenReplyInput={scrollAndOpenReplyInput}
@@ -172,12 +172,8 @@ export function FeedAnswerCommentGroup(props: {
             betsByCurrentUser={betsByCurrentUser}
             commentsByCurrentUser={commentsByCurrentUser}
             parentAnswerOutcome={answer.number.toString()}
-            replyToUsername={replyToUsername}
+            replyToUser={replyToUser}
-            setRef={setInputRef}
+            onSubmitComment={() => setShowReply(false)}
-            onSubmitComment={() => {
-              setShowReply(false)
-              setReplyToUsername('')
-            }}
           />
         </div>
       )}

web/components/feed/feed-comments.tsx

@@ -13,25 +13,22 @@ import { Avatar } from 'web/components/avatar'
 import { UserLink } from 'web/components/user-page'
 import { OutcomeLabel } from 'web/components/outcome-label'
 import { CopyLinkDateTimeComponent } from 'web/components/feed/copy-link-date-time'
-import { contractPath } from 'web/lib/firebase/contracts'
 import { firebaseLogin } from 'web/lib/firebase/users'
 import {
   createCommentOnContract,
   MAX_COMMENT_LENGTH,
 } from 'web/lib/firebase/comments'
-import Textarea from 'react-expanding-textarea'
-import { Linkify } from 'web/components/linkify'
-import { SiteLink } from 'web/components/site-link'
 import { BetStatusText } from 'web/components/feed/feed-bets'
 import { Col } from 'web/components/layout/col'
 import { getProbability } from 'common/calculate'
 import { LoadingIndicator } from 'web/components/loading-indicator'
 import { PaperAirplaneIcon } from '@heroicons/react/outline'
 import { track } from 'web/lib/service/analytics'
-import { useEvent } from 'web/hooks/use-event'
 import { Tipper } from '../tipper'
 import { CommentTipMap, CommentTips } from 'web/hooks/use-tip-txns'
 import { useWindowSize } from 'web/hooks/use-window-size'
+import { Content, TextEditor, useTextEditor } from '../editor'
+import { Editor } from '@tiptap/react'
 
 export function FeedCommentThread(props: {
   contract: Contract
@@ -39,20 +36,12 @@ export function FeedCommentThread(props: {
   tips: CommentTipMap
   parentComment: Comment
   bets: Bet[]
-  truncate?: boolean
   smallAvatar?: boolean
 }) {
-  const {
+  const { contract, comments, bets, tips, smallAvatar, parentComment } = props
-    contract,
-    comments,
-    bets,
-    tips,
-    truncate,
-    smallAvatar,
-    parentComment,
-  } = props
   const [showReply, setShowReply] = useState(false)
-  const [replyToUsername, setReplyToUsername] = useState('')
+  const [replyToUser, setReplyToUser] =
+    useState<{ id: string; username: string }>()
   const betsByUserId = groupBy(bets, (bet) => bet.userId)
   const user = useUser()
   const commentsList = comments.filter(
@@ -60,15 +49,12 @@ export function FeedCommentThread(props: {
       parentComment.id && comment.replyToCommentId === parentComment.id
   )
   commentsList.unshift(parentComment)
-  const [inputRef, setInputRef] = useState<HTMLTextAreaElement | null>(null)
+
   function scrollAndOpenReplyInput(comment: Comment) {
-    setReplyToUsername(comment.userUsername)
+    setReplyToUser({ id: comment.userId, username: comment.userUsername })
     setShowReply(true)
-    inputRef?.focus()
   }
-  useEffect(() => {
+
-    if (showReply && inputRef) inputRef.focus()
-  }, [inputRef, showReply])
   return (
     <Col className={'w-full gap-3 pr-1'}>
       <span
@@ -81,7 +67,6 @@ export function FeedCommentThread(props: {
         betsByUserId={betsByUserId}
         tips={tips}
         smallAvatar={smallAvatar}
-        truncate={truncate}
         bets={bets}
         scrollAndOpenReplyInput={scrollAndOpenReplyInput}
       />
@@ -98,13 +83,9 @@ export function FeedCommentThread(props: {
               (c) => c.userId === user?.id
             )}
             parentCommentId={parentComment.id}
-            replyToUsername={replyToUsername}
+            replyToUser={replyToUser}
             parentAnswerOutcome={comments[0].answerOutcome}
-            setRef={setInputRef}
+            onSubmitComment={() => setShowReply(false)}
-            onSubmitComment={() => {
-              setShowReply(false)
-              setReplyToUsername('')
-            }}
           />
         </Col>
       )}
@@ -121,14 +102,12 @@ export function CommentRepliesList(props: {
   bets: Bet[]
   treatFirstIndexEqually?: boolean
   smallAvatar?: boolean
-  truncate?: boolean
 }) {
   const {
     contract,
     commentsList,
     betsByUserId,
     tips,
-    truncate,
     smallAvatar,
     bets,
     scrollAndOpenReplyInput,
@@ -168,7 +147,6 @@ export function CommentRepliesList(props: {
                 : undefined
             }
             smallAvatar={smallAvatar}
-            truncate={truncate}
           />
         </div>
       ))}
@@ -182,7 +160,6 @@ export function FeedComment(props: {
   tips: CommentTips
   betsBySameUser: Bet[]
   probAtCreatedTime?: number
-  truncate?: boolean
   smallAvatar?: boolean
   onReplyClick?: (comment: Comment) => void
 }) {
@@ -192,10 +169,10 @@ export function FeedComment(props: {
     tips,
     betsBySameUser,
     probAtCreatedTime,
-    truncate,
     onReplyClick,
   } = props
-  const { text, userUsername, userName, userAvatarUrl, createdTime } = comment
+  const { text, content, userUsername, userName, userAvatarUrl, createdTime } =
+    comment
   let betOutcome: string | undefined,
     bought: string | undefined,
     money: string | undefined
@@ -276,11 +253,9 @@ export function FeedComment(props: {
             elementId={comment.id}
           />
         </div>
-        <TruncatedComment
+        <div className="mt-2 text-[15px] text-gray-700">
-          comment={text}
+          <Content content={content || text} />
-          moreHref={contractPath(contract)}
+        </div>
-          shouldTruncate={truncate}
-        />
         <Row className="mt-2 items-center gap-6 text-xs text-gray-500">
           <Tipper comment={comment} tips={tips ?? {}} />
           {onReplyClick && (
@@ -345,8 +320,7 @@ export function CommentInput(props: {
   contract: Contract
   betsByCurrentUser: Bet[]
   commentsByCurrentUser: Comment[]
-  replyToUsername?: string
+  replyToUser?: { id: string; username: string }
-  setRef?: (ref: HTMLTextAreaElement) => void
   // Reply to a free response answer
   parentAnswerOutcome?: string
   // Reply to another comment
@@ -359,12 +333,18 @@ export function CommentInput(props: {
     commentsByCurrentUser,
     parentAnswerOutcome,
     parentCommentId,
-    replyToUsername,
+    replyToUser,
     onSubmitComment,
-    setRef,
   } = props
   const user = useUser()
-  const [comment, setComment] = useState('')
+  const { editor, upload } = useTextEditor({
+    simple: true,
+    max: MAX_COMMENT_LENGTH,
+    placeholder:
+      !!parentCommentId || !!parentAnswerOutcome
+        ? 'Write a reply...'
+        : 'Write a comment...',
+  })
   const [isSubmitting, setIsSubmitting] = useState(false)
 
   const mostRecentCommentableBet = getMostRecentCommentableBet(
@@ -380,18 +360,17 @@ export function CommentInput(props: {
       track('sign in to comment')
       return await firebaseLogin()
     }
-    if (!comment || isSubmitting) return
+    if (!editor || editor.isEmpty || isSubmitting) return
     setIsSubmitting(true)
     await createCommentOnContract(
       contract.id,
-      comment,
+      editor.getJSON(),
       user,
       betId,
       parentAnswerOutcome,
       parentCommentId
     )
     onSubmitComment?.()
-    setComment('')
     setIsSubmitting(false)
   }
 
@@ -446,14 +425,12 @@ export function CommentInput(props: {
                 )}
             </div>
             <CommentInputTextArea
-              commentText={comment}
+              editor={editor}
-              setComment={setComment}
+              upload={upload}
-              isReply={!!parentCommentId || !!parentAnswerOutcome}
+              replyToUser={replyToUser}
-              replyToUsername={replyToUsername ?? ''}
               user={user}
               submitComment={submitComment}
               isSubmitting={isSubmitting}
-              setRef={setRef}
               presetId={id}
             />
           </div>
@@ -465,94 +442,89 @@ export function CommentInput(props: {
 
 export function CommentInputTextArea(props: {
   user: User | undefined | null
-  isReply: boolean
+  replyToUser?: { id: string; username: string }
-  replyToUsername: string
+  editor: Editor | null
-  commentText: string
+  upload: Parameters<typeof TextEditor>[0]['upload']
-  setComment: (text: string) => void
   submitComment: (id?: string) => void
   isSubmitting: boolean
-  setRef?: (ref: HTMLTextAreaElement) => void
+  submitOnEnter?: boolean
   presetId?: string
-  enterToSubmitOnDesktop?: boolean
 }) {
   const {
-    isReply,
-    setRef,
     user,
-    commentText,
+    editor,
-    setComment,
+    upload,
     submitComment,
     presetId,
     isSubmitting,
-    replyToUsername,
+    submitOnEnter,
-    enterToSubmitOnDesktop,
+    replyToUser,
   } = props
-  const { width } = useWindowSize()
+  const isMobile = (useWindowSize().width ?? 0) < 768 // TODO: base off input device (keybord vs touch)
-  const memoizedSetComment = useEvent(setComment)
+
   useEffect(() => {
-    if (!replyToUsername || !user || replyToUsername === user.username) return
+    editor?.setEditable(!isSubmitting)
-    const replacement = `@${replyToUsername} `
+  }, [isSubmitting, editor])
-    memoizedSetComment(replacement + commentText.replace(replacement, ''))
+
+  const submit = () => {
+    submitComment(presetId)
+    editor?.commands?.clearContent()
+  }
+
+  useEffect(() => {
+    if (!editor) {
+      return
+    }
+    // submit on Enter key
+    editor.setOptions({
+      editorProps: {
+        handleKeyDown: (view, event) => {
+          if (
+            submitOnEnter &&
+            event.key === 'Enter' &&
+            !event.shiftKey &&
+            (!isMobile || event.ctrlKey || event.metaKey) &&
+            // mention list is closed
+            !(view.state as any).mention$.active
+          ) {
+            submit()
+            event.preventDefault()
+            return true
+          }
+          return false
+        },
+      },
+    })
+    // insert at mention
+    if (replyToUser) {
+      editor.commands.insertContentAt(0, {
+        type: 'mention',
+        attrs: { label: replyToUser.username, id: replyToUser.id },
+      })
+      editor.commands.focus()
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [user, replyToUsername, memoizedSetComment])
+  }, [editor])
+
   return (
     <>
-      <Row className="gap-1.5 text-gray-700">
+      <div>
-        <Textarea
+        <TextEditor editor={editor} upload={upload}>
-          ref={setRef}
-          value={commentText}
-          onChange={(e) => setComment(e.target.value)}
-          className={clsx('textarea textarea-bordered w-full resize-none')}
-          // Make room for floating submit button.
-          style={{ paddingRight: 48 }}
-          placeholder={
-            isReply
-              ? 'Write a reply... '
-              : enterToSubmitOnDesktop
-              ? 'Send a message'
-              : 'Write a comment...'
-          }
-          autoFocus={false}
-          maxLength={MAX_COMMENT_LENGTH}
-          disabled={isSubmitting}
-          onKeyDown={(e) => {
-            if (
-              (enterToSubmitOnDesktop &&
-                e.key === 'Enter' &&
-                !e.shiftKey &&
-                width &&
-                width > 768) ||
-              (e.key === 'Enter' && (e.ctrlKey || e.metaKey))
-            ) {
-              e.preventDefault()
-              submitComment(presetId)
-              e.currentTarget.blur()
-            }
-          }}
-        />
-
-        <Col className={clsx('relative justify-end')}>
           {user && !isSubmitting && (
             <button
-              className={clsx(
+              className="btn btn-ghost btn-sm px-2 disabled:bg-inherit disabled:text-gray-300"
-                'btn btn-ghost btn-sm absolute right-2 bottom-2 flex-row pl-2 capitalize',
+              disabled={!editor || editor.isEmpty}
-                !commentText && 'pointer-events-none text-gray-500'
+              onClick={submit}
-              )}
-              onClick={() => {
-                submitComment(presetId)
-              }}
             >
-              <PaperAirplaneIcon
+              <PaperAirplaneIcon className="m-0 h-[25px] min-w-[22px] rotate-90 p-0" />
-                className={'m-0 min-w-[22px] rotate-90 p-0 '}
-                height={25}
-              />
             </button>
           )}
+
           {isSubmitting && (
             <LoadingIndicator spinnerClassName={'border-gray-500'} />
           )}
-        </Col>
+        </TextEditor>
-      </Row>
+      </div>
       <Row>
         {!user && (
           <button
@@ -567,38 +539,6 @@ export function CommentInputTextArea(props: {
   )
 }
 
-export function TruncatedComment(props: {
-  comment: string
-  moreHref: string
-  shouldTruncate?: boolean
-}) {
-  const { comment, moreHref, shouldTruncate } = props
-  let truncated = comment
-
-  // Keep descriptions to at most 400 characters
-  const MAX_CHARS = 400
-  if (shouldTruncate && truncated.length > MAX_CHARS) {
-    truncated = truncated.slice(0, MAX_CHARS)
-    // Make sure to end on a space
-    const i = truncated.lastIndexOf(' ')
-    truncated = truncated.slice(0, i)
-  }
-
-  return (
-    <div
-      className="mt-2 whitespace-pre-line break-words text-gray-700"
-      style={{ fontSize: 15 }}
-    >
-      <Linkify text={truncated} />
-      {truncated != comment && (
-        <SiteLink href={moreHref} className="text-indigo-700">
-          ... (show more)
-        </SiteLink>
-      )}
-    </div>
-  )
-}
-
 function getBettorsLargestPositionBeforeTime(
   contract: Contract,
   createdTime: number,

web/components/groups/group-chat.tsx

@@ -5,24 +5,19 @@ import React, { useEffect, memo, useState, useMemo } from 'react'
 import { Avatar } from 'web/components/avatar'
 import { Group } from 'common/group'
 import { Comment, createCommentOnGroup } from 'web/lib/firebase/comments'
-import {
+import { CommentInputTextArea } from 'web/components/feed/feed-comments'
-  CommentInputTextArea,
-  TruncatedComment,
-} from 'web/components/feed/feed-comments'
 import { track } from 'web/lib/service/analytics'
 import { firebaseLogin } from 'web/lib/firebase/users'
-
 import { useRouter } from 'next/router'
 import clsx from 'clsx'
 import { UserLink } from 'web/components/user-page'
-
-import { groupPath } from 'web/lib/firebase/groups'
 import { CopyLinkDateTimeComponent } from 'web/components/feed/copy-link-date-time'
 import { CommentTipMap, CommentTips } from 'web/hooks/use-tip-txns'
 import { Tipper } from 'web/components/tipper'
 import { sum } from 'lodash'
 import { formatMoney } from 'common/util/format'
 import { useWindowSize } from 'web/hooks/use-window-size'
+import { Content, useTextEditor } from 'web/components/editor'
 import { useUnseenPreferredNotifications } from 'web/hooks/use-notifications'
 import { ChatIcon, ChevronDownIcon } from '@heroicons/react/outline'
 import { setNotificationsAsSeen } from 'web/pages/notifications'
@@ -34,16 +29,18 @@ export function GroupChat(props: {
   tips: CommentTipMap
 }) {
   const { messages, user, group, tips } = props
-  const [messageText, setMessageText] = useState('')
+  const { editor, upload } = useTextEditor({
+    simple: true,
+    placeholder: 'Send a message',
+  })
   const [isSubmitting, setIsSubmitting] = useState(false)
   const [scrollToBottomRef, setScrollToBottomRef] =
     useState<HTMLDivElement | null>(null)
   const [scrollToMessageId, setScrollToMessageId] = useState('')
   const [scrollToMessageRef, setScrollToMessageRef] =
     useState<HTMLDivElement | null>(null)
-  const [replyToUsername, setReplyToUsername] = useState('')
+  const [replyToUser, setReplyToUser] = useState<any>()
-  const [inputRef, setInputRef] = useState<HTMLTextAreaElement | null>(null)
+
-  const [groupedMessages, setGroupedMessages] = useState<Comment[]>([])
   const router = useRouter()
   const isMember = user && group.memberIds.includes(user?.id)
 
@@ -54,25 +51,26 @@ export function GroupChat(props: {
   const remainingHeight =
     (height ?? 0) - (containerRef?.offsetTop ?? 0) - bottomBarHeight
 
-  useMemo(() => {
+  // array of groups, where each group is an array of messages that are displayed as one
+  const groupedMessages = useMemo(() => {
     // Group messages with createdTime within 2 minutes of each other.
-    const tempMessages = []
+    const tempGrouped: Comment[][] = []
     for (let i = 0; i < messages.length; i++) {
       const message = messages[i]
-      if (i === 0) tempMessages.push({ ...message })
+      if (i === 0) tempGrouped.push([message])
       else {
         const prevMessage = messages[i - 1]
         const diff = message.createdTime - prevMessage.createdTime
         const creatorsMatch = message.userId === prevMessage.userId
         if (diff < 2 * 60 * 1000 && creatorsMatch) {
-          tempMessages[tempMessages.length - 1].text += `\n${message.text}`
+          tempGrouped.at(-1)?.push(message)
         } else {
-          tempMessages.push({ ...message })
+          tempGrouped.push([message])
         }
       }
     }
 
-    setGroupedMessages(tempMessages)
+    return tempGrouped
   }, [messages])
 
   useEffect(() => {
@@ -94,11 +92,12 @@ export function GroupChat(props: {
 
   useEffect(() => {
     // is mobile?
-    if (inputRef && width && width > 720) inputRef.focus()
+    if (width && width > 720) focusInput()
-  }, [inputRef, width])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [width])
 
   function onReplyClick(comment: Comment) {
-    setReplyToUsername(comment.userUsername)
+    setReplyToUser({ id: comment.userId, username: comment.userUsername })
   }
 
   async function submitMessage() {
@@ -106,13 +105,16 @@ export function GroupChat(props: {
       track('sign in to comment')
       return await firebaseLogin()
     }
-    if (!messageText || isSubmitting) return
+    if (!editor || editor.isEmpty || isSubmitting) return
     setIsSubmitting(true)
-    await createCommentOnGroup(group.id, messageText, user)
+    await createCommentOnGroup(group.id, editor.getJSON(), user)
-    setMessageText('')
+    editor.commands.clearContent()
     setIsSubmitting(false)
-    setReplyToUsername('')
+    setReplyToUser(undefined)
-    inputRef?.focus()
+    focusInput()
+  }
+  function focusInput() {
+    editor?.commands.focus()
   }
 
   return (
@@ -123,20 +125,20 @@ export function GroupChat(props: {
         }
         ref={setScrollToBottomRef}
       >
-        {groupedMessages.map((message) => (
+        {groupedMessages.map((messages) => (
           <GroupMessage
             user={user}
-            key={message.id}
+            key={`group ${messages[0].id}`}
-            comment={message}
+            comments={messages}
             group={group}
             onReplyClick={onReplyClick}
-            highlight={message.id === scrollToMessageId}
+            highlight={messages[0].id === scrollToMessageId}
             setRef={
-              scrollToMessageId === message.id
+              scrollToMessageId === messages[0].id
                 ? setScrollToMessageRef
                 : undefined
             }
-            tips={tips[message.id] ?? {}}
+            tips={tips[messages[0].id] ?? {}}
           />
         ))}
         {messages.length === 0 && (
@@ -144,7 +146,7 @@ export function GroupChat(props: {
             No messages yet. Why not{isMember ? ` ` : ' join and '}
             <button
               className={'cursor-pointer font-bold text-gray-700'}
-              onClick={() => inputRef?.focus()}
+              onClick={focusInput}
             >
               add one?
             </button>
@@ -162,15 +164,13 @@ export function GroupChat(props: {
           </div>
           <div className={'flex-1'}>
             <CommentInputTextArea
-              commentText={messageText}
+              editor={editor}
-              setComment={setMessageText}
+              upload={upload}
-              isReply={false}
               user={user}
-              replyToUsername={replyToUsername}
+              replyToUser={replyToUser}
               submitComment={submitMessage}
               isSubmitting={isSubmitting}
-              enterToSubmitOnDesktop={true}
+              submitOnEnter
-              setRef={setInputRef}
             />
           </div>
         </div>
@@ -292,16 +292,18 @@ function GroupChatNotificationsIcon(props: {
 
 const GroupMessage = memo(function GroupMessage_(props: {
   user: User | null | undefined
-  comment: Comment
+  comments: Comment[]
   group: Group
   onReplyClick?: (comment: Comment) => void
   setRef?: (ref: HTMLDivElement) => void
   highlight?: boolean
   tips: CommentTips
 }) {
-  const { comment, onReplyClick, group, setRef, highlight, user, tips } = props
+  const { comments, onReplyClick, group, setRef, highlight, user, tips } = props
-  const { text, userUsername, userName, userAvatarUrl, createdTime } = comment
+  const first = comments[0]
-  const isCreatorsComment = user && comment.userId === user.id
+  const { id, userUsername, userName, userAvatarUrl, createdTime } = first
+
+  const isCreatorsComment = user && first.userId === user.id
   return (
     <Col
       ref={setRef}
@@ -331,23 +333,21 @@ const GroupMessage = memo(function GroupMessage_(props: {
           prefix={'group'}
           slug={group.slug}
           createdTime={createdTime}
-          elementId={comment.id}
+          elementId={id}
-        />
-      </Row>
-      <Row className={'text-black'}>
-        <TruncatedComment
-          comment={text}
-          moreHref={groupPath(group.slug)}
-          shouldTruncate={false}
         />
       </Row>
+      <div className="mt-2 text-black">
+        {comments.map((comment) => (
+          <Content content={comment.content || comment.text} />
+        ))}
+      </div>
       <Row>
         {!isCreatorsComment && onReplyClick && (
           <button
             className={
               'self-start py-1 text-xs font-bold text-gray-500 hover:underline'
             }
-            onClick={() => onReplyClick(comment)}
+            onClick={() => onReplyClick(first)}
           >
             Reply
           </button>
@@ -357,7 +357,7 @@ const GroupMessage = memo(function GroupMessage_(props: {
             {formatMoney(sum(Object.values(tips)))}
           </span>
         )}
-        {!isCreatorsComment && <Tipper comment={comment} tips={tips} />}
+        {!isCreatorsComment && <Tipper comment={first} tips={tips} />}
       </Row>
     </Col>
   )

web/lib/firebase/comments.ts

@@ -14,6 +14,7 @@ import { User } from 'common/user'
 import { Comment } from 'common/comment'
 import { removeUndefinedProps } from 'common/util/object'
 import { track } from '@amplitude/analytics-browser'
+import { JSONContent } from '@tiptap/react'
 
 export type { Comment }
 
@@ -21,7 +22,7 @@ export const MAX_COMMENT_LENGTH = 10000
 
 export async function createCommentOnContract(
   contractId: string,
-  text: string,
+  content: JSONContent,
   commenter: User,
   betId?: string,
   answerOutcome?: string,
@@ -34,7 +35,7 @@ export async function createCommentOnContract(
     id: ref.id,
     contractId,
     userId: commenter.id,
-    text: text.slice(0, MAX_COMMENT_LENGTH),
+    content: content,
     createdTime: Date.now(),
     userName: commenter.name,
     userUsername: commenter.username,
@@ -53,7 +54,7 @@ export async function createCommentOnContract(
 }
 export async function createCommentOnGroup(
   groupId: string,
-  text: string,
+  content: JSONContent,
   user: User,
   replyToCommentId?: string
 ) {
@@ -62,7 +63,7 @@ export async function createCommentOnGroup(
     id: ref.id,
     groupId,
     userId: user.id,
-    text: text.slice(0, MAX_COMMENT_LENGTH),
+    content: content,
     createdTime: Date.now(),
     userName: user.name,
     userUsername: user.username,

web/pages/[username]/[contractSlug].tsx

@@ -354,7 +354,6 @@ function ContractTopTrades(props: {
               comment={commentsById[topCommentId]}
               tips={tips[topCommentId]}
               betsBySameUser={[betsById[topCommentId]]}
-              truncate={false}
               smallAvatar={false}
             />
           </div>