markdown-typewriter-react/dist/index.mjs.map

Typewriter animation for Markdown in React.

{"version":3,"sources":["../src/index.tsx"],"names":[],"mappings":"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","file":"index.mjs","sourcesContent":["import type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport ReactMarkdown from \"react-markdown\";\nimport remarkGfm from \"remark-gfm\";\n\ninterface MarkdownTypewriterProps {\n  /** The markdown content to render */\n  markdown: string;\n  /** Typing delay in milliseconds */\n  delay?: number;\n  /** Number of characters to type per tick (>=1) */\n  charsPerTick?: number;\n  /** Layout when showing raw + rendered */\n  layout?: \"stack\" | \"split\";\n  /** Additional CSS class name */\n  className?: string;\n  /** Inline styles */\n  style?: React.CSSProperties;\n  /** Whether to show the raw typed markdown with a caret */\n  showRaw?: boolean;\n}\n\nconst MarkdownTypewriter: React.FC<MarkdownTypewriterProps> = ({\n  markdown,\n  delay = 75,\n  charsPerTick = 1,\n  layout = \"stack\",\n  className = \"\",\n  style,\n  showRaw = false,\n}) => {\n  const [typed, setTyped] = useState(\"\");\n  const timerRef = useRef<number | null>(null);\n\n  // Inject caret/layout CSS once\n  useEffect(() => {\n    if (document.getElementById(\"mtw-caret-style\")) return;\n    const styleEl = document.createElement(\"style\");\n    styleEl.id = \"mtw-caret-style\";\n    styleEl.textContent = `\n      .markdown-typewriter .mtw-raw { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; white-space: pre-wrap; }\n      .markdown-typewriter .mtw-caret { display: inline-block; width: 0; border-right: 2px solid currentColor; margin-left: 2px; animation: mtw-blink 1s steps(1,end) infinite; }\n      .markdown-typewriter.mtw-split .mtw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }\n      .markdown-typewriter table { border-collapse: collapse; width: 100%; margin: 16px 0; }\n      .markdown-typewriter th, .markdown-typewriter td { border: 1px solid #ddd; padding: 8px 12px; text-align: left; }\n      .markdown-typewriter th { background-color: #f5f5f5; font-weight: 600; }\n      .markdown-typewriter tr:nth-child(even) { background-color: #f9f9f9; }\n      @keyframes mtw-blink { 50% { border-color: transparent; } }\n    `;\n    document.head.appendChild(styleEl);\n  }, []);\n\n  // Typing loop over raw markdown\n  useEffect(() => {\n    setTyped(\"\");\n    if (timerRef.current) {\n      window.clearInterval(timerRef.current);\n      timerRef.current = null;\n    }\n    let i = 0;\n    const step = Math.max(1, Math.floor(charsPerTick));\n    timerRef.current = window.setInterval(\n      () => {\n        i = Math.min(markdown.length, i + step);\n        setTyped(markdown.slice(0, i));\n        if (i >= markdown.length && timerRef.current) {\n          window.clearInterval(timerRef.current);\n          timerRef.current = null;\n        }\n      },\n      Math.max(10, delay),\n    );\n    return () => {\n      if (timerRef.current) {\n        window.clearInterval(timerRef.current);\n        timerRef.current = null;\n      }\n    };\n  }, [markdown, delay, charsPerTick]);\n\n  const split = showRaw && layout === \"split\";\n\n  return (\n    <div\n      className={`markdown-typewriter ${split ? \"mtw-split\" : \"\"} ${className}`.trim()}\n      style={style}\n    >\n      <div className=\"mtw-grid\">\n        {showRaw && (\n          <pre className=\"mtw-raw\">\n            <code>{typed}</code>\n            <span className=\"mtw-caret\" />\n          </pre>\n        )}\n        <div className=\"mtw-rendered\">\n          <ReactMarkdown remarkPlugins={[remarkGfm]}>{typed}</ReactMarkdown>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default MarkdownTypewriter;\n"]}