Skip to content

fix(code-block): preserve empty lines in code blocks#420

Open
Jiasm wants to merge 1 commit intovercel:mainfrom
Jiasm:patch-1
Open

fix(code-block): preserve empty lines in code blocks#420
Jiasm wants to merge 1 commit intovercel:mainfrom
Jiasm:patch-1

Conversation

@Jiasm
Copy link

@Jiasm Jiasm commented Feb 25, 2026

Description

Fix empty lines collapsing in code blocks by inserting a newline character for empty rows. Previously, empty lines had no content causing the <span> elements to collapse to zero height, affecting both visual display and copy behavior.

Type of Change

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Documentation update
  • Performance improvement
  • Refactoring (no functional changes)

Related Issues

Related to empty line rendering in code blocks

Changes Made

  • Detect empty rows in code block rendering (row.length === 0 or single token with empty content)
  • Insert "\n" for empty lines instead of rendering an empty span
  • Ensures empty lines maintain proper height visually
  • Ensures copied text includes empty lines correctly

Testing

  • All existing tests pass
  • Added new tests for the changes
  • Manually tested the changes

Test Coverage

Tested with code containing empty lines to verify:

  1. Empty lines display with correct height
  2. Copy/paste preserves empty lines

Screenshots/Demos

Before: Empty lines collapse to zero height
After: Empty lines maintain proper line height and copy correctly

Checklist

  • My code follows the project's code style
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings or errors
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing unit tests pass locally with my changes
  • I have created a changeset (pnpm changeset)

Changeset

  • I have created a changeset for these changes

Additional Notes

This is a minimal fix that inserts "\n" for empty lines. Alternative approaches considered:

  • CSS min-height: 1lh - only fixes visual, doesn't preserve copy behavior
  • Zero-width space \u200B - fixes visual but copies as invisible character, not newline

## Summary

Fix empty lines collapsing in code blocks by inserting a newline character for empty rows.

## Problem

When rendering code blocks with empty lines, the `<span>` elements for empty rows had no content, causing them to collapse to zero height. This affected both visual display and copy behavior.

## Solution

Insert `"\n"` for empty lines instead of rendering an empty span. This ensures:
- **Visual**: Empty lines maintain proper height
- **Copy**: Copied text includes the empty lines correctly

## Changes

- `packages/streamdown/lib/code-block/body.tsx`: Add condition to detect empty rows (`row.length === 0` or single token with empty content) and render `"\n"` instead
@vercel
Copy link
Contributor

vercel bot commented Feb 25, 2026

@Jiasm is attempting to deploy a commit to the Vercel Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant