@colixsystems/widget-sdk 0.275.2 → 0.276.0

package/dist/markdown-editor-webview.js

@@ -0,0 +1,70 @@
+// sc-15080 — the page `<MarkdownInput>` runs its editor in on iOS and Android.
+//
+// React Native has no editable rich-text surface, so the native field hosts
+// the SAME editor module the web field mounts, inside a WebView. This entry is
+// bundled into ./markdown-editor-html.js by scripts/build-markdown-editor.mjs;
+// nothing imports it at runtime.
+//
+// Messages are JSON strings. In: init, style, set, command, focus. Out:
+// ready, change, height, focus, selection, state.
+
+import { createMarkdownEditor } from "./markdown-editor-core.js";
+import { markdownEditorCss } from "./markdown-editor-css.js";
+
+const ROOT = "#root";
+
+function post(message) {
+  if (window.ReactNativeWebView) window.ReactNativeWebView.postMessage(JSON.stringify(message));
+}
+
+let instance = null;
+const style = document.createElement("style");
+document.head.appendChild(style);
+
+function paint({ tokens, minHeight }) {
+  if (tokens && typeof tokens === "object") style.textContent = markdownEditorCss(tokens, ROOT, { minHeight });
+}
+
+function init(message) {
+  if (instance) return;
+  const { markdown, placeholder, label } = message;
+  paint(message);
+
+  const root = document.querySelector(ROOT);
+  instance = createMarkdownEditor({
+    element: root,
+    markdown,
+    placeholder,
+    label,
+    onChange: (next) => post({ type: "change", markdown: next }),
+    onFocusChange: (focused) => post({ type: "focus", focused }),
+    onState: (state) => post({ type: "state", inTable: state.inTable === true }),
+  });
+  instance.editor.on("selectionUpdate", () => post({ type: "selection", text: instance.selectedText() }));
+
+  let lastHeight = 0;
+  new ResizeObserver(() => {
+    const height = Math.ceil(root.getBoundingClientRect().height);
+    if (height !== lastHeight) post({ type: "height", height: (lastHeight = height) });
+  }).observe(root);
+}
+
+window.mdEditor = {
+  receive(raw) {
+    let message;
+    try {
+      message = JSON.parse(raw);
+    } catch {
+      return;
+    }
+    if (!message || typeof message !== "object") return;
+    if (message.type === "init") init(message);
+    else if (message.type === "style") paint(message);
+    else if (!instance) return;
+    else if (message.type === "set") instance.setMarkdown(message.markdown);
+    else if (message.type === "command") instance.command(message.name, message.args);
+    else if (message.type === "focus") instance.focus();
+  },
+};
+
+post({ type: "ready" });

package/dist/markdown-input-view.js

@@ -1,14 +1,14 @@
 // sc-6970 — the ONE implementation behind the `<MarkdownInput>` SDK primitive.
 //
-// The authoring half of `<RichText>`: a multi-line field whose toolbar wraps the
-// author's SELECTION in markdown markers. Widgets previously had only a bare
+// The authoring half of `<RichText>`. Widgets previously had only a bare
 // `TextInput`, so a widget asked for a formatting toolbar had to splice literal
 // `<strong>`/`<br>` tags into the text — markup the author then read as tag soup.
 //
-// sc-14974: the field itself is live-styled, so the author edits the formatted
-// text directly. Each host binding supplies its own `LiveField` (a TextInput
-// with styled children natively, a contentEditable on web); the rendered
-// `<RichText>` preview is opt-in for content the field shows only as markers.
+// sc-15080: the author edits the formatted result directly — headings, lists,
+// links and real tables — while the stored value stays markdown. Each host
+// binding supplies its own `EditorField` around the one shared editor (mounted
+// in the page on web, in a WebView natively), so `showPreview` has nothing
+// left to show and is accepted as a no-op.
 //
 // The two platform bindings differ ONLY in where the primitives come from; the
 // component is defined once here so the hosts cannot drift (CLAUDE.md §3, §8).
@@ -16,7 +16,6 @@
 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([
@@ -28,8 +27,7 @@ const TOOLS = Object.freeze([
   { 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.
+  // sc-7349: a link needs a target no selection supplies, so this opens a form.
   {
     key: "link",
     label: "Link",
@@ -38,17 +36,26 @@ const TOOLS = Object.freeze([
   },
 ]);
 
-export function makeMarkdownInput(rn, RichText, Modal, Button, LiveField) {
+// Shown while the caret is in a table: a phone keyboard has no Tab key to
+// grow one, and a table must be removable without selecting around it.
+const TABLE_TOOLS = Object.freeze([
+  { key: "addRow", label: "+ Row", accessibilityLabel: "Add row" },
+  { key: "addColumn", label: "+ Column", accessibilityLabel: "Add column" },
+  { key: "removeRow", label: "− Row", accessibilityLabel: "Remove row" },
+  { key: "removeColumn", label: "− Column", accessibilityLabel: "Remove column" },
+  { key: "removeTable", label: "Delete table", accessibilityLabel: "Delete table" },
+]);
+
+export function makeMarkdownInput(rn, Modal, Button, EditorField) {
   const { Text, View, Pressable } = rn;
   const MarkdownLinkDialog = makeMarkdownLinkDialog(rn, Modal, Button);
 
+  // `previewLabel`, `showPreview` and `renderImage` are accepted for widgets
+  // written before the field showed the formatted result itself.
   function MarkdownInput({
     value,
     onChange,
     placeholder,
-    previewLabel = "Preview",
-    showPreview = false,
-    renderImage,
     pages,
     minHeight = 150,
     maxHeight = 280,
@@ -58,72 +65,34 @@ export function makeMarkdownInput(rn, RichText, Modal, Button, LiveField) {
   }) {
     const theme = useHostTheme();
     const tokens = React.useMemo(() => resolveRichTextTokens(theme), [theme]);
-    const [selection, setSelection] = React.useState({ start: 0, end: 0 });
     const fieldRef = React.useRef(null);
-    const [linkOpen, setLinkOpen] = React.useState(false);
-
-    const text = typeof value === "string" ? value : "";
+    const [linkLabel, setLinkLabel] = React.useState(null);
+    const [inTable, setInTable] = React.useState(false);
+    const onStateChange = React.useCallback((state) => setInTable(state.inTable), []);
 
-    const onSelectionChange = React.useCallback((event) => {
-      const next = event && event.nativeEvent && event.nativeEvent.selection;
-      if (next) setSelection({ start: next.start, end: next.end });
+    const run = React.useCallback((name, args) => {
+      const field = fieldRef.current;
+      if (field) field.command(name, args);
     }, []);
 
-    const applyTool = React.useCallback(
-      (toolKey, options) => {
-        if (typeof onChange !== "function") return;
-        const edit = markdownEditOps[toolKey];
-        if (!edit) return;
-        const next = edit(text, selection, options);
-        const field = fieldRef.current;
-        if (field && typeof field.recordEdit === "function") field.recordEdit();
-        onChange(next.value);
-        setSelection(next.selection);
-      },
-      [onChange, text, selection],
-    );
-
     const pressTool = React.useCallback(
       (tool) => {
-        if (tool.opensDialog) {
-          setLinkOpen(true);
-          return;
-        }
-        applyTool(tool.key);
+        // The selection seeds the form's Link text, so a highlighted phrase
+        // stays the label.
+        if (tool.opensDialog) setLinkLabel(fieldRef.current ? fieldRef.current.selectedText() : "");
+        else run(tool.key);
       },
-      [applyTool],
+      [run],
     );
 
     const insertLink = React.useCallback(
       (result) => {
-        setLinkOpen(false);
-        applyTool("link", result);
+        setLinkLabel(null);
+        run("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),
+      [run],
     );
 
-    const fieldStyle = {
-      fontFamily: tokens.bodyFont,
-      fontSize: tokens.bodySize,
-      lineHeight: tokens.lineHeight,
-      color: tokens.color,
-      backgroundColor: tokens.surface,
-      borderWidth: 1,
-      borderColor: tokens.border,
-      borderRadius: tokens.radius,
-      padding: tokens.padding,
-      minHeight,
-      maxHeight,
-      textAlignVertical: "top",
-    };
-
     return React.createElement(
       View,
       { style, testID },
@@ -137,7 +106,7 @@ export function makeMarkdownInput(rn, RichText, Modal, Button, LiveField) {
           },
           testID: testID ? `${testID}-toolbar` : undefined,
         },
-        TOOLS.map((tool) =>
+        (inTable ? [...TOOLS, ...TABLE_TOOLS] : TOOLS).map((tool) =>
           React.createElement(
             Pressable,
             {
@@ -174,51 +143,24 @@ export function makeMarkdownInput(rn, RichText, Modal, Button, LiveField) {
           ),
         ),
       ),
-      React.createElement(LiveField, {
+      React.createElement(EditorField, {
         ref: fieldRef,
-        value: text,
+        value: typeof value === "string" ? value : "",
         onChangeText: onChange,
-        onSelectionChange,
-        selection,
+        onStateChange,
         placeholder,
         accessibilityLabel,
         tokens,
-        style: fieldStyle,
+        minHeight,
+        maxHeight,
         testID: testID ? `${testID}-field` : undefined,
       }),
-      showPreview && text.trim()
-        ? React.createElement(
-            View,
-            { style: { marginTop: tokens.padding } },
-            React.createElement(
-              Text,
-              {
-                style: {
-                  fontFamily: tokens.bodyFont,
-                  fontSize: tokens.codeSize,
-                  color: tokens.mutedColor,
-                  marginBottom: tokens.blockGap,
-                },
-              },
-              previewLabel,
-            ),
-            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),
+        visible: linkLabel !== null,
+        onClose: () => setLinkLabel(null),
         onSubmit: insertLink,
         pages,
-        initialLabel: selected,
+        initialLabel: linkLabel || "",
         testID,
       }),
     );

package/dist/markdown-input.js

@@ -1,11 +1,10 @@
 // sc-6970 — `<MarkdownInput>` (web). Binds the shared implementation in
-// ./markdown-input-view.js to react-native-web's primitives, the web
-// `<RichText>` it renders its preview with, and the web live field.
+// ./markdown-input-view.js to react-native-web's primitives and the web
+// editor field.
 
 import { ReactNative } from "./text-scale.js";
 import { makeMarkdownInput } from "./markdown-input-view.js";
-import { MarkdownLiveField } from "./markdown-live-field.js";
-import { RichText } from "./richtext.js";
+import { MarkdownEditorField } from "./markdown-editor-field.js";
 import { Modal } from "./modal.js";
 import { Button } from "./button.js";
 import { TextInput } from "./primitives.js";
@@ -13,8 +12,7 @@ import { TextInput } from "./primitives.js";
 // TextInput stays for the link form, which is built from the same `rn`.
 export const MarkdownInput = makeMarkdownInput(
   { ...ReactNative, TextInput },
-  RichText,
   Modal,
   Button,
-  MarkdownLiveField,
+  MarkdownEditorField,
 );

package/dist/markdown-input.native.js

@@ -1,12 +1,11 @@
 // sc-6970 — `<MarkdownInput>` (native). Binds the shared implementation in
 // ./markdown-input-view.js to React Native's own primitives and the native
-// `<RichText>`. Only the imports differ from the web mirror.
+// editor field. Only the imports differ from the web mirror.
 
 import { View, Pressable, ScrollView } from "react-native";
 import { Text, TextInput } from "./bounded-text.native.js";
 import { makeMarkdownInput } from "./markdown-input-view.js";
-import { MarkdownLiveField } from "./markdown-live-field.native.js";
-import { RichText } from "./richtext.native.js";
+import { MarkdownEditorField } from "./markdown-editor-field.native.js";
 import { Modal } from "./modal.native.js";
 import { Button } from "./button.native.js";
 
@@ -14,8 +13,7 @@ import { Button } from "./button.native.js";
 // scroll rather than grow an app's every page past the panel.
 export const MarkdownInput = makeMarkdownInput(
   { Text, View, Pressable, TextInput, ScrollView },
-  RichText,
   Modal,
   Button,
-  MarkdownLiveField,
+  MarkdownEditorField,
 );

package/dist/markdown.js

@@ -196,8 +196,7 @@ const PLAIN_PATTERN =
  * Splits one line into positioned tokens: `{ type: "text", start, end }`, or
  * `{ type: "bold"|"italic"|"code", start, end, contentStart, contentEnd }`, or
  * `{ type: "link", start, end, contentStart, contentEnd, href }` whose content
- * is the RAW label. `parseInline` and the live editor both read these, so the
- * editor cannot style a construct the renderer would not draw.
+ * is the RAW label.
  */
 function scanInline(source) {
   const tokens = [];
@@ -532,116 +531,6 @@ export function parseMarkdown(text, options) {
   return blocks;
 }
 
-const LIVE_STYLE_KEYS = ["marker", "bold", "italic", "code", "href", "heading"];
-
-function sameLiveStyle(a, b) {
-  return LIVE_STYLE_KEYS.every((key) => (a[key] || false) === (b[key] || false));
-}
-
-/**
- * sc-14974 — `text` cut into styled runs for the live editor. Joining every
- * run's `text` gives back `text` byte for byte: nothing is trimmed or joined,
- * and markdown markers stay in place flagged `marker` so the editor can dim
- * them. Each run is `{ text, marker?, bold?, italic?, code?, href?, heading? }`
- * with `heading` the level. Lines are classified in `parseMarkdown`'s order.
- */
-export function markdownLiveSegments(text) {
-  const source = typeof text === "string" ? text : "";
-  const runs = [];
-  const push = (value, style) => {
-    if (!value) return;
-    const last = runs[runs.length - 1];
-    if (last && sameLiveStyle(last, style)) last.text += value;
-    else runs.push({ text: value, ...style });
-  };
-  const inline = (value, base) => {
-    for (const token of scanInline(value)) {
-      if (token.type === "text") {
-        push(value.slice(token.start, token.end), base);
-        continue;
-      }
-      const content = value.slice(token.contentStart, token.contentEnd);
-      push(value.slice(token.start, token.contentStart), { ...base, marker: true });
-      if (token.type === "link") inline(content, { ...base, href: token.href });
-      else push(content, { ...base, [token.type]: true });
-      push(value.slice(token.contentEnd, token.end), { ...base, marker: true });
-    }
-  };
-  const tableRow = (line, base) => {
-    let cellStart = 0;
-    for (let k = 0; k < line.length; k += 1) {
-      if (line.charAt(k) === "\\" && line.charAt(k + 1) === "|") k += 1;
-      else if (line.charAt(k) === "|") {
-        inline(line.slice(cellStart, k), base);
-        push("|", { marker: true });
-        cellStart = k + 1;
-      }
-    }
-    inline(line.slice(cellStart), base);
-  };
-
-  const lines = source.split("\n");
-  let inFence = false;
-  let tableStart = -1;
-  let tableEnd = -1;
-  for (let i = 0; i < lines.length; i += 1) {
-    if (i > 0) push("\n", {});
-    const line = lines[i];
-    const trimmed = line.trimEnd();
-    const tail = line.slice(trimmed.length);
-
-    if (inFence) {
-      if (FENCE_CLOSE_RE.test(line)) inFence = false;
-      push(line, inFence ? { code: true } : { marker: true });
-      continue;
-    }
-    if (FENCE_OPEN_RE.test(trimmed)) {
-      inFence = true;
-      push(line, { marker: true });
-      continue;
-    }
-
-    if (i > tableEnd && TABLE_ROW_RE.test(line) && TABLE_DIVIDER_RE.test(lines[i + 1] || "")) {
-      tableStart = i;
-      tableEnd = i + 1;
-      while (tableEnd + 1 < lines.length && TABLE_ROW_RE.test(lines[tableEnd + 1])) tableEnd += 1;
-    }
-    if (i <= tableEnd) {
-      if (i === tableStart + 1) push(line, { marker: true });
-      else tableRow(line, i === tableStart ? { bold: true } : {});
-      continue;
-    }
-
-    const lead = trimmed.length - trimmed.trimStart().length;
-    const image = IMAGE_RE.exec(trimmed.trimStart());
-    if (image) {
-      const altStart = lead + 2;
-      const altEnd = altStart + image[1].length;
-      push(line.slice(0, altStart), { marker: true });
-      push(line.slice(altStart, altEnd), {});
-      push(line.slice(altEnd, trimmed.length), { marker: true });
-      push(tail, {});
-      continue;
-    }
-
-    const heading = HEADING_RE.exec(trimmed);
-    const listItem = heading ? null : BULLET_RE.exec(trimmed) || ORDERED_RE.exec(trimmed);
-    if (heading || listItem) {
-      const content = heading ? heading[2] : listItem[listItem.length - 1];
-      const base = heading ? { heading: heading[1].length } : {};
-      const contentStart = trimmed.length - content.length;
-      push(trimmed.slice(0, contentStart), { ...base, marker: true });
-      inline(content, base);
-      push(tail, base);
-      continue;
-    }
-
-    inline(trimmed, {});
-    push(tail, {});
-  }
-  return runs;
-}
-
 function spansToText(spans) {
   return spans.map((span) => span.text).join("");
 }

package/dist/richtext-tokens.js

@@ -58,7 +58,7 @@ export function resolveRichTextTokens(theme) {
 
 export { IMAGE_WIDTH as RICH_TEXT_IMAGE_WIDTH };
 
-/** The style one inline span is drawn with, by `<RichText>` and the editor. */
+/** The style one inline span is drawn with by `<RichText>`. */
 export function richTextSpanStyle(span, tokens) {
   return {
     ...(span.bold ? { fontWeight: "700" } : null),
@@ -71,27 +71,3 @@ export function richTextSpanStyle(span, tokens) {
     ...(span.href ? { color: tokens.accent, textDecorationLine: "underline" } : null),
   };
 }
-
-/**
- * sc-14974 — the style one `markdownLiveSegments` run is drawn with in
- * `<MarkdownInput>`: the span's `<RichText>` look, sized as its heading, with
- * markers dimmed so the text reads as the result while staying editable.
- */
-export function markdownLiveRunStyle(run, tokens) {
-  const headingSize = run.heading
-    ? tokens.headingSizes[run.heading] || tokens.headingSizes[3]
-    : null;
-  return {
-    ...(headingSize
-      ? {
-          fontFamily: tokens.headingFont,
-          fontWeight: "700",
-          fontSize: headingSize,
-          // The field's body leading would overlap a larger heading line.
-          lineHeight: Math.round(headingSize * 1.3),
-        }
-      : null),
-    ...richTextSpanStyle(run, tokens),
-    ...(run.marker ? { color: tokens.mutedColor, textDecorationLine: "none" } : null),
-  };
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colixsystems/widget-sdk",
-  "version": "0.275.2",
+  "version": "0.276.0",
   "description": "Common widget interface for AppStudio. Implements WidgetManifest, WidgetContext, property schema, and helper hooks.",
   "homepage": "https://github.com/Colix-AB/AppStudio",
   "type": "module",
@@ -75,7 +75,22 @@
     "react": ">=18.0.0",
     "react-native": "*",
     "react-dom": ">=18.0.0",
-    "react-native-web": ">=0.19.0"
+    "react-native-web": ">=0.19.0",
+    "@tiptap/core": "^3.32.2",
+    "@tiptap/extension-bold": "^3.32.2",
+    "@tiptap/extension-code": "^3.32.2",
+    "@tiptap/extension-code-block": "^3.32.2",
+    "@tiptap/extension-document": "^3.32.2",
+    "@tiptap/extension-heading": "^3.32.2",
+    "@tiptap/extension-image": "^3.32.2",
+    "@tiptap/extension-italic": "^3.32.2",
+    "@tiptap/extension-link": "^3.32.2",
+    "@tiptap/extension-list": "^3.32.2",
+    "@tiptap/extension-paragraph": "^3.32.2",
+    "@tiptap/extension-table": "^3.32.2",
+    "@tiptap/extension-text": "^3.32.2",
+    "@tiptap/extensions": "^3.32.2",
+    "react-native-webview": ">=13.7.0"
   },
   "peerDependenciesMeta": {
     "react": {
@@ -89,6 +104,51 @@
     },
     "react-dom": {
       "optional": true
+    },
+    "@tiptap/core": {
+      "optional": true
+    },
+    "@tiptap/extension-bold": {
+      "optional": true
+    },
+    "@tiptap/extension-code": {
+      "optional": true
+    },
+    "@tiptap/extension-code-block": {
+      "optional": true
+    },
+    "@tiptap/extension-document": {
+      "optional": true
+    },
+    "@tiptap/extension-heading": {
+      "optional": true
+    },
+    "@tiptap/extension-image": {
+      "optional": true
+    },
+    "@tiptap/extension-italic": {
+      "optional": true
+    },
+    "@tiptap/extension-link": {
+      "optional": true
+    },
+    "@tiptap/extension-list": {
+      "optional": true
+    },
+    "@tiptap/extension-paragraph": {
+      "optional": true
+    },
+    "@tiptap/extension-table": {
+      "optional": true
+    },
+    "@tiptap/extension-text": {
+      "optional": true
+    },
+    "@tiptap/extensions": {
+      "optional": true
+    },
+    "react-native-webview": {
+      "optional": true
     }
   },
   "optionalDependencies": {

package/src/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,