@colixsystems/widget-sdk 0.122.0 → 0.124.0

package/dist/markdown-edit.js

@@ -0,0 +1,97 @@
+// sc-6970 — the selection edits `<MarkdownInput>`'s toolbar performs.
+//
+// Pure string maths, kept out of the component the way `richtext-tokens.js`
+// keeps the theme maths out: a toolbar button is only correct if it wraps the
+// author's SELECTION rather than appending at the end, and that is a thing
+// tests can pin without a renderer.
+
+const LINE_RE = /^(\s*)((?:#{1,3}\s)|(?:[-*]\s)|(?:\d+[.)]\s))?([\s\S]*)$/;
+
+const LINE_KINDS = Object.freeze({
+  heading2: { marker: "## ", test: /^##\s/ },
+  heading3: { marker: "### ", test: /^###\s/ },
+  bullet: { marker: "- ", test: /^[-*]\s/ },
+  ordered: { marker: null, test: /^\d+[.)]\s/ },
+});
+
+function clamp(index, max) {
+  const n = Number.isFinite(index) ? Math.trunc(index) : 0;
+  return Math.min(Math.max(n, 0), max);
+}
+
+function readRange(text, selection) {
+  const src = typeof text === "string" ? text : "";
+  const raw = selection && typeof selection === "object" ? selection : {};
+  const a = clamp(raw.start, src.length);
+  const b = clamp(raw.end, src.length);
+  return { src, start: Math.min(a, b), end: Math.max(a, b) };
+}
+
+function wrap(marker) {
+  return (text, selection) => {
+    const { src, start, end } = readRange(text, selection);
+    const selected = src.slice(start, end);
+    const pair = marker.length * 2;
+
+    // Already wrapped — the button toggles the emphasis back off.
+    if (selected.length >= pair && selected.startsWith(marker) && selected.endsWith(marker)) {
+      const inner = selected.slice(marker.length, selected.length - marker.length);
+      return {
+        value: src.slice(0, start) + inner + src.slice(end),
+        selection: { start, end: start + inner.length },
+      };
+    }
+
+    return {
+      value: src.slice(0, start) + marker + selected + marker + src.slice(end),
+      // Leaves the author's own text selected (or the caret between an empty
+      // pair), so typing continues inside the emphasis they just asked for.
+      selection: { start: start + marker.length, end: end + marker.length },
+    };
+  };
+}
+
+function linePrefix(kind) {
+  const spec = LINE_KINDS[kind];
+  return (text, selection) => {
+    const { src, start, end } = readRange(text, selection);
+    const blockStart = src.lastIndexOf("\n", Math.max(start - 1, 0)) + 1;
+    const newlineAfter = src.indexOf("\n", end);
+    const blockEnd = newlineAfter === -1 ? src.length : newlineAfter;
+
+    const lines = src.slice(blockStart, blockEnd).split("\n");
+    const filled = lines.filter((line) => line.trim());
+    // Toggled off only when EVERY line already carries this kind, so a mixed
+    // selection becomes uniformly marked rather than half-stripped.
+    const removing =
+      filled.length > 0 &&
+      filled.every((line) => spec.test.test(line.replace(/^\s*/, "")));
+
+    let ordinal = 0;
+    const rebuilt = lines.map((line) => {
+      const match = LINE_RE.exec(line);
+      const indent = match[1];
+      const body = match[3];
+      if (!line.trim()) return line;
+      if (removing) return indent + body;
+      ordinal += 1;
+      return indent + (spec.marker || `${ordinal}. `) + body;
+    });
+
+    const block = rebuilt.join("\n");
+    return {
+      value: src.slice(0, blockStart) + block + src.slice(blockEnd),
+      selection: { start: blockStart, end: blockStart + block.length },
+    };
+  };
+}
+
+export const markdownEditOps = Object.freeze({
+  bold: wrap("**"),
+  italic: wrap("*"),
+  code: wrap("`"),
+  heading2: linePrefix("heading2"),
+  heading3: linePrefix("heading3"),
+  bullet: linePrefix("bullet"),
+  ordered: linePrefix("ordered"),
+});

package/dist/markdown-input-view.js

@@ -0,0 +1,171 @@
+// 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 and whose preview renders the result
+// live. 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, with no preview of the real output.
+//
+// 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).
+
+import React from "react";
+import { useHostTheme } from "./hooks.js";
+import { resolveRichTextTokens } from "./richtext-tokens.js";
+import { markdownEditOps } from "./markdown-edit.js";
+
+const TOOLS = Object.freeze([
+  { key: "bold", label: "B", accessibilityLabel: "Bold", weight: "700" },
+  { key: "italic", label: "I", accessibilityLabel: "Italic", italic: true },
+  { key: "code", label: "‹›", accessibilityLabel: "Code" },
+  { key: "heading2", label: "H2", accessibilityLabel: "Heading" },
+  { key: "heading3", label: "H3", accessibilityLabel: "Subheading" },
+  { key: "bullet", label: "•", accessibilityLabel: "Bulleted list" },
+  { key: "ordered", label: "1.", accessibilityLabel: "Numbered list" },
+]);
+
+export function makeMarkdownInput(rn, RichText) {
+  const { Text, View, Pressable, TextInput } = rn;
+
+  function MarkdownInput({
+    value,
+    onChange,
+    placeholder,
+    previewLabel = "Preview",
+    showPreview = true,
+    renderImage,
+    minHeight = 150,
+    maxHeight = 280,
+    accessibilityLabel,
+    style,
+    testID,
+  }) {
+    const theme = useHostTheme();
+    const tokens = React.useMemo(() => resolveRichTextTokens(theme), [theme]);
+    const [selection, setSelection] = React.useState({ start: 0, end: 0 });
+
+    const text = typeof value === "string" ? value : "";
+
+    const onSelectionChange = React.useCallback((event) => {
+      const next = event && event.nativeEvent && event.nativeEvent.selection;
+      if (next) setSelection({ start: next.start, end: next.end });
+    }, []);
+
+    const applyTool = React.useCallback(
+      (toolKey) => {
+        if (typeof onChange !== "function") return;
+        const edit = markdownEditOps[toolKey];
+        if (!edit) return;
+        const next = edit(text, selection);
+        onChange(next.value);
+        setSelection(next.selection);
+      },
+      [onChange, text, selection],
+    );
+
+    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 },
+      React.createElement(
+        View,
+        {
+          style: {
+            flexDirection: "row",
+            flexWrap: "wrap",
+            marginBottom: tokens.blockGap,
+          },
+          testID: testID ? `${testID}-toolbar` : undefined,
+        },
+        TOOLS.map((tool) =>
+          React.createElement(
+            Pressable,
+            {
+              key: tool.key,
+              onPress: () => applyTool(tool.key),
+              accessibilityRole: "button",
+              accessibilityLabel: tool.accessibilityLabel,
+              testID: testID ? `${testID}-${tool.key}` : undefined,
+              style: {
+                minWidth: 36,
+                paddingVertical: 6,
+                paddingHorizontal: 10,
+                marginRight: tokens.markerGap,
+                marginBottom: tokens.markerGap,
+                borderWidth: 1,
+                borderColor: tokens.border,
+                borderRadius: tokens.radius,
+                alignItems: "center",
+              },
+            },
+            React.createElement(
+              Text,
+              {
+                style: {
+                  fontFamily: tokens.bodyFont,
+                  fontSize: tokens.codeSize,
+                  color: tokens.color,
+                  fontWeight: tool.weight || "500",
+                  fontStyle: tool.italic ? "italic" : "normal",
+                },
+              },
+              tool.label,
+            ),
+          ),
+        ),
+      ),
+      React.createElement(TextInput, {
+        value: text,
+        onChangeText: onChange,
+        onSelectionChange,
+        placeholder,
+        placeholderTextColor: tokens.mutedColor,
+        accessibilityLabel,
+        multiline: true,
+        numberOfLines: 6,
+        style: fieldStyle,
+        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,
+              testID: testID ? `${testID}-preview` : undefined,
+            }),
+          )
+        : null,
+    );
+  }
+
+  MarkdownInput.displayName = "MarkdownInput";
+  return MarkdownInput;
+}

package/dist/markdown-input.js

@@ -0,0 +1,9 @@
+// sc-6970 — `<MarkdownInput>` (web). Binds the shared implementation in
+// ./markdown-input-view.js to react-native-web's primitives, and to the web
+// `<RichText>` it renders its preview with.
+
+import * as ReactNative from "react-native-web";
+import { makeMarkdownInput } from "./markdown-input-view.js";
+import { RichText } from "./richtext.js";
+
+export const MarkdownInput = makeMarkdownInput(ReactNative, RichText);

package/dist/markdown-input.native.js

@@ -0,0 +1,12 @@
+// 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.
+
+import { Text, View, Pressable, TextInput } from "react-native";
+import { makeMarkdownInput } from "./markdown-input-view.js";
+import { RichText } from "./richtext.native.js";
+
+export const MarkdownInput = makeMarkdownInput(
+  { Text, View, Pressable, TextInput },
+  RichText,
+);

package/dist/markdown.js

@@ -0,0 +1,229 @@
+// sc-6970 — the ONE markdown-subset grammar widget content is authored in.
+//
+// A widget that lets an app user write formatted text has no HTML path: widgets
+// render through React Native primitives, which have no `dangerouslySetInnerHTML`
+// on either host, and `document` is a banned identifier. A generated widget that
+// was asked for a formatting toolbar therefore spliced literal `<strong>`/`<br>`
+// tags into a plain TextInput, and the author read tag soup instead of a preview.
+//
+// So content is markdown text, parsed here into a flat block/span tree that
+// `<RichText>` renders with SDK primitives on both hosts. No HTML is ever
+// 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` ``.
+
+const HEADING_RE = /^(#{1,3})\s+(.*)$/;
+const BULLET_RE = /^\s*[-*]\s+(.*)$/;
+const ORDERED_RE = /^\s*(\d+)[.)]\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.
+const IMAGE_RE = /^!\[((?:[^\]\\]|\\.)*)\]\(\s*(\S+?)(?:\s+"([^"]*)")?\s*\)$/;
+
+export const MARKDOWN_IMAGE_SIZES = Object.freeze([
+  "small",
+  "medium",
+  "large",
+  "full",
+]);
+
+const DEFAULT_IMAGE_SIZE = "full";
+
+const HTTP_SRC_RE = /^https?:\/\//i;
+// A filestore id, spelled positively. Blacklisting schemes instead would admit
+// anything a leading control or zero-width character can hide `javascript:`
+// behind — `
javascript:` is not matched by /^[a-z]/.
+const FILE_ID_RE = /^[A-Za-z0-9][A-Za-z0-9._-]{0,127}$/;
+
+/** True when `src` is an http(s) URL rather than a filestore id. */
+export function isHttpImageSrc(src) {
+  return typeof src === "string" && HTTP_SRC_RE.test(src);
+}
+
+// Content is author-supplied, so an image src is untrusted input: it is kept
+// only when it is an http(s) URL or a filestore id, never otherwise.
+export function isSafeMarkdownImageSrc(src) {
+  if (typeof src !== "string") return false;
+  return isHttpImageSrc(src) || FILE_ID_RE.test(src);
+}
+
+export function normaliseMarkdownImageSize(size) {
+  return MARKDOWN_IMAGE_SIZES.indexOf(size) === -1 ? DEFAULT_IMAGE_SIZE : 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 || "")
+    .replace(/[\r\n]+/g, " ")
+    .replace(/([\\\]])/g, "\\$1")
+    .trim();
+}
+
+/** Un-escapes an alt captured by the image grammar. */
+export function readMarkdownAlt(raw) {
+  return String(raw || "").replace(/\\(.)/g, "$1");
+}
+
+const readAlt = readMarkdownAlt;
+
+/**
+ * Reads one line as an image block, or returns null when it is not one.
+ *
+ * @returns {{src: string, alt: string, size: string} | null}
+ */
+export function parseMarkdownImage(line) {
+  const match = IMAGE_RE.exec(String(line == null ? "" : line).trim());
+  if (!match) return null;
+  return {
+    // An unsafe src is emptied, not dropped: the reader still sees the
+    // broken-image fallback where the author placed a picture.
+    src: isSafeMarkdownImageSrc(match[2]) ? match[2] : "",
+    alt: readAlt(match[1]),
+    size: normaliseMarkdownImageSize(match[3]),
+  };
+}
+
+/** Writes an image block back to its one-line markdown form. */
+export function formatMarkdownImage({ src, alt, size } = {}) {
+  const safeSize = normaliseMarkdownImageSize(size);
+  return `![${escapeAlt(alt)}](${String(src || "")} "${safeSize}")`;
+}
+
+// Legacy rows written by an HTML-storing predecessor still hold markup.
+// Rendering it as literal text would show tag soup, so tags are stripped and
+// the handful of entities that survive are decoded — never re-interpreted.
+const HTML_TAG_RE = /<[^>]*>/g;
+const BLOCK_TAG_RE = /<\/(?:p|div|h[1-6]|li|ul|ol|br)\s*>|<br\s*\/?>/gi;
+const ENTITIES = {
+  "&amp;": "&",
+  "&lt;": "<",
+  "&gt;": ">",
+  "&quot;": '"',
+  "&#39;": "'",
+  "&nbsp;": " ",
+};
+
+function looksLikeHtml(text) {
+  return typeof text === "string" && /<[a-z!/][^>]*>/i.test(text);
+}
+
+/**
+ * Normalises stored content to markdown: HTML-bearing text has its tags
+ * stripped to line breaks, anything else is returned unchanged.
+ */
+export function stripHtmlToMarkdown(text) {
+  if (typeof text !== "string") return "";
+  if (!looksLikeHtml(text)) return text;
+  return text
+    .replace(BLOCK_TAG_RE, "\n")
+    .replace(HTML_TAG_RE, "")
+    .replace(/&[a-z#0-9]+;/gi, (entity) => ENTITIES[entity.toLowerCase()] ?? entity)
+    .replace(/\n{3,}/g, "\n\n")
+    .trim();
+}
+
+/** Splits one line into `{ text, bold?, italic?, code? }` spans. */
+function parseInline(line) {
+  const source = typeof line === "string" ? line : "";
+  const spans = [];
+  // One pass over the three delimiters. Alternation order matters: `**` must
+  // be tried before `*` or the bold marker is consumed as two italics.
+  const pattern = /(\*\*)(.+?)\1|(`)([^`]+?)\3|([*_])(.+?)\5/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 });
+    cursor = match.index + match[0].length;
+    match = pattern.exec(source);
+  }
+  if (cursor < source.length) spans.push({ text: source.slice(cursor) });
+  return spans.length > 0 ? spans : [{ text: source }];
+}
+
+/**
+ * Parses markdown text into renderable blocks:
+ * `{ type: "heading"|"paragraph"|"bullet"|"ordered", level?, marker?, spans }`
+ * or `{ type: "image", src, alt, size }`.
+ */
+export function parseMarkdown(text) {
+  const source = stripHtmlToMarkdown(text);
+  if (!source.trim()) return [];
+
+  const blocks = [];
+  let paragraph = [];
+
+  const flushParagraph = () => {
+    if (paragraph.length === 0) return;
+    blocks.push({ type: "paragraph", spans: parseInline(paragraph.join(" ")) });
+    paragraph = [];
+  };
+
+  for (const rawLine of source.split(/\r?\n/)) {
+    const line = rawLine.trimEnd();
+    if (!line.trim()) {
+      flushParagraph();
+      continue;
+    }
+
+    const image = parseMarkdownImage(line);
+    if (image) {
+      flushParagraph();
+      blocks.push({ type: "image", ...image });
+      continue;
+    }
+
+    const heading = HEADING_RE.exec(line);
+    if (heading) {
+      flushParagraph();
+      blocks.push({
+        type: "heading",
+        level: heading[1].length,
+        spans: parseInline(heading[2]),
+      });
+      continue;
+    }
+
+    const bullet = BULLET_RE.exec(line);
+    if (bullet) {
+      flushParagraph();
+      blocks.push({ type: "bullet", marker: "•", spans: parseInline(bullet[1]) });
+      continue;
+    }
+
+    const ordered = ORDERED_RE.exec(line);
+    if (ordered) {
+      flushParagraph();
+      blocks.push({
+        type: "ordered",
+        marker: `${ordered[1]}.`,
+        spans: parseInline(ordered[2]),
+      });
+      continue;
+    }
+
+    paragraph.push(line.trim());
+  }
+  flushParagraph();
+  return blocks;
+}
+
+/** 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(""),
+    )
+    .filter(Boolean)
+    .join("\n");
+}

package/dist/richtext-tokens.js

@@ -0,0 +1,59 @@
+// sc-6970 — the values `<RichText>` and `<MarkdownInput>` are painted with.
+//
+// Presentation-free and platform-free, the same way `overlay-tokens.js` is:
+// both hosts render from the SAME components, and this module is where the
+// theme becomes numbers. Keeping the maths here makes it unit-testable without
+// a renderer, and makes the type scale a thing tests can pin.
+
+import { DEFAULT_THEME_TOKENS } from "./_theme-tokens.js";
+
+// Percentages, not pixels, so a phone scales the same way a desktop does.
+const IMAGE_WIDTH = Object.freeze({
+  small: "40%",
+  medium: "65%",
+  large: "85%",
+  full: "100%",
+});
+
+export function resolveRichTextTokens(theme) {
+  const base = theme && typeof theme === "object" ? theme : DEFAULT_THEME_TOKENS;
+  const fallback = DEFAULT_THEME_TOKENS;
+  const colors = base.colors || fallback.colors;
+  const spacing = base.spacing || fallback.spacing;
+  const radii = base.radii || fallback.radii;
+  const typography = base.typography || fallback.typography;
+  const sizes = typography.sizes || fallback.typography.sizes;
+
+  const body = sizes.md || fallback.typography.sizes.md;
+
+  return {
+    color: colors.onSurface || fallback.colors.onSurface,
+    mutedColor: colors.onSurfaceMuted || fallback.colors.onSurfaceMuted,
+    border: colors.border || fallback.colors.border,
+    surface: colors.surface || fallback.colors.surface,
+    accent: colors.primary || fallback.colors.primary,
+    onAccent: colors.onPrimary || fallback.colors.onPrimary,
+    bodyFont: typography.fontFamily || fallback.typography.fontFamily,
+    // Headings take the display face when the workspace pairs two.
+    headingFont:
+      typography.headingFontFamily ||
+      typography.fontFamily ||
+      fallback.typography.fontFamily,
+    bodySize: body,
+    codeSize: sizes.sm || fallback.typography.sizes.sm,
+    // Prose needs more leading than a UI label; 1.6 is the readable ratio.
+    lineHeight: Math.round(body * 1.6),
+    headingSizes: {
+      1: sizes.xl || fallback.typography.sizes.xl,
+      2: sizes.lg || fallback.typography.sizes.lg,
+      3: body,
+    },
+    blockGap: spacing.sm || fallback.spacing.sm,
+    markerGap: spacing.sm || fallback.spacing.sm,
+    padding: spacing.md || fallback.spacing.md,
+    radius: radii.md || fallback.radii.md,
+    imageWidth: IMAGE_WIDTH,
+  };
+}
+
+export { IMAGE_WIDTH as RICH_TEXT_IMAGE_WIDTH };