@multiplatform.one/markdown 6.0.4 → 6.3.0

package/src/renderer.spec.tsx

@@ -0,0 +1,276 @@
+/**
+ * Renderer contract specs — the mdast → React pipeline consumers hit through
+ * `<Markdown>` / `renderMarkdown`. Locks down: every markdown construct maps
+ * to real DOM semantics, custom component overrides win over the built-ins,
+ * unsafe link protocols are stripped, and unknown nodes degrade gracefully.
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Text, View } from "tamagui";
+import { describe, expect, it } from "vitest";
+import { parseMarkdown } from "./parser";
+import { renderMarkdown, renderNode } from "./renderer";
+import type { MarkdownComponents } from "./types";
+
+function renderDoc(markdown: string, components?: Partial<MarkdownComponents>) {
+  const ast = parseMarkdown(markdown);
+  return renderWithProviders(<>{renderMarkdown(ast, { components })}</>);
+}
+
+describe("renderMarkdown — default component semantics", () => {
+  it("renders headings at every depth as real h1–h6 elements", () => {
+    const { container } = renderDoc(
+      ["# one", "## two", "### three", "#### four", "##### five", "###### six"].join("\n\n"),
+    );
+    for (const [tag, text] of [
+      ["h1", "one"],
+      ["h2", "two"],
+      ["h3", "three"],
+      ["h4", "four"],
+      ["h5", "five"],
+      ["h6", "six"],
+    ] as const) {
+      const el = container.querySelector(tag);
+      expect(el, tag).toBeTruthy();
+      expect(el!.textContent).toBe(text);
+    }
+  });
+
+  it("renders paragraph text with strong/em/del inline semantics", () => {
+    const { container } = renderDoc("plain **bold** *italic* ~~gone~~");
+    expect(container.querySelector("strong")?.textContent).toBe("bold");
+    expect(container.querySelector("em")?.textContent).toBe("italic");
+    expect(container.querySelector("del")?.textContent).toBe("gone");
+    expect(container.textContent).toContain("plain");
+  });
+
+  it("renders inline code through a real <code> element", () => {
+    const { container } = renderDoc("run `pnpm test` now");
+    const code = container.querySelector("code");
+    expect(code).toBeTruthy();
+    expect(code!.textContent).toBe("pnpm test");
+  });
+
+  it("renders links as anchors with href and external target/rel", () => {
+    const { container } = renderDoc('[docs](https://example.com "Docs")');
+    const anchor = container.querySelector("a");
+    expect(anchor).toBeTruthy();
+    expect(anchor!.getAttribute("href")).toBe("https://example.com");
+    expect(anchor!.getAttribute("target")).toBe("_blank");
+    expect(anchor!.getAttribute("rel")).toBe("noopener noreferrer");
+    expect(anchor!.getAttribute("title")).toBe("Docs");
+    expect(anchor!.textContent).toBe("docs");
+  });
+
+  it("keeps relative links same-tab without target/rel", () => {
+    const { container } = renderDoc("[guide](/docs/guide)");
+    const anchor = container.querySelector("a");
+    expect(anchor!.getAttribute("href")).toBe("/docs/guide");
+    expect(anchor!.getAttribute("target")).toBeNull();
+    expect(anchor!.getAttribute("rel")).toBeNull();
+  });
+
+  it("strips unsafe link protocols instead of emitting them (XSS guard)", () => {
+    const { container } = renderDoc("[evil](javascript:alert(1))");
+    const anchor = container.querySelector("a");
+    expect(anchor).toBeTruthy();
+    expect(anchor!.getAttribute("href")).toBeNull();
+    expect(anchor!.textContent).toBe("evil");
+  });
+
+  it("renders images with alt text exposed for accessibility", () => {
+    const { container } = renderDoc("![a kitten](https://example.com/cat.png)");
+    const labeled = container.querySelector('[aria-label="a kitten"]');
+    expect(labeled).toBeTruthy();
+  });
+
+  it("renders unordered lists as ul > li with bullet markers", () => {
+    const { container } = renderDoc("- alpha\n- beta");
+    const ul = container.querySelector("ul");
+    expect(ul).toBeTruthy();
+    const items = ul!.querySelectorAll("li");
+    expect(items).toHaveLength(2);
+    expect(items[0].textContent).toContain("alpha");
+    expect(items[0].textContent).toContain("•");
+  });
+
+  it("renders ordered lists with a custom start offset in the markers", () => {
+    const { container } = renderDoc("3. third\n4. fourth");
+    const ol = container.querySelector("ol");
+    expect(ol).toBeTruthy();
+    const items = ol!.querySelectorAll("li");
+    expect(items[0].textContent).toContain("3.");
+    expect(items[1].textContent).toContain("4.");
+  });
+
+  it("renders GFM task lists as read-only checkboxes with aria-checked state", () => {
+    const { container } = renderDoc("- [x] done\n- [ ] todo");
+    const boxes = container.querySelectorAll('[role="checkbox"]');
+    expect(boxes).toHaveLength(2);
+    expect(boxes[0].getAttribute("aria-checked")).toBe("true");
+    expect(boxes[1].getAttribute("aria-checked")).toBe("false");
+    expect(boxes[0].getAttribute("aria-disabled")).toBe("true");
+  });
+
+  it("renders blockquote content", () => {
+    const { container } = renderDoc("> wise words");
+    expect(container.textContent).toContain("wise words");
+  });
+
+  it("renders GFM tables into thead/tbody with header and data cells", () => {
+    const { container } = renderDoc(
+      ["| Name | Age |", "| :--- | ---: |", "| Ada | 36 |", "| Grace | 85 |"].join("\n"),
+    );
+    expect(container.querySelector("table")).toBeTruthy();
+    const headers = container.querySelectorAll("thead th");
+    expect(headers).toHaveLength(2);
+    expect(headers[0].textContent).toBe("Name");
+    const bodyRows = container.querySelectorAll("tbody tr");
+    expect(bodyRows).toHaveLength(2);
+    expect(bodyRows[0].querySelectorAll("td")[0].textContent).toBe("Ada");
+  });
+
+  it("renders hard line breaks as <br> on web", () => {
+    const { container } = renderDoc("first  \nsecond");
+    expect(container.querySelector("br")).toBeTruthy();
+  });
+
+  it("renders raw html blocks via innerHTML on web", () => {
+    const { container } = renderDoc('<div class="raw-html-marker">raw!</div>');
+    const marker = container.querySelector(".raw-html-marker");
+    expect(marker).toBeTruthy();
+    expect(marker!.textContent).toBe("raw!");
+  });
+
+  it("renders a thematic break without crashing surrounding content", () => {
+    const { container } = renderDoc("above\n\n---\n\nbelow");
+    expect(container.textContent).toContain("above");
+    expect(container.textContent).toContain("below");
+  });
+});
+
+describe("renderMarkdown — custom component overrides", () => {
+  it("prefers custom heading/paragraph/inline components over the built-ins", () => {
+    const components: Partial<MarkdownComponents> = {
+      h1: ({ children }) => <Text data-testid="custom-h1">{children}</Text>,
+      p: ({ children }) => <Text data-testid="custom-p">{children}</Text>,
+      strong: ({ children }) => <Text data-testid="custom-strong">{children}</Text>,
+      em: ({ children }) => <Text data-testid="custom-em">{children}</Text>,
+      del: ({ children }) => <Text data-testid="custom-del">{children}</Text>,
+      inlineCode: ({ children }) => <Text data-testid="custom-inline-code">{children}</Text>,
+    };
+    const { getByTestId } = renderDoc("# Title\n\n**b** *i* ~~d~~ `c`", components);
+    expect(getByTestId("custom-h1").textContent).toBe("Title");
+    expect(getByTestId("custom-p")).toBeTruthy();
+    expect(getByTestId("custom-strong").textContent).toBe("b");
+    expect(getByTestId("custom-em").textContent).toBe("i");
+    expect(getByTestId("custom-del").textContent).toBe("d");
+    expect(getByTestId("custom-inline-code").textContent).toBe("c");
+  });
+
+  it("routes fenced code through the custom code component with lang and meta", () => {
+    let seen: { lang?: string | null; meta?: string | null } = {};
+    const components: Partial<MarkdownComponents> = {
+      code: ({ children, lang, meta }) => {
+        seen = { lang, meta };
+        return <Text data-testid="custom-code">{children}</Text>;
+      },
+    };
+    const { getByTestId } = renderDoc('```ts title="x"\nconst a = 1;\n```', components);
+    expect(getByTestId("custom-code").textContent).toBe("const a = 1;");
+    expect(seen.lang).toBe("ts");
+    expect(seen.meta).toBe('title="x"');
+  });
+
+  it("routes links and images through custom a/img components", () => {
+    const components: Partial<MarkdownComponents> = {
+      a: ({ href, children }) => (
+        <Text data-testid="custom-a" data-href={href}>
+          {children}
+        </Text>
+      ),
+      img: ({ src, alt }) => <Text data-testid="custom-img">{`${alt}:${src}`}</Text>,
+    };
+    const { getByTestId } = renderDoc("[x](/y)\n\n![pic](/img.png)", components);
+    expect(getByTestId("custom-a").getAttribute("data-href")).toBe("/y");
+    expect(getByTestId("custom-img").textContent).toBe("pic:/img.png");
+  });
+
+  it("routes lists through custom ul/ol/li with ordered/start metadata", () => {
+    const olSeen: Array<{ ordered: boolean; start?: number | null }> = [];
+    const components: Partial<MarkdownComponents> = {
+      ol: ({ children, ordered, start }) => {
+        olSeen.push({ ordered, start });
+        return <View data-testid="custom-ol">{children}</View>;
+      },
+      li: ({ children, checked }) => (
+        <Text data-testid="custom-li" data-checked={String(checked)}>
+          {children}
+        </Text>
+      ),
+    };
+    const { getByTestId, getAllByTestId } = renderDoc("5. five\n6. six", components);
+    expect(getByTestId("custom-ol")).toBeTruthy();
+    expect(olSeen[0]).toEqual({ ordered: true, start: 5 });
+    expect(getAllByTestId("custom-li")).toHaveLength(2);
+  });
+
+  it("routes blockquote/hr/br/table parts through custom components", () => {
+    const components: Partial<MarkdownComponents> = {
+      blockquote: ({ children }) => <View data-testid="custom-bq">{children}</View>,
+      hr: () => <View data-testid="custom-hr" />,
+      br: () => <Text data-testid="custom-br"> </Text>,
+      table: ({ children }) => <View data-testid="custom-table">{children}</View>,
+      tr: ({ children, isHeader }) => (
+        <View data-testid={isHeader ? "custom-tr-head" : "custom-tr-body"}>{children}</View>
+      ),
+      th: ({ children }) => <Text data-testid="custom-th">{children}</Text>,
+      td: ({ children, align }) => (
+        <Text data-testid="custom-td" data-align={String(align)}>
+          {children}
+        </Text>
+      ),
+    };
+    const doc = ["> quote", "", "---", "", "a  ", "b", "", "| H |", "| :---: |", "| D |"].join(
+      "\n",
+    );
+    const { getByTestId } = renderDoc(doc, components);
+    expect(getByTestId("custom-bq").textContent).toContain("quote");
+    expect(getByTestId("custom-hr")).toBeTruthy();
+    expect(getByTestId("custom-br")).toBeTruthy();
+    expect(getByTestId("custom-table")).toBeTruthy();
+    expect(getByTestId("custom-tr-head")).toBeTruthy();
+    expect(getByTestId("custom-tr-body")).toBeTruthy();
+    expect(getByTestId("custom-th").textContent).toBe("H");
+    expect(getByTestId("custom-td").textContent).toBe("D");
+    expect(getByTestId("custom-td").getAttribute("data-align")).toBe("center");
+  });
+});
+
+describe("renderNode — unknown node degradation", () => {
+  it("renders children of unknown container nodes instead of dropping them", () => {
+    const { container } = renderWithProviders(
+      <>
+        {renderNode(
+          {
+            type: "futureContainer",
+            children: [{ type: "text", value: "still visible" }],
+          } as any,
+          0,
+        )}
+      </>,
+    );
+    expect(container.textContent).toContain("still visible");
+  });
+
+  it("renders unknown leaf nodes with a string value as text", () => {
+    const { container } = renderWithProviders(
+      <>{renderNode({ type: "futureLeaf", value: "leaf value" } as any, 0)}</>,
+    );
+    expect(container.textContent).toContain("leaf value");
+  });
+
+  it("returns null for unknown nodes with neither children nor value", () => {
+    expect(renderNode({ type: "mystery" } as any, 0)).toBeNull();
+  });
+});

package/src/renderer.tsx

@@ -47,6 +47,7 @@ import {
   MarkdownTableCell,
   Break,
 } from "./components";
+import { MermaidBlock } from "./mermaid/MermaidBlock";
 
 type AnyNode =
   | Root
@@ -77,6 +78,7 @@ interface RenderOptions {
   listContext?: {
     ordered: boolean;
     index: number;
+    start?: number;
   };
 }
 
@@ -173,6 +175,11 @@ export function renderNode(
           </CustomCode>
         );
       }
+      // ```mermaid fences render as live diagrams (GitLab parity); the
+      // engine lazy-loads on first diagram, native falls back to code.
+      if (codeNode.lang === "mermaid") {
+        return <MermaidBlock key={key}>{codeNode.value}</MermaidBlock>;
+      }
       return (
         <CodeBlock key={key} lang={codeNode.lang} theme={codeTheme}>
           {codeNode.value}
@@ -212,7 +219,11 @@ export function renderNode(
       const listChildren = listNode.children.map((child, i) =>
         renderNode(child, i, {
           ...options,
-          listContext: { ordered: listNode.ordered ?? false, index: i },
+          listContext: {
+            ordered: listNode.ordered ?? false,
+            index: i,
+            start: listNode.start ?? undefined,
+          },
         }),
       );
       if (CustomList) {
@@ -245,6 +256,7 @@ export function renderNode(
           checked={liNode.checked}
           index={listContext?.index}
           ordered={listContext?.ordered}
+          start={listContext?.start}
         >
           {renderChildren(liNode, options)}
         </MarkdownListItem>

package/src/shared/colorRamps.ts

@@ -28,16 +28,6 @@ export const markdownBlockquoteColors = {
   },
 } as const;
 
-export const markdownTableColors = {
-  background: {
-    base: "transparent",
-    header: "$color3",
-  },
-  border: {
-    base: "$borderColor",
-  },
-} as const;
-
 export const markdownLinkColors = {
   text: {
     base: "$blue10",

package/src/shared/cutoffGradient.ts

@@ -0,0 +1,40 @@
+import { useTheme } from "tamagui";
+
+/**
+ * Convert a concrete CSS color into its fully transparent variant so a
+ * LinearGradient can fade from transparent into the color.
+ */
+export function toTransparent(color: string): string {
+  const fnMatch = color.match(/^(rgb|hsl)a?\(([^)]+)\)$/i);
+  if (fnMatch) {
+    const parts = fnMatch[2].split(",").map((part) => part.trim());
+    const [a, b, c] = parts;
+    return `${fnMatch[1].toLowerCase()}a(${a}, ${b}, ${c}, 0)`;
+  }
+  const hexMatch = color.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+  if (hexMatch) {
+    let hex = hexMatch[1];
+    if (hex.length === 3) {
+      hex = hex
+        .split("")
+        .map((char) => char + char)
+        .join("");
+    }
+    const r = Number.parseInt(hex.slice(0, 2), 16);
+    const g = Number.parseInt(hex.slice(2, 4), 16);
+    const b = Number.parseInt(hex.slice(4, 6), 16);
+    return `rgba(${r}, ${g}, ${b}, 0)`;
+  }
+  return "transparent";
+}
+
+/**
+ * Concrete [transparent, background] colors for cutoff fade gradients.
+ * LinearGradient cannot interpolate theme tokens or CSS variables, so the
+ * values must be resolved here (SB-M-1203).
+ */
+export function useCutoffGradientColors(): [string, string] {
+  const theme = useTheme();
+  const background = theme.background?.val ?? "#ffffff";
+  return [toTransparent(background), background];
+}

package/src/shiki/index.ts

@@ -1,11 +1,7 @@
-export {
-  getHighlighter,
-  highlightCode,
-  highlightCodeSync,
-  preloadHighlighter,
-  loadLanguage,
-  isHighlighterReady,
-  type ThemedToken,
-  type BundledLanguage,
-  type BundledTheme,
-} from "./highlighter";
+/**
+ * LC-16 ONE-IMPLEMENTATION: the shiki highlighter stack lives in
+ * `@multiplatform.one/components` (`highlightCode` / `useShikiTokens` /
+ * `HighlightedCode`) — one JS-regex-engine highlighter for the whole app.
+ * This module only keeps the local shiki type path alive for the renderer.
+ */
+export type { BundledLanguage, BundledTheme } from "shiki";

package/src/stories/Blocks.stories.tsx

@@ -0,0 +1,232 @@
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { Paragraph as TamaguiParagraph, XStack, YStack } from "tamagui";
+import { Blockquote } from "../components/Blockquote";
+import { Heading } from "../components/Heading";
+import { HorizontalRule } from "../components/HorizontalRule";
+import { InlineCode } from "../components/InlineCode";
+import { Strong, Emphasis } from "../components/InlineStyles";
+import { Link } from "../components/Link";
+import { MarkdownList, MarkdownListItem } from "../components/List";
+import { Paragraph } from "../components/Paragraph";
+import { HR } from "../Hr";
+import { LI } from "../Li";
+import { UL } from "../Ul";
+
+const meta: Meta = {
+  title: "Markdown/Blocks",
+  parameters: {
+    status: { type: "beta" },
+    docs: {
+      description: {
+        component:
+          "Markdown block renderers: Heading, Paragraph, Blockquote, HorizontalRule/HR, MarkdownList/MarkdownListItem, UL/LI.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const HeadingScale: Story = {
+  render: () => (
+    <YStack maxWidth={700} padding="$4">
+      <Heading level={1}>Heading level 1</Heading>
+      <Heading level={2}>Heading level 2</Heading>
+      <Heading level={3}>Heading level 3</Heading>
+      <Heading level={4}>Heading level 4</Heading>
+      <Heading level={5}>Heading level 5</Heading>
+      <Heading level={6}>Heading level 6</Heading>
+    </YStack>
+  ),
+};
+
+export const HeadingEdge: Story = {
+  args: { level: 2, children: "Knob-driven heading" },
+  argTypes: {
+    level: { control: "select", options: [1, 2, 3, 4, 5, 6] },
+    children: { control: "text" },
+  },
+  render: (args: any) => (
+    <YStack maxWidth={700} padding="$4">
+      <Heading level={args.level}>{args.children}</Heading>
+      <Heading level={2}>{""}</Heading>
+      <Heading level={2}>
+        A very long duplicate heading that keeps going far beyond a single line to prove wrapping
+        behaviour holds for headings too
+      </Heading>
+      <Heading level={2}>
+        A very long duplicate heading that keeps going far beyond a single line to prove wrapping
+        behaviour holds for headings too
+      </Heading>
+      <Heading level={3}>
+        Inline children: <Strong>bold</Strong>, <Emphasis>italic</Emphasis>,{" "}
+        <InlineCode>code()</InlineCode> and a <Link href="#top">link</Link>
+      </Heading>
+      <YStack style={{ direction: "rtl" } as any}>
+        <Heading level={2}>عنوان بالعربية RTL</Heading>
+      </YStack>
+    </YStack>
+  ),
+};
+
+export const ParagraphStory: Story = {
+  name: "Paragraph",
+  args: { children: "A knob-driven paragraph body." },
+  argTypes: { children: { control: "text" } },
+  render: (args: any) => (
+    <YStack maxWidth={700} padding="$4">
+      <Paragraph>{args.children}</Paragraph>
+      <Paragraph>{""}</Paragraph>
+      <Paragraph>
+        {
+          "A long paragraph exercising wrapping and selection. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
+        }
+      </Paragraph>
+      <Paragraph>
+        Inline mix: <InlineCode>code</InlineCode>, <Link href="https://example.com">a link</Link>,
+        and <Emphasis>emphasis</Emphasis> inside one paragraph.
+      </Paragraph>
+      <YStack style={{ direction: "rtl" } as any}>
+        <Paragraph>
+          {"نص عربي طويل يلتف من اليمين إلى اليسار ويحافظ على اتجاه القراءة الصحيح في الفقرة."}
+        </Paragraph>
+      </YStack>
+    </YStack>
+  ),
+};
+
+export const BlockquoteStory: Story = {
+  name: "Blockquote",
+  render: () => (
+    <YStack maxWidth={700} padding="$4">
+      <Blockquote>
+        <Paragraph>A simple quote paragraph.</Paragraph>
+      </Blockquote>
+      <Blockquote>
+        <Paragraph>
+          A long quote. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+          exercitation ullamco laboris.
+        </Paragraph>
+        <Blockquote>
+          <Paragraph>A nested quote inside the first.</Paragraph>
+        </Blockquote>
+        <MarkdownList ordered={false}>
+          <MarkdownListItem index={0}>
+            <Paragraph>list inside quote</Paragraph>
+          </MarkdownListItem>
+        </MarkdownList>
+        <Paragraph>
+          with <InlineCode>inline code</InlineCode> too
+        </Paragraph>
+      </Blockquote>
+      <Blockquote>{null}</Blockquote>
+      <YStack style={{ direction: "rtl" } as any}>
+        <Blockquote>
+          <Paragraph>{"اقتباس RTL — يجب أن يبقى الحد على جهة البداية المنطقية"}</Paragraph>
+        </Blockquote>
+      </YStack>
+    </YStack>
+  ),
+};
+
+export const Rules: Story = {
+  render: () => (
+    <YStack maxWidth={700} padding="$4">
+      <TamaguiParagraph>HorizontalRule (markdown mapped):</TamaguiParagraph>
+      <HorizontalRule />
+      <TamaguiParagraph>HR (MDX alias):</TamaguiParagraph>
+      <HR />
+      <TamaguiParagraph>Narrow container (160px):</TamaguiParagraph>
+      <YStack width={160} borderWidth={1} borderColor="$color5">
+        <HorizontalRule />
+        <HR />
+      </YStack>
+    </YStack>
+  ),
+};
+
+export const Lists: Story = {
+  render: () => (
+    <YStack maxWidth={700} padding="$4">
+      <TamaguiParagraph fontWeight="600">Unordered</TamaguiParagraph>
+      <MarkdownList ordered={false}>
+        <MarkdownListItem index={0}>
+          <Paragraph>first item</Paragraph>
+        </MarkdownListItem>
+        <MarkdownListItem index={1}>
+          <Paragraph>
+            a multiline item long enough to wrap onto a second line so the marker alignment with the
+            first line can be verified precisely
+          </Paragraph>
+        </MarkdownListItem>
+        <MarkdownListItem index={2}>
+          <Paragraph>nested below:</Paragraph>
+          <MarkdownList ordered={false}>
+            <MarkdownListItem index={0}>
+              <Paragraph>nested child</Paragraph>
+              <MarkdownList ordered={false}>
+                <MarkdownListItem index={0}>
+                  <Paragraph>deep nested child</Paragraph>
+                </MarkdownListItem>
+              </MarkdownList>
+            </MarkdownListItem>
+          </MarkdownList>
+        </MarkdownListItem>
+      </MarkdownList>
+      <TamaguiParagraph fontWeight="600">Ordered (start ignored?)</TamaguiParagraph>
+      <MarkdownList ordered start={5}>
+        <MarkdownListItem ordered index={0}>
+          <Paragraph>ordered one</Paragraph>
+        </MarkdownListItem>
+        <MarkdownListItem ordered index={1}>
+          <Paragraph>ordered two</Paragraph>
+        </MarkdownListItem>
+      </MarkdownList>
+      <TamaguiParagraph fontWeight="600">Tasks</TamaguiParagraph>
+      <MarkdownList ordered={false}>
+        <MarkdownListItem checked={true} index={0}>
+          <Paragraph>checked task</Paragraph>
+        </MarkdownListItem>
+        <MarkdownListItem checked={false} index={1}>
+          <Paragraph>unchecked task</Paragraph>
+        </MarkdownListItem>
+      </MarkdownList>
+      <TamaguiParagraph fontWeight="600">Empty list</TamaguiParagraph>
+      <MarkdownList ordered={false}>{null}</MarkdownList>
+      <TamaguiParagraph fontWeight="600">RTL</TamaguiParagraph>
+      <YStack style={{ direction: "rtl" } as any}>
+        <MarkdownList ordered={false}>
+          <MarkdownListItem index={0}>
+            <Paragraph>{"عنصر قائمة RTL"}</Paragraph>
+          </MarkdownListItem>
+        </MarkdownList>
+      </YStack>
+    </YStack>
+  ),
+};
+
+export const UlLi: Story = {
+  render: () => (
+    <YStack maxWidth={700} padding="$4">
+      <UL>
+        <LI>custom LI one</LI>
+        <LI>
+          a multiline custom LI long enough to wrap so we can confirm the list-item display keeps
+          its disc marker aligned with the first line of text
+        </LI>
+        <LI>{""}</LI>
+        <LI>
+          nested UL below:
+          <UL>
+            <LI>nested LI</LI>
+            <UL>
+              <LI>deep nested LI</LI>
+            </UL>
+          </UL>
+        </LI>
+      </UL>
+    </YStack>
+  ),
+};