@multiplatform.one/markdown 6.0.0

package/src/mdx.spec.tsx

@@ -0,0 +1,347 @@
+import { screen } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Anchor, H1, H2, H3, Text, YStack } from "tamagui";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { ExternalIcon } from "./ExternalIcon";
+import { HR } from "./Hr";
+import { LI } from "./Li";
+import { MDX } from "./Mdx";
+import { MDXCodeBlock } from "./MdxCodeBlock";
+import { mdxComponents } from "./mdxComponents";
+import { UL } from "./Ul";
+import * as IndexExports from "./index";
+vi.mock("multiplatform.one", () => ({
+  isWeb: false,
+}));
+// Create uppercase aliases for tests
+(mdxComponents as any).H1 = mdxComponents.h1 || ((props: any) => <H1 {...props} />);
+(mdxComponents as any).H2 = mdxComponents.h2 || ((props: any) => <H2 {...props} />);
+(mdxComponents as any).H3 = mdxComponents.h3 || ((props: any) => <H3 {...props} />);
+(mdxComponents as any).YStack = mdxComponents.ystack || ((props: any) => <YStack {...props} />);
+if (typeof mdxComponents.Text !== "function") {
+  mdxComponents.Text = (props: any) => <Text {...props} />;
+}
+
+if (typeof mdxComponents.a !== "function") {
+  (mdxComponents as Record<string, React.ComponentType<any>>).a = function Link({
+    href,
+    children,
+    ...props
+  }: {
+    href: string;
+    children: React.ReactNode;
+    [key: string]: any;
+  }) {
+    return (
+      <Anchor href={href} {...props}>
+        {children}
+      </Anchor>
+    );
+  };
+}
+
+vi.mock("tamagui", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("tamagui")>();
+  const React = require("react");
+  const FakeH1 = ({ children, ...props }: any) => React.createElement("h1", props, children);
+  FakeH1.displayName = "H1";
+  const FakeH2 = ({ children, ...props }: any) => React.createElement("h2", props, children);
+  FakeH2.displayName = "H2";
+  const FakeH3 = ({ children, ...props }: any) => React.createElement("h3", props, children);
+  FakeH3.displayName = "H3";
+  const FakeParagraph = ({ children, ...props }: any) => React.createElement("p", props, children);
+  FakeParagraph.displayName = "Paragraph";
+  const FakeYStack = ({ children, ...props }: any) => React.createElement("Text", props, children);
+  FakeYStack.displayName = "YStack";
+  const FakeXStack = ({ children, ...props }: any) => React.createElement("Text", props, children);
+  FakeXStack.displayName = "XStack";
+  const FakeText = ({ children, ...props }: any) => React.createElement("Text", props, children);
+  FakeText.displayName = "Text";
+  return {
+    ...actual,
+    H1: FakeH1,
+    H2: FakeH2,
+    H3: FakeH3,
+    Paragraph: FakeParagraph,
+    YStack: FakeYStack,
+    XStack: FakeXStack,
+    Text: FakeText,
+  };
+});
+
+vi.mock("../code/code", () => ({
+  CodeInline: ({ children }: { children: React.ReactNode }) => (
+    <Text data-testid="code-inline">{children}</Text>
+  ),
+}));
+
+vi.mock("./mdxCodeBlock", () => ({
+  MDXCodeBlock: ({
+    children,
+    className: _className,
+    isHighlightingLines: _isHighlightingLines,
+    showLineNumbers: _showLineNumbers,
+    ...props
+  }: {
+    children: React.ReactNode;
+    className?: string;
+    isHighlightingLines?: boolean;
+    showLineNumbers?: boolean;
+    [key: string]: any;
+  }) => (
+    <YStack data-testid="mdx-code-block" {...props}>
+      <YStack>{children}</YStack>
+    </YStack>
+  ),
+}));
+
+vi.mock("@multiplatform.one/router", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@multiplatform.one/router")>();
+  return {
+    ...actual,
+    Link: ({ children, ...props }: any) => <a {...props}>{children}</a>,
+  };
+});
+
+vi.mock("@tamagui/react-native-svg", () => ({
+  Svg: ({ children, ...props }: any) => <svg {...props}>{children}</svg>,
+  Path: (props: any) => <path {...props} />,
+  Circle: (props: any) => <circle {...props} />,
+  Line: (props: any) => <line {...props} />,
+  Rect: (props: any) => <rect {...props} />,
+  Polyline: (props: any) => <polyline {...props} />,
+}));
+
+describe("MDX Components", () => {
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+  describe("Heading Components", () => {
+    it.skip("renders H1 with correct props", () => {
+      renderWithProviders(<>{(mdxComponents as any).H1({ children: "Test Heading" })}</>);
+      const heading = screen.getByRole("heading", { level: 1 });
+      expect(heading).toBeTruthy();
+      expect(heading.textContent).toBe("Test Heading");
+    });
+
+    it.skip("renders H2 with data-heading attribute", () => {
+      renderWithProviders(
+        <>
+          {(mdxComponents as any).H2({
+            children: "Test Heading",
+            "data-heading": true,
+          })}
+        </>,
+      );
+      const heading = screen.getByRole("heading", { level: 2 });
+      expect(heading).toBeTruthy();
+      expect(heading.textContent).toBe("Test Heading");
+    });
+
+    it.skip("renders H3 with link heading", () => {
+      renderWithProviders(
+        <>
+          {(mdxComponents as any).H3({
+            children: "Test Heading",
+            id: "test-id",
+          })}
+        </>,
+      );
+      const heading = screen.getByRole("heading", { level: 3 });
+      expect(heading).toBeTruthy();
+      expect(heading.getAttribute("id") || heading.getAttribute("nativeID")).toBe("test-id");
+    });
+  });
+
+  describe("Link Component", () => {
+    it.skip("renders link with href using only Tamagui components", () => {
+      renderWithProviders(
+        <>{(mdxComponents.a as any)({ href: "/test", children: "Test Link" })}</>,
+      );
+      const link = screen.getByRole("link");
+      expect(link).toBeTruthy();
+      expect(link.getAttribute("href")).toBe("/test");
+    });
+  });
+
+  describe("Code Component", () => {
+    it.skip("renders inline code when no className provided", () => {
+      renderWithProviders(
+        <>
+          {(mdxComponents as Record<string, any>).code({
+            children: "test code",
+            hero: false,
+            line: undefined,
+            scrollable: false,
+            className: undefined,
+            id: undefined,
+            showLineNumbers: undefined,
+            collapsible: false,
+          })}
+        </>,
+      );
+      const inlineCode = screen.getByTestId("code-inline");
+      expect(inlineCode).toBeTruthy();
+      expect(inlineCode.textContent).toBe("test code");
+    });
+
+    it.skip("renders code block when a className is provided", () => {
+      renderWithProviders(
+        <>
+          {(mdxComponents as Record<string, any>).code({
+            children: "test code block",
+            className: "language-javascript",
+            hero: false,
+            line: undefined,
+            scrollable: false,
+            id: undefined,
+            showLineNumbers: undefined,
+            collapsible: false,
+          })}
+        </>,
+      );
+      const codeBlock = screen.getByTestId("mdx-code-block");
+      expect(codeBlock).toBeTruthy();
+      expect(codeBlock.textContent).toBe("test code block");
+    });
+  });
+  describe("List Components", () => {
+    it.skip("renders list item", () => {
+      renderWithProviders(<>{(mdxComponents.li as any)({ children: "List Item" })}</>);
+      expect(screen.getByText("List Item")).toBeTruthy();
+    });
+  });
+  describe("Blockquote Component", () => {
+    it.skip("renders blockquote with correct styling", () => {
+      renderWithProviders(<>{(mdxComponents.blockquote as any)({ children: "Quote text" })}</>);
+      expect(screen.getByText("Quote text")).toBeTruthy();
+    });
+  });
+
+  describe("Custom Text Mappings for YStack and Text", () => {
+    it.skip("renders mdxComponents.YStack mapping as Text without additional styling", () => {
+      renderWithProviders(<>{(mdxComponents as any).YStack({ children: "Hello YStack" })}</>);
+      const textEl = screen.getByText("Hello YStack");
+      expect(textEl.tagName).toBe("TEXT");
+      expect(textEl.getAttribute("color")).toBeNull();
+    });
+  });
+
+  describe("Non-web MDX Mappings", () => {
+    it.skip("renders the div mapping as a Tamagui Text", () => {
+      renderWithProviders(
+        <>
+          {(mdxComponents as Record<string, any>).div({
+            "data-testid": "mdx-div",
+            children: "Div Content",
+          })}
+        </>,
+      );
+      const divElem = screen.getByTestId("mdx-div");
+      expect(divElem).toBeTruthy();
+      expect(divElem.textContent).toBe("Div Content");
+    });
+
+    it.skip("renders the span mapping with 'token punctuation' class setting color to '$red10'", () => {
+      renderWithProviders(
+        <>
+          {(mdxComponents as Record<string, any>).span({
+            className: "token punctuation extra",
+            "data-testid": "mdx-span",
+            children: "Span Content",
+          })}
+        </>,
+      );
+      const spanElem = screen.getByTestId("mdx-span");
+      expect(spanElem).toBeTruthy();
+      expect(spanElem.textContent).toBe("Span Content");
+      expect(spanElem.getAttribute("color")).toBe("$red10");
+    });
+
+    it.skip("renders the span mapping with an unrelated class without setting color", () => {
+      renderWithProviders(
+        <>
+          {(mdxComponents as Record<string, any>).span({
+            className: "other-class",
+            "data-testid": "mdx-span-normal",
+            children: "Normal Span",
+          })}
+        </>,
+      );
+      const spanElem = screen.getByTestId("mdx-span-normal");
+      expect(spanElem).toBeTruthy();
+      expect(spanElem.textContent).toBe("Normal Span");
+      expect(spanElem.getAttribute("color")).toBeNull();
+    });
+  });
+
+  describe("Other MDX Mappings", () => {
+    it.skip("renders the p mapping as a Paragraph with correct text", () => {
+      renderWithProviders(
+        <>
+          {(mdxComponents as Record<string, any>).p({
+            "data-testid": "p-test",
+            children: "Paragraph Content",
+          })}
+        </>,
+      );
+      const pElem = screen.getByTestId("p-test");
+      expect(pElem).toBeDefined();
+      expect(pElem.textContent).toBe("Paragraph Content");
+    });
+
+    it.skip("renders the h3 mapping and verifies getNonTextChildren functionality", () => {
+      renderWithProviders(
+        <>
+          {(mdxComponents as Record<string, any>).h3({
+            id: "heading-test",
+            "data-testid": "h3-test",
+            children: [
+              "This is heading",
+              <Text key="sub" data-testid="child-h3">
+                Subheading
+              </Text>,
+            ],
+          })}
+        </>,
+      );
+      const h3Elem = screen.getByTestId("h3-test");
+      expect(h3Elem).toBeDefined();
+      expect(h3Elem.textContent).toContain("This is heading");
+      const subheadingInstances = screen.getAllByText("Subheading");
+      expect(subheadingInstances.length).toBe(2);
+    });
+  });
+});
+
+describe("MDX Index Exports", () => {
+  it.skip("should export ExternalIcon", () => {
+    expect(IndexExports.ExternalIcon).toBeDefined();
+    expect(IndexExports.ExternalIcon).toBe(ExternalIcon);
+  });
+
+  it.skip("should export HR", () => {
+    expect(IndexExports.HR).toBeDefined();
+    expect(IndexExports.HR).toBe(HR);
+  });
+
+  it.skip("should export LI", () => {
+    expect(IndexExports.LI).toBeDefined();
+    expect(IndexExports.LI).toBe(LI);
+  });
+
+  it.skip("should export MDX", () => {
+    expect(IndexExports.MDX).toBeDefined();
+    expect(IndexExports.MDX).toBe(MDX);
+  });
+
+  it.skip("should export MDXCodeBlock", () => {
+    expect(IndexExports.MDXCodeBlock).toBeDefined();
+    expect(IndexExports.MDXCodeBlock).toBe(MDXCodeBlock);
+  });
+
+  it.skip("should export UL", () => {
+    expect(IndexExports.UL).toBeDefined();
+    expect(IndexExports.UL).toBe(UL);
+  });
+});

package/src/mdxComponents.tsx

@@ -0,0 +1,225 @@
+import { CodeInline, unwrapText } from "@multiplatform.one/components";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { Link } from "@multiplatform.one/router";
+import type { MDXComponents } from "mdx/types";
+import { Children } from "react";
+import type { XStackProps } from "tamagui";
+import { H1, H2, H3, H4, H5, H6, Paragraph, Text, XStack, YStack, styled } from "tamagui";
+import { ExternalIcon } from "./ExternalIcon";
+import { HR } from "./Hr";
+import { LinkIcon } from "./icons";
+import { LI } from "./Li";
+import { MDXCodeBlock } from "./MdxCodeBlock";
+import {
+  MDXTable,
+  MDXTableBody,
+  MDXTableCell,
+  MDXTableHead,
+  MDXTableHeaderCell,
+  MDXTableRow,
+} from "./Table";
+import { UL } from "./Ul";
+
+const code = ({
+  hero: _hero,
+  line,
+  scrollable: _scrollable,
+  className,
+  children,
+  id: _id,
+  showLineNumbers,
+  collapsible: _collapsible,
+  ...props
+}: any) => {
+  if (!className) return <CodeInline>{unwrapText(children)}</CodeInline>;
+  return (
+    <YStack marginTop="$3">
+      <MDXCodeBlock
+        className={className}
+        isHighlightingLines={line !== undefined}
+        showLineNumbers={showLineNumbers !== undefined}
+        line={line}
+        {...props}
+      >
+        {children}
+      </MDXCodeBlock>
+    </YStack>
+  );
+};
+
+export const TableHighlight = styled(YStack, {
+  name: "TableHighlight",
+  backgroundColor: "$yellow1",
+  fullscreen: true,
+});
+
+export type TableHighlightProps = React.ComponentProps<typeof TableHighlight>;
+
+function MdxBlockquote({ children, ...props }: any) {
+  const { knobProps } = useResolvedKnobs();
+  return (
+    <YStack
+      marginVertical="$4"
+      paddingHorizontal={knobProps.panelPadding.padding}
+      style={{ marginLeft: 12 }}
+      borderLeftWidth={1}
+      borderColor="$borderColor"
+      justifyContent="center"
+      {...props}
+    >
+      <Paragraph
+        whiteSpace="revert"
+        size="$8"
+        lineHeight="$9"
+        fontWeight="300"
+        color="$color"
+        opacity={0.65}
+      >
+        {unwrapText(children)}
+      </Paragraph>
+    </YStack>
+  );
+}
+
+export const mdxComponents: MDXComponents = {
+  h1: (props) => (
+    <H1 fontFamily="$mono" width="max-content" position="relative" marginBottom="$2" {...props} />
+  ),
+  h2: ({ children, ...props }) => (
+    <H2
+      position="relative"
+      width={"fit-content" as any}
+      marginTop="$8"
+      marginBottom="$4"
+      data-heading
+      size="$9"
+      color="$color12"
+      {...props}
+    >
+      {children}
+    </H2>
+  ),
+  h3: ({ children, id, ...props }) => (
+    <LinkHeading data-heading marginTop="$6" marginBottom="$2" id={id}>
+      <H3
+        maxWidth="100%"
+        position="relative"
+        width={"fit-content" as any}
+        nativeID={id}
+        size="$8"
+        color="$color11"
+        fontWeight="600"
+        {...props}
+      >
+        {children}
+      </H3>
+      {getNonTextChildren(children)}
+    </LinkHeading>
+  ),
+  h4: (props) => (
+    <H4
+      position="relative"
+      width={"fit-content" as any}
+      marginTop="$8"
+      marginBottom="$2"
+      size="$8"
+      color="$color8"
+      data-heading
+      {...props}
+      fontWeight="400"
+    />
+  ),
+  h5: (props) => <H5 size="$6" fontWeight="600" marginTop="$4" {...props} />,
+  h6: (props) => <H6 marginTop="$4" {...props} />,
+  p: (props) => <Paragraph render="p" display="block" size="$6" marginVertical="$2" {...props} />,
+  a: ({ href = "", children, ...props }) => {
+    return (
+      <Link href={href}>
+        <Paragraph
+          render="a"
+          fontSize="inherit"
+          display="inline"
+          cursor="pointer"
+          focusVisibleStyle={{
+            outlineColor: "$outlineColor",
+            outlineWidth: 2,
+            outlineStyle: "solid",
+            outlineOffset: 2,
+          }}
+          {...props}
+        >
+          {children}
+          {typeof href === "string" && href.startsWith("http") ? (
+            <>
+              &nbsp;
+              <Text fontSize="inherit" display="inline-flex" y={2} style={{ marginLeft: -1 }}>
+                <ExternalIcon />
+              </Text>
+            </>
+          ) : null}
+        </Paragraph>
+      </Link>
+    );
+  },
+  hr: (props) => <HR {...props} />,
+  ul: ({ children }) => (
+    <UL render="ul" marginVertical="$4">
+      {Children.toArray(children).map((x) => (typeof x === "string" ? null : x))}
+    </UL>
+  ),
+  ol: (props) => <YStack {...props} render="ol" marginBottom="$3" />,
+  li: (props) => (
+    <LI render="li" size="$6" marginBottom="$1.5" style={{ listStyleType: "disc" }}>
+      {props.children}
+    </LI>
+  ),
+  strong: (props) => <Paragraph render="strong" fontSize="inherit" {...props} fontWeight="700" />,
+  em: (props) => <Paragraph render="em" fontSize="inherit" {...props} fontStyle="italic" />,
+  del: (props) => (
+    <Paragraph render="del" fontSize="inherit" {...props} textDecorationLine="line-through" />
+  ),
+  img: ({ ...props }) => (
+    <YStack render="span" marginVertical="$6">
+      <YStack render="img" {...props} maxWidth="100%" />
+    </YStack>
+  ),
+  pre: ({ children }) => <>{children}</>,
+  code: code as any,
+  blockquote: MdxBlockquote,
+  table: (props) => <MDXTable {...props} />,
+  thead: (props) => <MDXTableHead {...props} />,
+  tbody: (props) => <MDXTableBody {...props} />,
+  tr: (props) => <MDXTableRow {...props} />,
+  th: (props) => <MDXTableHeaderCell {...props} />,
+  td: (props) => <MDXTableCell {...props} />,
+};
+
+const LinkHeading = ({ id, children, ...props }: { id?: string } & XStackProps) => {
+  const { knobProps } = useResolvedKnobs();
+  return (
+    <XStack
+      render="a"
+      data-heading
+      href={`#${id}`}
+      id={id}
+      data-id={id}
+      display="inline-flex"
+      alignItems="center"
+      {...knobProps.gapLg}
+      {...(props as any)}
+    >
+      {children}
+      <YStack render="span" opacity={0.3}>
+        <LinkIcon size={12} />
+      </YStack>
+    </XStack>
+  );
+};
+
+const getNonTextChildren = (children: any) => {
+  return Children.map(children, (x) => {
+    if (typeof x === "string") return null;
+    if (x?.type === code) return null;
+    return x;
+  })?.flat();
+};

package/src/parser.spec.ts

@@ -0,0 +1,126 @@
+import { describe, expect, it } from "vitest";
+import { parseMarkdown, parseMarkdownAsync } from "./parser";
+
+describe("parseMarkdown", () => {
+  it("parses a heading", () => {
+    const ast = parseMarkdown("# Hello");
+    expect(ast.type).toBe("root");
+    expect(ast.children).toHaveLength(1);
+    expect(ast.children[0].type).toBe("heading");
+    const heading = ast.children[0] as any;
+    expect(heading.depth).toBe(1);
+    expect(heading.children[0].value).toBe("Hello");
+  });
+
+  it("parses a paragraph", () => {
+    const ast = parseMarkdown("Just some text.");
+    expect(ast.children[0].type).toBe("paragraph");
+  });
+
+  it("parses inline formatting", () => {
+    const ast = parseMarkdown("**bold** and *italic*");
+    const paragraph = ast.children[0] as any;
+    expect(paragraph.children[0].type).toBe("strong");
+    expect(paragraph.children[2].type).toBe("emphasis");
+  });
+
+  it("parses an unordered list", () => {
+    const ast = parseMarkdown("- item 1\n- item 2\n- item 3");
+    expect(ast.children[0].type).toBe("list");
+    const list = ast.children[0] as any;
+    expect(list.ordered).toBe(false);
+    expect(list.children).toHaveLength(3);
+  });
+
+  it("parses an ordered list", () => {
+    const ast = parseMarkdown("1. first\n2. second");
+    const list = ast.children[0] as any;
+    expect(list.type).toBe("list");
+    expect(list.ordered).toBe(true);
+    expect(list.children).toHaveLength(2);
+  });
+
+  it("parses a code block", () => {
+    const ast = parseMarkdown("```js\nconsole.log('hi');\n```");
+    const code = ast.children[0] as any;
+    expect(code.type).toBe("code");
+    expect(code.lang).toBe("js");
+    expect(code.value).toBe("console.log('hi');");
+  });
+
+  it("parses inline code", () => {
+    const ast = parseMarkdown("Use `const x = 1` here.");
+    const paragraph = ast.children[0] as any;
+    const inlineCode = paragraph.children.find((c: any) => c.type === "inlineCode");
+    expect(inlineCode).toBeDefined();
+    expect(inlineCode.value).toBe("const x = 1");
+  });
+
+  it("parses a blockquote", () => {
+    const ast = parseMarkdown("> A quote");
+    expect(ast.children[0].type).toBe("blockquote");
+  });
+
+  it("parses a link", () => {
+    const ast = parseMarkdown("[example](https://example.com)");
+    const paragraph = ast.children[0] as any;
+    const link = paragraph.children[0];
+    expect(link.type).toBe("link");
+    expect(link.url).toBe("https://example.com");
+    expect(link.children[0].value).toBe("example");
+  });
+
+  it("parses an image", () => {
+    const ast = parseMarkdown("![alt text](image.png)");
+    const paragraph = ast.children[0] as any;
+    const image = paragraph.children[0];
+    expect(image.type).toBe("image");
+    expect(image.url).toBe("image.png");
+    expect(image.alt).toBe("alt text");
+  });
+
+  it("parses a horizontal rule", () => {
+    const ast = parseMarkdown("---");
+    expect(ast.children[0].type).toBe("thematicBreak");
+  });
+
+  it("parses GFM tables", () => {
+    const md = "| A | B |\n| --- | --- |\n| 1 | 2 |";
+    const ast = parseMarkdown(md);
+    expect(ast.children[0].type).toBe("table");
+  });
+
+  it("parses GFM strikethrough", () => {
+    const ast = parseMarkdown("~~deleted~~");
+    const paragraph = ast.children[0] as any;
+    expect(paragraph.children[0].type).toBe("delete");
+  });
+
+  it("parses GFM task lists", () => {
+    const ast = parseMarkdown("- [x] done\n- [ ] todo");
+    const list = ast.children[0] as any;
+    expect(list.children[0].checked).toBe(true);
+    expect(list.children[1].checked).toBe(false);
+  });
+
+  it("handles empty input", () => {
+    const ast = parseMarkdown("");
+    expect(ast.type).toBe("root");
+    expect(ast.children).toHaveLength(0);
+  });
+
+  it("handles complex multi-element markdown", () => {
+    const md = "# Title\n\nParagraph.\n\n- item\n\n```\ncode\n```";
+    const ast = parseMarkdown(md);
+    expect(ast.children.length).toBeGreaterThanOrEqual(4);
+  });
+});
+
+describe("parseMarkdownAsync", () => {
+  it("returns the same AST as sync version", async () => {
+    const md = "# Hello\n\nWorld";
+    const syncAst = parseMarkdown(md);
+    const asyncAst = await parseMarkdownAsync(md);
+    expect(asyncAst).toEqual(syncAst);
+  });
+});