@colixsystems/widget-sdk 0.133.1 → 0.134.1

package/README.md

@@ -70,7 +70,23 @@ See the design reference for the full architecture: [`docs/architecture/widget-m
 
 ## Status
 
-`v0.133.1` — pre-publish. The package surface (types, function names, export paths) is the v1 contract; runtime behaviour for some hooks is stubbed (each hook documents what's wired and what isn't). It is **not yet published to npm**.
+`v0.134.0` — pre-publish. The package surface (types, function names, export paths) is the v1 contract; runtime behaviour for some hooks is stubbed (each hook documents what's wired and what isn't). It is **not yet published to npm**.
+
+### What's new in 0.134.0 (contract 1.103.0)
+
+**Formatted content can carry links and tables (sc-7349).** `<MarkdownInput>` and `<RichText>` covered emphasis, headings, lists and images, but a link was not in the grammar at all — so a post that said "see the Booking page" had no way to get the reader there, and a comparison table could only be faked with spaces.
+
+```jsx
+<MarkdownInput value={draft} onChange={setDraft} pages={pages} />
+<RichText value={post.body} />
+```
+
+- **Links: `[label](target)`.** The target is stored **verbatim** and followed through the host's `navigation.openLink`, which already decides page / external / refuse. An absolute URL leaves the app; a bare page id or slug navigates inside it; anything unfollowable (`javascript:`, a control character) is refused by that one resolver. Never pre-filter a target yourself, and never route one through `Linking.openURL` — it performs anything. A link label keeps its own emphasis, so `[**Book now**](booking)` reads bold.
+- **Tables: a header row, a `| --- | --- |` divider, then body rows.** `:--` / `--:` / `:-:` in a divider cell sets that column's alignment, and `\|` puts a literal pipe in a cell. Cells are equal-width columns whose text wraps, so a wide table stays inside the widget on a phone instead of scrolling sideways.
+- **Two new toolbar buttons.** Table inserts a skeleton with the first header cell selected. Link opens a form for the link text plus its target — and when you pass the new optional `pages` prop (`[{ id, name }]`) it offers those pages by name, the way `renderImage` is supplied for filestore images. Without `pages` the form offers only an external address, because a widget cannot know the app's pages on its own.
+- **`<RichText>` gains `followLinks`** (default `true`). The editor's own preview passes `false`, so links render styled but inert and a tap while writing cannot navigate away from the draft.
+
+Additive — one shared view module per primitive, bound per host, so both hosts gain this together. Every string already stored keeps parsing identically: a line needs a divider row to become a table, and `![alt](src)` is still read as an image, never a link. `CONTRACT.version` → `1.103.0`.
 
 ### What's new in 0.133.1 (contract 1.102.1)
 

package/dist/contract.cjs

@@ -1925,7 +1925,7 @@ const PRIMITIVES = [
   {
     name: "RichText",
     description:
-      'Formatted-content renderer. `<RichText value={record.body} />`. THE way to display text an app user wrote with formatting — bold, italic, inline code, `#`/`##`/`###` headings, `-` bullets, `1.` numbered items, and one-line `![alt](src "large")` images. `value` is markdown text, NOT HTML: widgets render through React Native primitives, which have no `dangerouslySetInnerHTML` on either host, so HTML inside a content string shows up as literal tag soup — never assemble content out of `<strong>`/`<br>` tags. Stored text that still holds legacy HTML is stripped to plain text rather than shown as markup. Props: `value` (markdown string), `renderImage` (optional `({ src, alt, size }) => node` — supply it when images are filestore ids, because resolving those needs the scopes your own widget holds; without it only absolute http(s) URLs render), `style`, `testID`. Colour, type scale and leading all come from the workspace theme — never re-style them.',
+      'Formatted-content renderer. `<RichText value={record.body} />`. THE way to display text an app user wrote with formatting — bold, italic, inline code, `#`/`##`/`###` headings, `-` bullets, `1.` numbered items, `[label](target)` links, `| a | b |` pipe tables (a header row, a `| --- | --- |` divider, then body rows; `:--` / `--:` / `:-:` in a divider cell sets that column\'s alignment), and one-line `![alt](src "large")` images. `value` is markdown text, NOT HTML: widgets render through React Native primitives, which have no `dangerouslySetInnerHTML` on either host, so HTML inside a content string shows up as literal tag soup — never assemble content out of `<strong>`/`<br>`/`<table>` tags. Stored text that still holds legacy HTML is stripped to plain text rather than shown as markup. A link is pressed through the host\'s `navigation.openLink`, which is what decides page / external / refuse — so a link target is just a string here: an absolute URL leaves the app, a bare page id or slug navigates inside it, and anything unfollowable (`javascript:`, a control character) is refused by that one resolver. Never pre-filter a target yourself and never route one through `Linking.openURL`, which performs anything. Props: `value` (markdown string), `renderImage` (optional `({ src, alt, size }) => node` — supply it when images are filestore ids, because resolving those needs the scopes your own widget holds; without it only absolute http(s) URLs render), `followLinks` (default true; pass false to render links styled but inert, which is what an editing preview wants so a tap cannot discard the draft), `style`, `testID`. Colour, type scale and leading all come from the workspace theme — never re-style them. Table cells are equal-width columns whose text wraps, so a wide table stays inside the widget on a phone instead of scrolling sideways.',
     rnComponent: null,
     docsUrl: null,
   },
@@ -1935,7 +1935,7 @@ const PRIMITIVES = [
   {
     name: "MarkdownInput",
     description:
-      'Formatted-content editor. `<MarkdownInput value={draft} onChange={setDraft} />`. THE way to let an app USER write formatted text: a multi-line field, a toolbar whose buttons wrap the current SELECTION in markdown markers (bold, italic, code, H2, H3, bullets, numbered list), and a live `<RichText>` preview of the result underneath. Use it instead of a bare `TextInput` plus hand-rolled formatting buttons — buttons that splice `<strong>`/`<br>` tags into the string leave the author reading tag soup with no preview of the real output. The stored value is markdown text. Props: `value`, `onChange(next)`, `placeholder`, `previewLabel` (default "Preview"), `showPreview` (default true), `renderImage` (passed through to the preview), `minHeight` (default 150) and `maxHeight` (default 280) so the field scrolls internally instead of growing without bound, `accessibilityLabel`, `style`, `testID`.',
+      'Formatted-content editor. `<MarkdownInput value={draft} onChange={setDraft} />`. THE way to let an app USER write formatted text: a multi-line field, a toolbar whose buttons wrap the current SELECTION in markdown markers (bold, italic, code, H2, H3, bullets, numbered list), a Table button that inserts a pipe-table skeleton with the first header cell selected, a Link button that opens a form for the link text plus its target, and a live `<RichText>` preview of the result underneath. Use it instead of a bare `TextInput` plus hand-rolled formatting buttons — buttons that splice `<strong>`/`<br>`/`<table>` tags into the string leave the author reading tag soup with no preview of the real output. The stored value is markdown text. Props: `value`, `onChange(next)`, `placeholder`, `previewLabel` (default "Preview"), `showPreview` (default true), `renderImage` (passed through to the preview), `pages` (optional `[{ id, name }]` — supply it and the Link form offers those pages to link to by name, the way `renderImage` is supplied for filestore images; without it the form offers only an external address, because a widget cannot know the app\'s pages on its own), `minHeight` (default 150) and `maxHeight` (default 280) so the field scrolls internally instead of growing without bound, `accessibilityLabel`, `style`, `testID`. Links in the preview are deliberately inert, so a tap while editing cannot navigate away from the draft.',
     rnComponent: null,
     docsUrl: null,
   },
@@ -3879,7 +3879,24 @@ const CONTRACT = deepFreeze({
   //    fails the publish gate. Every signature is now a valid call and the
   //    omittable parts moved to a new `optionalArgs` array the prompt prints
   //    beside it. Documentation only; no hook changed shape or behaviour.
-  version: "1.102.1",
+  // 1.103.0: additive (sc-7349) — the markdown subset behind `<RichText>` /
+  //    `<MarkdownInput>` gains inline `[label](target)` links and `| a | b |`
+  //    pipe tables, plus the two toolbar buttons that author them (Table
+  //    inserts a skeleton; Link opens a form for the text and its target, and
+  //    offers the app's pages by name when the host passes the new optional
+  //    `pages` prop). Formatted content could not carry a link AT ALL, so a
+  //    post saying "see the Booking page" had no way to get the reader there.
+  //    A target is stored VERBATIM and followed through the host's existing
+  //    `navigation.openLink`, which already decides page / external / refuse —
+  //    no second resolver, and no way for a stored `javascript:` to be
+  //    performed. `<RichText>` also gains `followLinks` (default true) so the
+  //    editor's own preview renders links styled but inert. Both primitives
+  //    stay ONE shared view module bound per host, so this is full parity, not
+  //    a §8 native-only case. Every string already stored keeps parsing
+  //    identically: a line needs a `| --- |` divider to become a table, and an
+  //    `![alt](src)` image is still read as an image, never a link. Minor bump
+  //    on the pre-1.0 channel.
+  version: "1.103.0",
   sharedTranslationKeys: SHARED_TRANSLATION_KEYS,
   hooks: HOOKS,
   primitives: PRIMITIVES,

package/dist/contract.js

@@ -1925,7 +1925,7 @@ const PRIMITIVES = [
   {
     name: "RichText",
     description:
-      'Formatted-content renderer. `<RichText value={record.body} />`. THE way to display text an app user wrote with formatting — bold, italic, inline code, `#`/`##`/`###` headings, `-` bullets, `1.` numbered items, and one-line `![alt](src "large")` images. `value` is markdown text, NOT HTML: widgets render through React Native primitives, which have no `dangerouslySetInnerHTML` on either host, so HTML inside a content string shows up as literal tag soup — never assemble content out of `<strong>`/`<br>` tags. Stored text that still holds legacy HTML is stripped to plain text rather than shown as markup. Props: `value` (markdown string), `renderImage` (optional `({ src, alt, size }) => node` — supply it when images are filestore ids, because resolving those needs the scopes your own widget holds; without it only absolute http(s) URLs render), `style`, `testID`. Colour, type scale and leading all come from the workspace theme — never re-style them.',
+      'Formatted-content renderer. `<RichText value={record.body} />`. THE way to display text an app user wrote with formatting — bold, italic, inline code, `#`/`##`/`###` headings, `-` bullets, `1.` numbered items, `[label](target)` links, `| a | b |` pipe tables (a header row, a `| --- | --- |` divider, then body rows; `:--` / `--:` / `:-:` in a divider cell sets that column\'s alignment), and one-line `![alt](src "large")` images. `value` is markdown text, NOT HTML: widgets render through React Native primitives, which have no `dangerouslySetInnerHTML` on either host, so HTML inside a content string shows up as literal tag soup — never assemble content out of `<strong>`/`<br>`/`<table>` tags. Stored text that still holds legacy HTML is stripped to plain text rather than shown as markup. A link is pressed through the host\'s `navigation.openLink`, which is what decides page / external / refuse — so a link target is just a string here: an absolute URL leaves the app, a bare page id or slug navigates inside it, and anything unfollowable (`javascript:`, a control character) is refused by that one resolver. Never pre-filter a target yourself and never route one through `Linking.openURL`, which performs anything. Props: `value` (markdown string), `renderImage` (optional `({ src, alt, size }) => node` — supply it when images are filestore ids, because resolving those needs the scopes your own widget holds; without it only absolute http(s) URLs render), `followLinks` (default true; pass false to render links styled but inert, which is what an editing preview wants so a tap cannot discard the draft), `style`, `testID`. Colour, type scale and leading all come from the workspace theme — never re-style them. Table cells are equal-width columns whose text wraps, so a wide table stays inside the widget on a phone instead of scrolling sideways.',
     rnComponent: null,
     docsUrl: null,
   },
@@ -1935,7 +1935,7 @@ const PRIMITIVES = [
   {
     name: "MarkdownInput",
     description:
-      'Formatted-content editor. `<MarkdownInput value={draft} onChange={setDraft} />`. THE way to let an app USER write formatted text: a multi-line field, a toolbar whose buttons wrap the current SELECTION in markdown markers (bold, italic, code, H2, H3, bullets, numbered list), and a live `<RichText>` preview of the result underneath. Use it instead of a bare `TextInput` plus hand-rolled formatting buttons — buttons that splice `<strong>`/`<br>` tags into the string leave the author reading tag soup with no preview of the real output. The stored value is markdown text. Props: `value`, `onChange(next)`, `placeholder`, `previewLabel` (default "Preview"), `showPreview` (default true), `renderImage` (passed through to the preview), `minHeight` (default 150) and `maxHeight` (default 280) so the field scrolls internally instead of growing without bound, `accessibilityLabel`, `style`, `testID`.',
+      'Formatted-content editor. `<MarkdownInput value={draft} onChange={setDraft} />`. THE way to let an app USER write formatted text: a multi-line field, a toolbar whose buttons wrap the current SELECTION in markdown markers (bold, italic, code, H2, H3, bullets, numbered list), a Table button that inserts a pipe-table skeleton with the first header cell selected, a Link button that opens a form for the link text plus its target, and a live `<RichText>` preview of the result underneath. Use it instead of a bare `TextInput` plus hand-rolled formatting buttons — buttons that splice `<strong>`/`<br>`/`<table>` tags into the string leave the author reading tag soup with no preview of the real output. The stored value is markdown text. Props: `value`, `onChange(next)`, `placeholder`, `previewLabel` (default "Preview"), `showPreview` (default true), `renderImage` (passed through to the preview), `pages` (optional `[{ id, name }]` — supply it and the Link form offers those pages to link to by name, the way `renderImage` is supplied for filestore images; without it the form offers only an external address, because a widget cannot know the app\'s pages on its own), `minHeight` (default 150) and `maxHeight` (default 280) so the field scrolls internally instead of growing without bound, `accessibilityLabel`, `style`, `testID`. Links in the preview are deliberately inert, so a tap while editing cannot navigate away from the draft.',
     rnComponent: null,
     docsUrl: null,
   },
@@ -3879,7 +3879,24 @@ const CONTRACT = deepFreeze({
   //    fails the publish gate. Every signature is now a valid call and the
   //    omittable parts moved to a new `optionalArgs` array the prompt prints
   //    beside it. Documentation only; no hook changed shape or behaviour.
-  version: "1.102.1",
+  // 1.103.0: additive (sc-7349) — the markdown subset behind `<RichText>` /
+  //    `<MarkdownInput>` gains inline `[label](target)` links and `| a | b |`
+  //    pipe tables, plus the two toolbar buttons that author them (Table
+  //    inserts a skeleton; Link opens a form for the text and its target, and
+  //    offers the app's pages by name when the host passes the new optional
+  //    `pages` prop). Formatted content could not carry a link AT ALL, so a
+  //    post saying "see the Booking page" had no way to get the reader there.
+  //    A target is stored VERBATIM and followed through the host's existing
+  //    `navigation.openLink`, which already decides page / external / refuse —
+  //    no second resolver, and no way for a stored `javascript:` to be
+  //    performed. `<RichText>` also gains `followLinks` (default true) so the
+  //    editor's own preview renders links styled but inert. Both primitives
+  //    stay ONE shared view module bound per host, so this is full parity, not
+  //    a §8 native-only case. Every string already stored keeps parsing
+  //    identically: a line needs a `| --- |` divider to become a table, and an
+  //    `![alt](src)` image is still read as an image, never a link. Minor bump
+  //    on the pre-1.0 channel.
+  version: "1.103.0",
   sharedTranslationKeys: SHARED_TRANSLATION_KEYS,
   hooks: HOOKS,
   primitives: PRIMITIVES,

package/dist/hooks.js

@@ -188,6 +188,17 @@ export function useHostTheme() {
   return ctx && ctx.workspace ? ctx.workspace.theme : undefined;
 }
 
+// @internal — the navigation counterpart of useHostTheme: reads the host's
+// navigation slice WITHOUT throwing when no provider is mounted, unlike
+// useNavigation() which asserts a widget context. `<RichText>` reads it so a
+// link in formatted content is followable inside a widget yet the component
+// stays renderable anywhere (a Studio preview, a test harness). Not part of the
+// public widget hook surface — not re-exported from index.js.
+export function useHostNavigation() {
+  const ctx = useContext(HostWidgetContext);
+  return ctx ? ctx.navigation : undefined;
+}
+
 /**
  * REQ-THEME-13 — returns the author-set per-widget style values: the object the
  * host delivers under `props.style`, keyed by the style-field names the widget

package/dist/index.js

@@ -113,6 +113,8 @@ export {
   isHttpImageSrc,
   isSafeMarkdownImageSrc,
   normaliseMarkdownImageSize,
+  escapeMarkdownLabel,
+  formatMarkdownTable,
   MARKDOWN_IMAGE_SIZES,
 } from "./markdown.js";
 export {

package/dist/index.native.js

@@ -107,6 +107,8 @@ export {
   isHttpImageSrc,
   isSafeMarkdownImageSrc,
   normaliseMarkdownImageSize,
+  escapeMarkdownLabel,
+  formatMarkdownTable,
   MARKDOWN_IMAGE_SIZES,
 } from "./markdown.js";
 export {

package/dist/markdown-edit.js

@@ -5,8 +5,13 @@
 // author's SELECTION rather than appending at the end, and that is a thing
 // tests can pin without a renderer.
 
+import { escapeMarkdownLabel, formatMarkdownTable } from "./markdown.js";
+
 const LINE_RE = /^(\s*)((?:#{1,3}\s)|(?:[-*]\s)|(?:\d+[.)]\s))?([\s\S]*)$/;
 
+// The literal the inserted table skeleton opens with; the caret lands on it.
+const FIRST_HEADING = "Column 1";
+
 const LINE_KINDS = Object.freeze({
   heading2: { marker: "## ", test: /^##\s/ },
   heading3: { marker: "### ", test: /^###\s/ },
@@ -86,6 +91,66 @@ function linePrefix(kind) {
   };
 }
 
+// sc-7349 — a link needs a TARGET, which no selection can supply, so this is
+// the one op that takes a third argument. The target is stored verbatim: the
+// host's `navigation.openLink` is what decides page / external / refuse, so
+// this must not pre-judge it (see markdown.js).
+function linkOp() {
+  return (text, selection, options) => {
+    const { src, start, end } = readRange(text, selection);
+    // A bare string is accepted as the target, so the common case stays terse.
+    const opts =
+      options && typeof options === "object" ? options : { target: options };
+    const href = typeof opts.target === "string" ? opts.target.trim() : "";
+    // Nothing to point at — leave the text exactly as the author left it.
+    if (!href) return { value: src, selection: { start, end } };
+
+    // An explicit label wins, so a dialog can name the link when the author
+    // had nothing selected; otherwise the selection IS the label.
+    const chosen =
+      typeof opts.label === "string" && opts.label.trim()
+        ? opts.label
+        : src.slice(start, end);
+    const label = escapeMarkdownLabel(chosen) || href;
+    const markup = `[${label}](${href})`;
+    return {
+      value: src.slice(0, start) + markup + src.slice(end),
+      // Leaves the LABEL selected, so typing replaces the link text rather
+      // than the markup around it.
+      selection: { start: start + 1, end: start + 1 + label.length },
+    };
+  };
+}
+
+// A table is a block, so it needs its own lines: a blank line before keeps it
+// from fusing with the paragraph the caret was in.
+function tableOp() {
+  return (text, selection) => {
+    const { src, start, end } = readRange(text, selection);
+    const before = src.slice(0, start);
+    const after = src.slice(end);
+    const lead =
+      before.length === 0 || before.endsWith("\n\n")
+        ? ""
+        : before.endsWith("\n")
+          ? "\n"
+          : "\n\n";
+    const trail = after.startsWith("\n") ? "" : "\n";
+
+    const skeleton = formatMarkdownTable();
+    const offset = before.length + lead.length;
+    return {
+      value: before + lead + skeleton + trail + after,
+      // Selects the first header cell, so the author types over "Column 1"
+      // instead of hunting for the caret inside the pipes.
+      selection: {
+        start: offset + 2,
+        end: offset + 2 + FIRST_HEADING.length,
+      },
+    };
+  };
+}
+
 export const markdownEditOps = Object.freeze({
   bold: wrap("**"),
   italic: wrap("*"),
@@ -94,4 +159,6 @@ export const markdownEditOps = Object.freeze({
   heading3: linePrefix("heading3"),
   bullet: linePrefix("bullet"),
   ordered: linePrefix("ordered"),
+  link: linkOp(),
+  table: tableOp(),
 });

package/dist/markdown-input-view.js

@@ -13,6 +13,7 @@ import React from "react";
 import { useHostTheme } from "./hooks.js";
 import { resolveRichTextTokens } from "./richtext-tokens.js";
 import { markdownEditOps } from "./markdown-edit.js";
+import { makeMarkdownLinkDialog } from "./markdown-link-dialog.js";
 
 const TOOLS = Object.freeze([
   { key: "bold", label: "B", accessibilityLabel: "Bold", weight: "700" },
@@ -22,10 +23,20 @@ const TOOLS = Object.freeze([
   { key: "heading3", label: "H3", accessibilityLabel: "Subheading" },
   { key: "bullet", label: "•", accessibilityLabel: "Bulleted list" },
   { key: "ordered", label: "1.", accessibilityLabel: "Numbered list" },
+  { key: "table", label: "Table", accessibilityLabel: "Insert table" },
+  // sc-7349: the one tool a selection cannot complete — a link needs a target,
+  // so this button opens the form instead of editing the string directly.
+  {
+    key: "link",
+    label: "Link",
+    accessibilityLabel: "Insert link",
+    opensDialog: true,
+  },
 ]);
 
-export function makeMarkdownInput(rn, RichText) {
+export function makeMarkdownInput(rn, RichText, Overlay) {
   const { Text, View, Pressable, TextInput } = rn;
+  const MarkdownLinkDialog = makeMarkdownLinkDialog(rn, Overlay);
 
   function MarkdownInput({
     value,
@@ -34,6 +45,7 @@ export function makeMarkdownInput(rn, RichText) {
     previewLabel = "Preview",
     showPreview = true,
     renderImage,
+    pages,
     minHeight = 150,
     maxHeight = 280,
     accessibilityLabel,
@@ -43,6 +55,7 @@ export function makeMarkdownInput(rn, RichText) {
     const theme = useHostTheme();
     const tokens = React.useMemo(() => resolveRichTextTokens(theme), [theme]);
     const [selection, setSelection] = React.useState({ start: 0, end: 0 });
+    const [linkOpen, setLinkOpen] = React.useState(false);
 
     const text = typeof value === "string" ? value : "";
 
@@ -52,17 +65,43 @@ export function makeMarkdownInput(rn, RichText) {
     }, []);
 
     const applyTool = React.useCallback(
-      (toolKey) => {
+      (toolKey, options) => {
         if (typeof onChange !== "function") return;
         const edit = markdownEditOps[toolKey];
         if (!edit) return;
-        const next = edit(text, selection);
+        const next = edit(text, selection, options);
         onChange(next.value);
         setSelection(next.selection);
       },
       [onChange, text, selection],
     );
 
+    const pressTool = React.useCallback(
+      (tool) => {
+        if (tool.opensDialog) {
+          setLinkOpen(true);
+          return;
+        }
+        applyTool(tool.key);
+      },
+      [applyTool],
+    );
+
+    const insertLink = React.useCallback(
+      (result) => {
+        setLinkOpen(false);
+        applyTool("link", result);
+      },
+      [applyTool],
+    );
+
+    // The selection seeds the dialog's Link text, so highlighting a phrase and
+    // pressing Link keeps that phrase as the label.
+    const selected = text.slice(
+      Math.min(selection.start, selection.end),
+      Math.max(selection.start, selection.end),
+    );
+
     const fieldStyle = {
       fontFamily: tokens.bodyFont,
       fontSize: tokens.bodySize,
@@ -96,7 +135,7 @@ export function makeMarkdownInput(rn, RichText) {
             Pressable,
             {
               key: tool.key,
-              onPress: () => applyTool(tool.key),
+              onPress: () => pressTool(tool),
               accessibilityRole: "button",
               accessibilityLabel: tool.accessibilityLabel,
               testID: testID ? `${testID}-${tool.key}` : undefined,
@@ -159,10 +198,23 @@ export function makeMarkdownInput(rn, RichText) {
             React.createElement(RichText, {
               value: text,
               renderImage,
+              // sc-7349: the preview shows the reader's document, but a tap
+              // must NOT leave the page — that would throw away the draft the
+              // author is still writing.
+              followLinks: false,
               testID: testID ? `${testID}-preview` : undefined,
             }),
           )
         : null,
+      React.createElement(MarkdownLinkDialog, {
+        visible: linkOpen,
+        onClose: () => setLinkOpen(false),
+        onSubmit: insertLink,
+        tokens,
+        pages,
+        initialLabel: selected,
+        testID,
+      }),
     );
   }
 

package/dist/markdown-input.js

@@ -5,5 +5,6 @@
 import * as ReactNative from "react-native-web";
 import { makeMarkdownInput } from "./markdown-input-view.js";
 import { RichText } from "./richtext.js";
+import { Overlay } from "./overlay.js";
 
-export const MarkdownInput = makeMarkdownInput(ReactNative, RichText);
+export const MarkdownInput = makeMarkdownInput(ReactNative, RichText, Overlay);

package/dist/markdown-input.native.js

@@ -2,11 +2,15 @@
 // ./markdown-input-view.js to React Native's own primitives and the native
 // `<RichText>`. Only the imports differ from the web mirror.
 
-import { Text, View, Pressable, TextInput } from "react-native";
+import { Text, View, Pressable, TextInput, ScrollView } from "react-native";
 import { makeMarkdownInput } from "./markdown-input-view.js";
 import { RichText } from "./richtext.native.js";
+import { Overlay } from "./overlay.native.js";
 
+// sc-7349: ScrollView joins the set for the link form's page list, which must
+// scroll rather than grow an app's every page past the panel.
 export const MarkdownInput = makeMarkdownInput(
-  { Text, View, Pressable, TextInput },
+  { Text, View, Pressable, TextInput, ScrollView },
   RichText,
+  Overlay,
 );

package/dist/markdown-link-dialog.js

@@ -0,0 +1,291 @@
+// sc-7349 — the link form `<MarkdownInput>`'s Link button opens.
+//
+// A link needs a TARGET, and no selection can supply one: the author has to
+// name either a page in this app or an external address. That is a form, and a
+// form belongs in an `<Overlay>` — the SDK primitive that escapes the widget's
+// own clipping box on both hosts — not in a bespoke absolutely-positioned panel
+// the layout container would crop.
+//
+// Split out of markdown-input-view.js so each file stays one component's worth
+// of markup. Like every view module here it is bound per host by the caller
+// (see markdown-input.js / .native.js), so the two hosts cannot drift.
+
+import React from "react";
+
+// The page list scrolls rather than growing an app's 40 pages past the panel.
+const PAGE_LIST_MAX_HEIGHT = 180;
+
+export function makeMarkdownLinkDialog(rn, Overlay) {
+  const { Text, View, Pressable, TextInput, ScrollView } = rn;
+
+  function Field({ label, tokens, children }) {
+    return React.createElement(
+      View,
+      { style: { marginBottom: tokens.blockGap } },
+      React.createElement(
+        Text,
+        {
+          style: {
+            fontFamily: tokens.bodyFont,
+            fontSize: tokens.codeSize,
+            color: tokens.mutedColor,
+            marginBottom: tokens.markerGap,
+          },
+        },
+        label,
+      ),
+      children,
+    );
+  }
+
+  /**
+   * @param {object} props
+   * @param {boolean} props.visible
+   * @param {() => void} props.onClose
+   * @param {(result: {label: string, target: string}) => void} props.onSubmit
+   * @param {object} props.tokens — resolveRichTextTokens output.
+   * @param {Array<{id: string, name: string}>} props.pages — pickable pages;
+   *   empty means this host offered none, so only the URL mode is shown.
+   * @param {string} props.initialLabel — the author's current selection.
+   * @param {string} [props.testID]
+   */
+  function MarkdownLinkDialog({
+    visible,
+    onClose,
+    onSubmit,
+    tokens,
+    pages,
+    initialLabel,
+    testID,
+  }) {
+    const pageList = Array.isArray(pages) ? pages.filter((p) => p && p.id) : [];
+    const canPickPage = pageList.length > 0;
+
+    const [label, setLabel] = React.useState("");
+    const [url, setUrl] = React.useState("");
+    const [pageId, setPageId] = React.useState("");
+    const [mode, setMode] = React.useState("url");
+
+    // Re-seed on each open: the author's selection and the mode they should
+    // land in are both properties of THIS opening, not of the component.
+    React.useEffect(() => {
+      if (!visible) return;
+      setLabel(typeof initialLabel === "string" ? initialLabel : "");
+      setUrl("");
+      setPageId("");
+      setMode(canPickPage ? "page" : "url");
+    }, [visible, initialLabel, canPickPage]);
+
+    const target = mode === "page" ? pageId : url.trim();
+
+    const submit = () => {
+      if (!target) return;
+      if (typeof onSubmit === "function") onSubmit({ label, target });
+    };
+
+    const inputStyle = {
+      fontFamily: tokens.bodyFont,
+      fontSize: tokens.bodySize,
+      color: tokens.color,
+      backgroundColor: tokens.surface,
+      borderWidth: 1,
+      borderColor: tokens.border,
+      borderRadius: tokens.radius,
+      padding: tokens.markerGap,
+    };
+
+    const tab = (key, text) =>
+      React.createElement(
+        Pressable,
+        {
+          key,
+          onPress: () => setMode(key),
+          // RNW 0.21.2 drops the a11y state prop, so the chosen tab was
+          // legible only as a fill colour (sc-6350). role + aria-* announces
+          // on both hosts; aria-selected needs role="tab", not "button".
+          accessibilityRole: "tab",
+          "aria-selected": mode === key,
+          testID: testID ? `${testID}-mode-${key}` : undefined,
+          style: {
+            paddingVertical: tokens.markerGap,
+            paddingHorizontal: tokens.padding,
+            marginRight: tokens.markerGap,
+            borderWidth: 1,
+            borderColor: mode === key ? tokens.accent : tokens.border,
+            borderRadius: tokens.radius,
+            ...(mode === key ? { backgroundColor: tokens.accent } : null),
+          },
+        },
+        React.createElement(
+          Text,
+          {
+            style: {
+              fontFamily: tokens.bodyFont,
+              fontSize: tokens.codeSize,
+              fontWeight: "500",
+              color: mode === key ? tokens.onAccent : tokens.color,
+            },
+          },
+          text,
+        ),
+      );
+
+    const action = (key, text, { primary, disabled, onPress }) =>
+      React.createElement(
+        Pressable,
+        {
+          key,
+          onPress,
+          disabled,
+          accessibilityRole: "button",
+          testID: testID ? `${testID}-${key}` : undefined,
+          style: {
+            paddingVertical: tokens.markerGap,
+            paddingHorizontal: tokens.padding,
+            marginLeft: tokens.markerGap,
+            borderWidth: 1,
+            borderColor: primary ? tokens.accent : tokens.border,
+            borderRadius: tokens.radius,
+            opacity: disabled ? 0.5 : 1,
+            ...(primary ? { backgroundColor: tokens.accent } : null),
+          },
+        },
+        React.createElement(
+          Text,
+          {
+            style: {
+              fontFamily: tokens.bodyFont,
+              fontSize: tokens.codeSize,
+              fontWeight: "500",
+              color: primary ? tokens.onAccent : tokens.color,
+            },
+          },
+          text,
+        ),
+      );
+
+    return React.createElement(
+      Overlay,
+      {
+        visible: !!visible,
+        onRequestClose: onClose,
+        size: "sm",
+        accessibilityLabel: "Insert link",
+        testID: testID ? `${testID}-dialog` : undefined,
+      },
+      React.createElement(
+        Field,
+        { label: "Link text", tokens },
+        React.createElement(TextInput, {
+          value: label,
+          onChangeText: setLabel,
+          placeholder: "Text the reader sees",
+          placeholderTextColor: tokens.mutedColor,
+          accessibilityLabel: "Link text",
+          style: inputStyle,
+          testID: testID ? `${testID}-label` : undefined,
+        }),
+      ),
+
+      // With no pages to offer there is nothing to choose between, so the
+      // switcher is hidden rather than shown with one dead option.
+      canPickPage
+        ? React.createElement(
+            View,
+            {
+              accessibilityRole: "tablist",
+              style: { flexDirection: "row", marginBottom: tokens.blockGap },
+            },
+            tab("page", "A page in this app"),
+            tab("url", "An external URL"),
+          )
+        : null,
+
+      mode === "page" && canPickPage
+        ? React.createElement(
+            Field,
+            { label: "Page", tokens },
+            React.createElement(
+              ScrollView,
+              {
+                accessibilityRole: "radiogroup",
+                style: {
+                  maxHeight: PAGE_LIST_MAX_HEIGHT,
+                  borderWidth: 1,
+                  borderColor: tokens.border,
+                  borderRadius: tokens.radius,
+                },
+                testID: testID ? `${testID}-pages` : undefined,
+              },
+              pageList.map((page) =>
+                React.createElement(
+                  Pressable,
+                  {
+                    key: page.id,
+                    onPress: () => setPageId(page.id),
+                    accessibilityRole: "radio",
+                    "aria-checked": pageId === page.id,
+                    style: {
+                      padding: tokens.markerGap,
+                      ...(pageId === page.id
+                        ? { backgroundColor: tokens.surface }
+                        : null),
+                    },
+                  },
+                  React.createElement(
+                    Text,
+                    {
+                      style: {
+                        fontFamily: tokens.bodyFont,
+                        fontSize: tokens.bodySize,
+                        color: pageId === page.id ? tokens.accent : tokens.color,
+                        fontWeight: pageId === page.id ? "700" : "400",
+                      },
+                    },
+                    page.name || page.id,
+                  ),
+                ),
+              ),
+            ),
+          )
+        : React.createElement(
+            Field,
+            { label: "Address", tokens },
+            React.createElement(TextInput, {
+              value: url,
+              onChangeText: setUrl,
+              placeholder: "https://example.com",
+              placeholderTextColor: tokens.mutedColor,
+              accessibilityLabel: "Link address",
+              autoCapitalize: "none",
+              autoCorrect: false,
+              keyboardType: "url",
+              style: inputStyle,
+              testID: testID ? `${testID}-url` : undefined,
+            }),
+          ),
+
+      React.createElement(
+        View,
+        {
+          style: {
+            flexDirection: "row",
+            justifyContent: "flex-end",
+            marginTop: tokens.markerGap,
+          },
+        },
+        action("cancel", "Cancel", { onPress: onClose }),
+        // Disabled until there is somewhere to go — an empty target would
+        // write `[text]()`, which reads as a link and goes nowhere.
+        action("insert", "Insert link", {
+          primary: true,
+          disabled: !target,
+          onPress: submit,
+        }),
+      ),
+    );
+  }
+
+  MarkdownLinkDialog.displayName = "MarkdownLinkDialog";
+  return MarkdownLinkDialog;
+}

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.1",
+  "version": "0.134.1",
   "description": "Common widget interface for AppStudio. Implements WidgetManifest, WidgetContext, property schema, and helper hooks.",
   "homepage": "https://github.com/Colix-AB/AppStudio",
   "type": "module",