@mohasinac/appkit 4.62.1 → 4.63.1

package/dist/ui/rich-text/RichTextRenderer.d.ts

@@ -3,6 +3,14 @@ export interface RichTextRendererProps {
     html?: string | null;
     className?: string;
     proseClass?: string;
+    /**
+     * Render `<figure data-chart>` placeholders as live charts. Default true.
+     *
+     * Pass `false` where a chart cannot work — an email body, a plain-text
+     * export, an OG image — so the placeholder is simply dropped rather than
+     * mounting a client component into a context that cannot hydrate it.
+     */
+    charts?: boolean;
 }
 /**
  * SSR-safe HTML renderer for admin/CMS-authored rich text content.
@@ -12,5 +20,26 @@ export interface RichTextRendererProps {
  *
  * For user-generated content or untrusted HTML, use <RichText> instead
  * (client-only, runs the DOM-based sanitizer).
+ *
+ * ## 🛑 It is no longer a single `innerHTML` dump, and why that is safe
+ *
+ * Chart blocks are stored as `<figure data-chart='{json}'>` and have to become
+ * real components to be theme-aware, so the HTML is split and the chart
+ * segments are replaced with `<ChartFromJson>`. Two properties keep this from
+ * being a regression:
+ *
+ *  - **The fast path is unchanged.** `splitChartBlocks` rejects on a substring
+ *    test, so content with no chart returns one segment and renders through the
+ *    same single `dangerouslySetInnerHTML` as before.
+ *  - **Splitting cannot introduce markup.** Segments are slices of the original
+ *    string, concatenated in document order; nothing is rewritten. A malformed
+ *    chart figure fails the match and stays ordinary HTML.
+ *
+ * 🛑 The prose wrapper stays on the OUTER element, and each segment's own
+ * wrapper is `display: contents` (`.appkit-rich-text__seg`). A segment needs an
+ * element to carry `dangerouslySetInnerHTML`, but leaving that element in the
+ * box tree restarts `prose`'s adjacency and first/last-child margin rules at
+ * every chart — so paragraphs either side of a chart would space differently
+ * from paragraphs anywhere else on the page.
  */
-export declare function RichTextRenderer({ html, className, proseClass, }: RichTextRendererProps): React.JSX.Element | null;
+export declare function RichTextRenderer({ html, className, proseClass, charts, }: RichTextRendererProps): React.JSX.Element | null;

package/dist/ui/rich-text/RichTextRenderer.js

@@ -1,4 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { splitChartBlocks } from "./chart-blocks.js";
+import { ChartFromJson } from "../components/Chart.js";
 /**
  * SSR-safe HTML renderer for admin/CMS-authored rich text content.
  *
@@ -7,9 +9,39 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *
  * For user-generated content or untrusted HTML, use <RichText> instead
  * (client-only, runs the DOM-based sanitizer).
+ *
+ * ## 🛑 It is no longer a single `innerHTML` dump, and why that is safe
+ *
+ * Chart blocks are stored as `<figure data-chart='{json}'>` and have to become
+ * real components to be theme-aware, so the HTML is split and the chart
+ * segments are replaced with `<ChartFromJson>`. Two properties keep this from
+ * being a regression:
+ *
+ *  - **The fast path is unchanged.** `splitChartBlocks` rejects on a substring
+ *    test, so content with no chart returns one segment and renders through the
+ *    same single `dangerouslySetInnerHTML` as before.
+ *  - **Splitting cannot introduce markup.** Segments are slices of the original
+ *    string, concatenated in document order; nothing is rewritten. A malformed
+ *    chart figure fails the match and stays ordinary HTML.
+ *
+ * 🛑 The prose wrapper stays on the OUTER element, and each segment's own
+ * wrapper is `display: contents` (`.appkit-rich-text__seg`). A segment needs an
+ * element to carry `dangerouslySetInnerHTML`, but leaving that element in the
+ * box tree restarts `prose`'s adjacency and first/last-child margin rules at
+ * every chart — so paragraphs either side of a chart would space differently
+ * from paragraphs anywhere else on the page.
  */
-export function RichTextRenderer({ html, className = "", proseClass = "prose max-w-none dark:prose-invert", }) {
+export function RichTextRenderer({ html, className = "", proseClass = "prose max-w-none dark:prose-invert", charts = true, }) {
     if (!html)
         return null;
-    return (_jsx("div", { className: `appkit-rich-text ${proseClass} ${className}`.trim(), dangerouslySetInnerHTML: { __html: html } }));
+    const wrapperClass = `appkit-rich-text ${proseClass} ${className}`.trim();
+    const segments = charts ? splitChartBlocks(html) : [{ type: "html", html }];
+    // Single HTML segment — the overwhelmingly common case. Identical to the
+    // pre-chart behaviour, down to the element shape.
+    if (segments.length === 1 && segments[0].type === "html") {
+        return (_jsx("div", { className: wrapperClass, dangerouslySetInnerHTML: { __html: segments[0].html } }));
+    }
+    return (_jsx("div", { className: wrapperClass, children: segments.map((seg, i) => seg.type === "html" ? (_jsx("div", { className: "appkit-rich-text__seg", dangerouslySetInnerHTML: { __html: seg.html } }, `h${i}`)) : (
+        // eslint-disable-next-line react/no-array-index-key
+        _jsx(ChartFromJson, { json: seg.json }, `c${i}`))) }));
 }

package/dist/ui/rich-text/chart-blocks.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Splitting rich-text HTML around `<figure data-chart>` placeholders.
+ *
+ * ## 🛑 Why this is regex and not a DOM parse
+ *
+ * `RichTextRenderer` is a React Server Component — no `DOMParser`, no
+ * `document`. So the split has to work on the string, and it is only safe to do
+ * that because the shape being matched is one we WRITE: a childless
+ * `<figure data-chart='…'></figure>` emitted by the chart toolbar button.
+ *
+ * This is deliberately not a general HTML parser and must not grow into one. It
+ * matches exactly one element shape and hands everything else through
+ * untouched, so a malformed chart figure degrades to "rendered as ordinary
+ * HTML" rather than corrupting the document around it.
+ *
+ * ## 🛑 Why the JSON needs entity decoding
+ *
+ * A `ChartSpec` is full of `"` characters, so the attribute is written
+ * single-quoted. But anything that round-trips the HTML through a DOM — the
+ * client sanitiser's `DOMParser`, a contenteditable surface, an admin preview —
+ * re-serialises it double-quoted with the inner quotes as `&quot;`. Both
+ * spellings therefore occur in stored content, and a renderer that handles only
+ * the one it writes will fail on its own saved output.
+ *
+ * Pure. No React, no DOM, safe on the server.
+ */
+import type { ChartSpec } from "../components/chart-spec";
+/** A run of ordinary HTML, or a chart placeholder's raw JSON payload. */
+export type RichTextSegment = {
+    type: "html";
+    html: string;
+} | {
+    type: "chart";
+    json: string;
+};
+/**
+ * Decode the entity subset an HTML serialiser can introduce inside an
+ * attribute value.
+ *
+ * 🛑 `&amp;` is decoded LAST. Decoding it first turns a legitimately encoded
+ * `&amp;quot;` into `&quot;` and then into `"`, which injects a quote the
+ * author never wrote and breaks the JSON parse — the classic double-decode bug.
+ */
+export declare function decodeAttrEntities(s: string): string;
+/**
+ * Split HTML into alternating prose and chart segments, in document order.
+ *
+ * Returns a single `html` segment when there are no charts, so the common case
+ * costs one regex test and the caller's fast path stays a plain innerHTML
+ * render.
+ */
+export declare function splitChartBlocks(html: string): RichTextSegment[];
+/** True when the content carries at least one chart placeholder. Stateless. */
+export declare function hasChartBlock(html: string | null | undefined): boolean;
+/**
+ * Build the placeholder a toolbar or a seed fixture should emit.
+ *
+ * Single-quoted, with any single quote in the payload escaped as `&#39;` so the
+ * attribute cannot be terminated early by a label containing an apostrophe —
+ * "Blader's choice" is an entirely ordinary series label.
+ */
+export declare function chartFigureHtml(spec: ChartSpec): string;

package/dist/ui/rich-text/chart-blocks.js

@@ -0,0 +1,87 @@
+/**
+ * Matches a childless `<figure>` carrying `data-chart`, single- or
+ * double-quoted. `[\s\S]*?` rather than `.*?` because stored content is
+ * frequently pretty-printed across lines.
+ */
+const CHART_FIGURE_RE = /<figure\b[^>]*\bdata-chart\s*=\s*(?:'([^']*)'|"([^"]*)")[^>]*>[\s\S]*?<\/figure\s*>/gi;
+/**
+ * 🛑 A SECOND, non-global copy, purely for `hasChartBlock`.
+ *
+ * `RegExp.prototype.test` on a `/g` regex ADVANCES `lastIndex`, so calling it
+ * twice on the same string returns `true` then `false`. Measured on the first
+ * draft of this file: three consecutive calls gave `true false true`. Sharing
+ * one `/g` literal between `exec` in a loop and `test` as a predicate is the
+ * bug — a predicate must be stateless, so it gets its own non-global regex
+ * rather than relying on every caller to reset `lastIndex` first.
+ *
+ * Derived from `.source` so the pattern has exactly one definition. It is also
+ * written as a LITERAL above rather than built from a string: a string-built
+ * pattern needs every backslash doubled, which is silently destroyed by any
+ * tool that re-escapes the file on the way in — a draft of this module lost
+ * `\s` to `s` that way and matched nothing at all while looking correct.
+ */
+const CHART_FIGURE_TEST_RE = new RegExp(CHART_FIGURE_RE.source, "i");
+/**
+ * Decode the entity subset an HTML serialiser can introduce inside an
+ * attribute value.
+ *
+ * 🛑 `&amp;` is decoded LAST. Decoding it first turns a legitimately encoded
+ * `&amp;quot;` into `&quot;` and then into `"`, which injects a quote the
+ * author never wrote and breaks the JSON parse — the classic double-decode bug.
+ */
+export function decodeAttrEntities(s) {
+    return s
+        .replace(/&quot;/g, '"')
+        .replace(/&#0*39;/g, "'")
+        .replace(/&apos;/g, "'")
+        .replace(/&lt;/g, "<")
+        .replace(/&gt;/g, ">")
+        .replace(/&amp;/g, "&");
+}
+/**
+ * Split HTML into alternating prose and chart segments, in document order.
+ *
+ * Returns a single `html` segment when there are no charts, so the common case
+ * costs one regex test and the caller's fast path stays a plain innerHTML
+ * render.
+ */
+export function splitChartBlocks(html) {
+    if (!html)
+        return [];
+    // Cheap reject before the real scan — most content has no chart at all.
+    if (!html.includes("data-chart"))
+        return [{ type: "html", html }];
+    const segments = [];
+    let cursor = 0;
+    // `exec` in a loop needs a fresh lastIndex; the literal is module-scoped and
+    // /g, so reset rather than relying on a previous call having run to the end.
+    CHART_FIGURE_RE.lastIndex = 0;
+    let m;
+    while ((m = CHART_FIGURE_RE.exec(html)) !== null) {
+        if (m.index > cursor) {
+            segments.push({ type: "html", html: html.slice(cursor, m.index) });
+        }
+        const raw = m[1] ?? m[2] ?? "";
+        segments.push({ type: "chart", json: decodeAttrEntities(raw) });
+        cursor = m.index + m[0].length;
+    }
+    if (cursor < html.length) {
+        segments.push({ type: "html", html: html.slice(cursor) });
+    }
+    return segments;
+}
+/** True when the content carries at least one chart placeholder. Stateless. */
+export function hasChartBlock(html) {
+    return !!html && CHART_FIGURE_TEST_RE.test(html);
+}
+/**
+ * Build the placeholder a toolbar or a seed fixture should emit.
+ *
+ * Single-quoted, with any single quote in the payload escaped as `&#39;` so the
+ * attribute cannot be terminated early by a label containing an apostrophe —
+ * "Blader's choice" is an entirely ordinary series label.
+ */
+export function chartFigureHtml(spec) {
+    const json = JSON.stringify(spec).replace(/'/g, "&#39;");
+    return `<figure data-chart='${json}'></figure>`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mohasinac/appkit",
-  "version": "4.62.1",
+  "version": "4.63.1",
   "license": "MIT",
   "publishConfig": {
     "access": "public"

package/scripts/seed-cli.mjs

@@ -274,6 +274,7 @@ const {
   wishlistsSeedData, historySeedData,
   groupedListingsSeedData,
   mediaAssetsSeedData, mediaAssetsEditorialSeedData,
+  chartOfAccountsSeedData,
   scammersSeedData, productFeaturesSeedData, taxCodesSeedData,
   disputeReasonsSeedData,
   authenticityKnowledgeSeedData,
@@ -387,6 +388,7 @@ const COLLECTION_MAP = {
    * precisely so a Firestore wipe cannot orphan Storage.
    */
   mediaAssets: "mediaAssets",
+  chartOfAccounts: "chartOfAccounts",
   scammerProfiles: SCAMMER_COLLECTION,
   productFeatures: PRODUCT_FEATURES_COLLECTION,
   authenticityKnowledge: "authenticityKnowledge",
@@ -769,6 +771,7 @@ const SEED_DATA_MAP = {
   // rewritten wholesale by upload-taxonomy-images.mjs, so the editorial rows
   // are kept beside them rather than inside that file.
   mediaAssets: [...mediaAssetsSeedData, ...mediaAssetsEditorialSeedData],
+  chartOfAccounts: chartOfAccountsSeedData,
   scammerProfiles: scammersSeedData,
   productFeatures: productFeaturesSeedData,
   authenticityKnowledge: authenticityKnowledgeSeedData,