@tarekeldeeb/quran-madina-react 2.0.0 → 2.1.0

package/README.md

@@ -61,6 +61,7 @@ export default function App() {
 | `words`     | string              | 1-based word range: `"1:2"`, `"3-10"`, or a single index. |
 | `highlight` | string              | 1-based word range to mark soft yellow, e.g. `"5-8"`. |
 | `error`     | string              | 1-based word range to mark with built-in "error" highlight styling, e.g. `"10-13"`. |
+| `letters`   | string              | Letters to emphasise inside words: `"1:3 crimson, 4:3-5 emerald"` (word:letters, optional colour — crimson by default — and optional `blink`). |
 | `headless`  | boolean             | Drop the header/copy chrome. |
 | `quotes`    | string              | `"no"` (or `"false"`) drops the quote marks shown around inline (single-line) renders. |
 | `inline`    | string              | `"no"` forces the multiline/header layout even for a selection that fits one line. `"auto"` (default) is fit-based. `"yes"` (force a single line for an overflowing selection) is not implemented yet. |

package/dist/index.cjs

@@ -75,6 +75,7 @@ function QuranMadinaHtml({
   words,
   highlight,
   error,
+  letters,
   headless,
   quotes,
   inline,
@@ -123,10 +124,11 @@ function QuranMadinaHtml({
     set("words", words);
     set("highlight", highlight);
     set("error", error);
+    set("letters", letters);
     set("headless", headless);
     set("quotes", quotes);
     set("inline", inline);
     set("notitle", notitle);
-  }, [ready, page, sura, aya, words, highlight, error, headless, quotes, inline, notitle]);
+  }, [ready, page, sura, aya, words, highlight, error, letters, headless, quotes, inline, notitle]);
   return import_react.default.createElement(TAG, { ref, class: className, style, ...rest });
 }

package/dist/index.d.ts

@@ -36,6 +36,14 @@ export interface QuranMadinaHtmlProps
    * render with the library's built-in "error" highlight styling.
    */
   error?: string;
+  /**
+   * Letters to emphasise inside words: comma-separated groups "word:letters [colour] [blink]",
+   * e.g. "1:3 crimson, 4:3-5 emerald blink, 6:2+4". Word numbers count like highlight/error;
+   * letters are n, n-m or n+m; the colour is optional (crimson by default): crimson, emerald,
+   * lapis, gold, violet or any CSS colour; "blink" makes the letter's halo pulse (no animation
+   * by default). Nothing moves.
+   */
+  letters?: string;
   /** Drop the header / copy chrome and render only the Quran text. */
   headless?: boolean;
   /**

package/dist/index.mjs

@@ -39,6 +39,7 @@ function QuranMadinaHtml({
   words,
   highlight,
   error,
+  letters,
   headless,
   quotes,
   inline,
@@ -87,11 +88,12 @@ function QuranMadinaHtml({
     set("words", words);
     set("highlight", highlight);
     set("error", error);
+    set("letters", letters);
     set("headless", headless);
     set("quotes", quotes);
     set("inline", inline);
     set("notitle", notitle);
-  }, [ready, page, sura, aya, words, highlight, error, headless, quotes, inline, notitle]);
+  }, [ready, page, sura, aya, words, highlight, error, letters, headless, quotes, inline, notitle]);
   return React.createElement(TAG, { ref, class: className, style, ...rest });
 }
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tarekeldeeb/quran-madina-react",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "React wrapper for the quran-madina-html custom element — render Madina-style Quran pages (no images) in React on web and mobile (via a Capacitor WebView).",
   "type": "module",
   "main": "./dist/index.cjs",