[Glitch] Emoji: Statuses

Port 0c1ca6c969 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/features/notifications_v2/components/embedded_status.tsx

@@ -6,6 +6,7 @@ import { useHistory } from 'react-router-dom';
 
 import type { List as ImmutableList, RecordOf } from 'immutable';
 
+import type { ApiMentionJSON } from '@/flavours/glitch/api_types/statuses';
 import { AnimateEmojiProvider } from '@/flavours/glitch/components/emoji/context';
 import BarChart4BarsIcon from '@/material-icons/400-24px/bar_chart_4_bars.svg?react';
 import PhotoLibraryIcon from '@/material-icons/400-24px/photo_library.svg?react';
@@ -18,7 +19,7 @@ import { useAppSelector, useAppDispatch } from 'flavours/glitch/store';
 
 import { EmbeddedStatusContent } from './embedded_status_content';
 
-export type Mention = RecordOf<{ url: string; acct: string }>;
+export type Mention = RecordOf<ApiMentionJSON>;
 
 export const EmbeddedStatus: React.FC<{ statusId: string }> = ({
   statusId,
@@ -86,12 +87,9 @@ export const EmbeddedStatus: React.FC<{ statusId: string }> = ({
   }
 
   // Assign status attributes to variables with a forced type, as status is not yet properly typed
-  const contentHtml = status.get('contentHtml') as string;
-  const contentWarning = status.get('spoilerHtml') as string;
+  const hasContentWarning = !!status.get('spoiler_text');
   const poll = status.get('poll');
-  const language = status.get('language') as string;
-  const mentions = status.get('mentions') as ImmutableList<Mention>;
-  const expanded = !status.get('hidden') || !contentWarning;
+  const expanded = !status.get('hidden') || !hasContentWarning;
   const mediaAttachmentsSize = (
     status.get('media_attachments') as ImmutableList<unknown>
   ).size;
@@ -109,20 +107,16 @@ export const EmbeddedStatus: React.FC<{ statusId: string }> = ({
         <DisplayName account={account} />
       </div>
 
-      {contentWarning && (
-        <ContentWarning
-          text={contentWarning}
-          onClick={handleContentWarningClick}
-          expanded={expanded}
-        />
-      )}
+      <ContentWarning
+        status={status}
+        onClick={handleContentWarningClick}
+        expanded={expanded}
+      />
 
-      {(!contentWarning || expanded) && (
+      {(!hasContentWarning || expanded) && (
         <EmbeddedStatusContent
           className='notification-group__embedded-status__content reply-indicator__content translate'
-          content={contentHtml}
-          language={language}
-          mentions={mentions}
+          status={status}
         />
       )}
 

app/javascript/flavours/glitch/features/notifications_v2/components/embedded_status_content.tsx

@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 
 import { useHistory } from 'react-router-dom';
 
@@ -6,16 +6,22 @@ import type { List } from 'immutable';
 
 import type { History } from 'history';
 
+import type { ApiMentionJSON } from '@/flavours/glitch/api_types/statuses';
+import { EmojiHTML } from '@/flavours/glitch/components/emoji/html';
+import { useElementHandledLink } from '@/flavours/glitch/components/status/handled_link';
+import type { Status } from '@/flavours/glitch/models/status';
+import { isModernEmojiEnabled } from '@/flavours/glitch/utils/environment';
+
 import type { Mention } from './embedded_status';
 
 const handleMentionClick = (
   history: History,
-  mention: Mention,
+  mention: ApiMentionJSON,
   e: MouseEvent,
 ) => {
   if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
     e.preventDefault();
-    history.push(`/@${mention.get('acct')}`);
+    history.push(`/@${mention.acct}`);
   }
 };
 
@@ -31,16 +37,26 @@ const handleHashtagClick = (
 };
 
 export const EmbeddedStatusContent: React.FC<{
-  content: string;
-  mentions: List<Mention>;
-  language: string;
+  status: Status;
   className?: string;
-}> = ({ content, mentions, language, className }) => {
+}> = ({ status, className }) => {
   const history = useHistory();
 
+  const mentions = useMemo(
+    () => (status.get('mentions') as List<Mention>).toJS(),
+    [status],
+  );
+  const htmlHandlers = useElementHandledLink({
+    hashtagAccountId: status.get('account') as string | undefined,
+    hrefToMentionAccountId(href) {
+      const mention = mentions.find((item) => item.url === href);
+      return mention?.id;
+    },
+  });
+
   const handleContentRef = useCallback(
     (node: HTMLDivElement | null) => {
-      if (!node) {
+      if (!node || isModernEmojiEnabled()) {
         return;
       }
 
@@ -53,7 +69,7 @@ export const EmbeddedStatusContent: React.FC<{
 
         link.classList.add('status-link');
 
-        const mention = mentions.find((item) => link.href === item.get('url'));
+        const mention = mentions.find((item) => link.href === item.url);
 
         if (mention) {
           link.addEventListener(
@@ -61,8 +77,8 @@ export const EmbeddedStatusContent: React.FC<{
             handleMentionClick.bind(null, history, mention),
             false,
           );
-          link.setAttribute('title', `@${mention.get('acct')}`);
-          link.setAttribute('href', `/@${mention.get('acct')}`);
+          link.setAttribute('title', `@${mention.acct}`);
+          link.setAttribute('href', `/@${mention.acct}`);
         } else if (
           link.textContent.startsWith('#') ||
           link.previousSibling?.textContent?.endsWith('#')
@@ -83,11 +99,12 @@ export const EmbeddedStatusContent: React.FC<{
   );
 
   return (
-    <div
+    <EmojiHTML
+      {...htmlHandlers}
       className={className}
       ref={handleContentRef}
-      lang={language}
-      dangerouslySetInnerHTML={{ __html: content }}
+      lang={status.get('language') as string}
+      htmlString={status.get('contentHtml') as string}
     />
   );
 };