pl-fe: Use ParsedContent for account bios

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

packages/pl-fe/src/components/account-hover-card.tsx

@@ -13,6 +13,7 @@ import { useAppSelector, useAppDispatch } from 'pl-fe/hooks';
 import { useAccountHoverCardStore } from 'pl-fe/stores';
 
 import { showAccountHoverCard } from './hover-ref-wrapper';
+import { ParsedContent } from './parsed-content';
 import { dateFormatOptions } from './relative-timestamp';
 import Scrobble from './scrobble';
 import { Card, CardBody, HStack, Icon, Stack, Text } from './ui';
@@ -98,7 +99,6 @@ const AccountHoverCard: React.FC<IAccountHoverCard> = ({ visible = true }) => {
   };
 
   if (!account) return null;
-  const accountBio = { __html: account.note_emojified };
   const memberSinceDate = intl.formatDate(account.created_at, { month: 'long', year: 'numeric' });
   const followedBy = me !== account.id && account.relationship?.followed_by === true;
 
@@ -153,9 +153,10 @@ const AccountHoverCard: React.FC<IAccountHoverCard> = ({ visible = true }) => {
               <Text
                 truncate
                 size='sm'
-                dangerouslySetInnerHTML={accountBio}
                 className='mr-2 rtl:ml-2 rtl:mr-0 [&_br]:hidden [&_p:first-child]:inline [&_p:first-child]:truncate [&_p]:hidden'
-              />
+              >
+                <ParsedContent html={account.note_emojified} />
+              </Text>
             )}
           </Stack>
 

packages/pl-fe/src/components/account.tsx

@@ -10,6 +10,7 @@ import { getAcct } from 'pl-fe/utils/accounts';
 import { displayFqn } from 'pl-fe/utils/state';
 
 import Badge from './badge';
+import { ParsedContent } from './parsed-content';
 import RelativeTimestamp from './relative-timestamp';
 import { Avatar, Emoji, HStack, Icon, IconButton, Stack, Text } from './ui';
 
@@ -348,9 +349,9 @@ const Account = ({
                 <Text
                   truncate
                   size='sm'
-                  dangerouslySetInnerHTML={{ __html: account.note_emojified }}
-                  className='mr-2 rtl:ml-2 rtl:mr-0 [&_br]:hidden [&_p:first-child]:inline [&_p:first-child]:truncate [&_p]:hidden'
-                />
+                >
+                  <ParsedContent html={account.note_emojified} />
+                </Text>
               )}
             </Stack>
           </div>

packages/pl-fe/src/components/parsed-content.tsx

@@ -5,6 +5,7 @@ import { Link } from 'react-router-dom';
 
 import HashtagLink from './hashtag-link';
 import HoverRefWrapper from './hover-ref-wrapper';
+import StatusMention from './status-mention';
 
 import type { Mention } from 'pl-api';
 
@@ -12,7 +13,9 @@ const nodesToText = (nodes: Array<DOMNode>): string =>
   nodes.map(node => node.type === 'text' ? node.data : node.type === 'tag' ? nodesToText(node.children as Array<DOMNode>) : '').join('');
 
 interface IParsedContent {
+  /** HTML content to display. */
   html: string;
+  /** Array of mentioned accounts. */
   mentions?: Array<Mention>;
   /** Whether it's a status which has a quote. */
   hasQuote?: boolean;
@@ -62,20 +65,26 @@ const ParsedContent: React.FC<IParsedContent> = (({ html, mentions, hasQuote })
             </a>
           );
 
-          if (classes?.includes('mention') && mentions) {
-            const mention = mentions.find(({ url }) => domNode.attribs.href === url);
-            if (mention) {
+          if (classes?.includes('mention')) {
+            if (mentions) {
+              const mention = mentions.find(({ url }) => domNode.attribs.href === url);
+              if (mention) {
+                return (
+                  <HoverRefWrapper accountId={mention.id} inline>
+                    <Link
+                      to={`/@${mention.acct}`}
+                      className='text-primary-600 hover:underline dark:text-accent-blue'
+                      dir='ltr'
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      @{mention.username}
+                    </Link>
+                  </HoverRefWrapper>
+                );
+              }
+            } else if (domNode.attribs['data-user']) {
               return (
-                <HoverRefWrapper accountId={mention.id} inline>
-                  <Link
-                    to={`/@${mention.acct}`}
-                    className='text-primary-600 hover:underline dark:text-accent-blue'
-                    dir='ltr'
-                    onClick={(e) => e.stopPropagation()}
-                  >
-                    @{mention.username}
-                  </Link>
-                </HoverRefWrapper>
+                <StatusMention accountId={domNode.attribs['data-user']} fallback={fallback} />
               );
             }
           }