[lexical][lexical-rich-text][lexical-list] Bug Fix: Import dir attribute in importDOM#8412
Merged
etrepum merged 5 commits intofacebook:mainfrom Apr 28, 2026
Merged
Conversation
…ute in importDOM Read the dir attribute from HTML elements during importDOM and call setDirection() on the created node. Previously, exportDOM correctly exported the dir attribute but importDOM did not read it back, causing text direction to be lost on HTML import. Fixes facebook#7765
mayrang
requested review from
acywatson,
etrepum,
fantactuka,
ivailop7,
potatowagon,
takuyakanbr and
zurfyx
as code owners
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
meta-cla
Bot
added
the
CLA Signed
Collaborator
|
tests are failing, expectations probably need to change to match the more correct behavior |
…r attribute Update test fixtures to reflect that importDOM now preserves the dir attribute on imported elements. Affects HTMLCopyAndPaste, LexicalTabNode, and LexicalTableNode external-source paste tests.
Contributor
Author
|
Done — fixed the expectations so |
…import Update playground e2e fixtures to reflect that importDOM now preserves the dir attribute. Affects code block, table, BIU formatting, and font-size paste tests where the source HTML carried dir="ltr".
etrepum
reviewed
Apr 28, 2026
Comment on lines
+392
to
+399
| let direction: string | null = null; | ||
| editor.getEditorState().read(() => { | ||
| const firstChild = $getRoot().getFirstChild(); | ||
| if ($isElementNode(firstChild)) { | ||
| direction = firstChild.getDirection(); | ||
| } | ||
| }); | ||
| return direction; |
Collaborator
There was a problem hiding this comment.
Suggested change
| let direction: string | null = null; | |
| editor.getEditorState().read(() => { | |
| const firstChild = $getRoot().getFirstChild(); | |
| if ($isElementNode(firstChild)) { | |
| direction = firstChild.getDirection(); | |
| } | |
| }); | |
| return direction; | |
| return editor.read(() => { | |
| const firstChild = $getRoot().getFirstChild(); | |
| return $isElementNode(firstChild) ? firstChild.getDirection() : null; | |
| }); |
| ).toBe('rtl'); | ||
| }); | ||
|
|
||
| test('list with dir="rtl"', () => { |
Collaborator
There was a problem hiding this comment.
this looks like it could be an importAndGetDirection test
also these could be simplified a bit further by using a data structure to build the tests https://vitest.dev/api/test.html#test-for
Comment on lines
+650
to
+653
| const dir = domNode.getAttribute('dir'); | ||
| if (dir === 'ltr' || dir === 'rtl') { | ||
| node.setDirection(dir); | ||
| } |
Collaborator
There was a problem hiding this comment.
This seems like a useful helper to export from lexical since it's used across several places, e.g.
export function $setDirectionFromDOM<T extends ElementNode>(node: T, domNode: HTMLElement): T {
const dir = domNode.getAttribute('dir');
return dir === 'ltr' || dir === 'rtl' ? node.setDirection(dir) : node;
}…tract $setDirectionFromDOM helper Extract the dir attribute import pattern into $setDirectionFromDOM in LexicalUtils and reuse it in ParagraphNode, ListItemNode, ListNode, and the heading/blockquote converters in lexical-rich-text. Refactor the LexicalHtml dir-import tests to use editor.read(cb) returning directly and consolidate the cases into a single test.for table.
Contributor
Author
|
Thanks for the pointers — all three applied:
|
etrepum
reviewed
Apr 28, 2026
| elementNode.setIndent(indent); | ||
| } | ||
|
|
||
| export function $setDirectionFromDOM<T extends ElementNode>( |
Collaborator
There was a problem hiding this comment.
Let's add some API docs for this new export, otherwise I think everything here looks great
Contributor
Author
|
Done — added JSDoc for |
etrepum
approved these changes
Apr 28, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Fixes #7765
The
dirattribute is exported correctly viaexportDOM(added in #7727), butimportDOMconversion functions don't read it back. This means the text direction is lost when importing HTML — for example, RTL content pasted into the editor loses its direction.What changed
Added
dirattribute handling to all ElementNodeimportDOMconversion functions:$convertParagraphElement(LexicalParagraphNode.ts)$convertHeadingElement(lexical-rich-text)$convertBlockquoteElement(lexical-rich-text)$convertListNode(lexical-list)$convertListItemElement(lexical-list)Each reads
element.getAttribute('dir')and callsnode.setDirection(dir)when the value is'ltr'or'rtl'.Test Plan
Added tests for HTML import → direction preservation: