How can I toggle LTR <-> RTL on toolbar button click on per block basis?

[pauldmps]

I have a requirement to toggle LTR <-> RTL using a toolbar button for individual block but I could not find any specific documentation on the same.

I could only find that ElementNode supports setDirection() but when I execute the function setDirection('rtl') on an ElementNode, I can see the DOM that the dir parameter changes but then immediately resets back to the older value.

[pauldmps]

Bumping with reproducable example:

https://codesandbox.io/p/sandbox/distracted-austin-2gyk4m

[alidplus]

use this direction plugin:

type TextDirectionType = 'rtl' | 'ltr'
export const CHANGE_DIRECTION_COMMAND: LexicalCommand<TextDirectionType> =
  createCommand<TextDirectionType>();

export function DirectionPlugin(): null {
  const [editor] = useLexicalComposerContext();
  useEffect(() => {
    return mergeRegister(
      editor.registerCommand(
        CHANGE_DIRECTION_COMMAND,
        (dir) => {
          const selection = $getSelection()
          if (selection && $isRangeSelection(selection)) {
            const nodes = selection.getNodes()
            editor.update(() => {
              for (const node of nodes) {
                /** cpp: closest parent paragraph node */
                const cppn = $findMatchingParent(node, $isParagraphNode)
                cppn?.setDirection(dir)
              }
            })
          }
          return true
        },
        COMMAND_PRIORITY_LOW,
      ),
      editor.registerNodeTransform<ParagraphNode>(ParagraphNode, (p) => {
        const element = editor.getElementByKey(p.getKey())
        const dir = p.getDirection()
        if (element) element.dir = dir || ""
        return true
      })
    )
  }, [editor]);

  return null;
}

call the CHANGE_DIRECTION_COMMAND command from your toolbar with rtl or ltr values:

editor.dispatchCommand(CHANGE_DIRECTION_COMMAND, 'rtl');

to get the current selection direction use:

$isParentElementRTL(selection)

[pauldmps]

Thanks. That works perfectly.