fix: Render formatted body in reply and editor

src/app/components/message/Reply.tsx

@@ -2,16 +2,30 @@ import { Box, Icon, Icons, Text, as, color, toRem } from 'folds';
 import { EventTimelineSet, Room } from 'matrix-js-sdk';
 import React, { MouseEventHandler, ReactNode, useCallback, useMemo } from 'react';
 import classNames from 'classnames';
+import parse, { HTMLReactParserOptions } from 'html-react-parser';
+import { Opts as LinkifyOpts } from 'linkifyjs';
 import { getMemberDisplayName, trimReplyFromBody } from '../../utils/room';
 import { getMxIdLocalPart } from '../../utils/matrix';
 import { LinePlaceholder } from './placeholder';
 import { randomNumberBetween } from '../../utils/common';
 import * as css from './Reply.css';
 import { MessageBadEncryptedContent, MessageDeletedContent, MessageFailedContent } from './content';
-import { scaleSystemEmoji } from '../../plugins/react-custom-html-parser';
+import {
+  factoryRenderLinkifyWithMention,
+  getReactCustomHtmlParser,
+  LINKIFY_OPTS,
+  makeMentionCustomProps,
+  renderMatrixMention,
+  scaleSystemEmoji,
+} from '../../plugins/react-custom-html-parser';
 import { useRoomEvent } from '../../hooks/useRoomEvent';
 import colorMXID from '../../../util/colorMXID';
 import { GetMemberPowerTag } from '../../hooks/useMemberPowerTag';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { useMentionClickHandler } from '../../hooks/useMentionClickHandler';
+import { useSpoilerClickHandler } from '../../hooks/useSpoilerClickHandler';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { sanitizeCustomHtml } from '../../utils/sanitize';
 
 type ReplyLayoutProps = {
   userColor?: string;
@@ -83,8 +97,38 @@ export const Reply = as<'div', ReplyProps>(
       [timelineSet, replyEventId]
     );
     const replyEvent = useRoomEvent(room, replyEventId, getFromLocalTimeline);
+    const mx = useMatrixClient();
+    const useAuthentication = useMediaAuthentication();
+    const mentionClickHandler = useMentionClickHandler(room.roomId);
+    const spoilerClickHandler = useSpoilerClickHandler();
+    const linkifyOpts = useMemo<LinkifyOpts>(
+      () => ({
+        ...LINKIFY_OPTS,
+        render: factoryRenderLinkifyWithMention((href) =>
+          renderMatrixMention(mx, room.roomId, href, makeMentionCustomProps(mentionClickHandler))
+        ),
+      }),
+      [mx, room, mentionClickHandler]
+    );
+    const htmlReactParserOptions = useMemo<HTMLReactParserOptions>(
+      () =>
+        getReactCustomHtmlParser(mx, room.roomId, {
+          linkifyOpts,
+          useAuthentication,
+          handleSpoilerClick: spoilerClickHandler,
+          handleMentionClick: mentionClickHandler,
+        }),
+      [mx, room, linkifyOpts, useAuthentication, spoilerClickHandler, mentionClickHandler]
+    );
 
-    const { body } = replyEvent?.getContent() ?? {};
+    const { body, format,  formatted_body} = replyEvent?.getContent() ?? {};
+    const customBody =
+      format === 'org.matrix.custom.html'
+        ? parse(
+            sanitizeCustomHtml(trimReplyFromBody(formatted_body.replace('<br/>', ''))),
+            htmlReactParserOptions
+          )
+        : null;
     const sender = replyEvent?.getSender();
     const powerTag = sender ? getMemberPowerTag?.(sender) : undefined;
     const tagColor = powerTag?.color ? accessibleTagColors?.get(powerTag.color) : undefined;
@@ -99,6 +143,7 @@ export const Reply = as<'div', ReplyProps>(
 
     const badEncryption = replyEvent?.getContent().msgtype === 'm.bad.encrypted';
     const bodyJSX = body ? scaleSystemEmoji(trimReplyFromBody(body)) : fallbackBody;
+    const parsedBodyJSX = customBody ?? bodyJSX
 
     return (
       <Box direction="Row" gap="200" alignItems="Center" {...props} ref={ref}>
@@ -120,7 +165,7 @@ export const Reply = as<'div', ReplyProps>(
         >
           {replyEvent !== undefined ? (
             <Text size="T300" truncate>
-              {badEncryption ? <MessageBadEncryptedContent /> : bodyJSX}
+              {badEncryption ? <MessageBadEncryptedContent /> : parsedBodyJSX}
             </Text>
           ) : (
             <LinePlaceholder

src/app/features/room/RoomInput.tsx

@@ -5,7 +5,7 @@ import React, {
   useCallback,
   useEffect,
   useRef,
-  useState,
+  useState, useMemo,
 } from 'react';
 import { useAtom, useAtomValue } from 'jotai';
 import { isKeyHotkey } from 'is-hotkey';
@@ -28,7 +28,8 @@ import {
   config,
   toRem,
 } from 'folds';
-
+import parse, { HTMLReactParserOptions } from 'html-react-parser';
+import { Opts as LinkifyOpts } from 'linkifyjs';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import {
   CustomEditor,
@@ -117,6 +118,16 @@ import { useTheme } from '../../hooks/useTheme';
 import { useRoomCreatorsTag } from '../../hooks/useRoomCreatorsTag';
 import { usePowerLevelTags } from '../../hooks/usePowerLevelTags';
 import { useComposingCheck } from '../../hooks/useComposingCheck';
+import { sanitizeCustomHtml } from '../../utils/sanitize';
+import { useMentionClickHandler } from '../../hooks/useMentionClickHandler';
+import { useSpoilerClickHandler } from '../../hooks/useSpoilerClickHandler';
+import {
+  factoryRenderLinkifyWithMention,
+  getReactCustomHtmlParser,
+  LINKIFY_OPTS,
+  makeMentionCustomProps,
+  renderMatrixMention,
+} from '../../plugins/react-custom-html-parser';
 
 interface RoomInputProps {
   editor: Editor;
@@ -220,6 +231,28 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
 
     const isComposing = useComposingCheck();
 
+    const mentionClickHandler = useMentionClickHandler(room.roomId);
+    const spoilerClickHandler = useSpoilerClickHandler();
+    const linkifyOpts = useMemo<LinkifyOpts>(
+      () => ({
+        ...LINKIFY_OPTS,
+        render: factoryRenderLinkifyWithMention((href) =>
+          renderMatrixMention(mx, room.roomId, href, makeMentionCustomProps(mentionClickHandler))
+        ),
+      }),
+      [mx, room, mentionClickHandler]
+    );
+    const htmlReactParserOptions = useMemo<HTMLReactParserOptions>(
+      () =>
+        getReactCustomHtmlParser(mx, room.roomId, {
+          linkifyOpts,
+          useAuthentication,
+          handleSpoilerClick: spoilerClickHandler,
+          handleMentionClick: mentionClickHandler,
+        }),
+      [mx, room, linkifyOpts, useAuthentication, spoilerClickHandler, mentionClickHandler]
+    );
+
     useElementSizeObserver(
       useCallback(() => fileDropContainerRef.current, [fileDropContainerRef]),
       useCallback((width) => setHideStickerBtn(width < 500), [])
@@ -574,7 +607,12 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                       }
                     >
                       <Text size="T300" truncate>
-                        {trimReplyFromBody(replyDraft.body)}
+                        {replyDraft.formattedBody
+                          ? parse(
+                              sanitizeCustomHtml(trimReplyFromBody(replyDraft.formattedBody.replace('<br/>', ''))),
+                              htmlReactParserOptions
+                            )
+                          : trimReplyFromBody(replyDraft.body)}
                       </Text>
                     </ReplyLayout>
                   </Box>