fix: Arabic and other Right To Left metadata accessibility summary in publication info dialog (Fixes #2491)

Author: danielweck

src/renderer/common/components/dialog/publicationInfos/PublicationInfoDescription.tsx

@@ -65,8 +65,8 @@ export default class PublicationInfoDescription extends React.Component<IProps,
         const { publicationViewMaybeOpds: { description }, __ } = this.props;
 
         if (!description) return <></>;
-        const textSanitize = DOMPurify.sanitize(description).replace(/font-size:/g, "font-sizexx:");
-        if (!textSanitize) return <></>;
+        const descriptionSanitized = DOMPurify.sanitize(description).replace(/font-size:/g, "font-sizexx:");
+        if (!descriptionSanitized) return <></>;
         return (
             <>
                 <div className={stylePublication.publicationInfo_heading}>
@@ -84,7 +84,7 @@ export default class PublicationInfoDescription extends React.Component<IProps,
                         <div
                             ref={this.descriptionRef}
                             className={stylesBookDetailsDialog.allowUserSelect}
-                            dangerouslySetInnerHTML={{ __html: textSanitize }}
+                            dangerouslySetInnerHTML={{ __html: descriptionSanitized }}
                         >
                         </div>
                     </div>

src/renderer/common/components/dialog/publicationInfos/publicationInfoA11y.tsx

@@ -15,7 +15,7 @@ import * as debug_ from "debug";
 import DOMPurify from "dompurify";
 import * as React from "react";
 import { TPublication } from "readium-desktop/common/type/publication.type";
-import { convertMultiLangStringToString } from "readium-desktop/renderer/common/language-string";
+import { convertMultiLangStringToString, langStringIsRTL } from "readium-desktop/renderer/common/language-string";
 import isURL from "validator/lib/isURL";
 import { IRendererCommonRootState } from "readium-desktop/common/redux/states/rendererCommonRootState";
 import { connect } from "react-redux";
@@ -109,13 +109,13 @@ export class PublicationInfoA11y extends React.Component<IProps, IState> {
 
             if (!a11y_accessibilitySummary) return undefined;
 
-            let textSanitize_a11y = "";
-            const [, text] = convertMultiLangStringToString(a11y_accessibilitySummary, this.props.locale);
-            if (text) {
-                textSanitize_a11y = DOMPurify.sanitize(text).replace(/font-size:/g, "font-sizexx:");
-            }
+            const accessibilitySummaryLangStr = convertMultiLangStringToString(a11y_accessibilitySummary, this.props.locale);
+            const accessibilitySummaryLang = accessibilitySummaryLangStr && accessibilitySummaryLangStr[0] ? accessibilitySummaryLangStr[0].toLowerCase() : "";
+            const accessibilitySummaryIsRTL = langStringIsRTL(accessibilitySummaryLang);
+            const accessibilitySummaryStr = accessibilitySummaryLangStr && accessibilitySummaryLangStr[1] ? accessibilitySummaryLangStr[1] : "";
+            const accessibilitySummaryStrSanitized = accessibilitySummaryStr ? DOMPurify.sanitize(accessibilitySummaryStr).replace(/font-size:/g, "font-sizexx:") : "";
 
-            return textSanitize_a11y ?
+            return accessibilitySummaryStr ?
                 <div className={classNames(stylesBlocks.description_see_more)}>
                     <div
                         ref={this.descriptionWrapperRef_a11y}
@@ -127,7 +127,8 @@ export class PublicationInfoA11y extends React.Component<IProps, IState> {
                         <div
                             ref={this.descriptionRef_a11y}
                             className={stylesBookDetailsDialog.allowUserSelect}
-                            dangerouslySetInnerHTML={{ __html: textSanitize_a11y }}
+                            dir={accessibilitySummaryIsRTL ? "rtl" : undefined}
+                            dangerouslySetInnerHTML={{ __html: accessibilitySummaryStrSanitized }}
                         >
                         </div>
                     </div>

src/renderer/library/components/searchResult/AllPublicationPage.tsx

@@ -882,7 +882,7 @@ const CellTags: React.FC<ITableCellProps_Column & ITableCellProps_GenericCell &
 const CellDescription: React.FC<ITableCellProps_Column & ITableCellProps_GenericCell & ITableCellProps_StringValue> = (props) => {
 
     const textNeedToBeSanitized = props.value || "";
-    const textSanitize = DOMPurify.sanitize(textNeedToBeSanitized).replace(/font-size:/g, "font-sizexx:");
+    const cellTextSanitized = DOMPurify.sanitize(textNeedToBeSanitized).replace(/font-size:/g, "font-sizexx:");
     const [isOpen, setIsOpen] = React.useState(false);
 
     return (<div
@@ -901,7 +901,7 @@ const CellDescription: React.FC<ITableCellProps_Column & ITableCellProps_Generic
             // textAlign: props.displayType === DisplayType.Grid ? "justify" : "start",
             textAlign: "start",
         }}>
-        <p dangerouslySetInnerHTML={{ __html: textSanitize }}></p>
+        <p dangerouslySetInnerHTML={{ __html: cellTextSanitized }}></p>
         {props.value ?
             <Popover.Root onOpenChange={() => setIsOpen(!isOpen)}>
                 <Popover.Trigger style={{maxWidth: "15px"}}>
@@ -913,7 +913,8 @@ const CellDescription: React.FC<ITableCellProps_Column & ITableCellProps_Generic
                 </Popover.Trigger>
                 <Popover.Portal>
                     <Popover.Content collisionPadding={{top : 280}} avoidCollisions sideOffset={5} align="end" alignOffset={-10} hideWhenDetached>
-                        <p className={stylesDropDown.dropdown_description} dangerouslySetInnerHTML={{ __html: textSanitize }}></p>
+                        <p className={stylesDropDown.dropdown_description}
+                            dangerouslySetInnerHTML={{ __html: cellTextSanitized }}></p>
                         <Popover.Arrow className={stylesDropDown.PopoverArrow} aria-hidden />
                     </Popover.Content>
                 </Popover.Portal>

src/renderer/reader/components/ReaderMenuSearch.tsx

@@ -404,7 +404,7 @@ class ReaderMenuSearch extends React.Component<IProps, IState> {
     //                                         }
     //                                         data-href={link.Href}
     //                                     >
-    //                                         <span dangerouslySetInnerHTML={{ __html: link.Title}}></span>
+    //                                         <span dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(link.Title)}}></span>
     //                                     </a>
     //                                 </div>
     //                             )}