@colixsystems/widget-sdk 0.275.2 → 0.276.0

package/README.md

@@ -86,7 +86,11 @@ See the design reference for the full architecture: [`docs/architecture/widget-m
 
 ## Status
 
-`v0.275.2` — 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.276.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.276.0 (contract 1.226.0)
+
+**`<MarkdownInput>` edits the formatted result directly.** The field is now a rich-text editor: headings, bold, italic, code, links, bulleted and numbered lists and real tables appear as they will read, with no markdown markers in view. The toolbar applies formatting to the selection, the Table button inserts a real table, and while the caret is in one the toolbar adds buttons to add or remove rows and columns or delete it, and typing `## `, `- `, `1. ` or `**bold**` formats as you type. The value is still markdown in the `<RichText>` grammar, so stored content and `<RichText>` output are unchanged; loading a value never rewrites it, and an edit writes each construct in its canonical spelling. On iOS and Android the editor runs in a WebView from a page bundled into the SDK, so it needs no network. `showPreview`, `previewLabel` and `renderImage` are still accepted and ignored. Nothing to change in a widget that uses it.
 
 ### What's new in 0.275.2
 
@@ -2180,7 +2184,7 @@ Content is **markdown text** now: one primitive authors it, the other renders it
 <RichText value={post.body} />
 ```
 
-`<MarkdownInput>` is a multi-line field, a toolbar whose buttons wrap the current **selection** in markdown markers (bold, italic, code, H2, H3, bullets, numbered list — pressing one again toggles it back off), and a live `<RichText>` preview of the result underneath. `previewLabel` defaults to `Preview` and `showPreview` to `true`; `minHeight` (150) and `maxHeight` (280) give the field a floor and a ceiling, so a long draft scrolls inside its box instead of growing past its card. Reach for it instead of a bare `TextInput` plus hand-rolled formatting buttons, which can only splice literal tags into the text.
+`<MarkdownInput>` is a rich-text field where the author edits the formatted result directly — headings, bold, italic, code, links, bulleted and numbered lists and real tables, with no markdown markers in view — plus a toolbar (bold, italic, code, H2, H3, bullets, numbered list, each toggling back off), a Table button and a Link button. The value it reads and writes is markdown in the `<RichText>` grammar below; loading a value never rewrites it. `minHeight` (150) and `maxHeight` (280) bound the field: it grows with its content between them, then scrolls inside its box instead of growing past its card. Don't put a `<RichText>` preview under it — the field already shows the result. Reach for it instead of a bare `TextInput` plus hand-rolled formatting buttons, which can only splice literal tags into the text.
 
 `<RichText>` parses the subset — `**bold**`, `*italic*` / `_italic_`, `` `code` ``, `#`/`##`/`###` headings, `-`/`*` bullets, `1.` ordered items, and one-line `![alt](src "large")` images — and renders it with SDK primitives, so formatted content reads the same in the web Player and the exported Expo app. Colour, type scale and leading come from the workspace theme; never re-style them. Pass `renderImage` (`({ src, alt, size }) => node`) when images are filestore ids, because resolving one needs the scopes your own widget holds — without it only absolute `http(s)` URLs render. HTML is never interpreted: stored text that still holds markup is stripped to plain text rather than shown as tags.
 
@@ -3348,7 +3352,7 @@ import { defineWidget, validateManifest, useDatastoreQuery, Text, View } from "@
 - `ConfirmDialog` — the standard confirmation prompt, a preset of `Modal` and `Button`. `<ConfirmDialog visible={asking} tone="destructive" title="Delete this order?" message="This cannot be undone." confirmLabel="Delete" onCancel={() => setAsking(false)} onConfirm={removeOrder} />` asks before a delete or any other action that cannot be undone. Cancel, the close button, the backdrop, Escape and the Android back button fire `onCancel`; a promise returned from `onConfirm` keeps it busy (buttons disabled, a second press ignored) until it settles. Props: `visible`, `title`, `message`, `confirmLabel`, `cancelLabel`, `tone` (`default` | `destructive`), `busy`, `onConfirm`, `onCancel`, `closeAccessibilityLabel`, `testID`. Use it instead of building a confirmation from `Modal` yourself.
 - `Modal` — the standard dialog, built on `Overlay`. `<Modal visible={open} onRequestClose={() => setOpen(false)} title="Edit order" footer={<Button title="Save" onPress={save} />}>…</Modal>` draws a title, a close button, a body that scrolls when it is long and a footer action row laid out below it. Its background, corner radius, padding, scrim, shadow and title colour come from the theme's `modal` scope (Design > Components > Dialogs), so every dialog in an app matches. Props: `visible`, `onRequestClose`, `dismissible`, `title`, `footer`, `presentation` (`dialog` | `sheet`), `size` (`sm` | `md` | `lg` | `full`), `dismissOnBackdropPress`, `role`, `initialFocusRef`, `closeAccessibilityLabel`, `accessibilityLabel`, `testID`. Use it for every dialog instead of hand-building a header and an action row inside `Overlay`.
 - `RichText` — the formatted-content renderer. `<RichText value={post.body} />` parses the markdown subset (`**bold**`, `*italic*` / `_italic_`, `` `code` ``, `#`/`##`/`###` headings, `-`/`*` bullets, `1.` ordered items, one-line `![alt](src "large")` images) and renders it with SDK primitives, so formatted content reads the same in the web Player and the exported Expo app. `value` is markdown, NOT HTML — widgets have no `dangerouslySetInnerHTML` on either host, so tags in a content string render as literal tag soup; stored text that still holds legacy HTML is stripped to plain text rather than shown as markup. Props: `value`, `renderImage` (`({ src, alt, size }) => node` — supply it when images are filestore ids, because resolving one needs the scopes your own widget holds; without it only absolute `http(s)` URLs render), `style`, `testID`. Colour, type scale and leading come from the workspace theme — never re-style them.
-- `MarkdownInput` — the authoring half of `<RichText>`. `<MarkdownInput value={draft} onChange={setDraft} />` is a multi-line field, a toolbar whose buttons wrap the current SELECTION in markdown markers (bold, italic, code, H2, H3, bullets, numbered list, each toggling back off), and a live `<RichText>` preview of the result underneath — the way to let an app USER write formatted text, instead of a bare `TextInput` plus hand-rolled buttons that can only splice literal tags into the value. Props: `value`, `onChange(next)`, `placeholder`, `previewLabel` (default `Preview`), `showPreview` (default true), `renderImage` (passed through to the preview), `minHeight` (150) and `maxHeight` (280) so a long draft scrolls inside its box, `accessibilityLabel`, `style`, `testID`.
+- `MarkdownInput` — the authoring half of `<RichText>`. `<MarkdownInput value={draft} onChange={setDraft} />` is a rich-text field where the author edits the formatted result directly (headings, emphasis, code, links, lists and real tables), with a toolbar, a Table button and a Link button — the way to let an app USER write formatted text, instead of a bare `TextInput` plus hand-rolled buttons that can only splice literal tags into the value. The value stays markdown. Props: `value`, `onChange(next)`, `placeholder`, `pages` (offered by name in the Link form), `minHeight` (150) and `maxHeight` (280) — it grows between them, then scrolls — `accessibilityLabel`, `style`, `testID`. `showPreview`, `previewLabel` and `renderImage` are accepted and ignored.
 - `parseMarkdown`, `markdownToPlainText`, `parseMarkdownImage`, `formatMarkdownImage`, `stripHtmlToMarkdown`, `MARKDOWN_IMAGE_SIZES` — the same grammar as pure helpers, for content you inspect rather than render: the block list, a marker-free projection (list previews, search, a11y labels), the one-line image form read and written, a legacy-HTML row normalised to markdown on read, and the closed size list (`small` | `medium` | `large` | `full`).
 - `isSafeMarkdownImageSrc`, `isHttpImageSrc`, `normaliseMarkdownImageSize`, `readMarkdownAlt` — the image half of that grammar, for a widget rendering images itself via `renderImage`. `isSafeMarkdownImageSrc` is the same allowlist the parser applies (an `http(s)` URL or a filestore id; a `javascript:` scheme is refused), so the widget and the parser cannot disagree about which src is renderable.
 - `List`, `ListRow`, `ListHeader`, `EmptyState` — the themed list building blocks. `<ListRow title subtitle leading trailing onPress selected divider>` draws one record row from the theme's `list` scope (padding, height, gap, radius, background, divider); `<List>` spaces its rows and hands overrides down; `<ListHeader>` labels a table's columns on the rows' own inset; `<EmptyState icon title message>` is the "nothing here" panel. Use them by default for record rows and a table's header; build your own row when it needs what `ListRow` cannot do (a swipe-to-delete row, a row that expands in place).

package/dist/contract.cjs

@@ -3467,13 +3467,13 @@ const PRIMITIVES = [
     rnComponent: null,
     docsUrl: null,
   },
-  // sc-6970 — formatted content, authored. The authoring half of `<RichText>`:
-  // a real selection-aware toolbar plus a live preview, so a generated widget
-  // never has to splice HTML tags into a plain TextInput again.
+  // sc-6970 — formatted content, authored. The authoring half of `<RichText>`,
+  // so a generated widget never has to splice HTML tags into a plain TextInput
+  // again. sc-15080: the field edits the formatted result directly.
   {
     name: "MarkdownInput",
     description:
-      'Formatted-content editor. `<MarkdownInput value={draft} onChange={setDraft} />`. The default way to let an app USER write formatted text: a multi-line field that styles the markdown live as the user types (headings sized, bold, italic, code and links drawn in place, the markers kept in the text but dimmed), so the user reads and edits the result in one place; 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; and a Link button that opens a form for the link text plus its target. Use it rather than a bare `TextInput` plus formatting buttons of your own; an editor you do build (one that only bolds, a checklist editor) still stores markdown markers and previews with `<RichText>` — 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, exactly as typed. Props: `value`, `onChange(next)`, `placeholder`, `showPreview` (default false; true also draws a rendered `<RichText>` copy underneath, for content the field can only show as markers: images and tables), `previewLabel` (default "Preview", the heading above that copy), `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.',
+      "Formatted-content editor. `<MarkdownInput value={draft} onChange={setDraft} />`. The default way to let an app USER write formatted text: a rich-text field where the user edits the FORMATTED RESULT directly — headings, bold, italic, code, links, bulleted and numbered lists and real tables are shown as they will read, with no markdown markers in view — plus a toolbar (bold, italic, code, H2, H3, bullets, numbered list), a Table button that inserts a real table, with buttons to add or remove rows and columns or delete the table while the caret is in one, and a Link button that opens a form for the link text plus its target. Typing `## `, `- `, `1. `, `**bold**` or `*italic*` formats as you type. Use it rather than a bare `TextInput` plus formatting buttons of your own, and do NOT add a `<RichText>` preview under it: the field already shows the result; an editor you do build (one that only bolds, a checklist editor) still stores markdown markers and previews with `<RichText>` — buttons that splice `<strong>`/`<br>`/`<table>` tags into the string leave the author reading tag soup. The stored value is markdown text in the `<RichText>` grammar; loading a value never rewrites it, and an edit writes each construct in its canonical spelling. On iOS and Android the field runs in a WebView bundled into the SDK (no network). Props: `value`, `onChange(next)`, `placeholder`, `pages` (optional `[{ id, name }]` — supply it and the Link form offers those pages to link to by name; 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) — the field grows with its content between them, then scrolls — `accessibilityLabel`, `style`, `testID`. `showPreview`, `previewLabel` and `renderImage` are still accepted and ignored. Images show inside the field when their source is an http(s) URL and as a labelled placeholder when it is a filestore id. Links in the field are inert, so a tap while editing cannot navigate away from the draft.",
     rnComponent: null,
     docsUrl: null,
   },
@@ -6573,7 +6573,10 @@ const CONTRACT = deepFreeze({
   //    ships a hand-written `sv` value beside `en`.
   // 1.225.0: behaviour (sc-14974) — `<MarkdownInput>` styles its own field
   //    live; `showPreview` now defaults to false.
-  version: "1.225.0",
+  // 1.226.0: behaviour (sc-15080) — `<MarkdownInput>` is a rich-text editor
+  //    showing the formatted result; `showPreview`, `previewLabel` and
+  //    `renderImage` are accepted and ignored.
+  version: "1.226.0",
   sharedTranslationKeys: SHARED_TRANSLATION_KEYS,
   hooks: HOOKS,
   primitives: PRIMITIVES,

package/dist/contract.js

@@ -3464,13 +3464,13 @@ const PRIMITIVES = [
     rnComponent: null,
     docsUrl: null,
   },
-  // sc-6970 — formatted content, authored. The authoring half of `<RichText>`:
-  // a real selection-aware toolbar plus a live preview, so a generated widget
-  // never has to splice HTML tags into a plain TextInput again.
+  // sc-6970 — formatted content, authored. The authoring half of `<RichText>`,
+  // so a generated widget never has to splice HTML tags into a plain TextInput
+  // again. sc-15080: the field edits the formatted result directly.
   {
     name: "MarkdownInput",
     description:
-      'Formatted-content editor. `<MarkdownInput value={draft} onChange={setDraft} />`. The default way to let an app USER write formatted text: a multi-line field that styles the markdown live as the user types (headings sized, bold, italic, code and links drawn in place, the markers kept in the text but dimmed), so the user reads and edits the result in one place; 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; and a Link button that opens a form for the link text plus its target. Use it rather than a bare `TextInput` plus formatting buttons of your own; an editor you do build (one that only bolds, a checklist editor) still stores markdown markers and previews with `<RichText>` — 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, exactly as typed. Props: `value`, `onChange(next)`, `placeholder`, `showPreview` (default false; true also draws a rendered `<RichText>` copy underneath, for content the field can only show as markers: images and tables), `previewLabel` (default "Preview", the heading above that copy), `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.',
+      "Formatted-content editor. `<MarkdownInput value={draft} onChange={setDraft} />`. The default way to let an app USER write formatted text: a rich-text field where the user edits the FORMATTED RESULT directly — headings, bold, italic, code, links, bulleted and numbered lists and real tables are shown as they will read, with no markdown markers in view — plus a toolbar (bold, italic, code, H2, H3, bullets, numbered list), a Table button that inserts a real table, with buttons to add or remove rows and columns or delete the table while the caret is in one, and a Link button that opens a form for the link text plus its target. Typing `## `, `- `, `1. `, `**bold**` or `*italic*` formats as you type. Use it rather than a bare `TextInput` plus formatting buttons of your own, and do NOT add a `<RichText>` preview under it: the field already shows the result; an editor you do build (one that only bolds, a checklist editor) still stores markdown markers and previews with `<RichText>` — buttons that splice `<strong>`/`<br>`/`<table>` tags into the string leave the author reading tag soup. The stored value is markdown text in the `<RichText>` grammar; loading a value never rewrites it, and an edit writes each construct in its canonical spelling. On iOS and Android the field runs in a WebView bundled into the SDK (no network). Props: `value`, `onChange(next)`, `placeholder`, `pages` (optional `[{ id, name }]` — supply it and the Link form offers those pages to link to by name; 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) — the field grows with its content between them, then scrolls — `accessibilityLabel`, `style`, `testID`. `showPreview`, `previewLabel` and `renderImage` are still accepted and ignored. Images show inside the field when their source is an http(s) URL and as a labelled placeholder when it is a filestore id. Links in the field are inert, so a tap while editing cannot navigate away from the draft.",
     rnComponent: null,
     docsUrl: null,
   },
@@ -6570,7 +6570,10 @@ const CONTRACT = deepFreeze({
   //    ships a hand-written `sv` value beside `en`.
   // 1.225.0: behaviour (sc-14974) — `<MarkdownInput>` styles its own field
   //    live; `showPreview` now defaults to false.
-  version: "1.225.0",
+  // 1.226.0: behaviour (sc-15080) — `<MarkdownInput>` is a rich-text editor
+  //    showing the formatted result; `showPreview`, `previewLabel` and
+  //    `renderImage` are accepted and ignored.
+  version: "1.226.0",
   sharedTranslationKeys: SHARED_TRANSLATION_KEYS,
   hooks: HOOKS,
   primitives: PRIMITIVES,

package/dist/index.d.ts

@@ -5711,12 +5711,13 @@ export const RichText: (props: {
 }) => any;
 
 /**
- * sc-6970 — the authoring half of `<RichText>`: a multi-line field whose
- * toolbar wraps the current selection in markdown markers. sc-14974: the field
- * styles the markdown as it is typed, markers dimmed, so the author edits the
- * formatted text directly. Use it instead of a bare `TextInput` plus
- * hand-rolled formatting buttons, which can only splice literal tags into the
- * text.
+ * sc-6970 — the authoring half of `<RichText>`. sc-15080: a rich-text field
+ * where the author edits the formatted result directly — headings, emphasis,
+ * code, links, lists and real tables — with a formatting toolbar, while the
+ * value stays markdown in the `<RichText>` grammar. Loading a value never
+ * rewrites it. On iOS and Android the field runs in a bundled WebView. Use it
+ * instead of a bare `TextInput` plus hand-rolled formatting buttons, which can
+ * only splice literal tags into the text.
  *
  * @example
  *   <MarkdownInput value={draft} onChange={setDraft} placeholder="Write…" />
@@ -5727,14 +5728,13 @@ export const MarkdownInput: (props: {
   /** Receives the next markdown string on every edit. */
   onChange?: (next: string) => void;
   placeholder?: string;
-  /** Heading above the rendered preview. Defaults to "Preview". */
+  /** The app's pages, offered by name in the Link form. */
+  pages?: ReadonlyArray<{ id: string; name: string }>;
+  /** @deprecated Ignored: the field shows the formatted result itself. */
   previewLabel?: string;
-  /**
-   * Also draw a rendered `<RichText>` copy under the field, for images and
-   * tables the field shows only as markers. Defaults to false.
-   */
+  /** @deprecated Ignored: the field shows the formatted result itself. */
   showPreview?: boolean;
-  /** Passed through to the preview's `<RichText>`. */
+  /** @deprecated Ignored: the field shows the formatted result itself. */
   renderImage?: (block: {
     src: string;
     alt: string;
@@ -5742,7 +5742,7 @@ export const MarkdownInput: (props: {
   }) => ReactNode;
   /** Field floor, so it opens at a usable height. Defaults to 150. */
   minHeight?: number;
-  /** Field ceiling, so it scrolls internally instead of growing. Defaults to 280. */
+  /** The field grows with its content up to this, then scrolls. Defaults to 280. */
   maxHeight?: number;
   accessibilityLabel?: string;
   style?: any;

package/dist/markdown-doc.js

@@ -0,0 +1,209 @@
+// sc-15080 — the bridge between the markdown subset and the editor's document.
+//
+// `<MarkdownInput>` edits a rich document but stores markdown, so `<RichText>`,
+// saved rows and every widget's `value`/`onChange` stay as they were. Reading
+// goes through `parseMarkdown`, the SAME grammar `<RichText>` renders, so the
+// editor can never show a construct differently from the reader (CLAUDE.md §3).
+// Writing emits the canonical spelling of each construct; a value the author
+// never edits is never re-written.
+//
+// Pure and DOM-free: both hosts' editors and the unit tests import it.
+
+import {
+  parseMarkdown,
+  formatMarkdownImage,
+  escapeMarkdownLabel,
+} from "./markdown.js";
+
+const textNode = (text, marks) =>
+  marks.length > 0 ? { type: "text", text, marks } : { type: "text", text };
+
+function inlineContent(spans) {
+  const nodes = [];
+  for (const span of spans || []) {
+    if (!span.text) continue;
+    const marks = [];
+    if (span.bold) marks.push({ type: "bold" });
+    if (span.italic) marks.push({ type: "italic" });
+    if (span.code) marks.push({ type: "code" });
+    if (span.href) marks.push({ type: "link", attrs: { href: span.href } });
+    nodes.push(textNode(span.text, marks));
+  }
+  return nodes;
+}
+
+const paragraph = (spans) => {
+  const content = inlineContent(spans);
+  return content.length > 0 ? { type: "paragraph", content } : { type: "paragraph" };
+};
+
+function tableNode(block) {
+  const width = Math.max(1, ...block.rows.map((row) => row.cells.length));
+  const rows = block.rows.map((row) => {
+    const cells = [];
+    for (let i = 0; i < width; i += 1) {
+      cells.push({
+        type: row.header ? "tableHeader" : "tableCell",
+        content: [paragraph(row.cells[i])],
+      });
+    }
+    return { type: "tableRow", content: cells };
+  });
+  const align = [];
+  for (let i = 0; i < width; i += 1) align.push(block.align[i] || null);
+  return { type: "table", attrs: { align }, content: rows };
+}
+
+const ordinal = (marker) => Number.parseInt(marker, 10) || 1;
+
+/**
+ * Markdown text → the editor's ProseMirror JSON document. `options` go to
+ * `parseMarkdown`; the editor passes `stripLegacyHtml: false`, because the
+ * strip would delete text like `Promise<void>` the author typed.
+ */
+export function markdownToDoc(text, options) {
+  const content = [];
+  let list = null;
+  for (const block of parseMarkdown(text, options)) {
+    const listType = block.type === "bullet" ? "bulletList" : block.type === "ordered" ? "orderedList" : null;
+    if (listType) {
+      if (!list || list.type !== listType) {
+        list = { type: listType, content: [] };
+        if (listType === "orderedList") list.attrs = { start: ordinal(block.marker) };
+        content.push(list);
+      }
+      list.content.push({ type: "listItem", content: [paragraph(block.spans)] });
+      continue;
+    }
+    list = null;
+    if (block.type === "heading") {
+      content.push({ type: "heading", attrs: { level: block.level }, content: inlineContent(block.spans) });
+    } else if (block.type === "paragraph") {
+      content.push(paragraph(block.spans));
+    } else if (block.type === "table") {
+      content.push(tableNode(block));
+    } else if (block.type === "image") {
+      content.push({ type: "image", attrs: { src: block.src, alt: block.alt, title: block.size } });
+    } else if (block.type === "code") {
+      content.push({
+        type: "codeBlock",
+        attrs: { language: block.lang || null },
+        ...(block.text ? { content: [{ type: "text", text: block.text }] } : null),
+      });
+    }
+  }
+  return { type: "doc", content: content.length > 0 ? content : [{ type: "paragraph" }] };
+}
+
+const markOf = (node, type) => (node.marks || []).find((mark) => mark.type === type);
+
+// The grammar's emphasis cannot open or close next to whitespace, so edge
+// spaces move outside the markers instead of breaking the construct.
+function wrap(text, marker) {
+  const lead = /^\s*/.exec(text)[0];
+  const trail = /\s*$/.exec(text.slice(lead.length))[0];
+  const core = text.slice(lead.length, text.length - trail.length);
+  return core ? `${lead}${marker}${core}${marker}${trail}` : text;
+}
+
+function styledText(node, inTable) {
+  let text = node.text || "";
+  if (inTable) text = text.replace(/\|/g, "\\|");
+  if (markOf(node, "code")) return wrap(text.replace(/`/g, "'"), "`");
+  if (markOf(node, "bold")) return wrap(text, "**");
+  if (markOf(node, "italic")) return wrap(text, "*");
+  return text;
+}
+
+// The grammar ends a target at whitespace or `)`, and a table cell at `|`.
+const linkTarget = (href) =>
+  String(href || "").replace(/[\s|()<>]/g, (char) => `%${char.charCodeAt(0).toString(16).toUpperCase().padStart(2, "0")}`);
+
+function inlineMarkdown(nodes, inTable) {
+  let out = "";
+  let link = null;
+  let label = "";
+  const closeLink = () => {
+    if (link) out += `[${escapeMarkdownLabel(label)}](${linkTarget(link)})`;
+    link = null;
+    label = "";
+  };
+  for (const node of nodes || []) {
+    if (node.type !== "text") continue;
+    const href = markOf(node, "link")?.attrs?.href || null;
+    if (href !== link) closeLink();
+    if (href) {
+      link = href;
+      label += styledText(node, inTable);
+    } else {
+      out += styledText(node, inTable);
+    }
+  }
+  closeLink();
+  return out.replace(/\n/g, " ");
+}
+
+const cellMarkdown = (cell) =>
+  (cell.content || []).map((child) => inlineMarkdown(child.content, true)).join(" ").trim();
+
+function alignDivider(align) {
+  if (align === "center") return ":---:";
+  if (align === "right") return "---:";
+  if (align === "left") return ":---";
+  return "---";
+}
+
+function tableMarkdown(node) {
+  const rows = (node.content || []).map((row) => (row.content || []).map(cellMarkdown));
+  if (rows.length === 0) return "";
+  const width = rows[0].length;
+  const align = node.attrs?.align || [];
+  const line = (cells) => `| ${cells.join(" | ")} |`;
+  const divider = [];
+  for (let i = 0; i < width; i += 1) divider.push(alignDivider(align[i]));
+  return [line(rows[0]), line(divider), ...rows.slice(1).map(line)].join("\n");
+}
+
+const listItemText = (item) =>
+  (item.content || []).map((child) => inlineMarkdown(child.content, false)).join(" ").trim();
+
+// An empty item or heading would read back as a stray `3.` or `##` paragraph.
+const filledItems = (list) => (list.content || []).map(listItemText).filter((text) => text !== "");
+
+function blockMarkdown(node) {
+  switch (node.type) {
+    case "heading": {
+      const text = inlineMarkdown(node.content, false).trim();
+      return text ? `${"#".repeat(node.attrs?.level || 1)} ${text}` : "";
+    }
+    case "paragraph":
+      return inlineMarkdown(node.content, false);
+    case "bulletList":
+      return filledItems(node).map((text) => `- ${text}`).join("\n");
+    case "orderedList": {
+      const start = node.attrs?.start || 1;
+      return filledItems(node).map((text, i) => `${start + i}. ${text}`).join("\n");
+    }
+    case "table":
+      return tableMarkdown(node);
+    case "image":
+      // An unsafe source was emptied on read; written back it would be prose.
+      return node.attrs?.src
+        ? formatMarkdownImage({ src: node.attrs.src, alt: node.attrs.alt, size: node.attrs.title })
+        : "";
+    case "codeBlock": {
+      const body = (node.content || []).map((child) => child.text || "").join("");
+      return `\`\`\`${node.attrs?.language || ""}\n${body}\n\`\`\``;
+    }
+    default:
+      return "";
+  }
+}
+
+/** The editor's ProseMirror JSON document → markdown text. */
+export function docToMarkdown(doc) {
+  return (doc?.content || [])
+    .map(blockMarkdown)
+    .filter((block) => block.trim() !== "")
+    .join("\n\n");
+}

package/dist/markdown-editor-bridge.js

@@ -0,0 +1,162 @@
+// sc-15080 — the bridge between `<MarkdownInput>`'s native field and the editor
+// page it hosts in a WebView (./markdown-editor-webview.js).
+//
+// React Native has no editable rich-text view, so the shared editor runs in a
+// WebView from a page bundled into the SDK: no network, no remote code. The
+// field grows with its content between `minHeight` and `maxHeight`, then the
+// page scrolls. The primitives are passed in, so the bridge is testable
+// without a device; ./markdown-editor-field.native.js binds the real ones.
+
+import React from "react";
+import { MARKDOWN_EDITOR_HTML } from "./markdown-editor-html.js";
+
+const SOURCE = { html: MARKDOWN_EDITOR_HTML };
+
+/** The script that hands `message` to the page; JSON twice makes it a literal. */
+export function editorMessageScript(message) {
+  return `window.mdEditor&&window.mdEditor.receive(${JSON.stringify(JSON.stringify(message))});true;`;
+}
+
+function readMessage(event) {
+  try {
+    const message = JSON.parse(event.nativeEvent.data);
+    return message && typeof message.type === "string" ? message : null;
+  } catch {
+    return null;
+  }
+}
+
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+
+/** Builds the field from React Native's `View` and the WebView component. */
+export function makeMarkdownEditorField({ View, WebView }) {
+  return React.forwardRef(function MarkdownEditorField(
+    {
+      value,
+      onChangeText,
+      onStateChange,
+      placeholder,
+      accessibilityLabel,
+      tokens,
+      minHeight,
+      maxHeight,
+      testID,
+    },
+    ref,
+  ) {
+    const web = React.useRef(null);
+    const loaded = React.useRef(false);
+    const ready = React.useRef(false);
+    const shown = React.useRef(value);
+    const selection = React.useRef("");
+    const [height, setHeight] = React.useState(minHeight);
+    const [focused, setFocused] = React.useState(false);
+
+    const send = React.useCallback((message) => {
+      if (ready.current && web.current)
+        web.current.injectJavaScript(editorMessageScript(message));
+    }, []);
+
+    React.useEffect(() => {
+      if (value === shown.current) return;
+      shown.current = value;
+      send({ type: "set", markdown: value });
+    }, [value, send]);
+
+    // A theme switch repaints the page, as it does the web field.
+    React.useEffect(() => {
+      send({ type: "style", tokens, minHeight });
+    }, [tokens, minHeight, send]);
+
+    // The OS may kill the page's process; reload it and re-send the value.
+    const restart = React.useCallback(() => {
+      ready.current = false;
+      loaded.current = false;
+      if (web.current) web.current.reload();
+    }, []);
+
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        command: (name, args) => {
+          send({ type: "command", name, args });
+          return ready.current;
+        },
+        selectedText: () => selection.current,
+      }),
+      [send],
+    );
+
+    const onMessage = (event) => {
+      const message = readMessage(event);
+      if (!message) return;
+      if (message.type === "ready") {
+        ready.current = true;
+        send({
+          type: "init",
+          markdown: shown.current,
+          placeholder,
+          label: accessibilityLabel,
+          tokens,
+          minHeight,
+        });
+      } else if (
+        message.type === "change" &&
+        typeof message.markdown === "string"
+      ) {
+        shown.current = message.markdown;
+        if (typeof onChangeText === "function") onChangeText(message.markdown);
+      } else if (message.type === "height" && Number.isFinite(message.height)) {
+        setHeight(clamp(message.height, minHeight, maxHeight));
+      } else if (message.type === "focus") {
+        setFocused(message.focused === true);
+      } else if (
+        message.type === "selection" &&
+        typeof message.text === "string"
+      ) {
+        selection.current = message.text;
+      } else if (message.type === "state" && typeof onStateChange === "function") {
+        onStateChange({ inTable: message.inTable === true });
+      }
+    };
+
+    return React.createElement(
+      View,
+      {
+        testID,
+        style: {
+          height,
+          borderWidth: 1,
+          borderColor: focused ? tokens.accent : tokens.border,
+          borderRadius: tokens.radius,
+          backgroundColor: tokens.surface,
+          overflow: "hidden",
+        },
+      },
+      React.createElement(WebView, {
+        ref: web,
+        source: SOURCE,
+        originWhitelist: ["*"],
+        // The page is the editor; nothing in it may navigate the field away.
+        onShouldStartLoadWithRequest: () => !loaded.current,
+        onLoadEnd: () => {
+          loaded.current = true;
+        },
+        onMessage,
+        onContentProcessDidTerminate: restart,
+        onRenderProcessGone: restart,
+        javaScriptEnabled: true,
+        setSupportMultipleWindows: false,
+        keyboardDisplayRequiresUserAction: false,
+        hideKeyboardAccessoryView: true,
+        automaticallyAdjustContentInsets: false,
+        textZoom: 100,
+        scrollEnabled: height >= maxHeight,
+        // Android hands a parent ScrollView's gesture to the page only with this.
+        nestedScrollEnabled: true,
+        style: { backgroundColor: "transparent" },
+        testID: testID ? `${testID}-webview` : undefined,
+      }),
+    );
+  });
+}