💡 Proposal: Replacing RecursiveMarkdown with Marker-Based JSX Injection

[mayank1513]

Hey everyone 👋🏼

We’ve been exploring ways to improve performance and flexibility in @m2d/react-markdown, especially around JSX injection within Markdown (inspired by MDX-style flows).

❌ Problem with <RecursiveMarkdown />

• Slower renders on deeply nested trees
• Harder to debug and reason about
• Doesn't scale well for partial rendering or layout-driven usage

---

✅ New Direction — Marker-Based JSX Injection

Instead of recursive parsing of children, we propose:

🧩 Approach

1. Replace JSX with markers

   • Preprocess markdown and replace components with markers like:

     <!--$$jsx-block-uuid123$$-->

2. Track mapping

   • Keep a runtime mapping of uuid → JSX.Element:

     jsxMap["jsx-block-uuid123"] = <Sidebar />;

3. Inject via plugin

   • Custom remark plugin replaces markers with nodes pointing to React components.
   • Cleaner, faster, idiomatic. Works across SSR and client.

4. Update astRef

   // Before
   type AstRef = { current?: AstArrayElement[] }
   
   // After (1-to-1 mapping)
   type AstRef = { current?: AstArrayElement }

---

🧠 Why this matters

• Enables MDX-like composition, without MDX bundling
• Easier partial rendering, perf benchmarking
• Unlocks future features like component diffs, hydration isolation, and SSR fallback

---

🧪 Example Use

const markdown = `
# My Docs

<!--$$jsx-block-uuid123$$-->
`;

jsxMap["jsx-block-uuid123"] = <PromoCard title="Check out @m2d/react-markdown" />;

---

📣 Call for Feedback

We’d love your thoughts on:

• Does this approach make sense for your use case?
• Should block/inline JSX be explicitly tagged?
• Would you like a helper to serialize JSX into markers automatically?

And if you’re interested in helping build this out — plugin logic, test cases, or SSR edge cases — drop a comment below 👇🏼

---

🙏🏼 Thanks for being part of this journey. @m2d/react-markdown is growing rapidly, and your feedback shapes the direction.

Let’s make Markdown, JSX, and DOCX play even nicer. ⚡