fix search with rtl

Author: yang991178

dist/styles/cards.css

@@ -91,6 +91,10 @@
 .card span.h {
     background: #fce10080;
 }
+.card.rtl .snippet,
+.card.rtl .title {
+    direction: rtl;
+}
 
 .default-card {
     display: inline-block;

package-lock.json

@@ -27,7 +27,7 @@
     "@types/react-redux": "^7.1.9",
     "@yang991178/rss-parser": "^3.8.1",
     "electron": "^19.0.0",
-    "electron-builder": "^22.11.3",
+    "electron-builder": "^23.0.3",
     "electron-react-devtools": "^0.5.3",
     "electron-store": "^5.2.0",
     "electron-window-state": "^5.0.3",

package.json

@@ -3,10 +3,12 @@ import { Card } from "./card"
 import CardInfo from "./info"
 import Time from "../utils/time"
 import Highlights from "./highlights"
+import { SourceTextDirection } from "../../scripts/models/source"
 
 const className = (props: Card.Props) => {
     let cn = ["card", "compact-card"]
     if (props.item.hidden) cn.push("hidden")
+    if (props.source.textDir === SourceTextDirection.RTL) cn.push("rtl")
     return cn.join(" ")
 }
 
@@ -23,15 +25,10 @@ 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}
-                    dir={props.source.textDir}
-                />
+                <Highlights text={props.item.snippet} filter={props.filter} />
             </span>
         </div>
         <Time date={props.item.date} />

src/components/cards/compact-card.tsx

@@ -2,11 +2,13 @@ import * as React from "react"
 import { Card } from "./card"
 import CardInfo from "./info"
 import Highlights from "./highlights"
+import { SourceTextDirection } from "../../scripts/models/source"
 
 const className = (props: Card.Props) => {
     let cn = ["card", "default-card"]
     if (props.item.snippet && props.item.thumb) cn.push("transform")
     if (props.item.hidden) cn.push("hidden")
+    if (props.source.textDir === SourceTextDirection.RTL) cn.push("rtl")
     return cn.join(" ")
 }
 
@@ -25,19 +27,10 @@ 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
-                dir={props.source.textDir}
-            />
+            <Highlights text={props.item.title} filter={props.filter} title />
         </h3>
         <p className={"snippet" + (props.item.thumb ? "" : " show")}>
-            <Highlights
-                text={props.item.snippet}
-                filter={props.filter}
-                dir={props.source.textDir}
-            />
+            <Highlights text={props.item.snippet} filter={props.filter} />
         </p>
     </div>
 )

src/components/cards/default-card.tsx

@@ -7,7 +7,6 @@ type HighlightsProps = {
     text: string
     filter: FeedFilter
     title?: boolean
-    dir?: SourceTextDirection
 }
 
 const Highlights: React.FunctionComponent<HighlightsProps> = props => {
@@ -59,22 +58,10 @@ const Highlights: React.FunctionComponent<HighlightsProps> = props => {
         }
     }
 
-    const testStyle = {
-        direction: "inherit",
-    } as React.CSSProperties
-    if (props.dir === SourceTextDirection.RTL) {
-        testStyle.direction = "rtl"
-    }
     return (
         <>
             {spans.map(([text, flag]) =>
-                flag ? (
-                    <div className="h" style={testStyle}>
-                        {text}
-                    </div>
-                ) : (
-                    <div style={testStyle}>{text}</div>
-                )
+                flag ? <span className="h">{text}</span> : text
             )}
         </>
     )

src/components/cards/highlights.tsx

@@ -3,13 +3,15 @@ import { Card } from "./card"
 import CardInfo from "./info"
 import Highlights from "./highlights"
 import { ViewConfigs } from "../../schema-types"
+import { SourceTextDirection } from "../../scripts/models/source"
 
 const className = (props: Card.Props) => {
     let cn = ["card", "list-card"]
     if (props.item.hidden) cn.push("hidden")
     if (props.selected) cn.push("selected")
     if (props.viewConfigs & ViewConfigs.FadeRead && props.item.hasRead)
         cn.push("read")
+    if (props.source.textDir === SourceTextDirection.RTL) cn.push("rtl")
     return cn.join(" ")
 }
 
@@ -31,15 +33,13 @@ 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) && (
                 <p className="snippet">
                     <Highlights
                         text={props.item.snippet}
                         filter={props.filter}
-                        dir={props.source.textDir}
                     />
                 </p>
             )}

src/components/cards/list-card.tsx

@@ -2,11 +2,13 @@ import * as React from "react"
 import { Card } from "./card"
 import CardInfo from "./info"
 import Highlights from "./highlights"
+import { SourceTextDirection } from "../../scripts/models/source"
 
 const className = (props: Card.Props) => {
     let cn = ["card", "magazine-card"]
     if (props.item.hasRead) cn.push("read")
     if (props.item.hidden) cn.push("hidden")
+    if (props.source.textDir === SourceTextDirection.RTL) cn.push("rtl")
     return cn.join(" ")
 }
 
@@ -28,14 +30,12 @@ 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>