Merge pull request #3619 from omnivore-app/feat/web-rtl-text

Allow setting text as RTL in the reader

packages/web/components/templates/article/ArticleContainer.tsx

@@ -1,4 +1,7 @@
-import { ArticleAttributes } from '../../../lib/networking/queries/useGetArticleQuery'
+import {
+  ArticleAttributes,
+  TextDirection,
+} from '../../../lib/networking/queries/useGetArticleQuery'
 import { Article } from './../../../components/templates/article/Article'
 import { Box, HStack, SpanBox, VStack } from './../../elements/LayoutPrimitives'
 import { StyledText } from './../../elements/StyledText'
@@ -38,6 +41,7 @@ type ArticleContainerProps = {
   showHighlightsModal: boolean
   highlightOnRelease?: boolean
   justifyText?: boolean
+  textDirection?: TextDirection
   setShowHighlightsModal: React.Dispatch<React.SetStateAction<boolean>>
 }
 
@@ -138,6 +142,9 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
   const highlightHref = useRef(
     window.location.hash ? window.location.hash.split('#')[1] : null
   )
+  const [textDirection, setTextDirection] = useState(
+    props.textDirection ?? 'LTR'
+  )
 
   const updateFontSize = useCallback(
     (newFontSize: number) => {
@@ -173,6 +180,14 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
       setHighlightOnRelease(isEnabled)
     }
 
+    interface UpdateTextDirectionEvent extends Event {
+      textDirection: TextDirection
+    }
+
+    const handleUpdateTextDirection = (event: UpdateTextDirectionEvent) => {
+      setTextDirection(event.textDirection)
+    }
+
     interface UpdateMaxWidthPercentageEvent extends Event {
       maxWidthPercentage?: number
     }
@@ -367,6 +382,7 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
   return (
     <>
       <Box
+        dir={textDirection}
         id="article-container"
         css={{
           padding: 30,

packages/web/components/templates/article/ReaderSettingsControl.tsx

@@ -170,6 +170,37 @@ function AdvancedSettings(props: SettingsProps): JSX.Element {
         </SwitchRoot>
       </HStack>
 
+      <HStack
+        css={{
+          width: '100%',
+          pr: '30px',
+          alignItems: 'center',
+          '&:hover': {
+            opacity: 0.8,
+          },
+          '&[data-state="on"]': {
+            bg: '$thBackground',
+          },
+        }}
+        alignment="start"
+        distribution="between"
+      >
+        <Label htmlFor="auto-highlight-mode" css={{ width: '100%' }}>
+          <StyledText style="displaySettingsLabel" css={{ pl: '20px' }}>
+            Right-to-left text
+          </StyledText>
+        </Label>
+        <SwitchRoot
+          id="rtl-text"
+          checked={readerSettings.textDirection == 'RTL'}
+          onCheckedChange={(checked) => {
+            readerSettings.setTextDirection(checked ? 'RTL' : 'LTR')
+          }}
+        >
+          <SwitchThumb />
+        </SwitchRoot>
+      </HStack>
+
       <HStack
         css={{
           width: '100%',

packages/web/lib/hooks/useReaderSettings.tsx

@@ -2,6 +2,7 @@ import { useRegisterActions } from 'kbar'
 import { useCallback, useState } from 'react'
 import { applyStoredTheme } from '../themeUpdater'
 import { usePersistedState } from './usePersistedState'
+import { TextDirection } from '../networking/queries/useGetArticleQuery'
 
 const DEFAULT_FONT = 'Inter'
 
@@ -34,6 +35,9 @@ export type ReaderSettings = {
 
   highlightOnRelease: boolean | undefined
   setHighlightOnRelease: (set: boolean) => void
+
+  textDirection: TextDirection | undefined
+  setTextDirection: (textDirection: TextDirection) => void
 }
 
 export const useReaderSettings = (): ReaderSettings => {
@@ -73,6 +77,12 @@ export const useReaderSettings = (): ReaderSettings => {
     key: `--display-justify-text`,
     initialValue: false,
   })
+  const [textDirection, setTextDirection] = usePersistedState<
+    TextDirection | undefined
+  >({
+    key: `--display-text-direction`,
+    initialValue: 'LTR',
+  })
   const [showSetLabelsModal, setShowSetLabelsModal] = useState(false)
   const [showEditDisplaySettingsModal, setShowEditDisplaySettingsModal] =
     useState(false)
@@ -226,5 +236,7 @@ export const useReaderSettings = (): ReaderSettings => {
     setHighContrastText,
     highlightOnRelease,
     setHighlightOnRelease,
+    textDirection,
+    setTextDirection,
   }
 }

packages/web/lib/networking/queries/useGetArticleQuery.tsx

@@ -39,6 +39,8 @@ type NestedArticleData = {
   errorCodes?: string[]
 }
 
+export type TextDirection = 'RTL' | 'LTR'
+
 export type ArticleAttributes = {
   id: string
   title: string
@@ -64,6 +66,7 @@ export type ArticleAttributes = {
   linkId: string
   labels?: Label[]
   state?: State
+  directionality?: TextDirection
   recommendations?: Recommendation[]
 }
 

packages/web/pages/[username]/[slug]/index.tsx

@@ -566,6 +566,7 @@ export default function Home(): JSX.Element {
               highlightOnRelease={
                 readerSettings.highlightOnRelease ?? undefined
               }
+              textDirection={readerSettings.textDirection}
               articleMutations={{
                 createHighlightMutation,
                 deleteHighlightMutation,

packages/web/pages/_document.tsx

@@ -8,7 +8,7 @@ export default class Document extends NextDocument {
     globalStyles()
 
     return (
-      <Html lang="en">
+      <Html lang="en" dir="ltr">
         <Head>
           <style
             id="stitches"