title & snippet in card component now respect source text dir attribute

package-lock.json

@@ -8,9 +8,6 @@
       "name": "fluent-reader",
       "version": "1.1.0",
       "license": "BSD-3-Clause",
-      "dependencies": {
-        "font-list": "^1.4.2"
-      },
       "devDependencies": {
         "@fluentui/react": "^7.126.2",
         "@types/lovefield": "^2.1.3",
@@ -24,6 +21,7 @@
         "electron-react-devtools": "^0.5.3",
         "electron-store": "^5.2.0",
         "electron-window-state": "^5.0.3",
+        "font-list": "^1.4.2",
         "hard-source-webpack-plugin": "^0.13.1",
         "html-webpack-plugin": "^4.3.0",
         "js-md5": "^0.7.3",
@@ -4192,7 +4190,8 @@
     "node_modules/font-list": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/font-list/-/font-list-1.4.2.tgz",
-      "integrity": "sha512-vPekA+sinAymEkNHwnOse0D75phwNvH/E0z/mJSgGoCBVKy+rLZzd3HziYVwlII34bb0ZYOKBbM36s2bfCaR1A=="
+      "integrity": "sha512-vPekA+sinAymEkNHwnOse0D75phwNvH/E0z/mJSgGoCBVKy+rLZzd3HziYVwlII34bb0ZYOKBbM36s2bfCaR1A==",
+      "dev": true
     },
     "node_modules/for-in": {
       "version": "1.0.2",
@@ -12739,7 +12738,8 @@
     "font-list": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/font-list/-/font-list-1.4.2.tgz",
-      "integrity": "sha512-vPekA+sinAymEkNHwnOse0D75phwNvH/E0z/mJSgGoCBVKy+rLZzd3HziYVwlII34bb0ZYOKBbM36s2bfCaR1A=="
+      "integrity": "sha512-vPekA+sinAymEkNHwnOse0D75phwNvH/E0z/mJSgGoCBVKy+rLZzd3HziYVwlII34bb0ZYOKBbM36s2bfCaR1A==",
+      "dev": true
     },
     "for-in": {
       "version": "1.0.2",

src/components/cards/compact-card.tsx

@@ -23,10 +23,15 @@ const CompactCard: React.FunctionComponent<Card.Props> = props => (
                     text={props.item.title}
                     filter={props.filter}
                     title
+                    dir={props.source.textDir}
                 />
             </span>
             <span className="snippet">
-                <Highlights text={props.item.snippet} filter={props.filter} />
+                <Highlights
+                    text={props.item.snippet}
+                    filter={props.filter}
+                    dir={props.source.textDir}
+                />
             </span>
         </div>
         <Time date={props.item.date} />

src/components/cards/default-card.tsx

@@ -25,10 +25,19 @@ const DefaultCard: React.FunctionComponent<Card.Props> = props => (
         ) : null}
         <CardInfo source={props.source} item={props.item} />
         <h3 className="title">
-            <Highlights text={props.item.title} filter={props.filter} title />
+            <Highlights
+                text={props.item.title}
+                filter={props.filter}
+                title
+                dir={props.source.textDir}
+            />
         </h3>
         <p className={"snippet" + (props.item.thumb ? "" : " show")}>
-            <Highlights text={props.item.snippet} filter={props.filter} />
+            <Highlights
+                text={props.item.snippet}
+                filter={props.filter}
+                dir={props.source.textDir}
+            />
         </p>
     </div>
 )

src/components/cards/highlights.tsx

@@ -1,11 +1,13 @@
 import * as React from "react"
 import { validateRegex } from "../../scripts/utils"
 import { FeedFilter, FilterType } from "../../scripts/models/feed"
+import { SourceTextDirection } from "../../scripts/models/source"
 
 type HighlightsProps = {
     text: string
     filter: FeedFilter
     title?: boolean
+    dir: SourceTextDirection
 }
 
 const Highlights: React.FunctionComponent<HighlightsProps> = props => {
@@ -57,10 +59,25 @@ const Highlights: React.FunctionComponent<HighlightsProps> = props => {
         }
     }
 
+    const testStyle = {
+        direction: "inherit",
+        writingMode: "inherit",
+    } as React.CSSProperties
+    if (props.dir === SourceTextDirection.RTL) {
+        testStyle.direction = "rtl"
+    } else if (props.dir === SourceTextDirection.Vertical) {
+        testStyle.writingMode = "vertical-rl"
+    }
     return (
         <>
             {spans.map(([text, flag]) =>
-                flag ? <span className="h">{text}</span> : text
+                flag ? (
+                    <div className="h" style={testStyle}>
+                        {text}
+                    </div>
+                ) : (
+                    <div style={testStyle}>{text}</div>
+                )
             )}
         </>
     )

src/components/cards/list-card.tsx

@@ -31,6 +31,7 @@ const ListCard: React.FunctionComponent<Card.Props> = props => (
                     text={props.item.title}
                     filter={props.filter}
                     title
+                    dir={props.source.textDir}
                 />
             </h3>
             {Boolean(props.viewConfigs & ViewConfigs.ShowSnippet) && (
@@ -38,6 +39,7 @@ const ListCard: React.FunctionComponent<Card.Props> = props => (
                     <Highlights
                         text={props.item.snippet}
                         filter={props.filter}
+                        dir={props.source.textDir}
                     />
                 </p>
             )}

src/components/cards/magazine-card.tsx

@@ -28,12 +28,14 @@ const MagazineCard: React.FunctionComponent<Card.Props> = props => (
                         text={props.item.title}
                         filter={props.filter}
                         title
+                        dir={props.source.textDir}
                     />
                 </h3>
                 <p className="snippet">
                     <Highlights
                         text={props.item.snippet}
                         filter={props.filter}
+                        dir={props.source.textDir}
                     />
                 </p>
             </div>