[lexical-code-core][lexical-playground] Feature: Create paragraph around the code node when navigating with the arrow keys

[levensta]

Description

lexical-utils

Handlers $onEscapeDown and $onEscapeUp have been added to create paragraphs when the cursor is at the end of an element and that element is the last one in the root. Use these handlers for arrow key commands.

lexical-code-core

The CodeIndentExtension now includes an escapeWithArrows option (default: false), which improves keyboard usability. When this option is enabled, if CodeNode is the terminal node and the cursor is at the end of the text, pressing the arrow keys will create a new paragraph and move the cursor to it

Closes #7912

Test plan

Before

Insert relevant screenshots/recordings/automated-tests

After

Insert relevant screenshots/recordings/automated-tests

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
lexical	Ready	Preview, Comment	Jun 4, 2026 5:49pm
lexical-playground	Ready	Preview, Comment	Jun 4, 2026 5:49pm

[etrepum]

This should probably be a configuration option built into a signal for registration because it's not always desired behavior, e.g. when you have the playground in markdown or html mode you do not want to be able to exit that CodeNode at all.

[levensta]

This should probably be a configuration option built into a signal for registration because it's not always desired behavior, e.g. when you have the playground in markdown or html mode you do not want to be able to exit that CodeNode at all.

Currently, the playground removes any non-CodeNode elements in Markdown/HTML mode, so I didn't add this option initially. But overall, it wouldn't hurt to have this option anyway — the only question is, should this behavior be the default? I would enable it by default because CodeExtension is a new extension and the current feature will not change the behavior of CodeNode unless you enable the extension

[levensta]

The current feature is a direct copy of CollapsibleContainer. I also thought it might be a good idea to add similar key handling for table cells, but perhaps we should move the current handlers into generic functions in lexical/utils?

[etrepum]

Moving shared code to @lexical/utils makes sense. I wouldn't necessarily consider the CodeExtension that new anymore, it's been around for half a year, people are may already depend on its current defaults.

[etrepum]

Collapsible doesn't have to have any compatibility considerations because it's not a published package, it just lives in the playground

[etrepum]

Overall this looks good, but it doesn't seem to work with an empty code block

pr playground link

[potatowagon]

Review — Create Paragraph Around Code Node with Arrow Keys

Assessment: Looks good to land ✅

What I verified:

1. Feature scope: Adds arrow-key escape behavior for code blocks — pressing up/left at the start or down/right at the end of a code block creates a new paragraph to allow adding content before/after. Uses the existing $onEscapeUp/$onEscapeDown utilities from @lexical/utils.

2. Implementation: The escapeWithArrows parameter is added to registerCodeIndentation as an opt-in boolean. The handlers register at COMMAND_PRIORITY_LOW so they run before $handleShiftLines. The fix also correctly changes the return value in $handleShiftLines from true to false when at a boundary (so the command continues propagating to the escape handlers).

3. Edge case handling: Alt+arrow is excluded (for line-shift operations). The sibling-null check ensures paragraphs are only created when the code block is at the document boundary.

4. CI status: Full CI suite green (42 checks including all e2e tests across all platforms).

5. Risk: Opt-in behavior, no change to default code block navigation. Existing tests still pass.

— via Navi on behalf of potatowagon