@siladev/qalam 0.1.3 → 0.1.5

package/dist/{QalamRenderer-CMsfcF02.js → QalamRenderer-DrrLH1Fg.js}

@@ -1,4 +1,4 @@
-import { jsx as a, jsxs as N, Fragment as $ } from "react/jsx-runtime";
+import { jsx as a, jsxs as y, Fragment as $ } from "react/jsx-runtime";
 import { useRef as H, useCallback as P, useEffect as Q, useState as F, useLayoutEffect as G } from "react";
 const T = "ـ", J = new Set("سشصض"), K = new Set("ةهد"), U = new Set("طلكگ"), z = new Set("عقف"), M = new Set(
   "بتثجحخسشصضطظعغفقكلمنهيئپچژگ"
@@ -44,21 +44,21 @@ function Y(e) {
       if (A(r[i])) continue;
       const c = r[i];
       if (J.has(c) && D(r, i)) {
-        const o = { wordIndex: n, charIndex: i + 1, priority: 1 };
-        (!s || o.priority < s.priority) && (s = o);
+        const l = { wordIndex: n, charIndex: i + 1, priority: 1 };
+        (!s || l.priority < s.priority) && (s = l);
         continue;
       }
       if (V(r, i) && X(r, i)) {
-        let o = 0;
-        if (K.has(c) ? o = 2 : U.has(c) ? o = 3 : z.has(c) && (o = 4), o > 0) {
-          const l = { wordIndex: n, charIndex: i, priority: o };
-          (!s || l.priority < s.priority) && (s = l);
+        let l = 0;
+        if (K.has(c) ? l = 2 : U.has(c) ? l = 3 : z.has(c) && (l = 4), l > 0) {
+          const o = { wordIndex: n, charIndex: i, priority: l };
+          (!s || o.priority < s.priority) && (s = o);
           continue;
         }
       }
       if (M.has(c) && D(r, i)) {
-        const o = { wordIndex: n, charIndex: i + 1, priority: 5 };
-        (!s || o.priority < s.priority) && (s = o);
+        const l = { wordIndex: n, charIndex: i + 1, priority: 5 };
+        (!s || l.priority < s.priority) && (s = l);
       }
     }
     s && t.push(s);
@@ -72,19 +72,19 @@ function Z(e, t, n, r = 50) {
   let s = e, i = t(s);
   if (i >= n) return s;
   for (let c = 0; c < r; c++) {
-    const o = s.split(" "), l = Y(o);
-    if (l.length === 0) {
-      const u = o.map((p, f) => ({ word: p, index: f })).filter(({ word: p }) => p.includes(T));
+    const l = s.split(" "), o = Y(l);
+    if (o.length === 0) {
+      const u = l.map((p, f) => ({ word: p, index: f })).filter(({ word: p }) => p.includes(T));
       if (u.length === 0) break;
       for (const { word: p, index: f } of u) {
         const q = p.indexOf(T);
-        if (o[f] = j(p, q, 1), s = o.join(" "), i = t(s), i >= n) return s;
+        if (l[f] = j(p, q, 1), s = l.join(" "), i = t(s), i >= n) return s;
       }
       continue;
     }
-    l.sort((u, p) => u.priority - p.priority);
-    const d = l[0];
-    if (o[d.wordIndex] = j(o[d.wordIndex], d.charIndex), s = o.join(" "), i = t(s), i >= n) return s;
+    o.sort((u, p) => u.priority - p.priority);
+    const d = o[0];
+    if (l[d.wordIndex] = j(l[d.wordIndex], d.charIndex), s = l.join(" "), i = t(s), i >= n) return s;
   }
   return s;
 }
@@ -104,7 +104,7 @@ function B(e, t, n) {
     case "link":
       return /* @__PURE__ */ a("a", { href: r.attrs.href, target: r.attrs.target ?? "_blank", rel: "noopener noreferrer", children: s });
     case "repeat":
-      return /* @__PURE__ */ N("span", { className: "qalam-render-inline-repeat", children: [
+      return /* @__PURE__ */ y("span", { className: "qalam-render-inline-repeat", children: [
         s,
         /* @__PURE__ */ a("span", { className: "qalam-render-inline-repeat-badge", children: E(r.attrs.count) })
       ] });
@@ -119,24 +119,27 @@ function ee({ node: e }) {
 }
 function te({ seg: e, index: t }) {
   const n = /* @__PURE__ */ a("span", { className: "qalam-render-verse", children: e.textHafsSmart });
-  return e.repeat > 1 ? /* @__PURE__ */ N($, { children: [
+  return e.repeat > 1 ? /* @__PURE__ */ y($, { children: [
     /* @__PURE__ */ a("span", { className: "qalam-render-repeat", children: n }),
     /* @__PURE__ */ a("span", { className: "qalam-render-repeat-badge", children: E(e.repeat) })
   ] }) : n;
 }
 function ne({ node: e }) {
   const { resolved: t } = e, n = t.segments.map((s) => s.textCopy).join(" "), r = t.basmalah ? `بِسْمِ اللَّهِ الرَّحْمَـٰنِ الرَّحِيمِ ${n}` : n;
-  return /* @__PURE__ */ N("span", { className: "qalam-render-quran", "data-copy": r, "data-citation": t.citation, children: [
-    /* @__PURE__ */ a("span", { className: "qalam-render-bracket", children: "﴿" }),
-    t.basmalah && /* @__PURE__ */ N($, { children: [
-      /* @__PURE__ */ a("span", { className: "qalam-render-basmalah", children: "" }),
-      " "
+  return /* @__PURE__ */ y("span", { className: "qalam-render-quran", "data-copy": r, "data-citation": t.citation, children: [
+    /* @__PURE__ */ a("span", { className: "qalam-render-seo", "aria-hidden": "false", children: r }),
+    /* @__PURE__ */ y("span", { "aria-hidden": "true", children: [
+      /* @__PURE__ */ a("span", { className: "qalam-render-bracket", children: "﴿" }),
+      t.basmalah && /* @__PURE__ */ y($, { children: [
+        /* @__PURE__ */ a("span", { className: "qalam-render-basmalah", children: "" }),
+        " "
+      ] }),
+      t.segments.map((s, i) => /* @__PURE__ */ y("span", { children: [
+        i > 0 && " ",
+        /* @__PURE__ */ a(te, { seg: s, index: i })
+      ] }, i)),
+      /* @__PURE__ */ a("span", { className: "qalam-render-bracket", children: "﴾" })
     ] }),
-    t.segments.map((s, i) => /* @__PURE__ */ N("span", { children: [
-      i > 0 && " ",
-      /* @__PURE__ */ a(te, { seg: s, index: i })
-    ] }, i)),
-    /* @__PURE__ */ a("span", { className: "qalam-render-bracket", children: "﴾" }),
     e.attrs.showCitation !== !1 && /* @__PURE__ */ a("span", { className: "qalam-render-citation", children: t.citation })
   ] });
 }
@@ -157,12 +160,12 @@ function ae({ node: e }) {
   const i = [];
   for (let c = 0; c < n.length; c++)
     r[c] && (c === 0 || !r[c - 1]) && i.push(/* @__PURE__ */ a("span", { className: "qalam-render-prophetic-quote", children: "”" }, `q-open-${c}`)), i.push(/* @__PURE__ */ a(_, { node: n[c] }, c)), r[c] && (c === n.length - 1 || !r[c + 1]) && i.push(/* @__PURE__ */ a("span", { className: "qalam-render-prophetic-quote", children: "“" }, `q-close-${c}`));
-  return /* @__PURE__ */ N("span", { className: "qalam-render-hadith", children: [
+  return /* @__PURE__ */ y("span", { className: "qalam-render-hadith", children: [
     /* @__PURE__ */ a("span", { className: "qalam-render-hadith-bracket", children: "«" }),
     i,
     /* @__PURE__ */ a("span", { className: "qalam-render-hadith-bracket", children: "»" }),
     t.citation && /* @__PURE__ */ a("span", { className: "qalam-render-hadith-citation", children: t.citation }),
-    t.grade && /* @__PURE__ */ N("span", { className: "qalam-render-hadith-grade", children: [
+    t.grade && /* @__PURE__ */ y("span", { className: "qalam-render-hadith-grade", children: [
       "(",
       t.grade,
       ")"
@@ -184,13 +187,13 @@ function _({ node: e }) {
   }
 }
 function se({ node: e }) {
-  const t = H(null), [n, r] = F(null), [s, i] = F(!1), [c, o] = F(void 0);
+  const t = H(null), [n, r] = F(null), [s, i] = F(!1), [c, l] = F(void 0);
   return G(() => {
-    const l = t.current;
-    if (!l) return;
+    const o = t.current;
+    if (!o) return;
     const d = document.createElement("span");
-    d.className = "qalam-render-poem__shatr", d.style.position = "absolute", d.style.visibility = "hidden", d.style.whiteSpace = "nowrap", d.style.width = "auto", l.appendChild(d);
-    const u = (h) => (d.textContent = h, d.scrollWidth), p = l.parentElement?.clientWidth ?? l.clientWidth, f = 32;
+    d.className = "qalam-render-poem__shatr", d.style.position = "absolute", d.style.visibility = "hidden", d.style.whiteSpace = "nowrap", d.style.width = "auto", o.appendChild(d);
+    const u = (h) => (d.textContent = h, d.scrollWidth), p = o.parentElement?.clientWidth ?? o.clientWidth, f = 32;
     let q = 1;
     for (const h of e.content)
       !h.attrs.separator && h.attrs.parts.length > q && (q = h.attrs.parts.length);
@@ -198,27 +201,27 @@ function se({ node: e }) {
     let g = !1, k = 0;
     const C = [];
     for (let h = 0; h < e.content.length; h++) {
-      const y = e.content[h];
-      if (!y.attrs.separator)
-        for (let w = 0; w < y.attrs.parts.length; w++) {
-          const I = y.attrs.parts[w], W = I ? u(I) : 0;
-          C.push({ key: `${h}-${w}`, text: I, naturalWidth: W }), I && (W > k && (k = W), y.attrs.parts.length > 1 && W > b && (g = !0));
+      const N = e.content[h];
+      if (!N.attrs.separator)
+        for (let w = 0; w < N.attrs.parts.length; w++) {
+          const I = N.attrs.parts[w], W = I ? u(I) : 0;
+          C.push({ key: `${h}-${w}`, text: I, naturalWidth: W }), I && (W > k && (k = W), N.attrs.parts.length > 1 && W > b && (g = !0));
         }
     }
     i(g);
     const m = k * 1.3 + f, S = Math.min(m, R), v = g ? k : S - f;
-    o(g ? p : Math.min(S * q, p));
+    l(g ? p : Math.min(S * q, p));
     const x = /* @__PURE__ */ new Map();
-    for (const { key: h, text: y, naturalWidth: w } of C) {
-      if (!y) {
-        x.set(h, y);
+    for (const { key: h, text: N, naturalWidth: w } of C) {
+      if (!N) {
+        x.set(h, N);
         continue;
       }
-      w >= v ? x.set(h, y) : x.set(h, Z(y, u, v));
+      w >= v ? x.set(h, N) : x.set(h, Z(N, u, v));
     }
-    l.removeChild(d), r(x);
+    o.removeChild(d), r(x);
   }, [e]), /* @__PURE__ */ a("div", { ref: t, className: `qalam-render-poem${s ? " qalam-render-poem--stacked" : ""}`, style: c ? { maxWidth: c } : void 0, children: e.content.map(
-    (l, d) => l.attrs.separator ? /* @__PURE__ */ a("div", { className: "qalam-render-poem__separator", children: "* * *" }, d) : /* @__PURE__ */ a("div", { className: "qalam-render-poem__bayt", children: l.attrs.parts.map((u, p) => {
+    (o, d) => o.attrs.separator ? /* @__PURE__ */ a("div", { className: "qalam-render-poem__separator", children: "* * *" }, d) : /* @__PURE__ */ a("div", { className: "qalam-render-poem__bayt", children: o.attrs.parts.map((u, p) => {
       const f = `${d}-${p}`, q = n?.get(f) ?? u;
       return /* @__PURE__ */ a(
         "span",
@@ -237,7 +240,7 @@ function L({ node: e }) {
   switch (e.type) {
     case "paragraph": {
       const t = e.attrs?.repeat ?? 1;
-      return t > 1 ? /* @__PURE__ */ N("p", { className: "qalam-render-block-repeat", children: [
+      return t > 1 ? /* @__PURE__ */ y("p", { className: "qalam-render-block-repeat", children: [
         e.content?.map((n, r) => /* @__PURE__ */ a(_, { node: n }, r)),
         /* @__PURE__ */ a("span", { className: "qalam-render-block-repeat-ghost", children: E(t) }),
         /* @__PURE__ */ a("span", { className: "qalam-render-block-repeat-badge", children: E(t) })
@@ -253,7 +256,7 @@ function L({ node: e }) {
       return /* @__PURE__ */ a("ol", { ...e.attrs?.listType === "abjad" ? { "data-list-type": "abjad" } : {}, children: e.content.map((t, n) => /* @__PURE__ */ a("li", { children: t.content.map((r, s) => /* @__PURE__ */ a(L, { node: r }, s)) }, n)) });
     case "blockquote": {
       const t = e.attrs?.repeat ?? 1;
-      return /* @__PURE__ */ N("blockquote", { className: t > 1 ? "qalam-render-block-repeat" : void 0, children: [
+      return /* @__PURE__ */ y("blockquote", { className: t > 1 ? "qalam-render-block-repeat" : void 0, children: [
         e.content.map((n, r) => /* @__PURE__ */ a(L, { node: n }, r)),
         t > 1 && /* @__PURE__ */ a("span", { className: "qalam-render-block-repeat-badge", children: E(t) })
       ] });
@@ -264,24 +267,24 @@ function L({ node: e }) {
       return null;
   }
 }
-function oe({ doc: e, className: t, dir: n = "rtl" }) {
+function le({ doc: e, className: t, dir: n = "rtl" }) {
   const r = H(null), s = P((i) => {
     const c = window.getSelection();
     if (!c || c.isCollapsed) return;
-    const o = r.current;
-    if (!o) return;
-    const l = c.getRangeAt(0), d = o.querySelectorAll(".qalam-render-quran");
+    const l = r.current;
+    if (!l) return;
+    const o = c.getRangeAt(0), d = l.querySelectorAll(".qalam-render-quran");
     let u = !1;
     for (const m of d)
-      if (l.intersectsNode(m)) {
+      if (o.intersectsNode(m)) {
         u = !0;
         break;
       }
     if (!u) return;
     i.preventDefault();
-    const p = l.cloneRange();
+    const p = o.cloneRange();
     for (const m of d)
-      l.intersectsNode(m) && (m.contains(l.startContainer) && p.setStartBefore(m), m.contains(l.endContainer) && p.setEndAfter(m));
+      o.intersectsNode(m) && (m.contains(o.startContainer) && p.setStartBefore(m), m.contains(o.endContainer) && p.setEndAfter(m));
     const f = p.cloneContents(), q = document.createTreeWalker(f, NodeFilter.SHOW_ELEMENT), R = [];
     let b = q.currentNode;
     for (; b; )
@@ -302,5 +305,5 @@ function oe({ doc: e, className: t, dir: n = "rtl" }) {
   }, [s]), /* @__PURE__ */ a("div", { ref: r, className: `qalam-renderer ${t ?? ""}`, dir: n, children: e.content.map((i, c) => /* @__PURE__ */ a(L, { node: i }, c)) });
 }
 export {
-  oe as Q
+  le as Q
 };

package/dist/index.js

@@ -1,6 +1,6 @@
 import { validateAST as e } from "./schema/index.js";
 import { Q as s, a as t } from "./QalamEditor-BV95C4EV.js";
-import { Q as f } from "./QalamRenderer-CMsfcF02.js";
+import { Q as f } from "./QalamRenderer-DrrLH1Fg.js";
 import { resolveAST as d } from "./resolver/index.js";
 import { g as Q, a as p, b as u, i as S, l as g, r as i } from "./lookup-CFbcujyG.js";
 export {

package/dist/renderer/QalamRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QalamRenderer.d.ts","sourceRoot":"","sources":["../../src/renderer/QalamRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,gBAAgB,EASjB,MAAM,iBAAiB,CAAC;AAIzB,UAAU,kBAAkB;IAC1B,GAAG,EAAE,gBAAgB,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;CACrB;AAkVD,wBAAgB,aAAa,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,GAAW,EAAE,EAAE,kBAAkB,2CAmFhF"}
+{"version":3,"file":"QalamRenderer.d.ts","sourceRoot":"","sources":["../../src/renderer/QalamRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,gBAAgB,EASjB,MAAM,iBAAiB,CAAC;AAIzB,UAAU,kBAAkB;IAC1B,GAAG,EAAE,gBAAgB,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;CACrB;AAqVD,wBAAgB,aAAa,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,GAAW,EAAE,EAAE,kBAAkB,2CAmFhF"}

package/dist/renderer/index.js

@@ -1,4 +1,4 @@
-import { Q as a } from "../QalamRenderer-CMsfcF02.js";
+import { Q as a } from "../QalamRenderer-DrrLH1Fg.js";
 export {
   a as QalamRenderer
 };

package/dist/styles.css

@@ -47,7 +47,9 @@ ol[data-list-type="abjad"] {
   --qalam-shadow: rgba(0, 0, 0, 0.15);
 }
 
-.qalam-dark {
+.qalam-dark,
+.dark .qalam-renderer,
+.dark .qalam-editor {
   --qalam-bg: #303030;
   --qalam-bg-alt: #3a3a3a;
   --qalam-bg-segment: #3a3a3a;
@@ -453,23 +455,41 @@ ol[data-list-type="abjad"] {
 }
 
 .qalam-renderer ul {
-  list-style-type: disc;
-  padding-right: 24px;
-  margin: 8px 0;
+  list-style-type: disc !important;
+  padding-right: 24px !important;
+  padding-left: 0 !important;
+  margin: 8px 0 !important;
 }
 
 .qalam-renderer ol {
-  list-style-type: decimal;
-  padding-right: 24px;
-  margin: 8px 0;
+  list-style-type: decimal !important;
+  padding-right: 24px !important;
+  padding-left: 0 !important;
+  margin: 8px 0 !important;
+}
+
+.qalam-renderer li {
+  display: list-item !important;
 }
 
 .qalam-renderer ul ul,
 .qalam-renderer ol ul {
-  list-style-type: "- ";
+  list-style-type: "- " !important;
 }
 
 
+.qalam-render-seo {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 .qalam-render-verse {
   font-family: "HafsSmart", serif;
   font-size: 1.1em;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@siladev/qalam",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Islamic content editor with Quran verse references",
   "type": "module",
   "main": "./dist/index.js",