@tarekeldeeb/quran-madina-react 1.0.2 → 2.1.0

package/README.md

@@ -27,7 +27,7 @@ export default function App() {
   return (
     <div dir="rtl">
       {/* full page */}
-      <QuranMadinaHtml page={106} font="Hafs" />
+      <QuranMadinaHtml page={106} layout="1441H" />
 
       {/* aya range */}
       <QuranMadinaHtml sura={2} aya="8-10" />
@@ -55,21 +55,23 @@ export default function App() {
 
 | Prop        | Type                | Notes |
 |-------------|---------------------|-------|
-| `page`      | number \| string    | Full page 1–604. Mutually exclusive with `sura`/`aya` (page wins). |
+| `page`      | number \| string    | Full page 1–604 (IndoPak 1–610). Mutually exclusive with `sura`/`aya` (page wins). |
 | `sura`      | number \| string    | Sura 1–114, with `aya`. |
 | `aya`       | number \| string    | Aya or range, e.g. `"8-10"`. |
 | `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. |
-| `font`      | string              | `Hafs`, `Uthman`, `Amiri Quran`, `Amiri Quran Colored`, `me_quran`. |
-| `name`      | string              | DB name, default `Madina05`. |
-| `fontSize`  | number \| string    | px, default 16. Any size 6–100: 16 and 24 have pre-built DBs, every other size is interpolated between them at load time. |
+| `layout`    | string              | `1441H` (default), `1405H` or `IndoPak`. Letters are stretched like the print; any `fontSize` works. |
+| `font`, `name` | string           | Deprecated: ignored since 2.0 (the library logs a warning). |
+| `fontSize`  | number \| string    | px, default 16. Any size works. |
 | `src`       | string              | Library script URL. Default: unpkg latest. |
 | `cdn`       | string              | Base URL for CSS + JSON assets. Default: unpkg package root. |
 
-> **Global config caveat:** `font`, `name`, `fontSize`, `src` and `cdn` configure the single
+> **Global config caveat:** `layout`, `fontSize`, `src` and `cdn` configure the single
 > library instance for the whole page. Only the **first** mounted `<QuranMadinaHtml>` sets them;
 > later values are ignored. Put your config on the first instance you render.
 
@@ -113,7 +115,7 @@ Notes for mobile:
 - Capacitor serves the app from `localhost`, so keep the default `cdn` (unpkg) **or** self-host the
   assets and point `cdn` at them — see above. Do not rely on the library's `../` default.
 - **Offline support:** bundle the library `dist/quran-madina-html.min.js`, `dist/*.min.css`, the
-  `assets/db/*.json` you use and the `assets/fonts/*.woff2` into your web build, then set `src` to
+  `assets/db/v2/` files of the layout you use (its `.json` or shard folder and its `-qmh.woff2` font) into your web build, then set `src` to
   the bundled JS and `cdn` to the base path that contains `dist/` and `assets/`. Everything —
   including the font — resolves from `cdn`, so no network is needed (requires library >= 0.6,
   which stores font paths relative).

package/dist/index.cjs

@@ -41,7 +41,7 @@ var DEFAULT_SRC = "https://unpkg.com/quran-madina-html";
 var DEFAULT_CDN = "https://unpkg.com/quran-madina-html/";
 var loaderPromise = null;
 function loadQuranMadinaHtml(opts = {}) {
-  const { src = DEFAULT_SRC, cdn = DEFAULT_CDN, font, name, fontSize } = opts;
+  const { src = DEFAULT_SRC, cdn = DEFAULT_CDN, layout, font, name, fontSize } = opts;
   if (typeof window === "undefined" || typeof document === "undefined") {
     return Promise.resolve();
   }
@@ -55,6 +55,7 @@ function loadQuranMadinaHtml(opts = {}) {
     script.src = src;
     script.async = true;
     if (cdn) script.setAttribute("data-cdn", cdn);
+    if (layout) script.setAttribute("data-layout", layout);
     if (font) script.setAttribute("data-font", font);
     if (name) script.setAttribute("data-name", name);
     if (fontSize != null) script.setAttribute("data-font-size", String(fontSize));
@@ -72,7 +73,9 @@ function QuranMadinaHtml({
   sura,
   aya,
   words,
+  highlight,
   error,
+  letters,
   headless,
   quotes,
   inline,
@@ -80,6 +83,7 @@ function QuranMadinaHtml({
   // loader config (only honored on first mount, see loadQuranMadinaHtml)
   src,
   cdn,
+  layout,
   font,
   name,
   fontSize,
@@ -93,11 +97,11 @@ function QuranMadinaHtml({
   );
   (0, import_react.useEffect)(() => {
     let active = true;
-    loadQuranMadinaHtml({ src, cdn, font, name, fontSize }).then(() => active && setReady(true)).catch((err) => console.error("[quran-madina-html]", err));
+    loadQuranMadinaHtml({ src, cdn, layout, font, name, fontSize }).then(() => active && setReady(true)).catch((err) => console.error("[quran-madina-html]", err));
     return () => {
       active = false;
     };
-  }, [src, cdn, font, name, fontSize]);
+  }, [src, cdn, layout, font, name, fontSize]);
   (0, import_react.useEffect)(() => {
     const el = ref.current;
     if (!el) return;
@@ -118,11 +122,13 @@ function QuranMadinaHtml({
       set("aya", aya);
     }
     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, 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

@@ -5,21 +5,23 @@ export interface QuranMadinaHtmlLoaderOptions {
   src?: string;
   /** Base URL for the CSS + JSON assets (default: https://unpkg.com/quran-madina-html/). */
   cdn?: string;
-  /** data-font: "Hafs" | "Uthman" | "Amiri Quran" | "Amiri Quran Colored" | "me_quran". */
-  font?: string;
-  /** data-name (default "Madina05"). */
-  name?: string;
   /**
-   * data-font-size in px (default 16). Any size from 6 to 100 works: 16 and 24 have pre-built
-   * databases, every other size is fitted at load time by linear interpolation between them.
+   * data-layout: "1441H" (default) | "1405H" | "IndoPak". Letters are stretched like the
+   * print and any font size works with one DB per layout.
    */
+  layout?: "1441H" | "1405H" | "IndoPak" | string;
+  /** @deprecated Ignored since 2.0 (every tag uses the v2 fonts; a warning is logged). */
+  font?: string;
+  /** @deprecated Ignored since 2.0 (a warning is logged). */
+  name?: string;
+  /** data-font-size in px (default 16). Any size works. */
   fontSize?: number | string;
 }
 
 export interface QuranMadinaHtmlProps
   extends QuranMadinaHtmlLoaderOptions,
     React.HTMLAttributes<HTMLElement> {
-  /** Render a full Madina page (1-604). Mutually exclusive with sura/aya. */
+  /** Render a full page (1-604; IndoPak 1-610). Mutually exclusive with sura/aya. */
   page?: number | string;
   /** Sura number (1-114). Use together with `aya`. */
   sura?: number | string;
@@ -27,11 +29,21 @@ export interface QuranMadinaHtmlProps
   aya?: number | string;
   /** Restrict to a 1-based word range, e.g. "1:2", "3-10", or a single index. */
   words?: string;
+  /** 1-based inclusive word range (same syntax as `words`) to mark soft yellow. */
+  highlight?: string;
   /**
    * 1-based inclusive word range (same syntax as `words`) marking a sub-range that should
    * 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

@@ -5,7 +5,7 @@ var DEFAULT_SRC = "https://unpkg.com/quran-madina-html";
 var DEFAULT_CDN = "https://unpkg.com/quran-madina-html/";
 var loaderPromise = null;
 function loadQuranMadinaHtml(opts = {}) {
-  const { src = DEFAULT_SRC, cdn = DEFAULT_CDN, font, name, fontSize } = opts;
+  const { src = DEFAULT_SRC, cdn = DEFAULT_CDN, layout, font, name, fontSize } = opts;
   if (typeof window === "undefined" || typeof document === "undefined") {
     return Promise.resolve();
   }
@@ -19,6 +19,7 @@ function loadQuranMadinaHtml(opts = {}) {
     script.src = src;
     script.async = true;
     if (cdn) script.setAttribute("data-cdn", cdn);
+    if (layout) script.setAttribute("data-layout", layout);
     if (font) script.setAttribute("data-font", font);
     if (name) script.setAttribute("data-name", name);
     if (fontSize != null) script.setAttribute("data-font-size", String(fontSize));
@@ -36,7 +37,9 @@ function QuranMadinaHtml({
   sura,
   aya,
   words,
+  highlight,
   error,
+  letters,
   headless,
   quotes,
   inline,
@@ -44,6 +47,7 @@ function QuranMadinaHtml({
   // loader config (only honored on first mount, see loadQuranMadinaHtml)
   src,
   cdn,
+  layout,
   font,
   name,
   fontSize,
@@ -57,11 +61,11 @@ function QuranMadinaHtml({
   );
   useEffect(() => {
     let active = true;
-    loadQuranMadinaHtml({ src, cdn, font, name, fontSize }).then(() => active && setReady(true)).catch((err) => console.error("[quran-madina-html]", err));
+    loadQuranMadinaHtml({ src, cdn, layout, font, name, fontSize }).then(() => active && setReady(true)).catch((err) => console.error("[quran-madina-html]", err));
     return () => {
       active = false;
     };
-  }, [src, cdn, font, name, fontSize]);
+  }, [src, cdn, layout, font, name, fontSize]);
   useEffect(() => {
     const el = ref.current;
     if (!el) return;
@@ -82,12 +86,14 @@ function QuranMadinaHtml({
       set("aya", aya);
     }
     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, 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": "1.0.2",
+  "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",