feat: add support for files and math for messages (#5)

components/Application/Messages/Message/MessageText/MessageText.tsx

@@ -0,0 +1,50 @@
+import { useMemo } from 'react'
+import ReactMarkdown from 'react-markdown'
+import gfm from 'remark-gfm'
+import remarkBreaks from 'remark-breaks'
+import remarkMath from 'remark-math'
+import rehypeKatex from 'rehype-katex'
+
+import 'katex/dist/katex.min.css'
+
+import { Emoji, emojiPlugin, isStringWithOnlyOneEmoji } from '../../../../Emoji'
+import { MessageWithMember } from '../../../../../models/Message'
+
+export interface MessageContentProps {
+  message: MessageWithMember
+}
+
+export const MessageText: React.FC<MessageContentProps> = (props) => {
+  const { message } = props
+
+  const isMessageWithOnlyOneEmoji = useMemo(() => {
+    return isStringWithOnlyOneEmoji(message.value)
+  }, [message.value])
+
+  if (isMessageWithOnlyOneEmoji) {
+    return (
+      <div>
+        <p>
+          <Emoji value={message.value} size={40} />
+        </p>
+      </div>
+    )
+  }
+
+  return (
+    <ReactMarkdown
+      disallowedElements={['table']}
+      unwrapDisallowed
+      remarkPlugins={[[gfm], [remarkBreaks], [remarkMath]]}
+      rehypePlugins={[[emojiPlugin], [rehypeKatex]]}
+      linkTarget='_blank'
+      components={{
+        emoji: (props) => {
+          return <Emoji value={props.value} size={20} />
+        }
+      }}
+    >
+      {message.value}
+    </ReactMarkdown>
+  )
+}

components/Application/Messages/Message/MessageText/index.ts

@@ -0,0 +1 @@
+export * from './MessageText'