@colixsystems/widget-sdk 0.133.0 → 0.134.0

package/dist/markdown.js

@@ -11,13 +11,24 @@
 // interpreted — legacy rows that still hold markup are STRIPPED, never rendered.
 //
 // The supported subset is deliberately small: `#`/`##`/`###` headings, `-`/`*`
-// bullets, `1.` ordered items, one-line `![alt](src "size")` images, and inline
-// `**bold**`, `*italic*`/`_italic_`, and `` `code` ``.
+// bullets, `1.` ordered items, one-line `![alt](src "size")` images, GFM pipe
+// tables, and inline `**bold**`, `*italic*`/`_italic_`, `` `code` `` and
+// `[label](target)` links.
+//
+// sc-7349: a link target is NOT classified here. The host's `navigation.openLink`
+// owns that one decision — page id/slug, external URL, or refuse — so a
+// `javascript:` target can never be performed and the two hosts cannot disagree
+// about what a link means.
 
 const HEADING_RE = /^(#{1,3})\s+(.*)$/;
 const BULLET_RE = /^\s*[-*]\s+(.*)$/;
 const ORDERED_RE = /^\s*(\d+)[.)]\s+(.*)$/;
 
+// A pipe table needs BOTH a header row and a `---` divider under it, so a line
+// of prose that merely contains a `|` is never mistaken for one.
+const TABLE_ROW_RE = /^\s*\|(.*)\|\s*$/;
+const TABLE_DIVIDER_RE = /^\s*\|(?:\s*:?-+:?\s*\|)+\s*$/;
+
 // An image is its own block, written on one line with the size in the title
 // slot. Keeping blocks in the SAME markdown column as the prose is what lets
 // content written before images existed keep rendering with no migration.
@@ -56,13 +67,17 @@ export function normaliseMarkdownImageSize(size) {
 
 // A caption is the only prose an image-only post has, so `]` must survive the
 // round trip rather than being eaten, to keep the one-line grammar unambiguous.
-function escapeAlt(alt) {
-  return String(alt || "")
+// sc-7349: a link label is escaped by the same rule — both sit in a `[...]`
+// slot, so one escaper keeps them from drifting apart.
+export function escapeMarkdownLabel(value) {
+  return String(value || "")
     .replace(/[\r\n]+/g, " ")
     .replace(/([\\\]])/g, "\\$1")
     .trim();
 }
 
+const escapeAlt = escapeMarkdownLabel;
+
 /** Un-escapes an alt captured by the image grammar. */
 export function readMarkdownAlt(raw) {
   return String(raw || "").replace(/\\(.)/g, "$1");
@@ -126,22 +141,42 @@ export function stripHtmlToMarkdown(text) {
     .trim();
 }
 
-/** Splits one line into `{ text, bold?, italic?, code? }` spans. */
+// A link label keeps its own emphasis, so `[**Book now**](booking)` reads bold.
+// The RAW label is re-parsed rather than the unescaped one: by construction it
+// holds no unescaped `]`, so the nested pass cannot form another link and the
+// recursion is exactly one level deep.
+function linkSpans(rawLabel, href) {
+  const spans = parseInline(rawLabel).map((span) => ({
+    ...span,
+    text: readMarkdownAlt(span.text),
+    href,
+  }));
+  // `[](https://example.com)` has nothing to show but the target itself.
+  return spans.some((span) => span.text) ? spans : [{ text: href, href }];
+}
+
+/** Splits one line into `{ text, bold?, italic?, code?, href? }` spans. */
 function parseInline(line) {
   const source = typeof line === "string" ? line : "";
   const spans = [];
-  // One pass over the three delimiters. Alternation order matters: `**` must
+  // One pass over the four delimiters. Alternation order matters: `**` must
   // be tried before `*` or the bold marker is consumed as two italics.
-  const pattern = /(\*\*)(.+?)\1|(`)([^`]+?)\3|([*_])(.+?)\5/g;
+  const pattern =
+    /(!?)\[((?:[^\]\\]|\\.)*)\]\(\s*(\S+?)\s*\)|(\*\*)(.+?)\4|(`)([^`]+?)\6|([*_])(.+?)\8/g;
   let cursor = 0;
   let match = pattern.exec(source);
   while (match) {
     if (match.index > cursor) {
       spans.push({ text: source.slice(cursor, match.index) });
     }
-    if (match[1]) spans.push({ text: match[2], bold: true });
-    else if (match[3]) spans.push({ text: match[4], code: true });
-    else spans.push({ text: match[6], italic: true });
+    if (match[3] !== undefined) {
+      // An image is its own whole-line block, so an inline `![alt](src)` stays
+      // literal text rather than becoming a link to the image.
+      if (match[1]) spans.push({ text: match[0] });
+      else for (const span of linkSpans(match[2], match[3])) spans.push(span);
+    } else if (match[4]) spans.push({ text: match[5], bold: true });
+    else if (match[6]) spans.push({ text: match[7], code: true });
+    else spans.push({ text: match[9], italic: true });
     cursor = match.index + match[0].length;
     match = pattern.exec(source);
   }
@@ -149,10 +184,87 @@ function parseInline(line) {
   return spans.length > 0 ? spans : [{ text: source }];
 }
 
+// `\|` is how a literal pipe survives inside a cell, so the split has to walk
+// the line rather than use a lookbehind — Hermes does not ship one.
+function splitTableCells(raw) {
+  const cells = [];
+  let current = "";
+  for (let i = 0; i < raw.length; i += 1) {
+    const char = raw.charAt(i);
+    if (char === "\\" && raw.charAt(i + 1) === "|") {
+      current += "|";
+      i += 1;
+    } else if (char === "|") {
+      cells.push(current);
+      current = "";
+    } else {
+      current += char;
+    }
+  }
+  cells.push(current);
+  return cells.map((cell) => cell.trim());
+}
+
+// A divider cell's colons carry the column's alignment: `:--` left, `--:` right,
+// `:-:` centre. Unmarked columns return null so the renderer leaves them alone.
+function readColumnAlignment(cell) {
+  const value = cell.trim();
+  const left = value.charAt(0) === ":";
+  const right = value.length > 1 && value.charAt(value.length - 1) === ":";
+  if (left && right) return "center";
+  if (right) return "right";
+  if (left) return "left";
+  return null;
+}
+
+/**
+ * Reads a pipe table starting at `lines[start]`, or returns null when one does
+ * not begin there.
+ *
+ * @returns {{block: object, next: number} | null} `next` is the first line
+ *   AFTER the table.
+ */
+function readTable(lines, start) {
+  const header = TABLE_ROW_RE.exec(lines[start]);
+  if (!header) return null;
+  if (!TABLE_DIVIDER_RE.test(lines[start + 1] || "")) return null;
+
+  const divider = TABLE_ROW_RE.exec(lines[start + 1]);
+  const align = splitTableCells(divider[1]).map(readColumnAlignment);
+  const rows = [
+    { header: true, cells: splitTableCells(header[1]).map((c) => parseInline(c)) },
+  ];
+
+  let index = start + 2;
+  while (index < lines.length) {
+    const body = TABLE_ROW_RE.exec(lines[index]);
+    if (!body) break;
+    rows.push({
+      header: false,
+      cells: splitTableCells(body[1]).map((c) => parseInline(c)),
+    });
+    index += 1;
+  }
+  return { block: { type: "table", rows, align }, next: index };
+}
+
+/** Writes an empty table of `columns` x `rows` body rows back to markdown. */
+export function formatMarkdownTable(columns = 3, rows = 2) {
+  const width = Math.min(Math.max(Math.trunc(columns) || 0, 1), 8);
+  const height = Math.min(Math.max(Math.trunc(rows) || 0, 1), 20);
+  const line = (cells) => `| ${cells.join(" | ")} |`;
+  const heads = [];
+  for (let i = 0; i < width; i += 1) heads.push(`Column ${i + 1}`);
+  const out = [line(heads), line(heads.map(() => "---"))];
+  for (let r = 0; r < height; r += 1) out.push(line(heads.map(() => "")));
+  return out.join("\n");
+}
+
 /**
  * Parses markdown text into renderable blocks:
- * `{ type: "heading"|"paragraph"|"bullet"|"ordered", level?, marker?, spans }`
- * or `{ type: "image", src, alt, size }`.
+ * `{ type: "heading"|"paragraph"|"bullet"|"ordered", level?, marker?, spans }`,
+ * `{ type: "image", src, alt, size }`, or
+ * `{ type: "table", rows: [{ header, cells: spans[] }], align }`.
  */
 export function parseMarkdown(text) {
   const source = stripHtmlToMarkdown(text);
@@ -167,13 +279,24 @@ export function parseMarkdown(text) {
     paragraph = [];
   };
 
-  for (const rawLine of source.split(/\r?\n/)) {
-    const line = rawLine.trimEnd();
+  // Indexed rather than for-of: a table is only a table if the NEXT line is its
+  // divider, so the scan needs one line of lookahead.
+  const lines = source.split(/\r?\n/);
+  for (let i = 0; i < lines.length; i += 1) {
+    const line = lines[i].trimEnd();
     if (!line.trim()) {
       flushParagraph();
       continue;
     }
 
+    const table = readTable(lines, i);
+    if (table) {
+      flushParagraph();
+      blocks.push(table.block);
+      i = table.next - 1;
+      continue;
+    }
+
     const image = parseMarkdownImage(line);
     if (image) {
       flushParagraph();
@@ -216,14 +339,25 @@ export function parseMarkdown(text) {
   return blocks;
 }
 
+function spansToText(spans) {
+  return spans.map((span) => span.text).join("");
+}
+
 /** Plain-text projection — used for search, previews, and a11y labels. */
 export function markdownToPlainText(text) {
   return parseMarkdown(text)
-    .map((block) =>
-      block.type === "image"
-        ? block.alt
-        : block.spans.map((span) => span.text).join(""),
-    )
+    .map((block) => {
+      if (block.type === "image") return block.alt;
+      // A table has no `spans` of its own; one line per row keeps a search
+      // match and a screen reader reading the cells in their visual order.
+      if (block.type === "table") {
+        return block.rows
+          .map((row) => row.cells.map(spansToText).join(" "))
+          .filter((row) => row.trim())
+          .join("\n");
+      }
+      return spansToText(block.spans);
+    })
     .filter(Boolean)
     .join("\n");
 }

package/dist/richtext-view.js

@@ -9,19 +9,22 @@
 // hosts cannot drift (CLAUDE.md §3, §8).
 
 import React from "react";
-import { useHostTheme } from "./hooks.js";
+import { useHostTheme, useHostNavigation } from "./hooks.js";
 import { parseMarkdown, isHttpImageSrc } from "./markdown.js";
 import { resolveRichTextTokens } from "./richtext-tokens.js";
 
 export function makeRichText(rn) {
   const { Text, View, Image } = rn;
 
-  function Spans({ spans, tokens }) {
-    return spans.map((span, i) =>
-      React.createElement(
+  function Spans({ spans, tokens, onLinkPress }) {
+    return spans.map((span, i) => {
+      const followable = !!span.href && typeof onLinkPress === "function";
+      return React.createElement(
         Text,
         {
           key: i,
+          onPress: followable ? () => onLinkPress(span.href) : undefined,
+          accessibilityRole: followable ? "link" : undefined,
           style: [
             span.bold ? { fontWeight: "700" } : null,
             span.italic ? { fontStyle: "italic" } : null,
@@ -33,18 +36,113 @@ export function makeRichText(rn) {
                   color: tokens.mutedColor,
                 }
               : null,
+            // sc-7349: a link looks like a link whether or not THIS host can
+            // follow it, so the editor preview shows the reader's document.
+            span.href
+              ? { color: tokens.accent, textDecorationLine: "underline" }
+              : null,
           ],
         },
         span.text,
+      );
+    });
+  }
+
+  // sc-7349: cells are equal-width flex columns rather than a real table
+  // layout — `display: table` has no native equivalent, and a percentage grid
+  // is the one shape both hosts resolve identically. Long cell text therefore
+  // WRAPS instead of scrolling sideways, which is what a phone wants.
+  function TableBlock({ block, tokens, paragraph, onLinkPress }) {
+    const align = Array.isArray(block.align) ? block.align : [];
+    const rows = (Array.isArray(block.rows) ? block.rows : []).map((row) => ({
+      header: !!row.header,
+      cells: Array.isArray(row.cells) ? row.cells : [],
+    }));
+    const columns = rows.reduce(
+      (widest, row) => Math.max(widest, row.cells.length),
+      0,
+    );
+    if (columns === 0) return null;
+
+    return React.createElement(
+      View,
+      {
+        style: {
+          borderWidth: 1,
+          borderColor: tokens.border,
+          borderRadius: tokens.radius,
+          overflow: "hidden",
+          marginBottom: tokens.blockGap,
+        },
+      },
+      rows.map((row, r) =>
+        React.createElement(
+          View,
+          {
+            key: r,
+            style: {
+              flexDirection: "row",
+              borderBottomWidth: r === rows.length - 1 ? 0 : 1,
+              borderBottomColor: tokens.border,
+              ...(row.header ? { backgroundColor: tokens.surface } : null),
+            },
+          },
+          // Every row is padded out to the widest, so a short row cannot
+          // collapse the grid out of alignment.
+          Array.from({ length: columns }, (_unused, c) =>
+            React.createElement(
+              View,
+              {
+                key: c,
+                style: {
+                  flex: 1,
+                  padding: tokens.markerGap,
+                  borderRightWidth: c === columns - 1 ? 0 : 1,
+                  borderRightColor: tokens.border,
+                },
+              },
+              React.createElement(
+                Text,
+                {
+                  style: [
+                    paragraph,
+                    {
+                      marginBottom: 0,
+                      fontWeight: row.header ? "700" : "400",
+                      textAlign: align[c] || "left",
+                    },
+                  ],
+                },
+                React.createElement(Spans, {
+                  spans: row.cells[c] || [],
+                  tokens,
+                  onLinkPress,
+                }),
+              ),
+            ),
+          ),
+        ),
       ),
     );
   }
 
-  function RichText({ value, renderImage, style, testID }) {
+  function RichText({ value, renderImage, followLinks = true, style, testID }) {
     const theme = useHostTheme();
+    // The non-throwing reader, so RichText stays renderable outside a widget
+    // host (a Studio preview, a test) the way DateTimePicker does.
+    const navigation = useHostNavigation();
     const tokens = React.useMemo(() => resolveRichTextTokens(theme), [theme]);
     const blocks = React.useMemo(() => parseMarkdown(value), [value]);
 
+    // sc-7349: `openLink` is the platform's ONE link resolver — it decides page
+    // / external / refuse, so a stored `javascript:` target can never be
+    // performed here. Never Linking.openURL, which performs anything.
+    const onLinkPress = React.useMemo(() => {
+      if (!followLinks) return null;
+      if (!navigation || typeof navigation.openLink !== "function") return null;
+      return (href) => navigation.openLink(href);
+    }, [followLinks, navigation]);
+
     if (blocks.length === 0) return null;
 
     const paragraph = {
@@ -59,7 +157,21 @@ export function makeRichText(rn) {
       View,
       { style, testID },
       blocks.map((block, i) => {
-        const spans = React.createElement(Spans, { spans: block.spans, tokens });
+        if (block.type === "table") {
+          return React.createElement(TableBlock, {
+            key: i,
+            block,
+            tokens,
+            paragraph,
+            onLinkPress,
+          });
+        }
+
+        const spans = React.createElement(Spans, {
+          spans: block.spans,
+          tokens,
+          onLinkPress,
+        });
 
         if (block.type === "heading") {
           return React.createElement(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colixsystems/widget-sdk",
-  "version": "0.133.0",
+  "version": "0.134.0",
   "description": "Common widget interface for AppStudio. Implements WidgetManifest, WidgetContext, property schema, and helper hooks.",
   "homepage": "https://github.com/Colix-AB/AppStudio",
   "type": "module",