Fix: Code block rendering with Shiki in dashboard editor

[dsinghvi]

Summary

Fixes code block rendering issues in the dashboard editor by adding missing MDX plugins and improving the rehype-code-block plugin.

Problem

Code blocks in the dashboard editor were not rendering properly in nested components (Accordions, Tabs, Steps) and filenames were being parsed incorrectly.

Root Cause

The dashboard was missing key rehype/remark plugins that fern-docs uses, causing MDX content to not be processed consistently.

Changes

1. Added missing MDX plugins to dashboard bundler

• rehypeAccordions, rehypeSteps, rehypeTabs - Process nested component structures
• rehypeTable, rehypeCards, rehypeButtons, rehypeParamField - Component support
• remarkGfm, remarkMath, rehypeKatex - Math equations and GFM features
• remarkFrontmatter, remarkMdxFrontmatter - Proper frontmatter parsing

2. Fixed nested code block processing

Updated the CodeGroup validation in rehype-code-block to properly skip text nodes (whitespace) instead of failing validation, allowing code blocks inside components to be processed.

3. Auto-detect filenames in code blocks

Added logic to detect when a code block meta string looks like a filename (e.g., docs.yml, src/index.tsx) and automatically use the filename= prop instead of title=.

Examples

Now these work correctly:

<Accordion title="Example">
  <CodeBlocks>
    ```bash
    npm install
    ```
  </CodeBlocks>
</Accordion>

```yaml docs.yml
# content

## Testing

- ✅ Code blocks render with Shiki syntax highlighting
- ✅ Code blocks inside Accordions work
- ✅ Code blocks inside CodeBlocks/Tabs/Steps work
- ✅ Filenames are auto-detected and displayed correctly
- ✅ All existing MDX features continue to work

🤖 Generated with [Claude Code](https://claude.com/claude-code)

[vercel]

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

Project	Deployment	Preview	Updated (UTC)
dev.ferndocs.com	Ready	Preview	Oct 8, 2025 0:01am
fern-dashboard	Ready	Preview	Oct 8, 2025 0:01am
fern-dashboard-dev	Ready	Preview	Oct 8, 2025 0:01am
ferndocs.com	Ready	Preview	Oct 8, 2025 0:01am
preview.ferndocs.com	Ready	Preview	Oct 8, 2025 0:01am
prod-assets.ferndocs.com	Ready	Preview	Oct 8, 2025 0:01am
prod.ferndocs.com	Ready	Preview	Oct 8, 2025 0:01am

[vercel]

The handleSave function doesn't check if getPos() returns a valid number before using it in arithmetic operations, which can cause runtime errors when the position is undefined.

View Details

📝 Patch Details

diff --git a/packages/fern-dashboard/src/components/editor/extension-code-block/ShikiCodeBlockComponent.tsx b/packages/fern-dashboard/src/components/editor/extension-code-block/ShikiCodeBlockComponent.tsx
index 6004111bc..46431183c 100644
--- a/packages/fern-dashboard/src/components/editor/extension-code-block/ShikiCodeBlockComponent.tsx
+++ b/packages/fern-dashboard/src/components/editor/extension-code-block/ShikiCodeBlockComponent.tsx
@@ -142,6 +142,7 @@ export function ShikiCodeBlockComponent(props: ReactNodeViewProps) {
         const { state } = props.editor;
         const { tr } = state;
         const from = props.getPos();
+        if (typeof from !== "number") return;
         const to = from + props.node.nodeSize;
 
         // Replace the content of the code block

Analysis

Missing getPos() validation in ShikiCodeBlockComponent.handleSave causes NaN position errors

What fails: ShikiCodeBlockComponent.handleSave() uses props.getPos() directly in arithmetic operations without validation, causing NaN values when the position is undefined

How to reproduce:

// When getPos() returns undefined (when node is not in document):
const from = props.getPos(); // undefined
const to = from + props.node.nodeSize; // NaN
tr.insertText(editedCode, from + 1, to - 1); // insertText(text, NaN, NaN)

Result: ProseMirror transaction methods receive NaN positions, causing RangeError when positions are resolved. All other NodeView components in the codebase properly validate with if (typeof pos === "number") before using position values.

Expected: Should validate position like other components: const from = props.getPos(); if (typeof from !== "number") return;

Per ProseMirror docs: "if the node is not in the document, the position returned by this function will be undefined"