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!
Title:
setDirection()does not reflect direction changes in DOM likesetFormat()Description:
Hi,
I'm working on a customized version of
lexical-playgroundto use it as a base for a component library. I tried to add aTextDirectionPluginto handle keyboard shortcuts (Ctrl+Shift+Alt+R/L) for setting text direction (rtl/ltr), similar to howFORMAT_ELEMENT_COMMANDhandles text alignment.I followed the same structure as Lexical uses for
FORMAT_ELEMENT_COMMAND, but created my ownDIRECT_ELEMENT_COMMANDand usedelement.setDirection(direction)instead ofelement.setFormat(...).It seems the reconciler detect direction only based on
RTL_REGEXregular 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
dirattribute 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 — applyingdir="rtl"ordir="ltr"— similar to howsetFormat(...)updatestext-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 applydir.Otherwise, it would be ideal if Lexical core handled applying
dirattributes automatically whensetDirection()is called, just like it does withsetFormat()andtext-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!