Case ce-0147-code-block-line-breaks-lost · Scenario scenario-code-block-editing

Line breaks are lost when editing code blocks

OS: Windows 11 Device: Desktop or Laptop Any Browser: Chrome 120.0 Keyboard: US Status: draft
code pre line-break chrome

Phenomenon

When editing text within a code block in Chrome, line breaks may be lost or converted to <br> tags instead of being preserved as newlines. This breaks code formatting and structure.

Reproduction example

  1. Create a code block with multiple lines
  2. Edit the code (add, delete, modify lines)
  3. Observe line break preservation

Observed behavior

  • Line breaks are lost
  • Or line breaks are converted to <br> tags
  • Code structure is broken
  • Formatting is lost

Expected behavior

  • Line breaks should be preserved
  • Code structure should be maintained
  • Formatting should remain intact
  • Behavior should match code editors

Browser Comparison

  • Chrome/Edge: Line breaks may be lost (this case)
  • Firefox: Similar line break issues
  • Safari: Line break preservation inconsistent

Notes and possible direction for workarounds

  • Ensure white-space: pre CSS is applied
  • Intercept Enter key to insert newlines properly
  • Preserve line breaks during editing
  • Monitor and restore line breaks if lost
Before
function test() {
return true;
}
Code block with multiple lines
After Editing (Bug)
function test() { return true; }
After editing, line breaks lost, merged into single line
vs
✅ Expected
function test() {
return true;
}
Expected: Line breaks preserved

Browser compatibility matrix

This matrix shows which browser and OS combinations have documented cases for this scenario. The current case is highlighted. Click on a cell to view other cases.

Current case
Confirmed
Draft
No case documented

All variants (detailed table)

Complete list of all cases for this scenario with full environment details.

Case OS Device Browser Keyboard Status
ce-0108-code-block-whitespace-chrome Windows 11 Desktop or Laptop Any Chrome 120.0 US draft
ce-0136-code-block-paste-formats Windows 11 Desktop or Laptop Any Firefox 120.0 US draft
ce-0147-code-block-line-breaks-lost Windows 11 Desktop or Laptop Any Chrome 120.0 US draft
ce-0157-code-block-formatting-allowed Windows 11 Desktop or Laptop Any Chrome 120.0 US draft

Playground for this case

Use the reported environment as a reference and record what happens in your environment while interacting with the editable area.

Reported environment
OS: Windows 11
Device: Desktop or Laptop Any
Browser: Chrome 120.0
Keyboard: US
Your environment
Sample HTML:
Event log
Use this log together with the case description when filing or updating an issue.
0 events
Interact with the editable area to see events here.

Comments & Discussion

Have questions, suggestions, or want to share your experience? Join the discussion below.