Skip to content

Fix(Playground): Prevent code block line wrapping to keep line number…#8087

Merged
etrepum merged 3 commits intofacebook:mainfrom
Sa-Te:fix/code-block-lines
Jan 21, 2026
Merged

Fix(Playground): Prevent code block line wrapping to keep line number…#8087
etrepum merged 3 commits intofacebook:mainfrom
Sa-Te:fix/code-block-lines

Conversation

@Sa-Te
Copy link
Copy Markdown
Contributor

@Sa-Te Sa-Te commented Jan 19, 2026

Description

Fixed an issue where line numbers in the Code Block gutter would desynchronize or disappear when code lines wrapped due to window resizing.

Fix

Added white-space: pre; to .PlaygroundEditorTheme__code. This forces the code block to scroll horizontally instead of wrapping, ensuring that 1 visual line always equals 1 logical line number. This matches the behavior of standard code editors (VS Code, GitHub).

Test Plan

  1. Open Playground.
  2. Insert a Code Block.
  3. Paste a large snippet (200+ lines) with long lines of text.
  4. Resize the window to be narrow.
  5. Observed: Horizontal scrollbar appears, and line numbers remain perfectly aligned with the text.

Fixes #4361

@meta-cla
Copy link
Copy Markdown

meta-cla bot commented Jan 19, 2026

Hi @Sa-Te!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at cla@meta.com. Thanks!

@vercel
Copy link
Copy Markdown

vercel bot commented Jan 19, 2026 •
edited
Loading

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

Project Deployment Review Updated (UTC)
lexical Ready Ready Preview, Comment Jan 20, 2026 9:33pm
lexical-playground Ready Ready Preview, Comment Jan 20, 2026 9:33pm

Request Review

@meta-cla meta-cla bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Jan 19, 2026
@meta-cla
Copy link
Copy Markdown

meta-cla bot commented Jan 19, 2026

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks!

@etrepum etrepum added the extended-tests Run extended e2e tests on a PR label Jan 20, 2026
etrepum
etrepum reviewed Jan 20, 2026
View reviewed changes
Copy link
Copy Markdown
Collaborator

@etrepum etrepum left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the ideal here would be for the line numbers to stay fixed (and on top) while the content scrolls horizontally

@Sa-Te
Copy link
Copy Markdown
Contributor Author

Sa-Te commented Jan 20, 2026

@etrepum Thanks for the feedback! I've updated the implementation to match the requested behavior:

  • Switched the gutter to position: sticky and float: left. It now stays pinned to the left edge while the code scrolls horizontally underneath it.
  • Alignment: Used negative margins on the gutter (margin-top: -8px) to counteract the container padding, ensuring the line numbers align perfectly with the text baselines.
  • Layout: Removed the container's left padding to let the sticky gutter handle the spacing naturally.

Validated that vertical scrolling still behaves natively (page scroll) and horizontal scrolling is contained within the block.

@etrepum etrepum added this pull request to the merge queue Jan 21, 2026
Merged via the queue into facebook:main with commit 49ac665 Jan 21, 2026
36 checks passed
@etrepum etrepum mentioned this pull request Jan 31, 2026
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@etrepum etrepum etrepum approved these changes

@zurfyx zurfyx Awaiting requested review from zurfyx zurfyx is a code owner

@fantactuka fantactuka Awaiting requested review from fantactuka fantactuka is a code owner

@acywatson acywatson Awaiting requested review from acywatson acywatson is a code owner

@ivailop7 ivailop7 Awaiting requested review from ivailop7 ivailop7 is a code owner

@potatowagon potatowagon Awaiting requested review from potatowagon potatowagon is a code owner

@takuyakanbr takuyakanbr Awaiting requested review from takuyakanbr takuyakanbr is a code owner

Assignees

No one assigned

Labels

CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. extended-tests Run extended e2e tests on a PR

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Bug: code block lines

2 participants

@Sa-Te @etrepum