@multiplatform.one/rich-text 6.1.0 → 6.4.0

package/src/preview.spec.ts

@@ -0,0 +1,130 @@
+import { describe, expect, it } from "vitest";
+import { decodeEntities, isPreviewEmpty, parseHtmlPreview } from "./preview";
+
+describe("decodeEntities", () => {
+  it("decodes named and numeric entities", () => {
+    expect(decodeEntities("a & b <c> "d" 'e' A")).toBe(
+      "a & b <c> \"d\" 'e' A",
+    );
+  });
+
+  it("turns &nbsp; into a plain space", () => {
+    expect(decodeEntities("a&nbsp;b")).toBe("a b");
+  });
+
+  it("leaves unknown entities alone", () => {
+    expect(decodeEntities("&bogus;")).toBe("&bogus;");
+  });
+});
+
+describe("isPreviewEmpty", () => {
+  it("treats null, empty string, and empty paragraph as empty", () => {
+    expect(isPreviewEmpty(null)).toBe(true);
+    expect(isPreviewEmpty("")).toBe(true);
+    expect(isPreviewEmpty("<p></p>")).toBe(true);
+    expect(isPreviewEmpty("<p>  </p>")).toBe(true);
+    expect(isPreviewEmpty("<p><br></p>")).toBe(true);
+  });
+
+  it("treats text and images as content", () => {
+    expect(isPreviewEmpty("<p>hi</p>")).toBe(false);
+    expect(isPreviewEmpty('<p><img src="x.png"></p>')).toBe(false);
+  });
+});
+
+describe("parseHtmlPreview", () => {
+  it("parses paragraphs into separate blocks", () => {
+    const { blocks } = parseHtmlPreview("<p>alpha</p><p>beta</p>");
+    expect(blocks).toHaveLength(2);
+    expect(blocks[0].kind).toBe("paragraph");
+    expect(blocks[0].spans).toEqual([{ text: "alpha" }]);
+    expect(blocks[1].spans).toEqual([{ text: "beta" }]);
+  });
+
+  it("skips empty paragraphs", () => {
+    const { blocks } = parseHtmlPreview("<p>alpha</p><p></p><p>beta</p>");
+    expect(blocks).toHaveLength(2);
+  });
+
+  it("captures inline marks with nesting", () => {
+    const { blocks } = parseHtmlPreview(
+      "<p>plain <strong>bold <em>bolditalic</em></strong> <code>mono</code></p>",
+    );
+    expect(blocks[0].spans).toEqual([
+      { text: "plain " },
+      { text: "bold ", bold: true },
+      { text: "bolditalic", bold: true, italic: true },
+      { text: " " },
+      { text: "mono", code: true },
+    ]);
+  });
+
+  it("maps heading levels", () => {
+    const { blocks } = parseHtmlPreview("<h1>one</h1><h2>two</h2><h3>three</h3>");
+    expect(blocks.map((b) => b.kind)).toEqual(["heading1", "heading2", "heading3"]);
+  });
+
+  it("numbers ordered lists and marks bullets", () => {
+    const { blocks } = parseHtmlPreview(
+      "<ul><li>a</li><li>b</li></ul><ol><li>x</li><li>y</li></ol>",
+    );
+    expect(blocks.map((b) => b.kind)).toEqual(["bullet", "bullet", "ordered", "ordered"]);
+    expect(blocks[2].index).toBe(1);
+    expect(blocks[3].index).toBe(2);
+  });
+
+  it("tracks nested list indent", () => {
+    const { blocks } = parseHtmlPreview("<ul><li>a<ul><li>a1</li></ul></li></ul>");
+    expect(blocks[0].indent).toBe(0);
+    expect(blocks[1].indent).toBe(1);
+  });
+
+  it("parses 10Tap task lists with checked state", () => {
+    const { blocks } = parseHtmlPreview(
+      '<ul data-type="taskList">' +
+        '<li data-checked="true" data-type="taskItem"><label><input type="checkbox" checked></label><div><p>done</p></div></li>' +
+        '<li data-checked="false" data-type="taskItem"><label><input type="checkbox"></label><div><p>todo</p></div></li>' +
+        "</ul>",
+    );
+    expect(blocks.map((b) => b.kind)).toEqual(["task", "task"]);
+    expect(blocks[0].checked).toBe(true);
+    expect(blocks[0].spans.map((s) => s.text).join("")).toBe("done");
+    expect(blocks[1].checked).toBe(false);
+  });
+
+  it("flags blockquote content", () => {
+    const { blocks } = parseHtmlPreview("<blockquote><p>quoted</p></blockquote><p>after</p>");
+    expect(blocks[0].quote).toBe(true);
+    expect(blocks[0].spans[0].text).toBe("quoted");
+    expect(blocks[1].quote).toBeUndefined();
+  });
+
+  it("decodes entities and collapses whitespace", () => {
+    const { blocks } = parseHtmlPreview("<p>\n  a &amp;\n\n  b\n</p>");
+    expect(blocks[0].spans).toEqual([{ text: "a & b" }]);
+  });
+
+  it("represents images with a token", () => {
+    const { blocks } = parseHtmlPreview('<p>look <img src="x.png"> here</p>');
+    expect(blocks[0].spans.map((s) => s.text).join("")).toBe("look [image] here");
+  });
+
+  it("truncates at maxBlocks", () => {
+    const html = Array.from({ length: 9 }, (_, i) => `<p>p${i}</p>`).join("");
+    const { blocks, truncated } = parseHtmlPreview(html, 6);
+    expect(blocks).toHaveLength(6);
+    expect(truncated).toBe(true);
+  });
+
+  it("does not flag truncation when content fits", () => {
+    const { blocks, truncated } = parseHtmlPreview("<p>a</p><p>b</p>", 6);
+    expect(blocks).toHaveLength(2);
+    expect(truncated).toBe(false);
+  });
+
+  it("returns no blocks for empty input", () => {
+    expect(parseHtmlPreview("").blocks).toHaveLength(0);
+    expect(parseHtmlPreview("<p></p>").blocks).toHaveLength(0);
+    expect(parseHtmlPreview(null).blocks).toHaveLength(0);
+  });
+});

package/src/preview.ts

@@ -0,0 +1,287 @@
+/**
+ * Lightweight HTML -> preview-block parser for the native inline preview.
+ *
+ * The native RichEditor renders committed content as a compact, read-only
+ * preview surface (tap to open the fullscreen editor). A WebView per field is
+ * too heavy for that, so this parses the editor's own HTML output (Tiptap /
+ * 10Tap both emit a small, predictable tag set) into styled text blocks.
+ *
+ * Not a general HTML parser -- it understands exactly what the editor emits:
+ * p, h1-h6, ul/ol/li (incl. 10Tap taskList), blockquote, br, img and the
+ * inline marks strong/b, em/i, u, s/strike/del, code. Everything else is
+ * ignored (tags stripped, text kept).
+ */
+
+// ===========================================================================
+// Types
+// ===========================================================================
+
+export interface PreviewSpan {
+  text: string;
+  bold?: boolean;
+  italic?: boolean;
+  underline?: boolean;
+  strike?: boolean;
+  code?: boolean;
+}
+
+export type PreviewBlockKind =
+  | "paragraph"
+  | "heading1"
+  | "heading2"
+  | "heading3"
+  | "heading4"
+  | "heading5"
+  | "heading6"
+  | "bullet"
+  | "ordered"
+  | "task";
+
+export interface PreviewBlock {
+  kind: PreviewBlockKind;
+  spans: PreviewSpan[];
+  /** Inside a blockquote */
+  quote?: boolean;
+  /** Nested-list depth (0 = top level) */
+  indent?: number;
+  /** 1-based number for ordered list items */
+  index?: number;
+  /** Checked state for task list items */
+  checked?: boolean;
+}
+
+export interface PreviewResult {
+  blocks: PreviewBlock[];
+  /** True when content was cut off at maxBlocks */
+  truncated: boolean;
+}
+
+// ===========================================================================
+// Entities
+// ===========================================================================
+
+const NAMED_ENTITIES: Record<string, string> = {
+  amp: "&",
+  lt: "<",
+  gt: ">",
+  quot: '"',
+  apos: "'",
+  nbsp: " ",
+};
+
+export function decodeEntities(text: string): string {
+  return text.replace(/&(#x?[0-9a-fA-F]+|[a-zA-Z]+);/g, (match, entity: string) => {
+    if (entity[0] === "#") {
+      const code =
+        entity[1] === "x" || entity[1] === "X"
+          ? Number.parseInt(entity.slice(2), 16)
+          : Number.parseInt(entity.slice(1), 10);
+      return Number.isFinite(code) ? String.fromCodePoint(code) : match;
+    }
+    return NAMED_ENTITIES[entity.toLowerCase()] ?? match;
+  });
+}
+
+// ===========================================================================
+// Empty check
+// ===========================================================================
+
+/** True when the HTML has no visible text and no image (e.g. "" or "<p></p>") */
+export function isPreviewEmpty(html: string | null | undefined): boolean {
+  if (!html) return true;
+  if (/<img[\s>]/i.test(html)) return false;
+  return decodeEntities(html.replace(/<[^>]*>/g, "")).trim().length === 0;
+}
+
+// ===========================================================================
+// Parser
+// ===========================================================================
+
+const HEADING_KINDS: Record<string, PreviewBlockKind> = {
+  h1: "heading1",
+  h2: "heading2",
+  h3: "heading3",
+  h4: "heading4",
+  h5: "heading5",
+  h6: "heading6",
+};
+
+interface ListFrame {
+  type: "ul" | "ol" | "task";
+  counter: number;
+}
+
+export function parseHtmlPreview(html: string | null | undefined, maxBlocks = 6): PreviewResult {
+  const blocks: PreviewBlock[] = [];
+  let truncated = false;
+  if (!html) return { blocks, truncated };
+
+  let current: PreviewBlock | null = null;
+  const marks = { bold: 0, italic: 0, underline: 0, strike: 0, code: 0 };
+  const listStack: ListFrame[] = [];
+  let quoteDepth = 0;
+  let liDepth = 0;
+  let capped = false;
+
+  const flush = () => {
+    if (!current) return;
+    const spans = current.spans;
+    // trim outer whitespace, drop blanks
+    if (spans.length > 0) {
+      spans[0].text = spans[0].text.replace(/^\s+/, "");
+      spans[spans.length - 1].text = spans[spans.length - 1].text.replace(/\s+$/, "");
+    }
+    const kept = spans.filter((s) => s.text.length > 0);
+    if (kept.some((s) => s.text.trim().length > 0)) {
+      current.spans = kept;
+      blocks.push(current);
+      if (blocks.length >= maxBlocks) capped = true;
+    }
+    current = null;
+  };
+
+  const open = (kind: PreviewBlockKind, extra?: Partial<PreviewBlock>) => {
+    flush();
+    if (capped) {
+      truncated = true;
+      return;
+    }
+    current = { kind, spans: [], ...(quoteDepth > 0 && { quote: true }), ...extra };
+  };
+
+  const appendText = (raw: string) => {
+    const text = decodeEntities(raw).replace(/\s+/g, " ");
+    if (text.length === 0) return;
+    if (capped && !current) {
+      if (text.trim().length > 0) truncated = true;
+      return;
+    }
+    if (!current) {
+      if (text.trim().length === 0) return;
+      // stray text without a block wrapper (e.g. bare text at the root)
+      current = { kind: "paragraph", spans: [], ...(quoteDepth > 0 && { quote: true }) };
+    }
+    const span: PreviewSpan = {
+      text,
+      ...(marks.bold > 0 && { bold: true }),
+      ...(marks.italic > 0 && { italic: true }),
+      ...(marks.underline > 0 && { underline: true }),
+      ...(marks.strike > 0 && { strike: true }),
+      ...(marks.code > 0 && { code: true }),
+    };
+    const last = current.spans[current.spans.length - 1];
+    if (
+      last &&
+      !!last.bold === !!span.bold &&
+      !!last.italic === !!span.italic &&
+      !!last.underline === !!span.underline &&
+      !!last.strike === !!span.strike &&
+      !!last.code === !!span.code
+    ) {
+      last.text += span.text;
+    } else {
+      current.spans.push(span);
+    }
+  };
+
+  const tokens = html.match(/<[^>]*>|[^<]+/g) ?? [];
+  for (const token of tokens) {
+    if (token[0] !== "<") {
+      appendText(token);
+      continue;
+    }
+    const tagMatch = /^<\s*(\/?)\s*([a-zA-Z][a-zA-Z0-9]*)([^>]*)>$/.exec(token);
+    if (!tagMatch) continue;
+    const closing = tagMatch[1] === "/";
+    const name = tagMatch[2].toLowerCase();
+    const attrs = tagMatch[3] ?? "";
+
+    switch (name) {
+      case "p":
+        if (liDepth > 0) {
+          // paragraphs inside a list item flow into the item text
+          if (!closing) appendText(" ");
+        } else if (closing) {
+          flush();
+        } else {
+          open("paragraph");
+        }
+        break;
+      case "h1":
+      case "h2":
+      case "h3":
+      case "h4":
+      case "h5":
+      case "h6":
+        if (closing) flush();
+        else open(HEADING_KINDS[name]);
+        break;
+      case "br":
+        appendText(" ");
+        break;
+      case "ul":
+        if (closing) listStack.pop();
+        else {
+          listStack.push({
+            type: /data-type\s*=\s*["']taskList["']/i.test(attrs) ? "task" : "ul",
+            counter: 0,
+          });
+        }
+        break;
+      case "ol":
+        if (closing) listStack.pop();
+        else listStack.push({ type: "ol", counter: 0 });
+        break;
+      case "li": {
+        if (closing) {
+          liDepth = Math.max(0, liDepth - 1);
+          flush();
+          break;
+        }
+        const frame = listStack[listStack.length - 1] ?? { type: "ul" as const, counter: 0 };
+        const indent = Math.max(0, listStack.length - 1);
+        if (frame.type === "ol") {
+          frame.counter += 1;
+          open("ordered", { indent, index: frame.counter });
+        } else if (frame.type === "task") {
+          open("task", { indent, checked: /data-checked\s*=\s*["']true["']/i.test(attrs) });
+        } else {
+          open("bullet", { indent });
+        }
+        liDepth += 1;
+        break;
+      }
+      case "blockquote":
+        flush();
+        quoteDepth = Math.max(0, quoteDepth + (closing ? -1 : 1));
+        break;
+      case "strong":
+      case "b":
+        marks.bold = Math.max(0, marks.bold + (closing ? -1 : 1));
+        break;
+      case "em":
+      case "i":
+        marks.italic = Math.max(0, marks.italic + (closing ? -1 : 1));
+        break;
+      case "u":
+        marks.underline = Math.max(0, marks.underline + (closing ? -1 : 1));
+        break;
+      case "s":
+      case "strike":
+      case "del":
+        marks.strike = Math.max(0, marks.strike + (closing ? -1 : 1));
+        break;
+      case "code":
+        marks.code = Math.max(0, marks.code + (closing ? -1 : 1));
+        break;
+      case "img":
+        if (!closing) appendText("[image]");
+        break;
+      default:
+        // input/label/div/span/a/mark/... -- structure ignored, text kept
+        break;
+    }
+  }
+  flush();
+  return { blocks, truncated };
+}

package/src/richEditor.spec.tsx

@@ -4,7 +4,8 @@ import { describe, it, expect, vi } from "vitest";
 // Mocks — must come before imports
 // ---------------------------------------------------------------------------
 
-vi.mock("@multiplatform.one/forms", () => ({
+vi.mock("@multiplatform.one/forms", async (importOriginal) => ({
+  ...(await importOriginal<Record<string, unknown>>()),
   Button: (props: any) => (
     <button
       role="button"
@@ -26,11 +27,13 @@ vi.mock("@multiplatform.one/forms", () => ({
   },
 }));
 
-vi.mock("@multiplatform.one/components", () => ({
+vi.mock("@multiplatform.one/components", async (importOriginal) => ({
+  ...(await importOriginal<Record<string, unknown>>()),
   Tooltip: ({ children }: any) => children,
 }));
 
-vi.mock("@multiplatform.one/theme", () => ({
+vi.mock("@multiplatform.one/theme", async (importOriginal) => ({
+  ...(await importOriginal<Record<string, unknown>>()),
   useResolvedKnobs: (_options?: any) => ({
     knobProps: {
       body: {},
@@ -73,6 +76,10 @@ const mockEditor = {
     blur: vi.fn(),
   },
   setEditable: vi.fn(),
+  storage: {
+    mediaUpload: { handlers: {} },
+    suggestionChrome: { value: null },
+  },
 };
 
 vi.mock("@tiptap/react", () => ({

package/src/shared/t.ts

@@ -0,0 +1,25 @@
+import i18n from "i18next";
+
+type TOptions = Record<string, unknown>;
+
+function interpolate(template: string, options?: TOptions): string {
+  if (!options) return template;
+  return template.replace(/\{\{(\w+)\}\}/g, (_, key: string) => {
+    const value = options[key];
+    return value === undefined || value === null ? `{{${key}}}` : String(value);
+  });
+}
+
+/**
+ * Safe catalog lookup for labels, tooltips, and chrome copy. When i18n is
+ * not initialized (unit tests / headless DS), returns the English key with
+ * light `{{var}}` interpolation so callers never get `undefined`. Same
+ * contract as `forms/src/shared/t.ts` and `table/src/shared/t.ts`.
+ */
+export function t(key: string, options?: TOptions): string {
+  if (i18n?.isInitialized) {
+    const translated: unknown = i18n.t(key, options as never);
+    if (typeof translated === "string" && translated.length > 0) return translated;
+  }
+  return interpolate(key, options);
+}

package/src/shared/url.ts

@@ -0,0 +1,16 @@
+/**
+ * URL normalization shared by the web LinkDialog and the native
+ * link/image dialogs (LC-16: one implementation).
+ */
+
+/**
+ * Ensures URL has a protocol prefix, auto-prepending https:// if missing.
+ */
+export function normalizeUrl(url: string): string {
+  const trimmed = url.trim();
+  if (!trimmed) return trimmed;
+  if (/^https?:\/\//i.test(trimmed)) return trimmed;
+  if (/^mailto:/i.test(trimmed)) return trimmed;
+  if (/^tel:/i.test(trimmed)) return trimmed;
+  return `https://${trimmed}`;
+}

package/src/styled.ts

@@ -3,6 +3,7 @@
  */
 
 import { Separator, View, XStack, styled } from "tamagui";
+import { menuRowFrame } from "@multiplatform.one/theme";
 import { RichEditorContext } from "./context";
 
 // ===========================================================================
@@ -134,12 +135,18 @@ export const ToolbarSeparatorFrame = styled(Separator, {
 export const DropdownMenuItemFrame = styled(XStack, {
   name: "DropdownMenuItemFrame",
   context: RichEditorContext,
-  paddingHorizontal: "$3",
+  // SP-EDGE geometry comes from the shared LC-16 `menuRowFrame` recipe
+  // (theme): full-width row, own horizontal padding, flat corners, no focus
+  // outline — the same frame DropdownMenu items, Select options, and
+  // MentionInput suggestions use. Menu-only concerns stay local: cursor,
+  // gap, vertical padding, and the color ramp.
+  ...menuRowFrame,
+  // Pressable rows must expose a real control role — without it screen
+  // readers (and role-based queries) see an unnamed generic div.
+  role: "button",
   paddingVertical: "$2",
   gap: "$2",
-  alignItems: "center",
   cursor: "pointer",
-  borderRadius: "$2",
 
   hoverStyle: {
     backgroundColor: "$color4",
@@ -149,11 +156,11 @@ export const DropdownMenuItemFrame = styled(XStack, {
     backgroundColor: "$color5",
   },
 
+  // Focus highlight doubles as the focus indicator (full-width row);
+  // menuRowFrame suppresses the outline by design.
   focusVisibleStyle: {
     backgroundColor: "$color4",
-    outlineColor: "$color8",
-    outlineStyle: "solid",
-    outlineWidth: 2,
+    outlineStyle: "none" as any,
   },
 
   variants: {