adding rtl languages support to announcements

src/components/announcements/announcement-content.tsx

@@ -1,6 +1,8 @@
 import React, { useEffect, useRef } from 'react';
 import { useHistory } from 'react-router-dom';
 
+import { getTextDirection } from 'soapbox/utils/rtl';
+
 import type { Announcement as AnnouncementEntity, Mention as MentionEntity } from 'soapbox/types/entities';
 
 interface IAnnouncementContent {
@@ -11,6 +13,7 @@ const AnnouncementContent: React.FC<IAnnouncementContent> = ({ announcement }) =
   const history = useHistory();
 
   const node = useRef<HTMLDivElement>(null);
+  const direction = getTextDirection(announcement.content);
 
   useEffect(() => {
     updateLinks();
@@ -76,7 +79,8 @@ const AnnouncementContent: React.FC<IAnnouncementContent> = ({ announcement }) =
 
   return (
     <div
-      className='translate text-sm'
+      dir={direction}
+      className='text-sm ltr:ml-0 rtl:mr-0'
       ref={node}
       dangerouslySetInnerHTML={{ __html: announcement.contentHtml }}
     />

src/components/announcements/announcement.tsx

@@ -3,6 +3,7 @@ import { FormattedDate } from 'react-intl';
 
 import { Stack, Text } from 'soapbox/components/ui';
 import { useFeatures } from 'soapbox/hooks';
+import { getTextDirection } from 'soapbox/utils/rtl';
 
 import AnnouncementContent from './announcement-content';
 import ReactionsBar from './reactions-bar';
@@ -27,11 +28,12 @@ const Announcement: React.FC<IAnnouncement> = ({ announcement, addReaction, remo
   const skipYear = hasTimeRange && startsAt.getFullYear() === endsAt.getFullYear() && endsAt.getFullYear() === now.getFullYear();
   const skipEndDate = hasTimeRange && startsAt.getDate() === endsAt.getDate() && startsAt.getMonth() === endsAt.getMonth() && startsAt.getFullYear() === endsAt.getFullYear();
   const skipTime = announcement.all_day;
+  const direction = getTextDirection(announcement.content);
 
   return (
     <Stack className='w-full' space={2}>
       {hasTimeRange && (
-        <Text theme='muted'>
+        <Text theme='muted' direction={direction}>
           <FormattedDate
             value={startsAt}
             hour12