Skip to content

[lexical] Bug Fix: Respect CSS display style in isBlockDomNode and isInlineDomNode#8428

Merged
etrepum merged 3 commits into
facebook:mainfrom
abhishekvishwakarma007:fix/inline-div-paste-linebreaks
Apr 30, 2026
Merged

[lexical] Bug Fix: Respect CSS display style in isBlockDomNode and isInlineDomNode#8428
etrepum merged 3 commits into
facebook:mainfrom
abhishekvishwakarma007:fix/inline-div-paste-linebreaks

Conversation

@abhishekvishwakarma007
Copy link
Copy Markdown
Contributor

@abhishekvishwakarma007 abhishekvishwakarma007 commented Apr 30, 2026

Description

Fixes #8418

When pasting from Ghostty terminal into Lexical, <div style="display: inline"> elements were treated as block elements, inserting unwanted linebreaks. This is because isBlockDomNode and isInlineDomNode classified elements based solely on tag name, ignoring the CSS display property.

The fix checks element.style.display before falling back to the tag name. If an explicit display style is set, it takes precedence — a <div style="display: inline"> is now treated like a <span> during import, which matches actual browser rendering behavior.

This also handles display: inline-block, display: inline-flex, etc., following the existing pattern in LexicalTextNode.ts.

Test plan

Before:

  • Paste Ghostty HTML with <div style="display: inline;"> wrappers
  • Each inline div creates a new line (unwanted linebreaks)
8428Before.mov

After:

  • Same paste produces text on the same line, no extra linebreaks

  • Normal <div> elements (without inline display) still create new lines as expected

  • Added 2 unit tests (generic inline div + Ghostty-specific paste)

  • All 2,781 unit tests pass

  • pnpm run ci-check passes (TypeScript, Flow, Prettier, ESLint)

  • Manual testing in playground confirms fix

8428after.mov

… isInlineDomNode

Fixes facebook#8418. When pasting from Ghostty terminal, `<div style="display: inline">`
elements were treated as block elements, inserting unwanted linebreaks. The
`isBlockDomNode` and `isInlineDomNode` functions now check the element's
`style.display` property before falling back to the tag name.
@vercel
Copy link
Copy Markdown

vercel Bot commented Apr 30, 2026

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

Project Deployment Actions Updated (UTC)
lexical Ready Ready Preview, Comment Apr 30, 2026 4:37pm
lexical-playground Ready Ready Preview, Comment Apr 30, 2026 4:37pm

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 Apr 30, 2026
@potatowagon
Copy link
Copy Markdown
Contributor

potatowagon commented Apr 30, 2026

cmiiw, im gonna assume this fix is for all <div style="display: inline"> elements which ghostty just happen to have. can u add before and after recordings to test plan to show this works?

can be copying ghostty content and pasting it into the lexical playground. or, go to codepen to render <div style="display: inline"> html and copy paste that

@abhishekvishwakarma007
Copy link
Copy Markdown
Contributor Author

Updated the test plan with before/after screen recordings showing the fix in action.

@etrepum etrepum added the extended-tests Run extended e2e tests on a PR label Apr 30, 2026
Comment thread packages/lexical/src/LexicalUtils.ts Outdated
@etrepum etrepum added this pull request to the merge queue Apr 30, 2026
Merged via the queue into facebook:main with commit 88c600d Apr 30, 2026
52 of 53 checks passed
@etrepum etrepum mentioned this pull request May 28, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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

Development

Successfully merging this pull request may close these issues.

Bug: Pasting from Ghostty terminal inserts unintended linebreaks

3 participants