feat(editor): add best-effort rendering of markdown snippets in preview

[devin-ai-integration]

Best-effort rendering of markdown snippets in preview

This PR implements a temporary solution for rendering <Markdown /> snippet tags in the editor's preview pane while waiting for full file resolution support (PR #4774). It analyzes the difference between rawMarkdown and markdown fields from FDR to infer what each snippet resolves to, then displays the resolved content in preview only.

What was the motivation & context behind this PR?

Currently, <Markdown /> snippet tags appear as raw tags in the preview pane. This PR provides an interim rendering solution by:

1. Computing a one-time mapping between <Markdown /> tags and their resolved content using surrounding context
2. Wrapping resolved snippets in HTML that displays "Reusable Markdown Snippet" with a lock icon (non-editable)
3. Only affecting preview - dev mode continues showing raw markdown unchanged

Link to Devin run: https://app.devin.ai/sessions/a42cecbe41e3416690856255590142ca
Requested by: Sarah Bawabe ([email protected]) / @sbawabe

How has this PR been tested?

⚠️ This PR has NOT been manually tested with actual markdown snippets. All linting and tests pass, but the feature needs verification with real data.

Critical testing required:

1. Test with actual <Markdown /> tags: Verify the algorithm correctly matches tags to resolved content
2. Dev mode preservation: Confirm the dev panel still shows raw <Markdown /> tags
3. HTML wrapper compatibility: Verify the Tailwind-based wrapper renders correctly in preview and doesn't break mdxToHtml
4. Edge cases:
   • Multiple snippets on same page
   • Similar surrounding context between snippets
   • Snippets inside code blocks (should be ignored)
   • Various whitespace patterns

Implementation details worth reviewing:

New file: bestEffortMarkdownSnippets.ts

• Uses regex /<Markdown\s*(?:[^>]*?)\/>/g to find self-closing tags
• Extracts 150 chars of prefix/suffix context for matching
• Normalizes whitespace for reliable matching (bug fix applied based on Vercel Agent feedback)
• Skips tags inside fenced code blocks
• Wraps resolved content in HTML div with Tailwind classes mimicking NodeHoverWrapper

Modified file: page.tsx

• Computes mapping only when page.rawMarkdown !== page.markdown
• Creates previewMdx with resolved snippets for preview rendering
• Falls back to raw markdown on errors
• Dev mode receives original rawMarkdown (via separate code path)

Known limitations:

• Context matching may fail with highly similar surrounding text
• HTML wrapper assumes Tailwind classes and CSS variables are available
• Mapping runs on every page load (acceptable since only when rawMarkdown differs)
• No caching of computed mappings

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Updated (UTC)
fern-dashboard	Ready	Preview	Nov 6, 2025 5:14pm
fern-dashboard-dev	Ready	Preview	Nov 6, 2025 5:14pm
ferndocs.com	Ready	Preview	Nov 6, 2025 5:14pm

5 Skipped Deployments

Project	Deployment	Preview	Updated (UTC)
dev.ferndocs.com	Ignored	Preview	Nov 6, 2025 5:14pm
fern-platform	Ignored		Nov 6, 2025 5:14pm
preview.ferndocs.com	Skipped		Nov 6, 2025 5:14pm
prod-assets.ferndocs.com	Skipped		Nov 6, 2025 5:14pm
prod.ferndocs.com	Skipped		Nov 6, 2025 5:14pm