More random cleanup

web/components/editor.tsx

@@ -236,9 +236,10 @@ const useUploadMutation = (editor: Editor | null) =>
 
 export function RichContent(props: {
   content: JSONContent | string
+  className?: string
   smallImage?: boolean
 }) {
-  const { content, smallImage } = props
+  const { className, content, smallImage } = props
   const editor = useEditor({
     editorProps: { attributes: { class: proseClass } },
     extensions: [
@@ -254,19 +255,24 @@ export function RichContent(props: {
   })
   useEffect(() => void editor?.commands?.setContent(content), [editor, content])
 
-  return <EditorContent editor={editor} />
+  return <EditorContent className={className} editor={editor} />
 }
 
 // backwards compatibility: we used to store content as strings
 export function Content(props: {
   content: JSONContent | string
+  className?: string
   smallImage?: boolean
 }) {
-  const { content } = props
+  const { className, content } = props
   return typeof content === 'string' ? (
-    <div className="whitespace-pre-line font-light leading-relaxed">
+    <Linkify
-      <Linkify text={content} />
+      className={clsx(
-    </div>
+        className,
+        'whitespace-pre-line font-light leading-relaxed'
+      )}
+      text={content}
+    />
   ) : (
     <RichContent {...props} />
   )

web/components/feed/contract-activity.tsx

@@ -137,7 +137,7 @@ export function FreeResponseContractCommentsActivity(props: {
             contract={contract}
             user={user}
             answer={answer}
-            answerComments={commentsByOutcome[answer.number.toString()]}
+            answerComments={commentsByOutcome[answer.number.toString()] ?? []}
             tips={tips}
             betsByUserId={betsByUserId}
             commentsByUserId={commentsByUserId}

web/components/feed/feed-comments.tsx

@@ -193,7 +193,6 @@ export function FeedComment(props: {
                 />
               </>
             )}
-          <>
           {bought} {money}
           {contract.outcomeType !== 'FREE_RESPONSE' && betOutcome && (
             <>
@@ -207,7 +206,6 @@ export function FeedComment(props: {
               />
             </>
           )}
-          </>
           <CopyLinkDateTimeComponent
             prefix={contract.creatorUsername}
             slug={contract.slug}
@@ -215,9 +213,11 @@ export function FeedComment(props: {
             elementId={comment.id}
           />
         </div>
-        <div className="mt-2 text-[15px] text-gray-700">
+        <Content
-          <Content content={content || text} smallImage />
+          className="mt-2 text-[15px] text-gray-700"
-        </div>
+          content={content || text}
+          smallImage
+        />
         <Row className="mt-2 items-center gap-6 text-xs text-gray-500">
           <Tipper comment={comment} tips={tips ?? {}} />
           {onReplyClick && (

web/components/linkify.tsx

@@ -1,10 +1,15 @@
+import clsx from 'clsx'
 import { Fragment } from 'react'
 import { SiteLink } from './site-link'
 
 // Return a JSX span, linkifying @username, #hashtags, and https://...
 // TODO: Use a markdown parser instead of rolling our own here.
-export function Linkify(props: { text: string; gray?: boolean }) {
+export function Linkify(props: {
-  const { text, gray } = props
+  text: string
+  className?: string
+  gray?: boolean
+}) {
+  const { text, className, gray } = props
   // Replace "m1234" with "ϻ1234"
   // const mRegex = /(\W|^)m(\d+)/g
   // text = text.replace(mRegex, (_, pre, num) => `${pre}ϻ${num}`)
@@ -38,7 +43,7 @@ export function Linkify(props: { text: string; gray?: boolean }) {
     )
   })
   return (
-    <span className="break-anywhere">
+    <span className={clsx(className, 'break-anywhere')}>
       {text.split(regex).map((part, i) => (
         <Fragment key={i}>
           {part}