-
Notifications
You must be signed in to change notification settings - Fork 2.1k
Bug: Calling setDirection() has no visible effect in DOM like setFormat() #7632
Description
Title: setDirection() does not reflect direction changes in DOM like setFormat()
Description:
Hi,
I'm working on a customized version of lexical-playground to use it as a base for a component library. I tried to add a TextDirectionPlugin to handle keyboard shortcuts (Ctrl+Shift+Alt+R/L) for setting text direction (rtl / ltr), similar to how FORMAT_ELEMENT_COMMAND handles text alignment.
I followed the same structure as Lexical uses for FORMAT_ELEMENT_COMMAND, but created my own DIRECT_ELEMENT_COMMAND and used element.setDirection(direction) instead of element.setFormat(...).
It seems the reconciler detect direction only based on RTL_REGEX regular expression and not consider the __dir property of node.
Lexical Version: T
🔁 Steps To Reproduce
-
Create a direction plugin as shown here:
https://github.com/Pourianof/lexical-playground/blob/master/src/plugins/TextDirectionPlugin.tsx -
Add the plugin to the editor:
https://github.com/Pourianof/lexical-playground/blob/master/src/Editor.tsx#L203
❌ Current Behavior
Calling element.setDirection('rtl') or 'ltr' correctly updates the editor state,
but no visual change happens in the DOM — no dir attribute is applied to the block's DOM node.
As a result, text direction is not reflected in the layout or rendering.
✅ Expected Behavior
Calling element.setDirection(...) on a block-level element (e.g., ParagraphNode, HeadingNode) should update the DOM — applying dir="rtl" or dir="ltr" — similar to how setFormat(...) updates text-align.
💡 Possible Cause / Suggestion
It seems the reconciler detect direction only based on RTL_REGEX regular expression and not consider the __dir property of node.
If this is the expected behavior by design, it would be helpful to mention it in the documentation — so developers know they must override createDOM() themselves to apply dir.
Otherwise, it would be ideal if Lexical core handled applying dir attributes automatically when setDirection() is called, just like it does with setFormat() and text-align.
🌍 Impact
This is especially useful for users of right-to-left languages (e.g., Persian, Arabic, Hebrew) where mixed content (e.g., English inside Arabic text) is common, and direction control is essential.
Supporting setDirection() would allow users to toggle direction dynamically without having to write custom nodes or styles.
Thanks for all the amazing work on Lexical 🙏 Looking forward to your feedback!