Skip to content

[lexical] Feature: ElementNode import/export support for data-lexical-indent#8536

Merged
etrepum merged 9 commits into
facebook:mainfrom
etrepum:claude/reproduce-issue-7729-8Vu5A
May 21, 2026
Merged

[lexical] Feature: ElementNode import/export support for data-lexical-indent#8536
etrepum merged 9 commits into
facebook:mainfrom
etrepum:claude/reproduce-issue-7729-8Vu5A

Conversation

@etrepum

@etrepum etrepum commented May 21, 2026

Copy link
Copy Markdown
Collaborator

Description

Lexical currently only uses the padding-inline-start style to represent its indentation, but using it as a signal for the actual indentation is fragile if customized because it is based on display.

This changes the representation to use a data attribute on export so that the indentation can be reliably recovered on import regardless of CSS, with a fallback to the padding-inline-start heuristic.

Closes #7729

Test plan

New unit tests

claude added 3 commits May 21, 2026 13:45
Adds failing tests that document setNodeIndentFromDOM's two failure modes:
parseInt cannot read the reconciler's `calc(N * var(--lexical-indent-base-value, 40px))`
inline style, and the hardcoded /40 divisor ignores a custom
`--lexical-indent-base-value`. The literal `${indent * 40}px` round-trip
that exportDOM produces still passes, so this test is added to document
the gap.
…k#7729)

`setNodeIndentFromDOM` only recovered indent by dividing
`padding-inline-start` by 40, which loses information whenever the
inline style is the reconciler's `calc(N * var(--lexical-indent-base-value, 40px))`
expression (live-DOM copy/paste) or uses a custom
`--lexical-indent-base-value` whose pixel value doesn't divide cleanly
by 40.

Emit `data-lexical-indent="N"` from `ElementNode.exportDOM` whenever
indent is non-zero, and prefer that attribute in `setNodeIndentFromDOM`.
The padding-based heuristic remains as a fallback for HTML produced
outside Lexical.
…facebook#7729 repro

Switch Issue7729Repro.test.ts off the legacy `initializeUnitTest` harness
and onto the modern `using editor = buildEditorFromExtensions(...)`
pattern, and use `$insertGeneratedNodes` for the DOM import path
instead of appending nodes to the root by hand.
@vercel

vercel Bot commented May 21, 2026

Copy link
Copy Markdown

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

Project Deployment Actions Updated (UTC)
lexical Ready Ready Preview, Comment May 21, 2026 3:15pm
lexical-playground Ready Ready Preview, Comment May 21, 2026 3:15pm

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 May 21, 2026
- setUpEditor now declares RichTextExtension as a dependency of the test
  extension and takes the `$initialEditorState` as an argument, rather
  than composing it as a sibling root extension at every call site.
- $importHtml is a pure `$` function and must be invoked inside
  `editor.update`, instead of opening its own update transaction.
- Replace `ReturnType<typeof setUpEditor>` with an imported
  `LexicalEditor` type.
- $importHtml uses $getEditor and pastes with $selectAll(), so it
  replaces whatever was in the editor instead of requiring callers to
  root.clear() first.
- Drop the editor argument from $importHtml — it's a $ function.
- Replace `getFirstChildOrThrow<ParagraphNode>()` with
  `assert($isParagraphNode(para), ...)` so the type narrowing also
  doubles as an assertion that imports produced a ParagraphNode.
The tests only exercise the model and the HTML import/export paths, so
the editor doesn't need to be mounted.
@etrepum etrepum added this pull request to the merge queue May 21, 2026
Merged via the queue into facebook:main with commit 4a92545 May 21, 2026
42 checks passed
@etrepum etrepum deleted the claude/reproduce-issue-7729-8Vu5A branch May 21, 2026 22:09
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: There is an issue with indentation handling when importing DOM in LexicalParagraphNode

3 participants