pixelize-native-library 1.0.7 → 1.2.1

package/lib/module/modules/rich-text/MODULE.md

@@ -0,0 +1,54 @@
+# rich-text/
+
+Read-only safe HTML renderer. Parse/sanitize in `parseRichText.ts` (ported from tickets/mobile). Heavy — subpath only.
+
+## Files
+
+| File | Role |
+|------|------|
+| `parseRichText.ts` | Pure parse + sanitize: allowlisted tags/attrs, entity decode, mention/task-list/URL-safety helpers. |
+| `RichText.tsx` | The renderer: block layout, or a single inline `Text` when `numberOfLines` is set. |
+| `RichText.variants.ts` | `resolveRichTextColors(RoleColors)` — plain, hook-free. |
+
+## Props
+
+`html` · `numberOfLines` (renders everything inline in one `Text`) · `onLinkPress` (else `Linking.openURL`,
+safe schemes only) · `onImagePress` · `style` (layout-only, outermost, once, last) · `testID`.
+
+## Accessibility
+
+- `h1`–`h6` render as `Text accessibilityRole="header"` **with `aria-level` set from the source tag** (`<h3>`
+  → `aria-level={3}`), so the rotor / heading navigation can both reach them AND read the document's real
+  outline — without `aria-level`, `react-native-web` renders every `header` role as `<h1>` regardless of
+  source tag (see `core/heading/MODULE.md`). **Caveat:** with `numberOfLines` the whole document collapses
+  into inline spans inside one `Text` — there is no per-heading node left, so heading semantics are
+  unavailable in that mode.
+- Links are `accessibilityRole="link"`; images are `Pressable`s labelled from their `alt` (falling back to
+  `Image`) and carry `android_ripple` (`rippleColor(theme.mode)`, `borderless: false`) on Android.
+- Colour pairs are measured across all 9 brands × both modes (`RichText.test.ts`), min ratios: text 6.10 and
+  muted 6.52 and link 5.06 on the canvas · mention label 4.82 on its own `accent.subtle` pill · code and
+  `pre` 5.69 on `bg.sunken`. `quoteBorder` / `border` are decorative rules (1.08–1.43:1) with no contrast
+  floor — they are pinned to `border.default` and asserted never to escalate to `border.interactive`/`focus`.
+- `blockquote`'s left border is `theme.borderWidths.thick` (2dp), not a raw literal `3` — a real,
+  visible 1px change to every rendered blockquote.
+
+## Performance
+
+- The whole render is one `useMemo` keyed on `(tree, numberOfLines, colors, palette, openURL, onImagePress)`.
+  That memo only holds if its inputs are stable, so `colors` is `useMemo`'d on `theme.colors` and the
+  derived `TextStyle`s (`link`, `mention`, `code`, `muted`, `text`) live in a single `useMemo`'d `palette` —
+  resolving colors inline defeated the memo on **every** parent render.
+- Static style maps (`WRAP_STYLES` for b/i/u/s) are module-level, not rebuilt per render.
+- Repeated interactive nodes are extracted and `React.memo`'d — `RichTextLink`, `RichTextImage` — and take
+  their `href` / `src` as an argument to a `useCallback`'d handler instead of a per-node closure.
+- Root/base style arrays are `useMemo`'d; `parseRichText` is `useMemo`'d on `html`.
+
+**Not virtualized, deliberately.** The output is a recursive block *tree*, not a flat row list: blockquotes,
+list items and containers re-enter the block renderer, and with `numberOfLines` the whole document collapses
+into inline spans inside one `Text` — which a `FlatList` cannot host. It also renders inside a consumer
+`ScrollView`, where a nested `VirtualizedList` warns and windows nothing.
+
+## Known gaps
+
+- Tables are sanitized through but render as their text runs, not as a grid.
+- Images render as a `🖼 alt` placeholder — the library never fetches remote content itself.

package/lib/module/modules/rich-text/RichText.js

@@ -0,0 +1,382 @@
+"use strict";
+
+/**
+ * RichText — read-only safe HTML renderer. Ported from tickets/mobile RichText.tsx.
+ */
+
+import { memo, useCallback, useMemo } from "react";
+import { Linking, Platform, Pressable, StyleSheet, Text, View } from "react-native";
+import { HeadingText } from "../../core/heading/index.js";
+import { useTheme } from "../../theme/hooks.js";
+import { rippleColor } from "../../theme/platform/stateLayer.native.js";
+import { BLOCK_TAGS, isBlank, isChecked, isElement, isMention, isSafeUrl, mentionLabel, MENTION_HOSTS, parseRichText, stripHtmlToText, textContent } from "./parseRichText.js";
+import { resolveRichTextColors } from "./RichText.variants.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const MONO = Platform.select({
+  ios: "Menlo",
+  android: "monospace",
+  default: "monospace"
+});
+const styles = StyleSheet.create({
+  root: {
+    gap: 2
+  },
+  base: {
+    fontSize: 15,
+    lineHeight: 22
+  },
+  block: {
+    marginBottom: 8
+  },
+  bold: {},
+  italic: {
+    fontStyle: "italic"
+  },
+  underline: {
+    textDecorationLine: "underline"
+  },
+  strike: {
+    textDecorationLine: "line-through"
+  },
+  list: {
+    gap: 4,
+    marginBottom: 8
+  },
+  li: {
+    flexDirection: "row",
+    gap: 8,
+    alignItems: "flex-start"
+  },
+  marker: {
+    minWidth: 16
+  },
+  liBody: {
+    flex: 1
+  },
+  quote: {
+    paddingLeft: 12,
+    marginBottom: 8
+  },
+  pre: {
+    borderWidth: StyleSheet.hairlineWidth,
+    borderRadius: 8,
+    padding: 12,
+    marginBottom: 8
+  },
+  preText: {
+    fontSize: 13
+  },
+  imageWrap: {
+    alignSelf: "flex-start",
+    marginBottom: 8
+  }
+});
+const WRAP_TAGS = ["b", "strong", "i", "em", "u", "s", "del", "strike"];
+const WRAP_TAG_SET = new Set(WRAP_TAGS);
+const RichTextLink = /*#__PURE__*/memo(function RichTextLink({
+  href,
+  linkStyle,
+  onPress,
+  children
+}) {
+  const handlePress = useCallback(() => onPress(href), [onPress, href]);
+  return /*#__PURE__*/_jsx(Text, {
+    style: linkStyle,
+    accessibilityRole: "link",
+    onPress: handlePress,
+    children: children
+  });
+});
+const RichTextImage = /*#__PURE__*/memo(function RichTextImage({
+  src,
+  label,
+  mutedStyle,
+  mode,
+  onPress
+}) {
+  const handlePress = useCallback(() => onPress?.(src), [onPress, src]);
+  const androidRipple = useMemo(() => Platform.OS === "android" ? {
+    color: rippleColor(mode),
+    borderless: false
+  } : undefined, [mode]);
+  return /*#__PURE__*/_jsx(Pressable, {
+    accessibilityRole: "button",
+    accessibilityLabel: label,
+    onPress: onPress ? handlePress : undefined,
+    android_ripple: androidRipple,
+    style: styles.imageWrap,
+    children: /*#__PURE__*/_jsx(Text, {
+      style: mutedStyle,
+      children: `🖼 ${label}`
+    })
+  });
+});
+export const RichText = /*#__PURE__*/memo(function RichText({
+  html,
+  numberOfLines,
+  onLinkPress,
+  onImagePress,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const colors = useMemo(() => resolveRichTextColors(theme.colors), [theme.colors]);
+  const palette = useMemo(() => ({
+    link: {
+      color: colors.link,
+      textDecorationLine: "underline"
+    },
+    mention: {
+      ...theme.fontStyleForWeight(theme.fontWeights.semibold),
+      color: colors.mentionText,
+      backgroundColor: colors.mentionBg
+    },
+    code: {
+      fontFamily: MONO,
+      fontSize: 13.5,
+      color: colors.code,
+      backgroundColor: colors.codeBg
+    },
+    muted: {
+      color: colors.muted
+    },
+    text: {
+      color: colors.text
+    }
+  }), [colors, theme]);
+  const wrapStyles = useMemo(() => ({
+    b: theme.fontStyleForWeight(theme.fontWeights.bold),
+    strong: theme.fontStyleForWeight(theme.fontWeights.bold),
+    i: {
+      fontStyle: "italic"
+    },
+    em: {
+      fontStyle: "italic"
+    },
+    u: {
+      textDecorationLine: "underline"
+    },
+    s: {
+      textDecorationLine: "line-through"
+    },
+    del: {
+      textDecorationLine: "line-through"
+    },
+    strike: {
+      textDecorationLine: "line-through"
+    }
+  }), [theme]);
+  const headingStyle = useMemo(() => theme.fontStyleForWeight(theme.fontWeights.bold), [theme]);
+  const baseTextStyle = useMemo(() => [styles.base, palette.text], [palette]);
+  const rootStyle = useMemo(() => [styles.root, style], [style]);
+  const tree = useMemo(() => {
+    try {
+      return parseRichText(html ?? "");
+    } catch {
+      return null;
+    }
+  }, [html]);
+  const openURL = useCallback(href => {
+    if (!isSafeUrl(href)) return;
+    if (onLinkPress) {
+      onLinkPress(href);
+      return;
+    }
+    void Linking.openURL(href).catch(() => {});
+  }, [onLinkPress]);
+  const content = useMemo(() => {
+    if (tree == null) return null;
+    const renderInline = (nodes, pre, keyBase) => {
+      const out = [];
+      const sep = () => {
+        if (out.length && out[out.length - 1] !== "\n") out.push("\n");
+      };
+      nodes.forEach((node, i) => {
+        const key = `${keyBase}.${i}`;
+        if (node.type === "text") {
+          const flat = pre ? node.text : node.text.replace(/[ \t\r\n]+/g, " ");
+          out.push(flat);
+          return;
+        }
+        const {
+          tag,
+          attrs,
+          children
+        } = node;
+        const wrap = WRAP_TAG_SET.has(tag) ? wrapStyles[tag] : undefined;
+        if (tag === "br") out.push("\n");else if (wrap) out.push(/*#__PURE__*/_jsx(Text, {
+          style: wrap,
+          children: renderInline(children, pre, key)
+        }, key));else if (tag === "code") out.push(/*#__PURE__*/_jsx(Text, {
+          style: palette.code,
+          children: renderInline(children, true, key)
+        }, key));else if (tag === "a") out.push(attrs.href ? /*#__PURE__*/_jsx(RichTextLink, {
+          href: attrs.href,
+          linkStyle: palette.link,
+          onPress: openURL,
+          children: renderInline(children, pre, key)
+        }, key) : /*#__PURE__*/_jsx(Text, {
+          children: renderInline(children, pre, key)
+        }, key));else if (tag === "img") out.push(/*#__PURE__*/_jsx(Text, {
+          style: palette.muted,
+          children: `🖼 ${attrs.alt || "image"}`
+        }, key));else if (MENTION_HOSTS.has(tag)) out.push(isMention(attrs) ? /*#__PURE__*/_jsx(Text, {
+          style: palette.mention,
+          children: ` ${mentionLabel(node)} `
+        }, key) : /*#__PURE__*/_jsx(Text, {
+          children: renderInline(children, pre, key)
+        }, key));else if (tag === "ul" || tag === "ol") {
+          const task = attrs["data-type"] === "taskList";
+          children.filter(ch => isElement(ch) && ch.tag === "li").forEach((li, j) => {
+            sep();
+            const marker = task ? isChecked(li) ? "☑ " : "☐ " : tag === "ol" ? `${j + 1}. ` : "• ";
+            out.push(marker, ...renderInline(li.children, pre, `${key}.${j}`));
+          });
+        } else {
+          if (BLOCK_TAGS.has(tag)) sep();
+          out.push(...renderInline(children, pre, key));
+          if (BLOCK_TAGS.has(tag)) sep();
+        }
+      });
+      return out;
+    };
+    const renderBlock = (node, key, textStyle) => {
+      const {
+        tag,
+        attrs,
+        children
+      } = node;
+      if (/^h[1-6]$/.test(tag)) {
+        const level = Number(tag.slice(1));
+        const size = tag === "h1" ? 22 : tag === "h2" ? 19 : tag === "h3" ? 17 : 15;
+        return /*#__PURE__*/_jsx(HeadingText, {
+          accessibilityRole: "header",
+          "aria-level": level,
+          style: [styles.base, textStyle, headingStyle, {
+            fontSize: size,
+            lineHeight: size + 6
+          }],
+          children: renderInline(children, false, key)
+        }, key);
+      }
+      if (tag === "blockquote") return /*#__PURE__*/_jsx(View, {
+        style: [styles.quote, {
+          borderLeftWidth: theme.borderWidths.thick,
+          borderLeftColor: colors.quoteBorder
+        }],
+        children: renderBlocks(children, key, {
+          ...textStyle,
+          color: colors.muted
+        })
+      }, key);
+      if (tag === "pre") return /*#__PURE__*/_jsx(View, {
+        style: [styles.pre, {
+          backgroundColor: colors.sunken,
+          borderColor: colors.border
+        }],
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [styles.preText, {
+            color: colors.text,
+            fontFamily: MONO
+          }],
+          children: textContent(node).replace(/^\n+|\n+$/g, "")
+        })
+      }, key);
+      if (tag === "ul" || tag === "ol") {
+        const task = attrs["data-type"] === "taskList";
+        const items = children.filter(ch => isElement(ch) && ch.tag === "li");
+        return /*#__PURE__*/_jsx(View, {
+          style: styles.list,
+          children: items.map((li, j) => {
+            const done = task && isChecked(li);
+            return /*#__PURE__*/_jsxs(View, {
+              style: styles.li,
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: [styles.base, textStyle, styles.marker],
+                children: task ? done ? "☑" : "☐" : tag === "ol" ? `${j + 1}.` : "•"
+              }), /*#__PURE__*/_jsx(View, {
+                style: styles.liBody,
+                children: renderBlocks(li.children, `${key}.${j}`, textStyle)
+              })]
+            }, `${key}.${j}`);
+          })
+        }, key);
+      }
+      if (tag === "img") {
+        return /*#__PURE__*/_jsx(RichTextImage, {
+          src: attrs.src ?? "",
+          label: attrs.alt || "Image",
+          mutedStyle: palette.muted,
+          mode: theme.mode,
+          onPress: onImagePress
+        }, key);
+      }
+      const inner = renderBlocks(children, key, textStyle);
+      if (!inner.length) return null;
+      return /*#__PURE__*/_jsx(View, {
+        style: styles.block,
+        children: inner
+      }, key);
+    };
+    const renderBlocks = (nodes, keyBase, textStyle) => {
+      const out = [];
+      let run = [];
+      let ri = 0;
+      const flush = () => {
+        if (run.some(n => !isBlank(n))) {
+          const k = `${keyBase}.t${ri}`;
+          out.push(/*#__PURE__*/_jsx(Text, {
+            style: [styles.base, textStyle],
+            children: renderInline(run, false, k)
+          }, k));
+        }
+        run = [];
+        ri += 1;
+      };
+      nodes.forEach((n, i) => {
+        if (isElement(n) && (n.tag === "img" || BLOCK_TAGS.has(n.tag))) {
+          flush();
+          if (n.tag === "img") out.push(renderBlock(n, `${keyBase}.b${i}`, textStyle));else {
+            const b = renderBlock(n, `${keyBase}.b${i}`, textStyle);
+            if (b) out.push(b);
+          }
+        } else {
+          run.push(n);
+        }
+      });
+      flush();
+      return out;
+    };
+    try {
+      if (numberOfLines != null) {
+        const flat = renderInline(tree, false, "r");
+        while (flat.length && flat[0] === "\n") flat.shift();
+        return flat;
+      }
+      return renderBlocks(tree, "r", palette.text);
+    } catch {
+      return null;
+    }
+  }, [tree, numberOfLines, colors, palette, wrapStyles, headingStyle, openURL, onImagePress, theme]);
+  if (!html) return null;
+  if (content == null) {
+    return /*#__PURE__*/_jsx(Text, {
+      numberOfLines: numberOfLines,
+      style: baseTextStyle,
+      children: stripHtmlToText(html)
+    });
+  }
+  if (numberOfLines != null) {
+    return /*#__PURE__*/_jsx(Text, {
+      numberOfLines: numberOfLines,
+      style: baseTextStyle,
+      children: content
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    testID: testID,
+    style: rootStyle,
+    children: content
+  });
+});
+//# sourceMappingURL=RichText.js.map

package/lib/module/modules/rich-text/RichText.variants.js

@@ -0,0 +1,17 @@
+"use strict";
+
+export function resolveRichTextColors(colors) {
+  return {
+    text: colors.fg.default,
+    muted: colors.fg.muted,
+    link: colors.accent.text,
+    mentionText: colors.accent.text,
+    mentionBg: colors.accent.subtle,
+    codeBg: colors.bg.sunken,
+    code: colors.fg.default,
+    quoteBorder: colors.border.default,
+    border: colors.border.default,
+    sunken: colors.bg.sunken
+  };
+}
+//# sourceMappingURL=RichText.variants.js.map

package/lib/module/modules/rich-text/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+export { RichText } from "./RichText.js";
+export { decodeEntities, isElement, isSafeUrl, parseRichText, stripHtmlToText, textContent } from "./parseRichText.js";
+//# sourceMappingURL=index.js.map

package/lib/module/modules/rich-text/parseRichText.js

@@ -0,0 +1,133 @@
+"use strict";
+
+/**
+ * Safe HTML parse + sanitize for RichText. Ported from tickets/mobile RichText.tsx.
+ */
+
+const BLOCK_TAGS = new Set(["p", "div", "section", "article", "header", "footer", "ul", "ol", "li", "blockquote", "pre", "hr", "h1", "h2", "h3", "h4", "h5", "h6", "table", "thead", "tbody", "tfoot", "tr", "td", "th"]);
+const VOID_TAGS = new Set(["br", "img", "hr", "input", "meta", "link", "source", "area", "base", "col", "embed", "param", "track", "wbr"]);
+const MENTION_HOSTS = new Set(["span", "mark", "small", "sub", "sup", "font"]);
+const ALLOWED_TAGS = new Set(["p", "br", "strong", "em", "s", "u", "code", "pre", "h1", "h2", "h3", "h4", "h5", "h6", "ul", "ol", "li", "blockquote", "hr", "a", "img", "span", "mark", "table", "thead", "tbody", "tfoot", "tr", "th", "td", "colgroup", "col", "input"]);
+const ALLOWED_ATTRS = new Set(["class", "style", "id", "href", "target", "rel", "src", "alt", "width", "height", "data-type", "data-id", "data-label", "data-avatar", "type", "checked", "data-checked", "contenteditable", "colspan", "rowspan"]);
+const DROP_TAGS = new Set(["script", "style", "head", "noscript", "title", "iframe", "object", "embed", "template", "svg", "math", "audio", "video", "noembed", "noframes", "plaintext", "xmp"]);
+export const SAFE_URL_SCHEME = /^(?:https?|mailto|tel):/i;
+function fromCode(n) {
+  try {
+    return Number.isFinite(n) ? String.fromCodePoint(n) : "";
+  } catch {
+    return "";
+  }
+}
+export function decodeEntities(s) {
+  return s.replace(/&nbsp;/g, " ").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, '"').replace(/&#x([0-9a-fA-F]+);/g, (_, h) => fromCode(parseInt(h, 16))).replace(/&#(\d+);/g, (_, d) => fromCode(parseInt(d, 10))).replace(/&apos;/g, "'").replace(/&amp;/g, "&");
+}
+function parseAttrs(s) {
+  const attrs = {};
+  const re = /([a-zA-Z_:][a-zA-Z0-9_:.-]*)(?:\s*=\s*("([^"]*)"|'([^']*)'|([^\s"'>]+)))?/g;
+  let m;
+  while (m = re.exec(s)) {
+    if (m.index === re.lastIndex) re.lastIndex++;
+    if (!m[1]) continue;
+    attrs[m[1].toLowerCase()] = decodeEntities(m[3] ?? m[4] ?? m[5] ?? "");
+  }
+  return attrs;
+}
+function sanitize(nodes) {
+  const out = [];
+  for (const node of nodes) {
+    if (node.type === "text") {
+      out.push(node);
+      continue;
+    }
+    if (DROP_TAGS.has(node.tag)) continue;
+    const children = sanitize(node.children);
+    if (!ALLOWED_TAGS.has(node.tag)) {
+      out.push(...children);
+      continue;
+    }
+    const attrs = {};
+    for (const name of Object.keys(node.attrs)) {
+      const value = node.attrs[name];
+      if (ALLOWED_ATTRS.has(name) && value !== undefined) attrs[name] = value;
+    }
+    out.push({
+      type: "element",
+      tag: node.tag,
+      attrs,
+      children
+    });
+  }
+  return out;
+}
+export function parseRichText(html) {
+  const root = {
+    type: "element",
+    tag: "#root",
+    attrs: {},
+    children: []
+  };
+  const stack = [root];
+  const top = () => stack[stack.length - 1];
+  const pushText = raw => {
+    if (raw) top().children.push({
+      type: "text",
+      text: decodeEntities(raw)
+    });
+  };
+  const tagRe = /<!--[\s\S]*?-->|<\/?([a-zA-Z][a-zA-Z0-9-]*)((?:[^>"']|"[^"]*"|'[^']*')*)>/g;
+  let last = 0;
+  let m;
+  while (m = tagRe.exec(html)) {
+    if (m.index > last) pushText(html.slice(last, m.index));
+    last = tagRe.lastIndex;
+    if (m[0].startsWith("<!--")) continue;
+    const tag = m[1].toLowerCase();
+    if (m[0][1] === "/") {
+      for (let i = stack.length - 1; i > 0; i--) {
+        if (stack[i].tag === tag) {
+          stack.length = i;
+          break;
+        }
+      }
+    } else {
+      const el = {
+        type: "element",
+        tag,
+        attrs: parseAttrs(m[2] ?? ""),
+        children: []
+      };
+      top().children.push(el);
+      if (!m[0].endsWith("/>") && !VOID_TAGS.has(tag)) stack.push(el);
+    }
+  }
+  if (last < html.length) pushText(html.slice(last));
+  return sanitize(root.children);
+}
+export const isElement = n => n.type === "element";
+export const isBlank = n => n.type === "text" ? n.text.trim() === "" : n.tag !== "br" && n.tag !== "img" && n.children.every(isBlank);
+export function textContent(node) {
+  return node.type === "text" ? node.text : node.children.map(textContent).join("");
+}
+export function stripHtmlToText(html) {
+  return decodeEntities(html.replace(/<[^>]*>/g, " ")).replace(/\s+/g, " ").trim();
+}
+export function isSafeUrl(href) {
+  // eslint-disable-next-line no-control-regex
+  const url = href.replace(/[\u0000-\u001f\u007f]/g, "").trim();
+  return SAFE_URL_SCHEME.test(url);
+}
+export function isMention(attrs) {
+  if (attrs["data-label"] != null) return true;
+  const cls = (attrs.class ?? attrs.classname ?? "").toLowerCase();
+  return /(^|[\s-])mention([\s-]|$)/.test(cls);
+}
+export function mentionLabel(node) {
+  const raw = (node.attrs["data-label"] || textContent(node) || "user").trim();
+  return raw.startsWith("@") ? raw : `@${raw}`;
+}
+export function isChecked(node) {
+  if (node.attrs["data-checked"] === "true") return true;
+  return node.children.some(ch => isElement(ch) && (ch.tag === "input" ? ch.attrs.checked != null && ch.attrs.checked !== "false" : isChecked(ch)));
+}
+export { BLOCK_TAGS, MENTION_HOSTS, VOID_TAGS };
+//# sourceMappingURL=parseRichText.js.map