feat(ReadingView): add classes to page elements

Author: 6km

src/components/ReadingView/Line.tsx

@@ -4,6 +4,7 @@ import { CENTERED_PAGES_HORIZONTAL, MEDINA_MUSHAF_CENTERED_LINES } from '../../c
 import { isSubset } from '../../utils/array'
 import { LineContainerStyleProps, LineProps } from '../../types'
 import { useMemo } from 'react'
+import { isArabicDigits } from '../../utils/string'
 
 const LineContainer = styled.div<LineContainerStyleProps>`
     word-break: keep-all !important;
@@ -40,9 +41,18 @@ export default function Line({ page, words, surahId, lineNumber }: LineProps) {
 
     return (
         <LineContainer {...lineContainerStyleProps}>
-            {words.map((word: { text_uthmani: string }, wordIndex) => (
-                <QuranText key={`page${page}-line${lineNumber}-word${wordIndex}`} text={word.text_uthmani} />
-            ))}
+            {words.map((word: { text_uthmani: string }, wordIndex) => {
+                const isAyahMarker = isArabicDigits(word.text_uthmani)
+                const charClass = isAyahMarker ? `react-quran_ayah-marker` : 'react-quran_ayah-word'
+
+                return (
+                    <QuranText
+                        className={charClass}
+                        key={`page${page}-line${lineNumber}-word${wordIndex}`}
+                        text={word.text_uthmani}
+                    />
+                )
+            })}
         </LineContainer>
     )
 }

src/components/ReadingView/SurahTitle.tsx

@@ -29,7 +29,8 @@ export default function SurahTitle({
     surahTitleStyles: React.CSSProperties
 }) {
     return (
-        <SurahFrame className="surah-title" $linesLength={linesLength} style={surahTitleStyles}>
+        // class surah-title is old. it might get removed in future updates.
+        <SurahFrame className="react-quran_surah-title surah-title" $linesLength={linesLength} style={surahTitleStyles}>
             {'سورة '.concat(getChapterName(surahNumber))}
         </SurahFrame>
     )

src/utils/string.ts

@@ -6,3 +6,15 @@ export function stringToNumber(string: string | number): number {
 
     return Number(String(string))
 }
+
+const arabicDigitsRegex = /^[\u0660-\u0669]+$/
+
+/**
+ * Check if a string an arabic digit
+ * @returns
+ */
+export function isArabicDigits(string: string) {
+    if (typeof string !== 'string') return
+
+    return arabicDigitsRegex.test(string)
+}