@multiplatform.one/markdown 6.0.0

package/src/types.ts

@@ -0,0 +1,225 @@
+/**
+ * Types for the markdown renderer
+ */
+import type { ReactNode } from "react";
+import type {
+  Root,
+  Heading,
+  Paragraph,
+  Text,
+  Emphasis,
+  Strong,
+  Delete,
+  InlineCode,
+  Code,
+  Link,
+  Image,
+  List,
+  ListItem,
+  Blockquote,
+  ThematicBreak,
+  Table,
+  TableRow,
+  TableCell,
+  Html,
+  Break,
+} from "mdast";
+
+export type {
+  Root,
+  Heading,
+  Paragraph,
+  Text,
+  Emphasis,
+  Strong,
+  Delete,
+  InlineCode,
+  Code,
+  Link,
+  Image,
+  List,
+  ListItem,
+  Blockquote,
+  ThematicBreak,
+  Table,
+  TableRow,
+  TableCell,
+  Html,
+  Break,
+};
+
+/**
+ * Code theme for syntax highlighting
+ * "auto" will automatically select github-light or github-dark based on the current Tamagui color scheme
+ */
+export type CodeTheme =
+  | "auto"
+  | "github-dark"
+  | "github-light"
+  | "dracula"
+  | "nord"
+  | "one-dark-pro";
+
+/**
+ * Props for the main Markdown component
+ */
+export interface MarkdownProps {
+  /** Markdown string to render */
+  children: string;
+  /** Custom components to override defaults */
+  components?: Partial<MarkdownComponents>;
+  /** Theme for code highlighting */
+  codeTheme?: CodeTheme;
+}
+
+/**
+ * Custom component overrides
+ */
+export interface MarkdownComponents {
+  h1: React.ComponentType<HeadingProps>;
+  h2: React.ComponentType<HeadingProps>;
+  h3: React.ComponentType<HeadingProps>;
+  h4: React.ComponentType<HeadingProps>;
+  h5: React.ComponentType<HeadingProps>;
+  h6: React.ComponentType<HeadingProps>;
+  p: React.ComponentType<ParagraphProps>;
+  strong: React.ComponentType<InlineProps>;
+  em: React.ComponentType<InlineProps>;
+  del: React.ComponentType<InlineProps>;
+  code: React.ComponentType<CodeBlockProps>;
+  inlineCode: React.ComponentType<InlineCodeProps>;
+  a: React.ComponentType<LinkProps>;
+  img: React.ComponentType<ImageProps>;
+  ul: React.ComponentType<ListProps>;
+  ol: React.ComponentType<ListProps>;
+  li: React.ComponentType<ListItemProps>;
+  blockquote: React.ComponentType<BlockquoteProps>;
+  hr: React.ComponentType<HorizontalRuleProps>;
+  table: React.ComponentType<TableProps>;
+  tr: React.ComponentType<TableRowProps>;
+  td: React.ComponentType<TableCellProps>;
+  th: React.ComponentType<TableCellProps>;
+  br: React.ComponentType<BreakProps>;
+}
+
+/**
+ * Props for heading components
+ */
+export interface HeadingProps {
+  level: 1 | 2 | 3 | 4 | 5 | 6;
+  children: ReactNode;
+}
+
+/**
+ * Props for paragraph components
+ */
+export interface ParagraphProps {
+  children: ReactNode;
+}
+
+/**
+ * Props for inline text styling (strong, em, del)
+ */
+export interface InlineProps {
+  children: ReactNode;
+}
+
+/**
+ * Props for code blocks
+ */
+export interface CodeBlockProps {
+  children: string;
+  lang?: string | null;
+  meta?: string | null;
+}
+
+/**
+ * Props for inline code
+ */
+export interface InlineCodeProps {
+  children: string;
+}
+
+/**
+ * Props for links
+ */
+export interface LinkProps {
+  href: string;
+  title?: string | null;
+  children: ReactNode;
+}
+
+/**
+ * Props for images
+ */
+export interface ImageProps {
+  src: string;
+  alt?: string | null;
+  title?: string | null;
+}
+
+/**
+ * Props for lists
+ */
+export interface ListProps {
+  ordered: boolean;
+  start?: number | null;
+  children: ReactNode;
+}
+
+/**
+ * Props for list items
+ */
+export interface ListItemProps {
+  checked?: boolean | null;
+  children: ReactNode;
+}
+
+/**
+ * Props for blockquotes
+ */
+export interface BlockquoteProps {
+  children: ReactNode;
+}
+
+/**
+ * Props for horizontal rules
+ */
+export interface HorizontalRuleProps {}
+
+/**
+ * Props for tables
+ */
+export interface TableProps {
+  children: ReactNode;
+}
+
+/**
+ * Props for table rows
+ */
+export interface TableRowProps {
+  children: ReactNode;
+  isHeader?: boolean;
+}
+
+/**
+ * Props for table cells
+ */
+export interface TableCellProps {
+  children: ReactNode;
+  isHeader?: boolean;
+  align?: "left" | "center" | "right" | null;
+}
+
+/**
+ * Props for line breaks
+ */
+export interface BreakProps {}
+
+/**
+ * Render context passed to renderer
+ */
+export interface RenderContext {
+  components: MarkdownComponents;
+  codeTheme: string;
+}

package/src/util/rehypeMetaAttributes.ts

@@ -0,0 +1,21 @@
+// https://github.com/wooorm/xdm#syntax-highlighting-with-the-meta-field
+
+import { visit } from "unist-util-visit";
+const re = /\b([-\w]+)(?:=(?:"([^"]*)"|'([^']*)'|([^"'\s]+)))?/g;
+
+export function rehypeMetaAttributes(_options = {}) {
+  function onElement(node: any) {
+    let match: any;
+    if (node.tagName === "code" && node.data && node.data.meta) {
+      re.lastIndex = 0; // Reset regex.
+      match = re.exec(node.data.meta);
+      while (match) {
+        node.properties[match[1]] = match[2] || match[3] || match[4] || "";
+        match = re.exec(node.data.meta);
+      }
+    }
+  }
+  return (tree: any) => {
+    visit(tree, "element", onElement);
+  };
+}

package/src/util/util.spec.tsx

@@ -0,0 +1,90 @@
+import { visit } from "unist-util-visit";
+import { describe, expect, it } from "vitest";
+import { rehypeMetaAttributes } from "./rehypeMetaAttributes";
+
+const mockAST = {
+  type: "root",
+  children: [
+    {
+      type: "element",
+      tagName: "pre",
+      children: [
+        {
+          type: "element",
+          tagName: "code",
+          properties: {
+            className: ["language-tsx"],
+          },
+          data: {
+            meta: 'title="Example Code" highlight="1-2" showLineNumbers',
+          },
+          children: [
+            {
+              type: "text",
+              value: "const x: number = 42;\nconsole.log(x);",
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};
+
+describe("rehypeMetaAttributes", () => {
+  it("should extract and apply meta attributes as properties", () => {
+    const transformer = rehypeMetaAttributes();
+    transformer(mockAST);
+    let foundCodeNode = false;
+    visit(mockAST, "element", (node: any) => {
+      if (node.tagName === "code") {
+        foundCodeNode = true;
+        expect(node.properties).toHaveProperty("title", "Example Code");
+        expect(node.properties).toHaveProperty("highlight", "1-2");
+        expect(node.properties).toHaveProperty("showLineNumbers", "");
+      }
+    });
+    expect(foundCodeNode).toBe(true);
+  });
+
+  it("should handle multiple attributes correctly", () => {
+    const transformer = rehypeMetaAttributes();
+    transformer(mockAST);
+    visit(mockAST, "element", (node: any) => {
+      if (node.tagName === "code") {
+        expect(Object.keys(node.properties)).toEqual(
+          expect.arrayContaining(["className", "title", "highlight", "showLineNumbers"]),
+        );
+      }
+    });
+  });
+
+  it("should not modify nodes without meta attributes", () => {
+    const originalAST = JSON.parse(JSON.stringify(mockAST));
+    originalAST.children[0].children[0].data = undefined;
+    originalAST.children[0].children[0].properties = {
+      className: ["language-tsx"],
+    };
+    const transformer = rehypeMetaAttributes();
+    transformer(originalAST);
+    visit(originalAST, "element", (node) => {
+      if (node.tagName === "code") {
+        expect(node.properties).toEqual({ className: ["language-tsx"] });
+      }
+    });
+  });
+
+  it("should handle empty meta attributes without breaking", () => {
+    const emptyMetaAST = JSON.parse(JSON.stringify(mockAST));
+    emptyMetaAST.children[0].children[0].data.meta = "";
+    emptyMetaAST.children[0].children[0].properties = {
+      className: ["language-tsx"],
+    };
+    const transformer = rehypeMetaAttributes();
+    transformer(emptyMetaAST);
+    visit(emptyMetaAST, "element", (node) => {
+      if (node.tagName === "code") {
+        expect(node.properties).toEqual({ className: ["language-tsx"] });
+      }
+    });
+  });
+});