[lexical][lexical-code][lexical-playground] Feature: Add horizontal auto-scroll and word wrap mode for code blocks

[KesavSundarM]

Description:

Current behavior:

• When a code block line overflows the container, navigating with Ctrl+ArrowRight/Left (MOVE_TO_END/MOVE_TO_START) moves the cursor but does not scroll the code block horizontally to reveal it. The browser's native scroll is suppressed by event.preventDefault() in the code highlighter, and Lexical's scrollIntoViewIfNeeded only handles vertical scrolling.

• There is no way to enable word wrap in code blocks — long lines always overflow with a horizontal scrollbar.

Changes in this PR:

1. Horizontal auto-scroll fix — Extended scrollIntoViewIfNeeded in LexicalUtils.ts to also handle X-axis scrolling. Added a startingElement parameter so the traversal begins from the selection's DOM ancestor (encountering the scrollable code element) rather than only from rootElement upward.

2. Word wrap mode — Added an optional wordWrap property to CodeNode that, when enabled:

3. Changes the DOM structure to use a real .code-gutter div (marked with setDOMUnmanaged) + .code-content div (managed via getDOMSlot override)

Test plan

Automated tests

1. 2 new unit tests in LexicalUtils.test.ts for horizontal scrolling (right overflow and left overflow)

2. All 2928 existing unit tests pass

3. pnpm run test-unit passes

4. pnpm run ci-check passes (tsc, prettier, eslint, flow)

Manual testing

Before:
Playground URL

After:

Screen.Recording.2026-05-06.at.5.46.23.PM.mov

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
lexical	Ready	Preview, Comment	Jun 9, 2026 8:42am
lexical-playground	Ready	Preview, Comment	Jun 9, 2026 8:42am

[etrepum]

For this particular use case we might be better served by adding some kind of getDOMSlot support to TextNode so that a line number element can be smuggled along with each line (but ignored otherwise)

[KesavSundarM]

Added a minor design change as well:
Before:

Uploading Screen Recording 2026-05-14 at 3.51.16 PM.mov…

Now :

Uploading Screen Recording 2026-05-14 at 3.50.25 PM.mov…

[etrepum]

Your last comment simply says "Uploading Screen Recording 2026-05-14 at 3.50.25 PM.mov…" instead of including the actual attachments

[potatowagon]

Review — Horizontal Auto-Scroll and Word Wrap for Code Blocks

Assessment: Looks good to land ✅

What I verified:

1. Feature scope: Adds two related code-block features: (a) horizontal auto-scroll when the caret moves beyond the visible area in overflow code blocks, and (b) a word-wrap toggle button in the code action menu.

2. Implementation breadth: Changes span lexical core (scroll utility), lexical-code-core (CodeNode/CodeGutter), lexical-code-prism, lexical-code-shiki (highlighter integration), and playground UI (WordWrapButton, CSS).

3. CI status: Full CI suite green (43 checks pass — the most comprehensive of all PRs in this review queue).

4. Architecture: The horizontal scroll logic integrates with the existing scrollIntoViewIfNeeded utility (which #8495 also extends — potential merge conflict to watch for). The word-wrap feature is stored as a node property on CodeNode.

5. Risk: Medium — touches core selection utilities, but the full e2e test suite passing across all platforms is strong validation. Word wrap is opt-in per code block.

— via Navi on behalf of potatowagon