[lexical-yjs] Bug Fix: don't sync ElementNode __dir property

packages/lexical-playground/__tests__/e2e/Tables.spec.mjs

@@ -1233,21 +1233,21 @@ test.describe.parallel('Tables', () => {
               <p dir="ltr"><span data-lexical-text="true">aa</span></p>
             </th>
             <th>
-              <p><span data-lexical-text="true">bb</span></p>
+              <p dir="ltr"><span data-lexical-text="true">bb</span></p>
             </th>
             <th>
-              <p><span data-lexical-text="true">cc</span></p>
+              <p dir="ltr"><span data-lexical-text="true">cc</span></p>
             </th>
           </tr>
           <tr>
             <th>
-              <p><span data-lexical-text="true">d</span></p>
+              <p dir="ltr"><span data-lexical-text="true">d</span></p>
             </th>
             <td>
-              <p><span data-lexical-text="true">e</span></p>
+              <p dir="ltr"><span data-lexical-text="true">e</span></p>
             </td>
             <td>
-              <p><span data-lexical-text="true">f</span></p>
+              <p dir="ltr"><span data-lexical-text="true">f</span></p>
             </td>
           </tr>
         </table>

packages/lexical-react/src/__tests__/unit/Collaboration.test.ts

@@ -7,6 +7,7 @@
  */
 
 import {
+  $createLineBreakNode,
   $createParagraphNode,
   $createTextNode,
   $getRoot,
@@ -290,6 +291,55 @@ describe('Collaboration', () => {
     client2.stop();
   });
 
+  it('Should not sync direction of element node', async () => {
+    const connector = createTestConnection();
+    const client1 = connector.createClient('1');
+    const client2 = connector.createClient('2');
+    client1.start(container!);
+    client2.start(container!);
+
+    await expectCorrectInitialContent(client1, client2);
+
+    // Add paragraph with RTL text, then another with a non-TextNode child
+    await waitForReact(() => {
+      client1.update(() => {
+        const root = $getRoot().clear();
+        root.append(
+          $createParagraphNode().append($createTextNode('فرعي')),
+          $createParagraphNode().append($createLineBreakNode()),
+        );
+      });
+    });
+
+    // Check that the second paragraph has RTL direction
+    expect(client1.getHTML()).toEqual(
+      '<p dir="rtl"><span data-lexical-text="true">فرعي</span></p><p dir="rtl"><br><br></p>',
+    );
+    expect(client2.getHTML()).toEqual(client1.getHTML());
+
+    // Mark the second paragraph's child as dirty to force the reconciler to run.
+    await waitForReact(() => {
+      client1.update(() => {
+        const pargraph = $getRoot().getChildAtIndex<ParagraphNode>(1)!;
+        const lineBreak = pargraph.getFirstChildOrThrow();
+        lineBreak.markDirty();
+      });
+    });
+
+    // There was no activeEditorDirection when processing this node, so direction should be set back to null.
+    expect(client1.getHTML()).toEqual(
+      '<p dir="rtl"><span data-lexical-text="true">فرعي</span></p><p><br><br></p>',
+    );
+
+    // Check that the second paragraph still has RTL direction on client 2, as __dir is not synced.
+    expect(client2.getHTML()).toEqual(
+      '<p dir="rtl"><span data-lexical-text="true">فرعي</span></p><p dir="rtl"><br><br></p>',
+    );
+
+    client1.stop();
+    client2.stop();
+  });
+
   it('Should allow the passing of arbitrary awareness data', async () => {
     const connector = createTestConnection();
 

packages/lexical-yjs/src/Utils.ts

@@ -51,6 +51,7 @@ const elementExcludedProperties = new Set<string>([
   '__first',
   '__last',
   '__size',
+  '__dir',
 ]);
 const rootExcludedProperties = new Set<string>(['__cachedText']);
 const textExcludedProperties = new Set<string>(['__text']);

packages/lexical/src/__tests__/unit/LexicalReconciler.test.ts

@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import {
+  $createLineBreakNode,
+  $createParagraphNode,
+  $createTextNode,
+  $getRoot,
+  ParagraphNode,
+} from 'lexical';
+
+import {initializeUnitTest} from '../utils';
+
+describe('LexicalReconciler', () => {
+  initializeUnitTest((testEnv) => {
+    test('Should use activeEditorDirection as the direction for a node with no directioned text', async () => {
+      const {editor} = testEnv;
+
+      editor.update(() => {
+        const root = $getRoot().clear();
+        root.append(
+          $createParagraphNode().append($createTextNode('فرعي')),
+          $createParagraphNode().append($createTextNode('Hello')),
+          $createParagraphNode().append($createLineBreakNode()),
+        );
+      });
+
+      // The third paragraph has no directioned text, so it should be set to the direction of the previous sibling.
+      let para3Dir = editor.read(() => {
+        return $getRoot().getChildAtIndex<ParagraphNode>(2)!.getDirection();
+      });
+      expect(para3Dir).toEqual('ltr');
+
+      // Mark the first and third paragraphs as dirty to force the reconciler to run.
+      editor.update(() => {
+        $getRoot().getChildAtIndex<ParagraphNode>(0)!.markDirty();
+        $getRoot().getChildAtIndex<ParagraphNode>(2)!.markDirty();
+      });
+
+      // Note: this is arguably a bug. It would be preferable for the node to keep its LTR direction. Added as a
+      // test so that the behaviour is at least documented.
+      para3Dir = editor.read(() => {
+        return $getRoot().getChildAtIndex<ParagraphNode>(2)!.getDirection();
+      });
+      expect(para3Dir).toEqual('rtl');
+    });
+  });
+});