react-native-enriched-markdown-scaffold 0.6.0-scaffold.4

package/src/web/parseMarkdown.ts

@@ -0,0 +1,78 @@
+import type { ASTNode } from './types';
+import type { Md4cFlags } from '../types/MarkdownStyle';
+
+type ParseFn = (
+  markdown: string,
+  underline: number,
+  latexMath: number,
+  superscript: number,
+  subscript: number,
+  highlight: number
+) => string;
+
+// Caching the Promise (not the resolved value) means concurrent callers share
+// a single WASM initialization — no duplicate loading.
+let parserPromise: Promise<ParseFn> | null = null;
+
+// SINGLE_FILE=1 inlines the WASM binary as base64 inside md4c.js, so no
+// network fetch is needed — only a one-time decode + compile on first call.
+function initializeParser(): Promise<ParseFn> {
+  if (!parserPromise) {
+    parserPromise = import('./wasm/md4c')
+      .then((module) => module.default())
+      .then((wasmModule) =>
+        wasmModule.cwrap('parseMarkdown', 'string', [
+          'string',
+          'number',
+          'number',
+          'number',
+          'number',
+          'number',
+        ])
+      )
+      .catch((error) => {
+        parserPromise = null;
+        throw error;
+      }) as Promise<ParseFn>;
+  }
+  return parserPromise;
+}
+
+function isASTNode(value: unknown): value is ASTNode {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'type' in value &&
+    typeof (value as ASTNode).type === 'string'
+  );
+}
+
+export async function parseMarkdown(
+  markdown: string,
+  {
+    underline = false,
+    latexMath = true,
+    superscript = false,
+    subscript = false,
+    highlight = false,
+  }: Md4cFlags = {}
+): Promise<ASTNode> {
+  const parse = await initializeParser();
+
+  const result: unknown = JSON.parse(
+    parse(
+      markdown,
+      underline ? 1 : 0,
+      latexMath ? 1 : 0,
+      superscript ? 1 : 0,
+      subscript ? 1 : 0,
+      highlight ? 1 : 0
+    )
+  );
+
+  if (!isASTNode(result)) {
+    throw new Error('WASM parser returned invalid AST');
+  }
+
+  return result;
+}

package/src/web/renderers/BlockRenderers.tsx

@@ -0,0 +1,90 @@
+import { extractNodeText, filenameFromUrl } from '../utils';
+import type { RendererProps, RendererMap } from '../types';
+import { toHeadingLevel } from '../styles';
+import { KaTeXRenderer } from './KaTeXRenderer';
+
+function ParagraphRenderer({
+  node,
+  styles,
+  parentType,
+  renderChildren,
+}: RendererProps) {
+  const isImageOnly =
+    node.children?.length === 1 && node.children[0]?.type === 'Image';
+  if (isImageOnly) return <>{renderChildren(node)}</>;
+
+  if (parentType === 'Blockquote') {
+    return <p style={styles.paragraphInBlockquote}>{renderChildren(node)}</p>;
+  }
+
+  if (parentType === 'ListItem') {
+    return <span>{renderChildren(node)}</span>;
+  }
+
+  return <p style={styles.paragraph}>{renderChildren(node)}</p>;
+}
+
+function HeadingRenderer({ node, styles, renderChildren }: RendererProps) {
+  const Tag = toHeadingLevel(node.attributes?.level ?? '1');
+  return <Tag style={styles[Tag]}>{renderChildren(node)}</Tag>;
+}
+
+function BlockquoteRenderer({ node, styles, renderChildren }: RendererProps) {
+  return (
+    <blockquote style={styles.blockquote}>{renderChildren(node)}</blockquote>
+  );
+}
+
+function CodeBlockRenderer({ node, styles, renderChildren }: RendererProps) {
+  const language = node.attributes?.language;
+  const label = language ? `Code block: ${language}` : 'Code block';
+
+  return (
+    <pre style={styles.codeBlock} aria-label={label}>
+      <code style={styles.codeBlockFont}>{renderChildren(node)}</code>
+    </pre>
+  );
+}
+
+function ThematicBreakRenderer({ styles }: RendererProps) {
+  return <hr style={styles.thematicBreak} />;
+}
+
+function ImageRenderer({ node, styles }: RendererProps) {
+  const url = node.attributes?.url;
+  if (!url) return null;
+
+  const title = node.attributes?.title;
+  const alt = extractNodeText(node) || title || filenameFromUrl(url) || 'Image';
+  const imgStyle = node.attributes?.isInline
+    ? styles.inlineImage
+    : styles.image;
+  return <img src={url} alt={alt} title={title} style={imgStyle} />;
+}
+
+function LatexMathDisplayRenderer({
+  node,
+  styles,
+  capabilities,
+}: RendererProps) {
+  const content = extractNodeText(node);
+
+  return (
+    <KaTeXRenderer
+      content={content}
+      katex={capabilities.katex}
+      displayMode
+      style={styles.mathDisplay}
+    />
+  );
+}
+
+export const blockRenderers: RendererMap = {
+  Paragraph: ParagraphRenderer,
+  Heading: HeadingRenderer,
+  Blockquote: BlockquoteRenderer,
+  CodeBlock: CodeBlockRenderer,
+  ThematicBreak: ThematicBreakRenderer,
+  Image: ImageRenderer,
+  LatexMathDisplay: LatexMathDisplayRenderer,
+};

package/src/web/renderers/InlineRenderers.tsx

@@ -0,0 +1,121 @@
+import type { MouseEvent } from 'react';
+import type { RendererProps, RendererMap } from '../types';
+import { extractNodeText } from '../utils';
+import { KaTeXRenderer } from './KaTeXRenderer';
+import { linkStyleForUrl } from '../styles';
+
+function TextRenderer({ node }: RendererProps) {
+  return <>{node.content ?? ''}</>;
+}
+
+function LineBreakRenderer(_props: RendererProps) {
+  return <br />;
+}
+
+function StrongRenderer({ node, styles, renderChildren }: RendererProps) {
+  return <strong style={styles.strong}>{renderChildren(node)}</strong>;
+}
+
+function EmphasisRenderer({ node, styles, renderChildren }: RendererProps) {
+  return <em style={styles.emphasis}>{renderChildren(node)}</em>;
+}
+
+function StrikethroughRenderer({
+  node,
+  styles,
+  renderChildren,
+}: RendererProps) {
+  return <s style={styles.strikethrough}>{renderChildren(node)}</s>;
+}
+
+function UnderlineRenderer({ node, styles, renderChildren }: RendererProps) {
+  return <u style={styles.underline}>{renderChildren(node)}</u>;
+}
+
+function SuperscriptRenderer({ node, styles, renderChildren }: RendererProps) {
+  return <sup style={styles.superscript}>{renderChildren(node)}</sup>;
+}
+
+function SubscriptRenderer({ node, styles, renderChildren }: RendererProps) {
+  return <sub style={styles.subscript}>{renderChildren(node)}</sub>;
+}
+
+function HighlightRenderer({ node, styles, renderChildren }: RendererProps) {
+  return <mark style={styles.highlight}>{renderChildren(node)}</mark>;
+}
+
+function CodeRenderer({ node, styles, renderChildren }: RendererProps) {
+  return (
+    <code style={styles.code}>{node.content ?? renderChildren(node)}</code>
+  );
+}
+
+function LinkRenderer({
+  node,
+  style,
+  callbacks,
+  renderChildren,
+}: RendererProps) {
+  const url = node.attributes?.url;
+
+  if (!url) return <>{renderChildren(node)}</>;
+
+  const handleClick = (event: MouseEvent) => {
+    if (callbacks.onLinkPress) {
+      event.preventDefault();
+      callbacks.onLinkPress({ url });
+    }
+  };
+
+  const handleContextMenu = (event: MouseEvent) => {
+    if (callbacks.onLinkLongPress) {
+      event.preventDefault();
+      callbacks.onLinkLongPress({ url });
+    }
+  };
+
+  return (
+    <a
+      href={url}
+      style={linkStyleForUrl(style, url)}
+      target="_blank"
+      rel="noopener noreferrer"
+      onClick={handleClick}
+      onContextMenu={handleContextMenu}
+    >
+      {renderChildren(node)}
+    </a>
+  );
+}
+
+function LatexMathInlineRenderer({
+  node,
+  styles,
+  capabilities,
+}: RendererProps) {
+  const content = extractNodeText(node);
+
+  return (
+    <KaTeXRenderer
+      content={content}
+      katex={capabilities.katex}
+      displayMode={false}
+      style={styles.mathInline}
+    />
+  );
+}
+
+export const inlineRenderers: RendererMap = {
+  Text: TextRenderer,
+  LineBreak: LineBreakRenderer,
+  Strong: StrongRenderer,
+  Emphasis: EmphasisRenderer,
+  Strikethrough: StrikethroughRenderer,
+  Underline: UnderlineRenderer,
+  Superscript: SuperscriptRenderer,
+  Subscript: SubscriptRenderer,
+  Highlight: HighlightRenderer,
+  Code: CodeRenderer,
+  Link: LinkRenderer,
+  LatexMathInline: LatexMathInlineRenderer,
+};

package/src/web/renderers/KaTeXRenderer.tsx

@@ -0,0 +1,49 @@
+import { useMemo, type CSSProperties } from 'react';
+import type { KaTeXInstance } from '../katex';
+
+interface KaTeXRendererProps {
+  content: string;
+  katex: KaTeXInstance | null;
+  displayMode: boolean;
+  style: CSSProperties;
+}
+
+export function KaTeXRenderer({
+  content,
+  katex,
+  displayMode,
+  style,
+}: KaTeXRendererProps) {
+  const delimiter = displayMode ? '$$' : '$';
+
+  const html = useMemo(() => {
+    if (!katex) return null;
+    return katex.renderToString(content, {
+      output: 'mathml',
+      displayMode,
+      throwOnError: false,
+      trust: false,
+    });
+  }, [katex, content, displayMode]);
+
+  const displayStyle = displayMode
+    ? { ...style, display: 'block' as const, whiteSpace: 'pre-wrap' as const }
+    : style;
+
+  if (!html) {
+    return (
+      <span role="math" aria-label={content} style={displayStyle}>
+        {`${delimiter}${content}${delimiter}`}
+      </span>
+    );
+  }
+
+  return (
+    <span
+      role="math"
+      aria-label={content}
+      style={displayStyle}
+      dangerouslySetInnerHTML={{ __html: html }}
+    />
+  );
+}

package/src/web/renderers/ListRenderers.tsx

@@ -0,0 +1,110 @@
+import { useState, useEffect } from 'react';
+import { extractNodeText } from '../utils';
+import type { RendererProps, RendererMap, ASTNode, NodeType } from '../types';
+import { listItemStyle, checkedTaskTextStyle } from '../styles';
+
+const NESTED_LIST_TYPES: Set<NodeType> = new Set([
+  'UnorderedList',
+  'OrderedList',
+]);
+
+function ListRenderer({
+  node,
+  styles,
+  parentType,
+  renderChildren,
+  listTag: ListTag,
+}: RendererProps & { listTag: 'ul' | 'ol' }) {
+  const isNested = parentType === 'ListItem';
+  const hasTaskChild =
+    !isNested &&
+    node.children?.some((child) => child.attributes?.isTask === 'true');
+
+  const resolvedStyle = isNested
+    ? styles.listNested
+    : hasTaskChild
+      ? styles.listTask
+      : styles.list;
+  return <ListTag style={resolvedStyle}>{renderChildren(node)}</ListTag>;
+}
+
+function UnorderedListRenderer(props: RendererProps) {
+  return <ListRenderer {...props} listTag="ul" />;
+}
+
+function OrderedListRenderer(props: RendererProps) {
+  return <ListRenderer {...props} listTag="ol" />;
+}
+
+function isNestedList(child: ASTNode): boolean {
+  return NESTED_LIST_TYPES.has(child.type);
+}
+
+function ListItemRenderer({
+  node,
+  style,
+  styles,
+  callbacks,
+  renderChildren,
+}: RendererProps) {
+  const isTask = node.attributes?.isTask === 'true';
+  const initialChecked = node.attributes?.taskChecked === 'true';
+  const taskText = isTask ? extractNodeText(node) : '';
+  const [isChecked, setIsChecked] = useState(initialChecked);
+
+  useEffect(() => {
+    setIsChecked(initialChecked);
+  }, [initialChecked]);
+
+  const handleChange = () => {
+    const taskIndex = node.attributes?.taskIndex;
+    if (taskIndex === undefined) return;
+
+    const newChecked = !isChecked;
+    setIsChecked(newChecked);
+
+    callbacks.onTaskListItemPress?.({
+      index: taskIndex,
+      checked: newChecked,
+      text: taskText,
+    });
+  };
+
+  const hasNestedList = node.children?.some(isNestedList);
+  const checkedStyle =
+    isTask && isChecked ? checkedTaskTextStyle(style) : undefined;
+
+  const inlineNode: ASTNode = hasNestedList
+    ? {
+        ...node,
+        children: node.children?.filter((child) => !isNestedList(child)),
+      }
+    : node;
+  const nestedNode: ASTNode | null = hasNestedList
+    ? { ...node, children: node.children?.filter(isNestedList) }
+    : null;
+
+  return (
+    <li style={listItemStyle(isTask)}>
+      <span style={checkedStyle}>
+        {isTask && (
+          <input
+            type="checkbox"
+            checked={isChecked}
+            onChange={handleChange}
+            style={styles.taskCheckbox}
+            aria-label={`Task: ${taskText}`}
+          />
+        )}
+        {renderChildren(inlineNode)}
+      </span>
+      {nestedNode && renderChildren(nestedNode)}
+    </li>
+  );
+}
+
+export const listRenderers: RendererMap = {
+  UnorderedList: UnorderedListRenderer,
+  OrderedList: OrderedListRenderer,
+  ListItem: ListItemRenderer,
+};

package/src/web/renderers/TableRenderers.tsx

@@ -0,0 +1,61 @@
+import type { RendererProps, RendererMap } from '../types';
+import { tableBodyRowStyle } from '../styles';
+
+function TableRenderer({ node, styles, renderChildren }: RendererProps) {
+  return (
+    <div style={styles.tableWrapper}>
+      <table style={styles.table}>{renderChildren(node)}</table>
+    </div>
+  );
+}
+
+function TableHeadRenderer({ node, renderChildren }: RendererProps) {
+  return <thead>{renderChildren(node)}</thead>;
+}
+
+// Renders <tr> directly instead of delegating to TableRowRenderer because
+// zebra-striping requires the row index, which renderChildren doesn't provide.
+function TableBodyRenderer({ node, style, renderChildren }: RendererProps) {
+  return (
+    <tbody>
+      {node.children?.map((rowNode, rowIndex) => (
+        <tr key={`row-${rowIndex}`} style={tableBodyRowStyle(style, rowIndex)}>
+          {renderChildren(rowNode)}
+        </tr>
+      ))}
+    </tbody>
+  );
+}
+
+function TableRowRenderer({ node, renderChildren }: RendererProps) {
+  return <tr>{renderChildren(node)}</tr>;
+}
+
+function TableHeaderCellRenderer({
+  node,
+  styles,
+  renderChildren,
+}: RendererProps) {
+  return (
+    <th style={styles.tableHeaderCell[node.attributes?.align ?? 'default']}>
+      {renderChildren(node)}
+    </th>
+  );
+}
+
+function TableCellRenderer({ node, styles, renderChildren }: RendererProps) {
+  return (
+    <td style={styles.tableCell[node.attributes?.align ?? 'default']}>
+      {renderChildren(node)}
+    </td>
+  );
+}
+
+export const tableRenderers: RendererMap = {
+  Table: TableRenderer,
+  TableHead: TableHeadRenderer,
+  TableBody: TableBodyRenderer,
+  TableRow: TableRowRenderer,
+  TableHeaderCell: TableHeaderCellRenderer,
+  TableCell: TableCellRenderer,
+};

package/src/web/renderers/index.tsx

@@ -0,0 +1,75 @@
+import type { ReactNode } from 'react';
+import type {
+  ASTNode,
+  NodeType,
+  RendererCallbacks,
+  RenderCapabilities,
+  RendererMap,
+} from '../types';
+import type { MarkdownStyleInternal } from '../../types/MarkdownStyleInternal';
+import type { Styles } from '../styles';
+import { blockRenderers } from './BlockRenderers';
+import { inlineRenderers } from './InlineRenderers';
+import { listRenderers } from './ListRenderers';
+import { tableRenderers } from './TableRenderers';
+
+function nodeKey(node: ASTNode, index: number): string | number {
+  if (node.type === 'ListItem' && node.attributes?.isTask === 'true') {
+    const taskId = node.attributes.taskIndex ?? index;
+    return `task-${taskId}-${node.attributes.taskChecked}`;
+  }
+  return index;
+}
+
+const RENDERERS: RendererMap = {
+  ...blockRenderers,
+  ...inlineRenderers,
+  ...listRenderers,
+  ...tableRenderers,
+};
+
+export interface RenderNodeProps {
+  node: ASTNode;
+  style: MarkdownStyleInternal;
+  styles: Styles;
+  callbacks: RendererCallbacks;
+  capabilities: RenderCapabilities;
+  parentType?: NodeType;
+}
+
+export function RenderNode({
+  node,
+  style,
+  styles,
+  callbacks,
+  capabilities,
+  parentType,
+}: RenderNodeProps): ReactNode {
+  const Renderer = RENDERERS[node.type];
+  if (!Renderer) return null;
+
+  const renderChildren = (childNode: ASTNode): ReactNode =>
+    childNode.children?.map((child, index) => (
+      <RenderNode
+        key={nodeKey(child, index)}
+        node={child}
+        style={style}
+        styles={styles}
+        callbacks={callbacks}
+        capabilities={capabilities}
+        parentType={childNode.type}
+      />
+    )) ?? null;
+
+  return (
+    <Renderer
+      node={node}
+      style={style}
+      styles={styles}
+      parentType={parentType}
+      callbacks={callbacks}
+      capabilities={capabilities}
+      renderChildren={renderChildren}
+    />
+  );
+}