Skip to content

Bug: Calling setDirection() has no visible effect in DOM like setFormat() #7632

@Pourianof

Description

@Pourianof

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

  1. Create a direction plugin as shown here:
    https://github.com/Pourianof/lexical-playground/blob/master/src/plugins/TextDirectionPlugin.tsx

  2. 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!

Metadata

Metadata

Assignees

No one assigned

    Labels

    text directionRelated to bidirectional text input (rtl, ltr)

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions