@multiplatform.one/markdown 6.0.0

package/src/components/CodeBlock.tsx

@@ -0,0 +1,94 @@
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useEffect, useState } from "react";
+import { ScrollView, Text, View, XStack } from "tamagui";
+import { markdownCodeColors } from "../shared/colorRamps";
+import { highlightCode, type ThemedToken, type BundledTheme } from "../shiki";
+import type { CodeBlockProps } from "../types";
+
+interface CodeBlockInternalProps extends CodeBlockProps {
+  theme?: BundledTheme;
+}
+
+export function CodeBlock({ children, lang, theme = "github-dark" }: CodeBlockInternalProps) {
+  const { knobProps } = useResolvedKnobs();
+  const [tokens, setTokens] = useState<ThemedToken[][] | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    highlightCode(children, lang || "text", theme)
+      .then((result) => {
+        if (!cancelled) {
+          setTokens(result);
+          setError(null);
+        }
+      })
+      .catch((err) => {
+        if (!cancelled) {
+          setError(String(err));
+          setTokens(null);
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [children, lang, theme]);
+
+  const containerProps = {
+    borderRadius: knobProps.borderRadiusOuter?.borderRadius ?? "$4",
+    backgroundColor: markdownCodeColors.background.base,
+    borderWidth: 1,
+    borderColor: markdownCodeColors.border.base,
+    padding: knobProps.panelPadding.padding,
+    marginVertical: "$2",
+    overflow: "hidden" as const,
+  };
+
+  // Loading or error fallback
+  if (!tokens || error) {
+    return (
+      <View {...containerProps}>
+        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+          <Text
+            fontFamily="$mono"
+            fontSize={knobProps.sizeToken}
+            color={markdownCodeColors.text.muted}
+          >
+            {children}
+          </Text>
+        </ScrollView>
+      </View>
+    );
+  }
+
+  return (
+    <View {...containerProps}>
+      <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+        <View>
+          {tokens.map((line, lineIndex) => (
+            <XStack key={lineIndex} minHeight={20}>
+              {line.length === 0 ? (
+                <Text fontFamily="$mono" fontSize={knobProps.sizeToken}>
+                  {"\n"}
+                </Text>
+              ) : (
+                line.map((token, tokenIndex) => (
+                  <Text
+                    key={tokenIndex}
+                    fontFamily="$mono"
+                    fontSize={knobProps.sizeToken}
+                    style={{ color: token.color }}
+                  >
+                    {token.content}
+                  </Text>
+                ))
+              )}
+            </XStack>
+          ))}
+        </View>
+      </ScrollView>
+    </View>
+  );
+}

package/src/components/Heading.tsx

@@ -0,0 +1,20 @@
+import { H1, H2, H3, H4, H5, H6 } from "tamagui";
+import type { HeadingProps } from "../types";
+
+const headingComponents = {
+  1: H1,
+  2: H2,
+  3: H3,
+  4: H4,
+  5: H5,
+  6: H6,
+} as const;
+
+export function Heading({ level, children }: HeadingProps) {
+  const Component = headingComponents[level];
+  return (
+    <Component marginTop="$3" marginBottom="$2">
+      {children}
+    </Component>
+  );
+}

package/src/components/HorizontalRule.tsx

@@ -0,0 +1,6 @@
+import { Separator } from "tamagui";
+import type { HorizontalRuleProps } from "../types";
+
+export function HorizontalRule(_props: HorizontalRuleProps) {
+  return <Separator marginVertical="$4" />;
+}

package/src/components/Image.tsx

@@ -0,0 +1,20 @@
+import { Image as TamaguiImage, View } from "tamagui";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import type { ImageProps } from "../types";
+
+export function MarkdownImage({ src, alt, title }: ImageProps) {
+  const { knobProps } = useResolvedKnobs();
+  return (
+    <View marginVertical="$2">
+      <TamaguiImage
+        source={{ uri: src }}
+        alt={alt || ""}
+        accessibilityLabel={alt || title || "Image"}
+        width="100%"
+        height={200}
+        resizeMode="contain"
+        borderRadius={knobProps.borderRadius.borderRadius}
+      />
+    </View>
+  );
+}

package/src/components/InlineCode.tsx

@@ -0,0 +1,21 @@
+import { Text } from "tamagui";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { markdownCodeColors } from "../shared/colorRamps";
+import type { InlineCodeProps } from "../types";
+
+export function InlineCode({ children }: InlineCodeProps) {
+  const { knobProps } = useResolvedKnobs();
+  return (
+    <Text
+      fontFamily="$mono"
+      fontSize={knobProps.sizeToken}
+      backgroundColor={markdownCodeColors.background.base}
+      color={markdownCodeColors.text.base}
+      paddingHorizontal="$1.5"
+      paddingVertical="$0.5"
+      borderRadius={knobProps.borderRadius.borderRadius}
+    >
+      {children}
+    </Text>
+  );
+}

package/src/components/InlineStyles.tsx

@@ -0,0 +1,14 @@
+import { Text } from "tamagui";
+import type { InlineProps } from "../types";
+
+export function Strong({ children }: InlineProps) {
+  return <Text fontWeight="bold">{children}</Text>;
+}
+
+export function Emphasis({ children }: InlineProps) {
+  return <Text fontStyle="italic">{children}</Text>;
+}
+
+export function Strikethrough({ children }: InlineProps) {
+  return <Text textDecorationLine="line-through">{children}</Text>;
+}

package/src/components/Link.tsx

@@ -0,0 +1,26 @@
+import { Text } from "tamagui";
+import { openUrl } from "@multiplatform.one/platform";
+import { markdownLinkColors } from "../shared/colorRamps";
+import type { LinkProps } from "../types";
+
+export function Link({ href, title, children }: LinkProps) {
+  const handlePress = () => {
+    if (href) {
+      openUrl(href);
+    }
+  };
+
+  return (
+    <Text
+      color={markdownLinkColors.text.base}
+      textDecorationLine="underline"
+      cursor="pointer"
+      onPress={handlePress}
+      accessibilityRole="link"
+      accessibilityLabel={title || undefined}
+      hoverStyle={{ color: markdownLinkColors.text.hover }}
+    >
+      {children}
+    </Text>
+  );
+}

package/src/components/List.tsx

@@ -0,0 +1,41 @@
+import { View, XStack, Text } from "tamagui";
+import type { ListProps, ListItemProps } from "../types";
+
+export function MarkdownList({ ordered: _ordered, start: _start, children }: ListProps) {
+  return <View marginVertical="$2">{children}</View>;
+}
+
+interface ListItemInternalProps extends ListItemProps {
+  index?: number;
+  ordered?: boolean;
+}
+
+export function MarkdownListItem({
+  checked,
+  children,
+  index = 0,
+  ordered = false,
+}: ListItemInternalProps) {
+  const bullet = ordered ? `${index + 1}.` : "•";
+
+  // Task list item
+  if (checked !== null && checked !== undefined) {
+    return (
+      <XStack marginBottom="$1" alignItems="flex-start">
+        <Text width={24} color="$color11">
+          {checked ? "☑" : "☐"}
+        </Text>
+        <View flex={1}>{children}</View>
+      </XStack>
+    );
+  }
+
+  return (
+    <XStack marginBottom="$1" alignItems="flex-start">
+      <Text width={24} color="$color11">
+        {bullet}
+      </Text>
+      <View flex={1}>{children}</View>
+    </XStack>
+  );
+}

package/src/components/Paragraph.tsx

@@ -0,0 +1,10 @@
+import { Paragraph as TamaguiParagraph } from "tamagui";
+import type { ParagraphProps } from "../types";
+
+export function Paragraph({ children }: ParagraphProps) {
+  return (
+    <TamaguiParagraph marginBottom="$2" lineHeight="$6">
+      {children}
+    </TamaguiParagraph>
+  );
+}

package/src/components/Table.tsx

@@ -0,0 +1,56 @@
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { View, Text, XStack, YStack, ScrollView } from "tamagui";
+import { markdownTableColors } from "../shared/colorRamps";
+import type { TableProps, TableRowProps, TableCellProps } from "../types";
+
+export function MarkdownTable({ children }: TableProps) {
+  const { knobProps } = useResolvedKnobs();
+
+  return (
+    <ScrollView horizontal marginVertical="$3">
+      <YStack
+        {...knobProps.borderRadiusOuter}
+        borderWidth={1}
+        borderColor={markdownTableColors.border.base}
+        overflow="hidden"
+        minWidth="100%"
+      >
+        {children}
+      </YStack>
+    </ScrollView>
+  );
+}
+
+export function MarkdownTableRow({ children, isHeader }: TableRowProps) {
+  return (
+    <XStack
+      backgroundColor={
+        isHeader ? markdownTableColors.background.header : markdownTableColors.background.base
+      }
+      borderBottomWidth={isHeader ? 1 : 0.5}
+      borderBottomColor={markdownTableColors.border.base}
+    >
+      {children}
+    </XStack>
+  );
+}
+
+export function MarkdownTableCell({ children, isHeader, align }: TableCellProps) {
+  const { knobProps } = useResolvedKnobs();
+  const textAlign = align || "left";
+
+  return (
+    <View
+      flex={1}
+      paddingHorizontal={knobProps.gap.gap}
+      paddingVertical="$2"
+      borderRightWidth={0.5}
+      borderRightColor={markdownTableColors.border.base}
+      justifyContent="center"
+    >
+      <Text fontWeight={isHeader ? "600" : "normal"} textAlign={textAlign}>
+        {children}
+      </Text>
+    </View>
+  );
+}

package/src/components/index.ts

@@ -0,0 +1,12 @@
+export { Heading } from "./Heading";
+export { Paragraph } from "./Paragraph";
+export { Strong, Emphasis, Strikethrough } from "./InlineStyles";
+export { InlineCode } from "./InlineCode";
+export { CodeBlock } from "./CodeBlock";
+export { Link } from "./Link";
+export { MarkdownImage } from "./Image";
+export { MarkdownList, MarkdownListItem } from "./List";
+export { Blockquote } from "./Blockquote";
+export { HorizontalRule } from "./HorizontalRule";
+export { MarkdownTable, MarkdownTableRow, MarkdownTableCell } from "./Table";
+export { Break } from "./Break";

package/src/hooks/index.ts

@@ -0,0 +1,3 @@
+export * from "./useCompileAndEvaluateMdx";
+export * from "./useCompileMdx";
+export * from "./useEvaluateMdx";

package/src/hooks/useCompileAndEvaluateMdx.spec.tsx

@@ -0,0 +1,31 @@
+import { renderHook, waitFor } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { useCompileAndEvaluateMdx } from "./useCompileAndEvaluateMdx";
+import { useCompileMdx } from "./useCompileMdx";
+
+describe("useCompileMdx Hook", () => {
+  it("should handle invalid MDX syntax gracefully", async () => {
+    const invalidSource = "# Test\n\nSome broken MDX content";
+    const { result } = renderHook(() => useCompileMdx(invalidSource));
+    await waitFor(() => expect(result.current.code).toBeUndefined());
+    expect(result.current.frontmatter).toBeUndefined();
+  });
+});
+
+describe("useCompileAndEvaluateMdx Hook", () => {
+  it("should handle empty source gracefully", async () => {
+    const source = "";
+    const { result } = renderHook(() => useCompileAndEvaluateMdx(source));
+    await waitFor(() => expect(result.current.code).toBeUndefined());
+    expect(result.current.Component).toBeUndefined();
+    expect(result.current.frontmatter).toBeUndefined();
+  });
+
+  it("should return empty if MDX compilation or evaluation fails", async () => {
+    const source = "# Invalid MDX Content";
+    const { result } = renderHook(() => useCompileAndEvaluateMdx(source));
+    await waitFor(() => expect(result.current.code).toBeUndefined());
+    expect(result.current.Component).toBeUndefined();
+    expect(result.current.frontmatter).toBeUndefined();
+  });
+});

package/src/hooks/useCompileAndEvaluateMdx.ts

@@ -0,0 +1,22 @@
+import type { ComponentType } from "react";
+import { useCompileMdx } from "./useCompileMdx";
+import { useEvaluateMdx } from "./useEvaluateMdx";
+
+export function useCompileAndEvaluateMdx(
+  source: string,
+  compileOptions?: Record<string, any>,
+  evaluateOptions?: Record<string, any>,
+): {
+  Component?:
+    | ComponentType<{
+        components?: Record<string, any> | undefined;
+      }>
+    | undefined;
+  code?: string;
+  frontmatter?: Record<string, any>;
+} {
+  const { code, frontmatter } = useCompileMdx(source, compileOptions);
+  const Component = useEvaluateMdx(code, evaluateOptions);
+  if (!code || !frontmatter || !Component) return {};
+  return { Component, code, frontmatter };
+}

package/src/hooks/useCompileMdx.ts

@@ -0,0 +1,55 @@
+import { useEffect, useState } from "react";
+
+export function useCompileMdx(
+  source: string,
+  options?: Record<string, any>,
+): {
+  code?: string;
+  frontmatter?: Record<string, any>;
+} {
+  const [code, setCode] = useState<string | undefined>();
+  const [frontmatter, setFrontmatter] = useState<Record<string, any> | undefined>();
+
+  useEffect(() => {
+    (async () => {
+      const [
+        { compile },
+        { default: grayMatter },
+        { default: rehypeAutolinkHeadings },
+        { default: rehypeSlug },
+        { default: remarkFrontmatter },
+        { default: remarkMdxFrontmatter },
+        { rehypeMetaAttributes },
+      ] = await Promise.all([
+        import("@mdx-js/mdx"),
+        import("gray-matter"),
+        import("rehype-autolink-headings"),
+        import("rehype-slug"),
+        import("remark-frontmatter"),
+        import("remark-mdx-frontmatter"),
+        import("../util/rehypeMetaAttributes"),
+      ]);
+      const { value } = await compile(source, {
+        ...options,
+        development: false,
+        outputFormat: "function-body",
+        remarkPlugins: [
+          ...(options?.remarkPlugins || []),
+          [remarkMdxFrontmatter, { name: "frontmatter" }],
+          remarkFrontmatter,
+        ],
+        rehypePlugins: [
+          ...(options?.rehypePlugins || []),
+          rehypeAutolinkHeadings,
+          rehypeMetaAttributes,
+          rehypeSlug,
+        ],
+      });
+      setCode(value.toString());
+      setFrontmatter(grayMatter(source));
+    })();
+  }, [source, options]);
+
+  if (!code || !frontmatter) return {};
+  return { code, frontmatter };
+}

package/src/hooks/useEvaluateMdx.ts

@@ -0,0 +1,27 @@
+import type { MDXComponents } from "mdx/types";
+import type { ComponentType } from "react";
+import { useEffect, useState } from "react";
+import * as jsxRuntime from "react/jsx-runtime";
+
+export function useEvaluateMdx(code?: string, options?: Record<string, any>) {
+  const [Component, setComponent] = useState<ComponentType<{ components?: Record<string, any> }>>();
+
+  useEffect(() => {
+    if (!code) return;
+    setComponent(() => evaluateMdx(code, options));
+  }, [code, options]);
+
+  return Component;
+}
+
+function evaluateMdx(code: string, options?: Record<string, any>) {
+  return run(code, {
+    ...jsxRuntime,
+    ...options,
+  }).default as ComponentType<{ components?: MDXComponents }>;
+}
+
+const AsyncFunction = Object.getPrototypeOf(run).constructor;
+function run(code: string, options: Record<string, any>) {
+  return new AsyncFunction(String(code))(options);
+}

package/src/icons/index.tsx

@@ -0,0 +1,116 @@
+import { Circle, Line, Path, Polyline, Rect, Svg } from "@tamagui/react-native-svg";
+import { useTheme } from "tamagui";
+
+interface IconProps {
+  size?: number;
+  color?: string;
+}
+
+export function ClipboardIcon({ size = 16, color }: IconProps) {
+  const theme = useTheme();
+  const fill = color ?? theme.color?.val ?? "currentColor";
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Rect x="9" y="2" width="6" height="4" rx="1" stroke={fill} strokeWidth={2} />
+      <Path
+        d="M9 4H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-2"
+        stroke={fill}
+        strokeWidth={2}
+      />
+    </Svg>
+  );
+}
+
+export function CheckCircleIcon({ size = 16, color }: IconProps) {
+  const theme = useTheme();
+  const fill = color ?? theme.color?.val ?? "currentColor";
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Circle cx="12" cy="12" r="10" stroke={fill} strokeWidth={2} />
+      <Path
+        d="M9 12l2 2 4-4"
+        stroke={fill}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+export function LinkIcon({ size = 12, color }: IconProps) {
+  const theme = useTheme();
+  const fill = color ?? theme.color?.val ?? "currentColor";
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path
+        d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"
+        stroke={fill}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <Path
+        d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
+        stroke={fill}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+export function AlertTriangleIcon({ size = 16, color }: IconProps) {
+  const theme = useTheme();
+  const fill = color ?? theme.color?.val ?? "currentColor";
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path
+        d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
+        stroke={fill}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <Line x1="12" y1="9" x2="12" y2="13" stroke={fill} strokeWidth={2} strokeLinecap="round" />
+      <Line
+        x1="12"
+        y1="17"
+        x2="12.01"
+        y2="17"
+        stroke={fill}
+        strokeWidth={2}
+        strokeLinecap="round"
+      />
+    </Svg>
+  );
+}
+
+export function InfoIcon({ size = 16, color }: IconProps) {
+  const theme = useTheme();
+  const fill = color ?? theme.color?.val ?? "currentColor";
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Circle cx="12" cy="12" r="10" stroke={fill} strokeWidth={2} />
+      <Line x1="12" y1="16" x2="12" y2="12" stroke={fill} strokeWidth={2} strokeLinecap="round" />
+      <Line x1="12" y1="8" x2="12.01" y2="8" stroke={fill} strokeWidth={2} strokeLinecap="round" />
+    </Svg>
+  );
+}
+
+export function ChevronRightIcon({ size = 16, color }: IconProps) {
+  const theme = useTheme();
+  const fill = color ?? theme.color?.val ?? "currentColor";
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Polyline
+        points="9,18 15,12 9,6"
+        stroke={fill}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/index.ts

@@ -0,0 +1,33 @@
+/**
+ * @multiplatform.one/markdown
+ *
+ * Cross-platform markdown rendering with MDX support and syntax highlighting
+ */
+
+// Core markdown renderer
+export { Markdown } from "./Markdown";
+export type { MarkdownProps, CodeTheme } from "./types";
+
+// Markdown parser and renderer
+export { parseMarkdown } from "./parser";
+export { renderMarkdown } from "./renderer";
+
+// Shiki syntax highlighting
+export { highlightCode, getHighlighter, type ThemedToken, type BundledTheme } from "./shiki";
+
+// MDX components
+export * from "./Aside";
+export * from "./ExternalIcon";
+export * from "./hooks";
+export * from "./Hr";
+export * from "./icons";
+export * from "./Li";
+export * from "./Mdx";
+export * from "./MdxCodeBlock";
+export * from "./mdxComponents";
+export * from "./Notice";
+export * from "./SimpleTable";
+export * from "./Table";
+export * from "./Tabs";
+export * from "./Ul";
+export * from "./Video";