@repzo/widget-react-native 1.1.0 → 1.2.1

package/src/ui/utils/html.ts

@@ -22,7 +22,7 @@ function decodeNumericEntity(match: string, decimal?: string, hex?: string): str
   return valid ? String.fromCodePoint(code) : match;
 }
 
-function decodeEntities(text: string): string {
+export function decodeEntities(text: string): string {
   return text
     .replace(/&(amp|lt|gt|quot|#39|apos|nbsp);/g, (match) => ENTITIES[match] ?? match)
     .replace(/&#(?:(\d{1,7})|[xX]([0-9a-fA-F]{1,6}));/g, decodeNumericEntity);

package/src/ui/utils/post-html.ts

@@ -0,0 +1,256 @@
+/**
+ * Send post HTML → blocks a React Native view can draw.
+ *
+ * The CRM renders and sanitizes the post before sending it, down to a flat
+ * set: `<p>` with `<strong>` / `<em>` / `<code>` / `<a href>` / `<br>`,
+ * `<ul>` / `<ol>` of `<li>`, `<pre><code>`, a button
+ * (`<div data-post-button data-align>` around one link) and social links
+ * (`<div data-post-social data-align>` of `<a data-network>`). React Native
+ * has no HTML renderer, so this turns that subset into blocks. Unknown tags
+ * keep their text. A link survives when it's one the host could route
+ * (`myapp://…` through `onOpenUrl`) or the allow-list would open; tapping it
+ * goes through `openExternalUrl` like every other widget link.
+ */
+
+import { decodeEntities } from './html';
+import { isRoutableUrl } from './safe-url';
+
+export interface PostTextRun {
+  text: string;
+  bold: boolean;
+  italic: boolean;
+  code: boolean;
+  /** Set when the run is a link the SDK may open. */
+  href: string | null;
+}
+
+export type PostAlign = 'left' | 'center' | 'right';
+
+export const POST_SOCIAL_NETWORKS = ['facebook', 'x', 'linkedin', 'instagram', 'youtube'] as const;
+export type PostSocialNetwork = (typeof POST_SOCIAL_NETWORKS)[number];
+
+export type PostBlock =
+  | { type: 'paragraph'; runs: PostTextRun[] }
+  | {
+      type: 'list';
+      ordered: boolean;
+      items: PostTextRun[][];
+      /** Per item: how deep it's nested (0 = top level) and its own list's kind. */
+      levels: Array<{ depth: number; ordered: boolean }>;
+    }
+  | { type: 'code'; text: string }
+  | { type: 'button'; label: string; href: string; align: PostAlign }
+  | { type: 'social'; align: PostAlign; links: Array<{ network: PostSocialNetwork; href: string }> };
+
+const TOKEN = /<(\/?)([a-z][a-z0-9]*)([^>]*)>|([^<]+)/gi;
+
+function attr(attrs: string, name: string): string | null {
+  // Whole names only: `href` must not match inside `data-href`.
+  const found = new RegExp(`(?:^|\\s)${name}\\s*=\\s*(?:"([^"]*)"|'([^']*)')`, 'i').exec(attrs);
+  return found ? decodeEntities(found[1] ?? found[2] ?? '').trim() : null;
+}
+
+const hasAttr = (attrs: string, name: string) => new RegExp(`(^|\\s)${name}(\\s|=|$)`, 'i').test(attrs);
+
+function alignOf(attrs: string): PostAlign {
+  const value = attr(attrs, 'data-align');
+  return value === 'center' || value === 'right' ? value : 'left';
+}
+
+function safeHref(attrs: string): string | null {
+  const href = attr(attrs, 'href') ?? '';
+  return isRoutableUrl(href) ? href : null;
+}
+
+/** Merges neighbouring runs that look the same and trims the outer whitespace. */
+function tidy(runs: PostTextRun[]): PostTextRun[] {
+  const out: PostTextRun[] = [];
+  for (const run of runs) {
+    const last = out[out.length - 1];
+    if (last && last.bold === run.bold && last.italic === run.italic && last.code === run.code && last.href === run.href) {
+      last.text += run.text;
+    } else {
+      out.push({ ...run });
+    }
+  }
+  if (out.length) {
+    out[0].text = out[0].text.replace(/^[ \t]+/, '');
+    out[out.length - 1].text = out[out.length - 1].text.replace(/[ \t]+$/, '');
+  }
+  return out.filter((run) => run.text.length > 0);
+}
+
+export function parsePostHtml(html: string): PostBlock[] {
+  const blocks: PostBlock[] = [];
+  let bold = 0;
+  let italic = 0;
+  let code = 0;
+  const links: Array<string | null> = [];
+
+  // What's being built right now.
+  let runs: PostTextRun[] = [];
+  // The top-level list being built, and the lists open inside it (nested lists stay in it, indented).
+  let list: { ordered: boolean; items: PostTextRun[][]; levels: Array<{ depth: number; ordered: boolean }> } | null = null;
+  const openLists: boolean[] = [];
+  let itemDepth = 0;
+  let pre: string | null = null;
+  let button: { href: string | null; align: PostAlign; label: string } | null = null;
+  let social: { align: PostAlign; links: Array<{ network: PostSocialNetwork; href: string }> } | null = null;
+
+  const flushParagraph = () => {
+    const tidied = tidy(runs);
+    runs = [];
+    if (tidied.length) blocks.push({ type: 'paragraph', runs: tidied });
+  };
+  const flushItem = () => {
+    if (!list) return;
+    const tidied = tidy(runs);
+    runs = [];
+    if (tidied.length) {
+      list.items.push(tidied);
+      list.levels.push({ depth: openLists.length - 1, ordered: openLists[openLists.length - 1] ?? list.ordered });
+    }
+  };
+  const endList = () => {
+    if (list && list.items.length) blocks.push({ type: 'list', ...list });
+    list = null;
+    openLists.length = 0;
+    itemDepth = 0;
+  };
+
+  const pushText = (text: string) => {
+    if (!text) return;
+    if (pre !== null) {
+      pre += text;
+      return;
+    }
+    if (button) {
+      button.label += text;
+      return;
+    }
+    if (social) return;
+    // Text between list items is only formatting whitespace.
+    if (list && itemDepth === 0) return;
+    runs.push({
+      text: text.replace(/\s+/g, ' '),
+      bold: bold > 0,
+      italic: italic > 0,
+      code: code > 0,
+      href: links.length ? links[links.length - 1] : null,
+    });
+  };
+
+  for (const match of (html || '').matchAll(TOKEN)) {
+    const [, closing, rawTag, attrs = '', text] = match;
+    if (text !== undefined) {
+      pushText(decodeEntities(text));
+      continue;
+    }
+    const tag = rawTag.toLowerCase();
+    const open = !closing;
+
+    if (pre !== null && tag !== 'pre') continue; // Only text inside a code block.
+
+    switch (tag) {
+      case 'p':
+        if (list) {
+          // Lists from the editor wrap items in <p>: keep it one line per item.
+          if (!open) runs.push({ text: ' ', bold: false, italic: false, code: false, href: null });
+        } else {
+          flushParagraph();
+        }
+        break;
+      case 'br':
+        if (!social && !button) runs.push({ text: '\n', bold: bold > 0, italic: italic > 0, code: code > 0, href: null });
+        break;
+      case 'strong':
+      case 'b':
+        bold = Math.max(0, bold + (open ? 1 : -1));
+        break;
+      case 'em':
+      case 'i':
+        italic = Math.max(0, italic + (open ? 1 : -1));
+        break;
+      case 'code':
+        code = Math.max(0, code + (open ? 1 : -1));
+        break;
+      case 'ul':
+      case 'ol':
+        if (open) {
+          if (list) {
+            // A list inside an item: what the item said so far is its line.
+            flushItem();
+          } else {
+            flushParagraph();
+            list = { ordered: tag === 'ol', items: [], levels: [] };
+          }
+          openLists.push(tag === 'ol');
+        } else if (list) {
+          flushItem();
+          openLists.pop();
+          if (openLists.length === 0) endList();
+        }
+        break;
+      case 'li':
+        flushItem();
+        if (list) itemDepth = Math.max(0, itemDepth + (open ? 1 : -1));
+        break;
+      case 'pre':
+        if (open) {
+          flushParagraph();
+          pre = '';
+        } else if (pre !== null) {
+          const textBlock = pre.replace(/^\n+|\n+$/g, '');
+          if (textBlock) blocks.push({ type: 'code', text: textBlock });
+          pre = null;
+        }
+        break;
+      case 'div':
+        if (open && hasAttr(attrs, 'data-post-button')) {
+          flushParagraph();
+          button = { href: null, align: alignOf(attrs), label: '' };
+        } else if (open && hasAttr(attrs, 'data-post-social')) {
+          flushParagraph();
+          social = { align: alignOf(attrs), links: [] };
+        } else if (!open) {
+          if (button) {
+            const label = button.label.replace(/\s+/g, ' ').trim();
+            if (label && button.href) blocks.push({ type: 'button', label, href: button.href, align: button.align });
+            button = null;
+          } else if (social) {
+            if (social.links.length) blocks.push({ type: 'social', align: social.align, links: social.links });
+            social = null;
+          } else {
+            flushParagraph();
+          }
+        }
+        break;
+      case 'a':
+        if (button) {
+          if (open) button.href = safeHref(attrs);
+        } else if (social) {
+          if (open) {
+            const network = attr(attrs, 'data-network') as PostSocialNetwork | null;
+            const href = safeHref(attrs);
+            if (network && (POST_SOCIAL_NETWORKS as readonly string[]).includes(network) && href) {
+              social.links.push({ network, href });
+            }
+          }
+        } else if (open) {
+          links.push(safeHref(attrs));
+        } else {
+          links.pop();
+        }
+        break;
+      default:
+        break;
+    }
+  }
+  if (list) {
+    flushItem();
+    endList();
+  }
+  flushParagraph();
+  return blocks;
+}
+

package/src/ui/utils/safe-url.ts

@@ -42,6 +42,21 @@ export function isSafeExternalUrl(url: string): boolean {
   return scheme === 'http:' || scheme === 'https:' ? isHttpUrl(url) : true;
 }
 
+/** Schemes no host would route — content carrying them never shows as a link. */
+const NEVER_ROUTED_SCHEMES = new Set(['javascript:', 'vbscript:', 'data:', 'file:', 'blob:']);
+
+/**
+ * Worth drawing as a link: absolute, with a scheme the host could route
+ * through `onOpenUrl` (`myapp://…`) or the allow-list would open. Tapping it
+ * still goes through `openExternalUrl`, which makes the actual call.
+ */
+export function isRoutableUrl(url: string): boolean {
+  if (!url || CONTROL_CHARS.test(url)) return false;
+  const scheme = urlScheme(url);
+  if (!scheme || NEVER_ROUTED_SCHEMES.has(scheme)) return false;
+  return scheme === 'http:' || scheme === 'https:' ? isHttpUrl(url) : true;
+}
+
 /** Host handler first, then the allow-list. Never throws. */
 export async function openExternalUrl(url: string | null | undefined): Promise<void> {
   const target = (url ?? '').trim();