Lexical: Removed reconciler level direction handling

- Updated tests to consider changes

resources/js/wysiwyg/lexical/core/LexicalReconciler.ts

@@ -42,14 +42,12 @@ import {
   $textContentRequiresDoubleLinebreakAtEnd,
   cloneDecorators,
   getElementByKeyOrThrow,
-  getTextDirection,
   setMutatedNode,
 } from './LexicalUtils';
 
 type IntentionallyMarkedAsDirtyElement = boolean;
 
 let subTreeTextContent = '';
-let subTreeDirectionedTextContent = '';
 let subTreeTextFormat: number | null = null;
 let subTreeTextStyle: string = '';
 let editorTextContent = '';
@@ -59,7 +57,6 @@ let activeEditorNodes: RegisteredNodes;
 let treatAllNodesAsDirty = false;
 let activeEditorStateReadOnly = false;
 let activeMutationListeners: MutationListeners;
-let activeTextDirection: 'ltr' | 'rtl' | null = null;
 let activeDirtyElements: Map<NodeKey, IntentionallyMarkedAsDirtyElement>;
 let activeDirtyLeaves: Set<NodeKey>;
 let activePrevNodeMap: NodeMap;
@@ -197,7 +194,7 @@ function $createNode(
     if (childrenSize !== 0) {
       const endIndex = childrenSize - 1;
       const children = createChildrenArray(node, activeNextNodeMap);
-      $createChildrenWithDirection(children, endIndex, node, dom);
+      $createChildren(children, node, 0, endIndex, dom, null);
     }
     const format = node.__format;
 
@@ -222,10 +219,6 @@ function $createNode(
       }
       // Decorators are always non editable
       dom.contentEditable = 'false';
-    } else if ($isTextNode(node)) {
-      if (!node.isDirectionless()) {
-        subTreeDirectionedTextContent += text;
-      }
     }
     subTreeTextContent += text;
     editorTextContent += text;
@@ -261,19 +254,6 @@ function $createNode(
   return dom;
 }
 
-function $createChildrenWithDirection(
-  children: Array<NodeKey>,
-  endIndex: number,
-  element: ElementNode,
-  dom: HTMLElement,
-): void {
-  const previousSubTreeDirectionedTextContent = subTreeDirectionedTextContent;
-  subTreeDirectionedTextContent = '';
-  $createChildren(children, element, 0, endIndex, dom, null);
-  reconcileBlockDirection(element, dom);
-  subTreeDirectionedTextContent = previousSubTreeDirectionedTextContent;
-}
-
 function $createChildren(
   children: Array<NodeKey>,
   element: ElementNode,
@@ -388,93 +368,16 @@ function reconcileParagraphStyle(element: ElementNode): void {
   }
 }
 
-function reconcileBlockDirection(element: ElementNode, dom: HTMLElement): void {
-  const previousSubTreeDirectionTextContent: string =
-    // @ts-expect-error: internal field
-    dom.__lexicalDirTextContent;
-  // @ts-expect-error: internal field
-  const previousDirection: string = dom.__lexicalDir;
-
-  if (
-    previousSubTreeDirectionTextContent !== subTreeDirectionedTextContent ||
-    previousDirection !== activeTextDirection
-  ) {
-    const hasEmptyDirectionedTextContent = subTreeDirectionedTextContent === '';
-    const direction = hasEmptyDirectionedTextContent
-      ? activeTextDirection
-      : getTextDirection(subTreeDirectionedTextContent);
-
-    if (direction !== previousDirection) {
-      const classList = dom.classList;
-      const theme = activeEditorConfig.theme;
-      let previousDirectionTheme =
-        previousDirection !== null ? theme[previousDirection] : undefined;
-      let nextDirectionTheme =
-        direction !== null ? theme[direction] : undefined;
-
-      // Remove the old theme classes if they exist
-      if (previousDirectionTheme !== undefined) {
-        if (typeof previousDirectionTheme === 'string') {
-          const classNamesArr = normalizeClassNames(previousDirectionTheme);
-          previousDirectionTheme = theme[previousDirection] = classNamesArr;
-        }
-
-        // @ts-ignore: intentional
-        classList.remove(...previousDirectionTheme);
-      }
-
-      if (
-        direction === null ||
-        (hasEmptyDirectionedTextContent && direction === 'ltr')
-      ) {
-        // Remove direction
-        dom.removeAttribute('dir');
-      } else {
-        // Apply the new theme classes if they exist
-        if (nextDirectionTheme !== undefined) {
-          if (typeof nextDirectionTheme === 'string') {
-            const classNamesArr = normalizeClassNames(nextDirectionTheme);
-            // @ts-expect-error: intentional
-            nextDirectionTheme = theme[direction] = classNamesArr;
-          }
-
-          if (nextDirectionTheme !== undefined) {
-            classList.add(...nextDirectionTheme);
-          }
-        }
-
-        // Update direction
-        dom.dir = direction;
-      }
-
-      if (!activeEditorStateReadOnly) {
-        const writableNode = element.getWritable();
-        writableNode.__dir = direction;
-      }
-    }
-
-    activeTextDirection = direction;
-    // @ts-expect-error: internal field
-    dom.__lexicalDirTextContent = subTreeDirectionedTextContent;
-    // @ts-expect-error: internal field
-    dom.__lexicalDir = direction;
-  }
-}
-
 function $reconcileChildrenWithDirection(
   prevElement: ElementNode,
   nextElement: ElementNode,
   dom: HTMLElement,
 ): void {
-  const previousSubTreeDirectionTextContent = subTreeDirectionedTextContent;
-  subTreeDirectionedTextContent = '';
   subTreeTextFormat = null;
   subTreeTextStyle = '';
   $reconcileChildren(prevElement, nextElement, dom);
-  reconcileBlockDirection(nextElement, dom);
   reconcileParagraphFormat(nextElement);
   reconcileParagraphStyle(nextElement);
-  subTreeDirectionedTextContent = previousSubTreeDirectionTextContent;
 }
 
 function createChildrenArray(
@@ -624,20 +527,9 @@ function $reconcileNode(
         subTreeTextContent += previousSubTreeTextContent;
         editorTextContent += previousSubTreeTextContent;
       }
-
-      // @ts-expect-error: internal field
-      const previousSubTreeDirectionTextContent = dom.__lexicalDirTextContent;
-
-      if (previousSubTreeDirectionTextContent !== undefined) {
-        subTreeDirectionedTextContent += previousSubTreeDirectionTextContent;
-      }
     } else {
       const text = prevNode.getTextContent();
 
-      if ($isTextNode(prevNode) && !prevNode.isDirectionless()) {
-        subTreeDirectionedTextContent += text;
-      }
-
       editorTextContent += text;
       subTreeTextContent += text;
     }
@@ -702,9 +594,6 @@ function $reconcileNode(
       if (decorator !== null) {
         reconcileDecorator(key, decorator);
       }
-    } else if ($isTextNode(nextNode) && !nextNode.isDirectionless()) {
-      // Handle text content, for LTR, LTR cases.
-      subTreeDirectionedTextContent += text;
     }
 
     subTreeTextContent += text;
@@ -871,11 +760,9 @@ export function $reconcileRoot(
   // The cache must be rebuilt during reconciliation to account for any changes.
   subTreeTextContent = '';
   editorTextContent = '';
-  subTreeDirectionedTextContent = '';
   // Rather than pass around a load of arguments through the stack recursively
   // we instead set them as bindings within the scope of the module.
   treatAllNodesAsDirty = dirtyType === FULL_RECONCILE;
-  activeTextDirection = null;
   activeEditor = editor;
   activeEditorConfig = editor._config;
   activeEditorNodes = editor._nodes;

resources/js/wysiwyg/lexical/core/__tests__/unit/LexicalEditor.test.ts

@@ -258,7 +258,7 @@ describe('LexicalEditor tests', () => {
     await Promise.resolve().then();
 
     expect(container.innerHTML).toBe(
-      '<div style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">This works!</span></p></div>',
+      '<div style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">This works!</span></p></div>',
     );
 
     const initialEditorState = initialEditor.getEditorState();
@@ -276,7 +276,7 @@ describe('LexicalEditor tests', () => {
 
     expect(editor.getEditorState()).toEqual(initialEditorState);
     expect(container.innerHTML).toBe(
-      '<div style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">This works!</span></p></div>',
+      '<div style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">This works!</span></p></div>',
     );
   });
 
@@ -520,7 +520,7 @@ describe('LexicalEditor tests', () => {
     underlineListener();
 
     expect(container.innerHTML).toBe(
-      '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><strong class="editor-text-bold editor-text-italic editor-text-underline" data-lexical-text="true">foo</strong></p></div>',
+      '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><strong class="editor-text-bold editor-text-italic editor-text-underline" data-lexical-text="true">foo</strong></p></div>',
     );
   });
 
@@ -586,7 +586,7 @@ describe('LexicalEditor tests', () => {
     italicsListener();
 
     expect(container.innerHTML).toBe(
-      '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><strong class="editor-text-bold editor-text-italic" data-lexical-text="true">foo</strong></p></div>',
+      '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><strong class="editor-text-bold editor-text-italic" data-lexical-text="true">foo</strong></p></div>',
     );
   });
 
@@ -657,7 +657,7 @@ describe('LexicalEditor tests', () => {
     boldFooListener();
 
     expect(container.innerHTML).toBe(
-      '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><strong class="editor-text-bold" data-lexical-text="true">Foo!!</strong></p></div>',
+      '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><strong class="editor-text-bold" data-lexical-text="true">Foo!!</strong></p></div>',
     );
   });
 
@@ -875,7 +875,7 @@ describe('LexicalEditor tests', () => {
     editor.setRootElement(element);
 
     expect(container.innerHTML).toBe(
-      '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">This works!</span></p></div>',
+      '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">This works!</span></p></div>',
     );
   });
 
@@ -897,7 +897,7 @@ describe('LexicalEditor tests', () => {
     await Promise.resolve().then();
 
     expect(container.innerHTML).toBe(
-      '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">This works!</span></p></div>',
+      '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">This works!</span></p></div>',
     );
     expect(errorListener).toHaveBeenCalledTimes(0);
 
@@ -912,7 +912,7 @@ describe('LexicalEditor tests', () => {
 
     expect(errorListener).toHaveBeenCalledTimes(1);
     expect(container.innerHTML).toBe(
-      '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">This works!</span></p></div>',
+      '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">This works!</span></p></div>',
     );
   });
 
@@ -953,7 +953,7 @@ describe('LexicalEditor tests', () => {
     editorInstance.commitUpdates();
 
     expect(container.innerHTML).toBe(
-      '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">Not changed</span></p></div>',
+      '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">Not changed</span></p></div>',
     );
 
     edContainer = document.createElement('span');
@@ -966,7 +966,7 @@ describe('LexicalEditor tests', () => {
     expect(rootListener).toHaveBeenCalledTimes(3);
     expect(updateListener).toHaveBeenCalledTimes(3);
     expect(container.innerHTML).toBe(
-      '<span contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">Change successful</span></p></span>',
+      '<span contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">Change successful</span></p></span>',
     );
   });
 
@@ -1046,7 +1046,7 @@ describe('LexicalEditor tests', () => {
       it('Parses the nodes of a stringified editor state', async () => {
         expect(parsedRoot).toEqual({
           __cachedText: null,
-          __dir: 'ltr',
+          __dir: null,
           __first: paragraphKey,
           __format: 0,
           __indent: 0,
@@ -1060,7 +1060,7 @@ describe('LexicalEditor tests', () => {
           __type: 'root',
         });
         expect(parsedParagraph).toEqual({
-          __dir: 'ltr',
+          __dir: null,
           __first: textKey,
           __format: 0,
           __indent: 0,
@@ -1128,7 +1128,7 @@ describe('LexicalEditor tests', () => {
       it('Parses the nodes of a stringified editor state', async () => {
         expect(parsedRoot).toEqual({
           __cachedText: null,
-          __dir: 'ltr',
+          __dir: null,
           __first: paragraphKey,
           __format: 0,
           __indent: 0,
@@ -1142,7 +1142,7 @@ describe('LexicalEditor tests', () => {
           __type: 'root',
         });
         expect(parsedParagraph).toEqual({
-          __dir: 'ltr',
+          __dir: null,
           __first: textKey,
           __format: 0,
           __indent: 0,
@@ -1275,7 +1275,7 @@ describe('LexicalEditor tests', () => {
       expect(editor._editorState._nodeMap.size).toBe(keys.length + 1); // + root
       expect(editor._keyToDOMMap.size).toBe(keys.length + 1); // + root
       expect(container.innerHTML).toBe(
-        '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><div dir="ltr"><span data-lexical-text="true">A</span><div dir="ltr"><span data-lexical-text="true">B</span></div></div></p></div>',
+        '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><div><span data-lexical-text="true">A</span><div><span data-lexical-text="true">B</span></div></div></p></div>',
       );
     });
 
@@ -1310,7 +1310,7 @@ describe('LexicalEditor tests', () => {
       });
 
       expect(container.innerHTML).toBe(
-        '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><div dir="ltr"><span data-lexical-text="true">B</span><div dir="ltr"><span data-lexical-text="true">A</span></div></div></p></div>',
+        '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><div><span data-lexical-text="true">B</span><div><span data-lexical-text="true">A</span></div></div></p></div>',
       );
     });
 
@@ -1351,7 +1351,7 @@ describe('LexicalEditor tests', () => {
       });
 
       expect(container.innerHTML).toBe(
-        '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><div dir="ltr"><span data-lexical-text="true">A</span><div dir="ltr"><span data-lexical-text="true">C</span></div></div><div dir="ltr"><span data-lexical-text="true">B</span></div></p></div>',
+        '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><div><span data-lexical-text="true">A</span><div><span data-lexical-text="true">C</span></div></div><div><span data-lexical-text="true">B</span></div></p></div>',
       );
     });
   });
@@ -2294,14 +2294,14 @@ describe('LexicalEditor tests', () => {
     });
 
     expect(container.firstElementChild?.innerHTML).toBe(
-      '<p dir="ltr"><span data-lexical-text="true">Hello</span><a></a></p>',
+      '<p><span data-lexical-text="true">Hello</span><a></a></p>',
     );
   });
 
   it('reconciles state without root element', () => {
     editor = createTestEditor({});
     const state = editor.parseEditorState(
-      `{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Hello world","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1}],"direction":"ltr","format":"","indent":0,"type":"root","version":1}}`,
+      `{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Hello world","type":"text","version":1}],"direction":null,"format":"","indent":0,"type":"paragraph","version":1}],"direction":null,"format":"","indent":0,"type":"root","version":1}}`,
     );
     editor.setEditorState(state);
     expect(editor._editorState).toBe(state);

resources/js/wysiwyg/lexical/core/__tests__/unit/LexicalEditorState.test.ts

@@ -52,7 +52,7 @@ describe('LexicalEditorState tests', () => {
 
       expect(root).toEqual({
         __cachedText: 'foo',
-        __dir: 'ltr',
+        __dir: null,
         __first: '1',
         __format: 0,
         __indent: 0,
@@ -66,7 +66,7 @@ describe('LexicalEditorState tests', () => {
         __type: 'root',
       });
       expect(paragraph).toEqual({
-        __dir: 'ltr',
+        __dir: null,
         __first: '2',
         __format: 0,
         __indent: 0,
@@ -113,7 +113,7 @@ describe('LexicalEditorState tests', () => {
       });
 
       expect(JSON.stringify(editor.getEditorState().toJSON())).toEqual(
-        `{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Hello world","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1,"textFormat":0,"textStyle":""}],"direction":"ltr","format":"","indent":0,"type":"root","version":1}}`,
+        `{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Hello world","type":"text","version":1}],"direction":null,"format":"","indent":0,"type":"paragraph","version":1,"textFormat":0,"textStyle":""}],"direction":null,"format":"","indent":0,"type":"root","version":1}}`,
       );
     });
 

resources/js/wysiwyg/lexical/core/__tests__/unit/LexicalNode.test.ts

@@ -645,7 +645,7 @@ describe('LexicalNode tests', () => {
         });
 
         expect(testEnv.outerHTML).toBe(
-          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foo</span></p></div>',
+          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foo</span></p></div>',
         );
 
         await editor.getEditorState().read(() => {
@@ -667,7 +667,7 @@ describe('LexicalNode tests', () => {
         });
 
         expect(testEnv.outerHTML).toBe(
-          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foo</span><span data-lexical-text="true">bar</span></p></div>',
+          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foo</span><span data-lexical-text="true">bar</span></p></div>',
         );
 
         await editor.getEditorState().read(() => {
@@ -694,7 +694,7 @@ describe('LexicalNode tests', () => {
         });
 
         expect(testEnv.outerHTML).toBe(
-          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foo</span><span data-lexical-text="true">bar</span><span data-lexical-text="true">baz</span></p></div>',
+          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foo</span><span data-lexical-text="true">bar</span><span data-lexical-text="true">baz</span></p></div>',
         );
 
         await editor.getEditorState().read(() => {
@@ -730,7 +730,7 @@ describe('LexicalNode tests', () => {
         });
 
         expect(testEnv.outerHTML).toBe(
-          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foo</span><span data-lexical-text="true">bar</span></p></div>',
+          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foo</span><span data-lexical-text="true">bar</span></p></div>',
         );
 
         await editor.getEditorState().read(() => {
@@ -754,7 +754,7 @@ describe('LexicalNode tests', () => {
         });
 
         expect(testEnv.outerHTML).toBe(
-          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foo</span><span data-lexical-text="true">bar</span><span data-lexical-text="true">baz</span></p></div>',
+          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foo</span><span data-lexical-text="true">bar</span><span data-lexical-text="true">baz</span></p></div>',
         );
 
         await editor.getEditorState().read(() => {
@@ -795,7 +795,7 @@ describe('LexicalNode tests', () => {
         });
 
         expect(testEnv.outerHTML).toBe(
-          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foo</span><span data-lexical-text="true">qux</span></p><p dir="ltr"><span data-lexical-text="true">bar</span></p><p dir="ltr"><span data-lexical-text="true">baz</span></p></div>',
+          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foo</span><span data-lexical-text="true">qux</span></p><p><span data-lexical-text="true">bar</span></p><p><span data-lexical-text="true">baz</span></p></div>',
         );
 
         await editor.getEditorState().read(() => {
@@ -828,7 +828,7 @@ describe('LexicalNode tests', () => {
         });
 
         expect(testEnv.outerHTML).toBe(
-          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foo</span><span data-lexical-text="true">bar</span><span data-lexical-text="true">baz</span></p></div>',
+          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foo</span><span data-lexical-text="true">bar</span><span data-lexical-text="true">baz</span></p></div>',
         );
 
         await editor.getEditorState().read(() => {
@@ -879,7 +879,7 @@ describe('LexicalNode tests', () => {
         });
 
         expect(testEnv.outerHTML).toBe(
-          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foo</span><span data-lexical-text="true">bar</span><span data-lexical-text="true">baz</span></p><p dir="ltr"><span data-lexical-text="true">qux</span></p></div>',
+          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foo</span><span data-lexical-text="true">bar</span><span data-lexical-text="true">baz</span></p><p><span data-lexical-text="true">qux</span></p></div>',
         );
 
         await editor.getEditorState().read(() => {
@@ -915,7 +915,7 @@ describe('LexicalNode tests', () => {
         });
 
         expect(testEnv.outerHTML).toBe(
-          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foo</span><span data-lexical-text="true">token</span></p></div>',
+          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foo</span><span data-lexical-text="true">token</span></p></div>',
         );
 
         await editor.getEditorState().read(() => {
@@ -935,7 +935,7 @@ describe('LexicalNode tests', () => {
         });
 
         expect(testEnv.outerHTML).toBe(
-          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foo</span><span data-lexical-text="true">segmented</span></p></div>',
+          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foo</span><span data-lexical-text="true">segmented</span></p></div>',
         );
 
         await editor.getEditorState().read(() => {
@@ -958,7 +958,7 @@ describe('LexicalNode tests', () => {
         });
 
         expect(testEnv.outerHTML).toBe(
-          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foo</span><span data-lexical-text="true">directionless</span></p></div>',
+          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foo</span><span data-lexical-text="true">directionless</span></p></div>',
         );
 
         await editor.getEditorState().read(() => {
@@ -1057,7 +1057,7 @@ describe('LexicalNode tests', () => {
         });
 
         expect(testEnv.outerHTML).toBe(
-          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foo</span></p></div>',
+          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foo</span></p></div>',
         );
 
         await editor.update(() => {
@@ -1089,7 +1089,7 @@ describe('LexicalNode tests', () => {
         const {editor} = testEnv;
 
         expect(testEnv.outerHTML).toBe(
-          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foo</span></p></div>',
+          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foo</span></p></div>',
         );
         let barTextNode: TextNode;
 
@@ -1102,7 +1102,7 @@ describe('LexicalNode tests', () => {
         });
 
         expect(testEnv.outerHTML).toBe(
-          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foo</span></p><p dir="ltr"><span data-lexical-text="true">bar</span></p></div>',
+          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foo</span></p><p><span data-lexical-text="true">bar</span></p></div>',
         );
 
         await editor.update(() => {
@@ -1110,7 +1110,7 @@ describe('LexicalNode tests', () => {
         });
 
         expect(testEnv.outerHTML).toBe(
-          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">bar</span></p><p dir="ltr"><br></p></div>',
+          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">bar</span></p><p><br></p></div>',
         );
       });
 
@@ -1118,7 +1118,7 @@ describe('LexicalNode tests', () => {
         const {editor} = testEnv;
 
         expect(testEnv.outerHTML).toBe(
-          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foo</span></p></div>',
+          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foo</span></p></div>',
         );
 
         await editor.update(() => {
@@ -1127,7 +1127,7 @@ describe('LexicalNode tests', () => {
         });
 
         expect(testEnv.outerHTML).toBe(
-          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">bar</span></p></div>',
+          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">bar</span></p></div>',
         );
       });
 
@@ -1135,7 +1135,7 @@ describe('LexicalNode tests', () => {
         const {editor} = testEnv;
 
         expect(testEnv.outerHTML).toBe(
-          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foo</span></p></div>',
+          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foo</span></p></div>',
         );
 
         await editor.update(() => {
@@ -1144,7 +1144,7 @@ describe('LexicalNode tests', () => {
         });
 
         expect(testEnv.outerHTML).toBe(
-          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">bar</span></p></div>',
+          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">bar</span></p></div>',
         );
       });
 
@@ -1152,7 +1152,7 @@ describe('LexicalNode tests', () => {
         const {editor} = testEnv;
 
         expect(testEnv.outerHTML).toBe(
-          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foo</span></p></div>',
+          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foo</span></p></div>',
         );
 
         await editor.update(() => {
@@ -1161,7 +1161,7 @@ describe('LexicalNode tests', () => {
         });
 
         expect(testEnv.outerHTML).toBe(
-          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">bar</span></p></div>',
+          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">bar</span></p></div>',
         );
       });
 
@@ -1169,7 +1169,7 @@ describe('LexicalNode tests', () => {
         const {editor} = testEnv;
 
         expect(testEnv.outerHTML).toBe(
-          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foo</span></p></div>',
+          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foo</span></p></div>',
         );
 
         await editor.update(() => {
@@ -1205,7 +1205,7 @@ describe('LexicalNode tests', () => {
         });
 
         expect(testEnv.outerHTML).toBe(
-          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><a dir="ltr"><span data-lexical-text="true">world</span></a></p></div>',
+          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><a><span data-lexical-text="true">world</span></a></p></div>',
         );
       });
 
@@ -1224,7 +1224,7 @@ describe('LexicalNode tests', () => {
         const {editor} = testEnv;
 
         expect(testEnv.outerHTML).toBe(
-          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foo</span></p></div>',
+          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foo</span></p></div>',
         );
 
         await editor.update(() => {
@@ -1233,7 +1233,7 @@ describe('LexicalNode tests', () => {
         });
 
         expect(testEnv.outerHTML).toBe(
-          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foobar</span></p></div>',
+          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foobar</span></p></div>',
         );
       });
 
@@ -1241,7 +1241,7 @@ describe('LexicalNode tests', () => {
         const {editor} = testEnv;
 
         expect(testEnv.outerHTML).toBe(
-          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foo</span></p></div>',
+          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foo</span></p></div>',
         );
 
         await editor.update(() => {
@@ -1250,7 +1250,7 @@ describe('LexicalNode tests', () => {
         });
 
         expect(testEnv.outerHTML).toBe(
-          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foo</span><span data-lexical-text="true">bar</span></p></div>',
+          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foo</span><span data-lexical-text="true">bar</span></p></div>',
         );
       });
 
@@ -1258,7 +1258,7 @@ describe('LexicalNode tests', () => {
         const {editor} = testEnv;
 
         expect(testEnv.outerHTML).toBe(
-          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foo</span></p></div>',
+          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foo</span></p></div>',
         );
 
         await editor.update(() => {
@@ -1267,7 +1267,7 @@ describe('LexicalNode tests', () => {
         });
 
         expect(testEnv.outerHTML).toBe(
-          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foo</span><span data-lexical-text="true">bar</span></p></div>',
+          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foo</span><span data-lexical-text="true">bar</span></p></div>',
         );
       });
 
@@ -1275,7 +1275,7 @@ describe('LexicalNode tests', () => {
         const {editor} = testEnv;
 
         expect(testEnv.outerHTML).toBe(
-          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foo</span></p></div>',
+          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foo</span></p></div>',
         );
 
         await editor.update(() => {
@@ -1284,7 +1284,7 @@ describe('LexicalNode tests', () => {
         });
 
         expect(testEnv.outerHTML).toBe(
-          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foobar</span></p></div>',
+          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foobar</span></p></div>',
         );
         // TODO: add text direction validations
       });
@@ -1314,7 +1314,7 @@ describe('LexicalNode tests', () => {
         });
 
         expect(testEnv.outerHTML).toBe(
-          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">A</span></p><p dir="ltr"><span data-lexical-text="true">B</span></p><p dir="ltr"><span data-lexical-text="true">C</span></p></div>',
+          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">A</span></p><p><span data-lexical-text="true">B</span></p><p><span data-lexical-text="true">C</span></p></div>',
         );
 
         await editor.update(() => {
@@ -1322,7 +1322,7 @@ describe('LexicalNode tests', () => {
         });
 
         expect(testEnv.outerHTML).toBe(
-          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">A</span><p dir="ltr"><span data-lexical-text="true">B</span></p></p><p dir="ltr"><span data-lexical-text="true">C</span></p></div>',
+          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">A</span><p><span data-lexical-text="true">B</span></p></p><p><span data-lexical-text="true">C</span></p></div>',
         );
       });
 
@@ -1356,7 +1356,7 @@ describe('LexicalNode tests', () => {
         });
 
         expect(testEnv.outerHTML).toBe(
-          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">A</span></p><p dir="ltr"><span data-lexical-text="true">B</span></p><p dir="ltr"><span data-lexical-text="true">C</span></p></div>',
+          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">A</span></p><p><span data-lexical-text="true">B</span></p><p><span data-lexical-text="true">C</span></p></div>',
         );
 
         await editor.update(() => {
@@ -1365,7 +1365,7 @@ describe('LexicalNode tests', () => {
         });
 
         expect(testEnv.outerHTML).toBe(
-          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><br></p><p><br></p><p dir="ltr"><span data-lexical-text="true">C</span><span data-lexical-text="true">B</span><span data-lexical-text="true">A</span></p></div>',
+          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><br></p><p><br></p><p><span data-lexical-text="true">C</span><span data-lexical-text="true">B</span><span data-lexical-text="true">A</span></p></div>',
         );
       });
 
@@ -1384,7 +1384,7 @@ describe('LexicalNode tests', () => {
         const {editor} = testEnv;
 
         expect(testEnv.outerHTML).toBe(
-          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foo</span></p></div>',
+          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foo</span></p></div>',
         );
         let barTextNode;
 
@@ -1397,7 +1397,7 @@ describe('LexicalNode tests', () => {
         });
 
         expect(testEnv.outerHTML).toBe(
-          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foo</span></p><p dir="ltr"><span data-lexical-text="true">bar</span></p></div>',
+          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foo</span></p><p><span data-lexical-text="true">bar</span></p></div>',
         );
       });
 
@@ -1405,7 +1405,7 @@ describe('LexicalNode tests', () => {
         const {editor} = testEnv;
 
         expect(testEnv.outerHTML).toBe(
-          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foo</span></p></div>',
+          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foo</span></p></div>',
         );
 
         await editor.update(() => {
@@ -1414,7 +1414,7 @@ describe('LexicalNode tests', () => {
         });
 
         expect(testEnv.outerHTML).toBe(
-          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">barfoo</span></p></div>',
+          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">barfoo</span></p></div>',
         );
       });
 
@@ -1422,7 +1422,7 @@ describe('LexicalNode tests', () => {
         const {editor} = testEnv;
 
         expect(testEnv.outerHTML).toBe(
-          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foo</span></p></div>',
+          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foo</span></p></div>',
         );
 
         await editor.update(() => {
@@ -1431,7 +1431,7 @@ describe('LexicalNode tests', () => {
         });
 
         expect(testEnv.outerHTML).toBe(
-          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">bar</span><span data-lexical-text="true">foo</span></p></div>',
+          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">bar</span><span data-lexical-text="true">foo</span></p></div>',
         );
       });
 
@@ -1439,7 +1439,7 @@ describe('LexicalNode tests', () => {
         const {editor} = testEnv;
 
         expect(testEnv.outerHTML).toBe(
-          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foo</span></p></div>',
+          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foo</span></p></div>',
         );
 
         await editor.update(() => {
@@ -1448,7 +1448,7 @@ describe('LexicalNode tests', () => {
         });
 
         expect(testEnv.outerHTML).toBe(
-          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">bar</span><span data-lexical-text="true">foo</span></p></div>',
+          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">bar</span><span data-lexical-text="true">foo</span></p></div>',
         );
       });
 
@@ -1456,7 +1456,7 @@ describe('LexicalNode tests', () => {
         const {editor} = testEnv;
 
         expect(testEnv.outerHTML).toBe(
-          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">foo</span></p></div>',
+          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">foo</span></p></div>',
         );
 
         await editor.update(() => {

resources/js/wysiwyg/lexical/core/__tests__/unit/LexicalSelection.test.ts

@@ -61,10 +61,10 @@ describe('LexicalSelection tests', () => {
 
         const expectation =
           mode === 'start-of-paragraph'
-            ? '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><a href="https://" dir="ltr"><span data-lexical-text="true">a</span></a><span data-lexical-text="true">b</span></p></div>'
+            ? '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><a href="https://"><span data-lexical-text="true">a</span></a><span data-lexical-text="true">b</span></p></div>'
             : mode === 'mid-paragraph'
-            ? '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">a</span><a href="https://" dir="ltr"><span data-lexical-text="true">b</span></a><span data-lexical-text="true">c</span></p></div>'
-            : '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">a</span><a href="https://" dir="ltr"><span data-lexical-text="true">b</span></a></p></div>';
+            ? '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">a</span><a href="https://"><span data-lexical-text="true">b</span></a><span data-lexical-text="true">c</span></p></div>'
+            : '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">a</span><a href="https://"><span data-lexical-text="true">b</span></a></p></div>';
 
         expect(container.innerHTML).toBe(expectation);
 
@@ -113,7 +113,7 @@ describe('LexicalSelection tests', () => {
             });
 
             expect(container.innerHTML).toBe(
-              '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">x</span><a href="https://" dir="ltr"><span data-lexical-text="true">a</span></a><span data-lexical-text="true">b</span></p></div>',
+              '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">x</span><a href="https://"><span data-lexical-text="true">a</span></a><span data-lexical-text="true">b</span></p></div>',
             );
           };
 
@@ -154,7 +154,7 @@ describe('LexicalSelection tests', () => {
             });
 
             expect(container.innerHTML).toBe(
-              '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">ax</span><a href="https://" dir="ltr"><span data-lexical-text="true">b</span></a><span data-lexical-text="true">c</span></p></div>',
+              '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">ax</span><a href="https://"><span data-lexical-text="true">b</span></a><span data-lexical-text="true">c</span></p></div>',
             );
           };
 
@@ -194,7 +194,7 @@ describe('LexicalSelection tests', () => {
             });
 
             expect(container.innerHTML).toBe(
-              '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">ax</span><a href="https://" dir="ltr"><span data-lexical-text="true">b</span></a></p></div>',
+              '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">ax</span><a href="https://"><span data-lexical-text="true">b</span></a></p></div>',
             );
           };
 
@@ -236,7 +236,7 @@ describe('LexicalSelection tests', () => {
             });
 
             expect(container.innerHTML).toBe(
-              '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><a href="https://" dir="ltr"><span data-lexical-text="true">a</span></a><span data-lexical-text="true">xb</span></p></div>',
+              '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><a href="https://"><span data-lexical-text="true">a</span></a><span data-lexical-text="true">xb</span></p></div>',
             );
           };
 
@@ -277,7 +277,7 @@ describe('LexicalSelection tests', () => {
             });
 
             expect(container.innerHTML).toBe(
-              '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">a</span><a href="https://" dir="ltr"><span data-lexical-text="true">b</span></a><span data-lexical-text="true">xc</span></p></div>',
+              '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">a</span><a href="https://"><span data-lexical-text="true">b</span></a><span data-lexical-text="true">xc</span></p></div>',
             );
           };
 
@@ -319,7 +319,7 @@ describe('LexicalSelection tests', () => {
             });
 
             expect(container.innerHTML).toBe(
-              '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">a</span><a href="https://" dir="ltr"><span data-lexical-text="true">b</span></a><span data-lexical-text="true">x</span></p></div>',
+              '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><span data-lexical-text="true">a</span><a href="https://"><span data-lexical-text="true">b</span></a><span data-lexical-text="true">x</span></p></div>',
             );
           };
 

resources/js/wysiwyg/lexical/core/nodes/__tests__/unit/LexicalTabNode.test.ts

@@ -55,7 +55,7 @@ describe('LexicalTabNode tests', () => {
         $insertDataTransferForPlainText(dataTransfer, selection);
       });
       expect(testEnv.innerHTML).toBe(
-        '<p dir="ltr"><span data-lexical-text="true">hello</span><span data-lexical-text="true">\t</span><span data-lexical-text="true">world</span><br><span data-lexical-text="true">hello</span><span data-lexical-text="true">\t</span><span data-lexical-text="true">world</span></p>',
+        '<p><span data-lexical-text="true">hello</span><span data-lexical-text="true">\t</span><span data-lexical-text="true">world</span><br><span data-lexical-text="true">hello</span><span data-lexical-text="true">\t</span><span data-lexical-text="true">world</span></p>',
       );
     });
 
@@ -69,7 +69,7 @@ describe('LexicalTabNode tests', () => {
         $insertDataTransferForRichText(dataTransfer, selection, editor);
       });
       expect(testEnv.innerHTML).toBe(
-        '<p dir="ltr"><span data-lexical-text="true">hello</span><span data-lexical-text="true">\t</span><span data-lexical-text="true">world</span></p><p dir="ltr"><span data-lexical-text="true">hello</span><span data-lexical-text="true">\t</span><span data-lexical-text="true">world</span></p>',
+        '<p><span data-lexical-text="true">hello</span><span data-lexical-text="true">\t</span><span data-lexical-text="true">world</span></p><p><span data-lexical-text="true">hello</span><span data-lexical-text="true">\t</span><span data-lexical-text="true">world</span></p>',
       );
     });
 
@@ -89,7 +89,7 @@ describe('LexicalTabNode tests', () => {
     //         $insertDataTransferForRichText(dataTransfer, selection, editor);
     //       });
     //       expect(testEnv.innerHTML).toBe(
-    //         '<p dir="ltr"><span data-lexical-text="true">hello</span><span data-lexical-text="true">\t</span><span data-lexical-text="true">world</span><br><span data-lexical-text="true">hello</span><span data-lexical-text="true">\t</span><span data-lexical-text="true">world</span></p>',
+    //         '<p><span data-lexical-text="true">hello</span><span data-lexical-text="true">\t</span><span data-lexical-text="true">world</span><br><span data-lexical-text="true">hello</span><span data-lexical-text="true">\t</span><span data-lexical-text="true">world</span></p>',
     //       );
     // });
 
@@ -99,7 +99,7 @@ describe('LexicalTabNode tests', () => {
       // GDoc 2-liner hello\tworld (like previous test)
       dataTransfer.setData(
         'text/html',
-        `<meta charset='utf-8'><meta charset="utf-8"><b style="font-weight:normal;" id="docs-internal-guid-123"><p dir="ltr" style="line-height:1.38;margin-left: 36pt;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Hello</span><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;"><span class="Apple-tab-span" style="white-space:pre;">	</span></span><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">world</span></p><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Hello</span><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;"><span class="Apple-tab-span" style="white-space:pre;">	</span></span><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">world</span></b>`,
+        `<meta charset='utf-8'><meta charset="utf-8"><b style="font-weight:normal;" id="docs-internal-guid-123"><p style="line-height:1.38;margin-left: 36pt;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Hello</span><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;"><span class="Apple-tab-span" style="white-space:pre;">	</span></span><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">world</span></p><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Hello</span><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;"><span class="Apple-tab-span" style="white-space:pre;">	</span></span><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">world</span></b>`,
       );
       await editor.update(() => {
         const selection = $getSelection();
@@ -107,7 +107,7 @@ describe('LexicalTabNode tests', () => {
         $insertDataTransferForRichText(dataTransfer, selection, editor);
       });
       expect(testEnv.innerHTML).toBe(
-        '<p dir="ltr"><span data-lexical-text="true">Hello</span><span data-lexical-text="true">\t</span><span data-lexical-text="true">world</span></p><p dir="ltr"><span data-lexical-text="true">Hello</span><span data-lexical-text="true">\t</span><span data-lexical-text="true">world</span></p>',
+        '<p><span data-lexical-text="true">Hello</span><span data-lexical-text="true">\t</span><span data-lexical-text="true">world</span></p><p><span data-lexical-text="true">Hello</span><span data-lexical-text="true">\t</span><span data-lexical-text="true">world</span></p>',
       );
     });
 
@@ -121,7 +121,7 @@ describe('LexicalTabNode tests', () => {
         $getSelection()!.insertText('f');
       });
       expect(testEnv.innerHTML).toBe(
-        '<p dir="ltr"><span data-lexical-text="true">\t</span><span data-lexical-text="true">f</span><span data-lexical-text="true">\t</span></p>',
+        '<p><span data-lexical-text="true">\t</span><span data-lexical-text="true">f</span><span data-lexical-text="true">\t</span></p>',
       );
     });
   });

resources/js/wysiwyg/lexical/core/shared/reactPatches.ts

@@ -1,22 +0,0 @@
-/**
- * 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 React from 'react';
-
-// Webpack + React 17 fails to compile on the usage of `React.startTransition` or
-// `React["startTransition"]` even if it's behind a feature detection of
-// `"startTransition" in React`. Moving this to a constant avoids the issue :/
-const START_TRANSITION = 'startTransition';
-
-export function startTransition(callback: () => void) {
-  if (START_TRANSITION in React) {
-    React[START_TRANSITION](callback);
-  } else {
-    callback();
-  }
-}

resources/js/wysiwyg/lexical/core/shared/useLayoutEffect.ts

@@ -1,19 +0,0 @@
-/**
- * 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 {useEffect, useLayoutEffect} from 'react';
-import {CAN_USE_DOM} from 'lexical/shared/canUseDOM';
-
-// This workaround is no longer necessary in React 19,
-// but we currently support React >=17.x
-// https://github.com/facebook/react/pull/26395
-const useLayoutEffectImpl: typeof useLayoutEffect = CAN_USE_DOM
-  ? useLayoutEffect
-  : useEffect;
-
-export default useLayoutEffectImpl;

resources/js/wysiwyg/lexical/list/__tests__/unit/LexicalListItemNode.test.ts

@@ -182,13 +182,13 @@ describe('LexicalListItemNode tests', () => {
               style="user-select: text; white-space: pre-wrap; word-break: break-word;"
               data-lexical-editor="true">
               <ul>
-                <li value="1" dir="ltr">
+                <li value="1">
                   <span data-lexical-text="true">one</span>
                 </li>
-                <li value="2" dir="ltr">
+                <li value="2">
                   <span data-lexical-text="true">two</span>
                 </li>
-                <li value="3" dir="ltr">
+                <li value="3">
                   <span data-lexical-text="true">three</span>
                 </li>
               </ul>
@@ -215,13 +215,13 @@ describe('LexicalListItemNode tests', () => {
               style="user-select: text; white-space: pre-wrap; word-break: break-word;"
               data-lexical-editor="true">
               <ul>
-                <li value="1" dir="ltr">
+                <li value="1">
                   <span data-lexical-text="true">bar</span>
                 </li>
-                <li value="2" dir="ltr">
+                <li value="2">
                   <span data-lexical-text="true">two</span>
                 </li>
-                <li value="3" dir="ltr">
+                <li value="3">
                   <span data-lexical-text="true">three</span>
                 </li>
               </ul>
@@ -245,13 +245,13 @@ describe('LexicalListItemNode tests', () => {
               style="user-select: text; white-space: pre-wrap; word-break: break-word;"
               data-lexical-editor="true">
               <ul>
-                <li value="1" dir="ltr">
+                <li value="1">
                   <span data-lexical-text="true">one</span>
                 </li>
-                <li value="2" dir="ltr">
+                <li value="2">
                   <span data-lexical-text="true">two</span>
                 </li>
-                <li value="3" dir="ltr">
+                <li value="3">
                   <span data-lexical-text="true">three</span>
                 </li>
               </ul>
@@ -273,10 +273,10 @@ describe('LexicalListItemNode tests', () => {
               data-lexical-editor="true">
               <p><br></p>
               <ul>
-                <li value="1" dir="ltr">
+                <li value="1">
                   <span data-lexical-text="true">two</span>
                 </li>
-                <li value="2" dir="ltr">
+                <li value="2">
                   <span data-lexical-text="true">three</span>
                 </li>
               </ul>
@@ -301,10 +301,10 @@ describe('LexicalListItemNode tests', () => {
               style="user-select: text; white-space: pre-wrap; word-break: break-word;"
               data-lexical-editor="true">
               <ul>
-                <li value="1" dir="ltr">
+                <li value="1">
                   <span data-lexical-text="true">one</span>
                 </li>
-                <li value="2" dir="ltr">
+                <li value="2">
                   <span data-lexical-text="true">two</span>
                 </li>
               </ul>
@@ -330,13 +330,13 @@ describe('LexicalListItemNode tests', () => {
               style="user-select: text; white-space: pre-wrap; word-break: break-word;"
               data-lexical-editor="true">
               <ul>
-                <li value="1" dir="ltr">
+                <li value="1">
                   <span data-lexical-text="true">one</span>
                 </li>
               </ul>
               <p><br></p>
               <ul>
-                <li value="1" dir="ltr">
+                <li value="1">
                   <span data-lexical-text="true">three</span>
                 </li>
               </ul>
@@ -361,7 +361,7 @@ describe('LexicalListItemNode tests', () => {
               style="user-select: text; white-space: pre-wrap; word-break: break-word;"
               data-lexical-editor="true">
               <ul>
-                <li value="1" dir="ltr">
+                <li value="1">
                   <span data-lexical-text="true">one</span>
                 </li>
               </ul>
@@ -421,13 +421,13 @@ describe('LexicalListItemNode tests', () => {
               style="user-select: text; white-space: pre-wrap; word-break: break-word;"
               data-lexical-editor="true">
               <ul>
-                <li value="1" dir="ltr">
+                <li value="1">
                   <span data-lexical-text="true">A</span>
                 </li>
-                <li value="2" dir="ltr">
+                <li value="2">
                   <span data-lexical-text="true">x</span>
                 </li>
-                <li value="3" dir="ltr">
+                <li value="3">
                   <span data-lexical-text="true">B</span>
                 </li>
               </ul>
@@ -445,10 +445,10 @@ describe('LexicalListItemNode tests', () => {
               style="user-select: text; white-space: pre-wrap; word-break: break-word;"
               data-lexical-editor="true">
               <ul>
-                <li value="1" dir="ltr">
+                <li value="1">
                   <span data-lexical-text="true">A</span>
                 </li>
-                <li value="2" dir="ltr">
+                <li value="2">
                   <span data-lexical-text="true">B</span>
                 </li>
               </ul>
@@ -495,15 +495,15 @@ describe('LexicalListItemNode tests', () => {
               <ul>
                 <li value="1">
                   <ul>
-                    <li value="1" dir="ltr">
+                    <li value="1">
                       <span data-lexical-text="true">A</span>
                     </li>
                   </ul>
                 </li>
-                <li value="1" dir="ltr">
+                <li value="1">
                   <span data-lexical-text="true">x</span>
                 </li>
-                <li value="2" dir="ltr">
+                <li value="2">
                   <span data-lexical-text="true">B</span>
                 </li>
               </ul>
@@ -523,12 +523,12 @@ describe('LexicalListItemNode tests', () => {
               <ul>
                 <li value="1">
                   <ul>
-                    <li value="1" dir="ltr">
+                    <li value="1">
                       <span data-lexical-text="true">A</span>
                     </li>
                   </ul>
                 </li>
-                <li value="1" dir="ltr">
+                <li value="1">
                   <span data-lexical-text="true">B</span>
                 </li>
               </ul>
@@ -573,15 +573,15 @@ describe('LexicalListItemNode tests', () => {
               style="user-select: text; white-space: pre-wrap; word-break: break-word;"
               data-lexical-editor="true">
               <ul>
-                <li value="1" dir="ltr">
+                <li value="1">
                   <span data-lexical-text="true">A</span>
                 </li>
-                <li value="2" dir="ltr">
+                <li value="2">
                   <span data-lexical-text="true">x</span>
                 </li>
                 <li value="3">
                   <ul>
-                    <li value="1" dir="ltr">
+                    <li value="1">
                       <span data-lexical-text="true">B</span>
                     </li>
                   </ul>
@@ -601,12 +601,12 @@ describe('LexicalListItemNode tests', () => {
               style="user-select: text; white-space: pre-wrap; word-break: break-word;"
               data-lexical-editor="true">
               <ul>
-                <li value="1" dir="ltr">
+                <li value="1">
                   <span data-lexical-text="true">A</span>
                 </li>
                 <li value="2">
                   <ul>
-                    <li value="1" dir="ltr">
+                    <li value="1">
                       <span data-lexical-text="true">B</span>
                     </li>
                   </ul>
@@ -659,17 +659,17 @@ describe('LexicalListItemNode tests', () => {
               <ul>
                 <li value="1">
                   <ul>
-                    <li value="1" dir="ltr">
+                    <li value="1">
                       <span data-lexical-text="true">A</span>
                     </li>
                   </ul>
                 </li>
-                <li value="1" dir="ltr">
+                <li value="1">
                   <span data-lexical-text="true">x</span>
                 </li>
                 <li value="2">
                   <ul>
-                    <li value="1" dir="ltr">
+                    <li value="1">
                       <span data-lexical-text="true">B</span>
                     </li>
                   </ul>
@@ -691,10 +691,10 @@ describe('LexicalListItemNode tests', () => {
               <ul>
                 <li value="1">
                   <ul>
-                    <li value="1" dir="ltr">
+                    <li value="1">
                       <span data-lexical-text="true">A</span>
                     </li>
-                    <li value="2" dir="ltr">
+                    <li value="2">
                       <span data-lexical-text="true">B</span>
                     </li>
                   </ul>
@@ -755,24 +755,24 @@ describe('LexicalListItemNode tests', () => {
               <ul>
                 <li value="1">
                   <ul>
-                    <li value="1" dir="ltr">
+                    <li value="1">
                       <span data-lexical-text="true">A1</span>
                     </li>
                     <li value="2">
                       <ul>
-                        <li value="1" dir="ltr">
+                        <li value="1">
                           <span data-lexical-text="true">A2</span>
                         </li>
                       </ul>
                     </li>
                   </ul>
                 </li>
-                <li value="1" dir="ltr">
+                <li value="1">
                   <span data-lexical-text="true">x</span>
                 </li>
                 <li value="2">
                   <ul>
-                    <li value="1" dir="ltr">
+                    <li value="1">
                       <span data-lexical-text="true">B</span>
                     </li>
                   </ul>
@@ -794,17 +794,17 @@ describe('LexicalListItemNode tests', () => {
               <ul>
                 <li value="1">
                   <ul>
-                    <li value="1" dir="ltr">
+                    <li value="1">
                       <span data-lexical-text="true">A1</span>
                     </li>
                     <li value="2">
                       <ul>
-                        <li value="1" dir="ltr">
+                        <li value="1">
                           <span data-lexical-text="true">A2</span>
                         </li>
                       </ul>
                     </li>
-                    <li value="2" dir="ltr">
+                    <li value="2">
                       <span data-lexical-text="true">B</span>
                     </li>
                   </ul>
@@ -865,24 +865,24 @@ describe('LexicalListItemNode tests', () => {
               <ul>
                 <li value="1">
                   <ul>
-                    <li value="1" dir="ltr">
+                    <li value="1">
                       <span data-lexical-text="true">A</span>
                     </li>
                   </ul>
                 </li>
-                <li value="1" dir="ltr">
+                <li value="1">
                   <span data-lexical-text="true">x</span>
                 </li>
                 <li value="2">
                   <ul>
                     <li value="1">
                       <ul>
-                        <li value="1" dir="ltr">
+                        <li value="1">
                           <span data-lexical-text="true">B1</span>
                         </li>
                       </ul>
                     </li>
-                    <li value="1" dir="ltr">
+                    <li value="1">
                       <span data-lexical-text="true">B2</span>
                     </li>
                   </ul>
@@ -904,17 +904,17 @@ describe('LexicalListItemNode tests', () => {
               <ul>
                 <li value="1">
                   <ul>
-                    <li value="1" dir="ltr">
+                    <li value="1">
                       <span data-lexical-text="true">A</span>
                     </li>
                     <li value="2">
                       <ul>
-                        <li value="1" dir="ltr">
+                        <li value="1">
                           <span data-lexical-text="true">B1</span>
                         </li>
                       </ul>
                     </li>
-                    <li value="2" dir="ltr">
+                    <li value="2">
                       <span data-lexical-text="true">B2</span>
                     </li>
                   </ul>
@@ -983,31 +983,31 @@ describe('LexicalListItemNode tests', () => {
               <ul>
                 <li value="1">
                   <ul>
-                    <li value="1" dir="ltr">
+                    <li value="1">
                       <span data-lexical-text="true">A1</span>
                     </li>
                     <li value="2">
                       <ul>
-                        <li value="1" dir="ltr">
+                        <li value="1">
                           <span data-lexical-text="true">A2</span>
                         </li>
                       </ul>
                     </li>
                   </ul>
                 </li>
-                <li value="1" dir="ltr">
+                <li value="1">
                   <span data-lexical-text="true">x</span>
                 </li>
                 <li value="2">
                   <ul>
                     <li value="1">
                       <ul>
-                        <li value="1" dir="ltr">
+                        <li value="1">
                           <span data-lexical-text="true">B1</span>
                         </li>
                       </ul>
                     </li>
-                    <li value="1" dir="ltr">
+                    <li value="1">
                       <span data-lexical-text="true">B2</span>
                     </li>
                   </ul>
@@ -1029,20 +1029,20 @@ describe('LexicalListItemNode tests', () => {
               <ul>
                 <li value="1">
                   <ul>
-                    <li value="1" dir="ltr">
+                    <li value="1">
                       <span data-lexical-text="true">A1</span>
                     </li>
                     <li value="2">
                       <ul>
-                        <li value="1" dir="ltr">
+                        <li value="1">
                           <span data-lexical-text="true">A2</span>
                         </li>
-                        <li value="2" dir="ltr">
+                        <li value="2">
                           <span data-lexical-text="true">B1</span>
                         </li>
                       </ul>
                     </li>
-                    <li value="2" dir="ltr">
+                    <li value="2">
                       <span data-lexical-text="true">B2</span>
                     </li>
                   </ul>
@@ -1087,13 +1087,13 @@ describe('LexicalListItemNode tests', () => {
               style="user-select: text; white-space: pre-wrap; word-break: break-word;"
               data-lexical-editor="true">
               <ul>
-                <li value="1" dir="ltr">
+                <li value="1">
                   <span data-lexical-text="true">one</span>
                 </li>
-                <li value="2" dir="ltr">
+                <li value="2">
                   <span data-lexical-text="true">two</span>
                 </li>
-                <li value="3" dir="ltr">
+                <li value="3">
                   <span data-lexical-text="true">three</span>
                 </li>
               </ul>
@@ -1117,14 +1117,14 @@ describe('LexicalListItemNode tests', () => {
               style="user-select: text; white-space: pre-wrap; word-break: break-word;"
               data-lexical-editor="true">
               <ul>
-                <li value="1" dir="ltr">
+                <li value="1">
                   <span data-lexical-text="true">one</span>
                 </li>
                 <li value="2"><br></li>
-                <li value="3" dir="ltr">
+                <li value="3">
                   <span data-lexical-text="true">two</span>
                 </li>
-                <li value="4" dir="ltr">
+                <li value="4">
                   <span data-lexical-text="true">three</span>
                 </li>
               </ul>
@@ -1148,13 +1148,13 @@ describe('LexicalListItemNode tests', () => {
               style="user-select: text; white-space: pre-wrap; word-break: break-word;"
               data-lexical-editor="true">
               <ul>
-                <li value="1" dir="ltr">
+                <li value="1">
                   <span data-lexical-text="true">one</span>
                 </li>
-                <li value="2" dir="ltr">
+                <li value="2">
                   <span data-lexical-text="true">two</span>
                 </li>
-                <li value="3" dir="ltr">
+                <li value="3">
                   <span data-lexical-text="true">three</span>
                 </li>
                 <li value="4"><br></li>
@@ -1179,13 +1179,13 @@ describe('LexicalListItemNode tests', () => {
               style="user-select: text; white-space: pre-wrap; word-break: break-word;"
               data-lexical-editor="true">
               <ul>
-                <li value="1" dir="ltr">
+                <li value="1">
                   <span data-lexical-text="true">one</span>
                 </li>
-                <li value="2" dir="ltr">
+                <li value="2">
                   <span data-lexical-text="true">two</span>
                 </li>
-                <li value="3" dir="ltr">
+                <li value="3">
                   <span data-lexical-text="true">three</span>
                 </li>
                 <li value="4"><br></li>
@@ -1211,7 +1211,7 @@ describe('LexicalListItemNode tests', () => {
               style="user-select: text; white-space: pre-wrap; word-break: break-word;"
               data-lexical-editor="true">
               <ul>
-                <li value="1" dir="ltr">
+                <li value="1">
                   <span data-lexical-text="true">one</span>
                 </li>
               </ul>
@@ -1231,7 +1231,7 @@ describe('LexicalListItemNode tests', () => {
               style="user-select: text; white-space: pre-wrap; word-break: break-word;"
               data-lexical-editor="true">
               <ul>
-                <li value="1" dir="ltr">
+                <li value="1">
                   <span data-lexical-text="true">one</span>
                 </li>
                 <li value="2"><br></li>
@@ -1308,7 +1308,7 @@ describe('LexicalListItemNode tests', () => {
                     <ul>
                       <li value="1">
                         <ul>
-                          <li value="1" dir="ltr">
+                          <li value="1">
                             <span data-lexical-text="true">one</span>
                           </li>
                         </ul>
@@ -1317,7 +1317,7 @@ describe('LexicalListItemNode tests', () => {
                   </li>
                 </ul>
               </li>
-              <li value="1" dir="ltr">
+              <li value="1">
                 <span data-lexical-text="true">two</span>
               </li>
             </ul>
@@ -1336,10 +1336,10 @@ describe('LexicalListItemNode tests', () => {
           editor.getRootElement()!.innerHTML,
           html`
             <ul>
-              <li value="1" dir="ltr">
+              <li value="1">
                 <span data-lexical-text="true">one</span>
               </li>
-              <li value="2" dir="ltr">
+              <li value="2">
                 <span data-lexical-text="true">two</span>
               </li>
             </ul>

resources/js/wysiwyg/lexical/rich-text/__tests__/unit/LexicalHeadingNode.test.ts

@@ -117,7 +117,7 @@ describe('LexicalHeadingNode tests', () => {
         headingTextNode.select(5, 5);
       });
       expect(testEnv.outerHTML).toBe(
-        '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><h1 dir="ltr"><span data-lexical-text="true">hello world</span></h1></div>',
+        '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><h1><span data-lexical-text="true">hello world</span></h1></div>',
       );
       await editor.update(() => {
         const selection = $getSelection() as RangeSelection;
@@ -126,7 +126,7 @@ describe('LexicalHeadingNode tests', () => {
         expect(result.getDirection()).toEqual(headingNode.getDirection());
       });
       expect(testEnv.outerHTML).toBe(
-        '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><h1 dir="ltr"><span data-lexical-text="true">hello world</span></h1><h1><br></h1></div>',
+        '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><h1><span data-lexical-text="true">hello world</span></h1><h1><br></h1></div>',
       );
     });
 
@@ -143,7 +143,7 @@ describe('LexicalHeadingNode tests', () => {
         headingTextNode2.selectEnd();
       });
       expect(testEnv.outerHTML).toBe(
-        '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><h1 dir="ltr"><span data-lexical-text="true">hello</span><strong data-lexical-text="true"> world</strong></h1></div>',
+        '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><h1><span data-lexical-text="true">hello</span><strong data-lexical-text="true"> world</strong></h1></div>',
       );
       await editor.update(() => {
         const selection = $getSelection() as RangeSelection;
@@ -152,7 +152,7 @@ describe('LexicalHeadingNode tests', () => {
         expect(result.getDirection()).toEqual(headingNode.getDirection());
       });
       expect(testEnv.outerHTML).toBe(
-        '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><h1 dir="ltr"><span data-lexical-text="true">hello</span><strong data-lexical-text="true"> world</strong></h1><p><br></p></div>',
+        '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><h1><span data-lexical-text="true">hello</span><strong data-lexical-text="true"> world</strong></h1><p><br></p></div>',
       );
     });
 
@@ -187,7 +187,7 @@ describe('LexicalHeadingNode tests', () => {
         headingNode.append(textNode);
       });
       expect(testEnv.outerHTML).toBe(
-        `<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><h2 dir="ltr"><span data-lexical-text="true">${text}</span></h2></div>`,
+        `<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><h2><span data-lexical-text="true">${text}</span></h2></div>`,
       );
       await editor.update(() => {
         const result = headingNode.insertNewAfter();
@@ -195,7 +195,7 @@ describe('LexicalHeadingNode tests', () => {
         expect(result.getDirection()).toEqual(headingNode.getDirection());
       });
       expect(testEnv.outerHTML).toBe(
-        `<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><h2 dir="ltr"><span data-lexical-text="true">${text}</span></h2><p><br></p></div>`,
+        `<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><h2><span data-lexical-text="true">${text}</span></h2><p><br></p></div>`,
       );
     });
   });

resources/js/wysiwyg/lexical/selection/__tests__/unit/LexicalSelection.test.ts

@@ -250,7 +250,7 @@ describe('LexicalSelection tests', () => {
   const suite = [
     {
       expectedHTML:
-        '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">Hello</span></p></div>',
+        '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph"><span data-lexical-text="true">Hello</span></p></div>',
       expectedSelection: {
         anchorOffset: 5,
         anchorPath: [0, 0, 0],
@@ -268,7 +268,7 @@ describe('LexicalSelection tests', () => {
     },
     {
       expectedHTML:
-        '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph" dir="ltr">' +
+        '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph">' +
         '<strong class="editor-text-bold" data-lexical-text="true">Hello</strong></p></div>',
       expectedSelection: {
         anchorOffset: 5,
@@ -288,7 +288,7 @@ describe('LexicalSelection tests', () => {
     },
     {
       expectedHTML:
-        '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph" dir="ltr">' +
+        '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph">' +
         '<em class="editor-text-italic" data-lexical-text="true">Hello</em></p></div>',
       expectedSelection: {
         anchorOffset: 5,
@@ -308,7 +308,7 @@ describe('LexicalSelection tests', () => {
     },
     {
       expectedHTML:
-        '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph" dir="ltr">' +
+        '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph">' +
         '<strong class="editor-text-bold editor-text-italic" data-lexical-text="true">Hello</strong></p></div>',
       expectedSelection: {
         anchorOffset: 5,
@@ -329,7 +329,7 @@ describe('LexicalSelection tests', () => {
     },
     {
       expectedHTML:
-        '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph" dir="ltr">' +
+        '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph">' +
         '<span class="editor-text-underline" data-lexical-text="true">Hello</span></p></div>',
       expectedSelection: {
         anchorOffset: 5,
@@ -349,7 +349,7 @@ describe('LexicalSelection tests', () => {
     },
     {
       expectedHTML:
-        '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph" dir="ltr">' +
+        '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph">' +
         '<span class="editor-text-strikethrough" data-lexical-text="true">Hello</span></p></div>',
       expectedSelection: {
         anchorOffset: 5,
@@ -369,7 +369,7 @@ describe('LexicalSelection tests', () => {
     },
     {
       expectedHTML:
-        '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph" dir="ltr">' +
+        '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph">' +
         '<span class="editor-text-underlineStrikethrough" data-lexical-text="true">Hello</span></p></div>',
       expectedSelection: {
         anchorOffset: 5,
@@ -411,7 +411,7 @@ describe('LexicalSelection tests', () => {
     },
     {
       expectedHTML:
-        '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph" dir="ltr">' +
+        '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph">' +
         '<span data-lexical-text="true">Dominic Gannaway</span>' +
         '</p></div>',
       expectedSelection: {
@@ -425,7 +425,7 @@ describe('LexicalSelection tests', () => {
     },
     {
       expectedHTML:
-        '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph" dir="ltr">' +
+        '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph">' +
         '<span data-lexical-text="true">Dominic Gannaway</span>' +
         '</p></div>',
       expectedSelection: {
@@ -443,7 +443,7 @@ describe('LexicalSelection tests', () => {
     },
     {
       expectedHTML:
-        '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph" dir="ltr">' +
+        '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph">' +
         '<span data-lexical-text="true">Dominic Gannaway</span>' +
         '</p></div>',
       expectedSelection: {
@@ -457,7 +457,7 @@ describe('LexicalSelection tests', () => {
     },
     {
       expectedHTML:
-        '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph" dir="ltr">' +
+        '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph">' +
         '<span data-lexical-text="true">Dominic Gannaway</span>' +
         '</p></div>',
       expectedSelection: {
@@ -477,7 +477,7 @@ describe('LexicalSelection tests', () => {
       expectedHTML:
         '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true">' +
         '<p class="editor-paragraph"><br></p>' +
-        '<p class="editor-paragraph" dir="ltr">' +
+        '<p class="editor-paragraph">' +
         '<strong class="editor-text-bold" data-lexical-text="true">Hello world</strong>' +
         '</p>' +
         '<p class="editor-paragraph"><br></p>' +
@@ -501,10 +501,10 @@ describe('LexicalSelection tests', () => {
       expectedHTML:
         '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true">' +
         '<p class="editor-paragraph"><br></p>' +
-        '<p class="editor-paragraph" dir="ltr">' +
+        '<p class="editor-paragraph">' +
         '<strong class="editor-text-bold" data-lexical-text="true">Hello</strong>' +
         '</p>' +
-        '<p class="editor-paragraph" dir="ltr">' +
+        '<p class="editor-paragraph">' +
         '<strong class="editor-text-bold" data-lexical-text="true">world</strong>' +
         '</p>' +
         '<p class="editor-paragraph"><br></p>' +
@@ -529,11 +529,11 @@ describe('LexicalSelection tests', () => {
     {
       expectedHTML:
         '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true">' +
-        '<p class="editor-paragraph" dir="ltr">' +
+        '<p class="editor-paragraph">' +
         '<span data-lexical-text="true">He</span>' +
         '<strong class="editor-text-bold" data-lexical-text="true">llo</strong>' +
         '</p>' +
-        '<p class="editor-paragraph" dir="ltr">' +
+        '<p class="editor-paragraph">' +
         '<strong class="editor-text-bold" data-lexical-text="true">wo</strong>' +
         '<span data-lexical-text="true">rld</span>' +
         '</p>' +
@@ -557,7 +557,7 @@ describe('LexicalSelection tests', () => {
       expectedHTML:
         '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true">' +
         '<p class="editor-paragraph"><br></p>' +
-        '<p class="editor-paragraph" dir="ltr">' +
+        '<p class="editor-paragraph">' +
         '<span data-lexical-text="true">Hello </span>' +
         '<strong class="editor-text-bold" data-lexical-text="true">world</strong>' +
         '</p>' +
@@ -582,7 +582,7 @@ describe('LexicalSelection tests', () => {
       expectedHTML:
         '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true">' +
         '<p class="editor-paragraph"><br></p>' +
-        '<p class="editor-paragraph" dir="ltr">' +
+        '<p class="editor-paragraph">' +
         '<strong class="editor-text-bold" data-lexical-text="true">Hello</strong>' +
         '<span data-lexical-text="true"> world</span>' +
         '</p>' +
@@ -608,7 +608,7 @@ describe('LexicalSelection tests', () => {
       expectedHTML:
         '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true">' +
         '<p class="editor-paragraph"><br></p>' +
-        '<p class="editor-paragraph" dir="ltr">' +
+        '<p class="editor-paragraph">' +
         '<strong class="editor-text-bold" data-lexical-text="true">Hello</strong><strong class="editor-text-bold" data-lexical-text="true"> world</strong>' +
         '</p>' +
         '<p class="editor-paragraph"><br></p>' +
@@ -634,7 +634,7 @@ describe('LexicalSelection tests', () => {
       expectedHTML:
         '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true">' +
         '<p class="editor-paragraph"><br></p>' +
-        '<p class="editor-paragraph" dir="ltr">' +
+        '<p class="editor-paragraph">' +
         '<strong class="editor-text-bold" data-lexical-text="true">Hello </strong><strong class="editor-text-bold" data-lexical-text="true">world</strong>' +
         '</p>' +
         '<p class="editor-paragraph"><br></p>' +
@@ -660,7 +660,7 @@ describe('LexicalSelection tests', () => {
       expectedHTML:
         '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true">' +
         '<p class="editor-paragraph"><br></p>' +
-        '<p class="editor-paragraph" dir="ltr">' +
+        '<p class="editor-paragraph">' +
         '<strong class="editor-text-bold" data-lexical-text="true">Hello</strong><span data-lexical-text="true"> world</span>' +
         '</p>' +
         '<p class="editor-paragraph"><br></p>' +
@@ -686,7 +686,7 @@ describe('LexicalSelection tests', () => {
       expectedHTML:
         '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true">' +
         '<p class="editor-paragraph"><br></p>' +
-        '<p class="editor-paragraph" dir="ltr">' +
+        '<p class="editor-paragraph">' +
         '<strong class="editor-text-bold" data-lexical-text="true">Hello </strong><strong class="editor-text-bold" data-lexical-text="true">beautiful</strong><strong class="editor-text-bold" data-lexical-text="true"> world</strong>' +
         '</p>' +
         '<p class="editor-paragraph"><br></p>' +
@@ -764,7 +764,7 @@ describe('LexicalSelection tests', () => {
       },
     ].flatMap(({whitespaceCharacter, whitespaceName}) => [
       {
-        expectedHTML: `<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">Hello${printWhitespace(
+        expectedHTML: `<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph"><span data-lexical-text="true">Hello${printWhitespace(
           whitespaceCharacter,
         )}</span></p></div>`,
         expectedSelection: {
@@ -780,7 +780,7 @@ describe('LexicalSelection tests', () => {
         name: `Type two words separated by a ${whitespaceName}, delete word backward from end`,
       },
       {
-        expectedHTML: `<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">${printWhitespace(
+        expectedHTML: `<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph"><span data-lexical-text="true">${printWhitespace(
           whitespaceCharacter,
         )}world</span></p></div>`,
         expectedSelection: {
@@ -798,7 +798,7 @@ describe('LexicalSelection tests', () => {
       },
       {
         expectedHTML:
-          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">Hello</span></p></div>',
+          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph"><span data-lexical-text="true">Hello</span></p></div>',
         expectedSelection: {
           anchorOffset: 5,
           anchorPath: [0, 0, 0],
@@ -814,7 +814,7 @@ describe('LexicalSelection tests', () => {
       },
       {
         expectedHTML:
-          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">world</span></p></div>',
+          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph"><span data-lexical-text="true">world</span></p></div>',
         expectedSelection: {
           anchorOffset: 0,
           anchorPath: [0, 0, 0],
@@ -830,7 +830,7 @@ describe('LexicalSelection tests', () => {
       },
       {
         expectedHTML:
-          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">Hello world</span></p></div>',
+          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph"><span data-lexical-text="true">Hello world</span></p></div>',
         expectedSelection: {
           anchorOffset: 11,
           anchorPath: [0, 0, 0],
@@ -842,7 +842,7 @@ describe('LexicalSelection tests', () => {
       },
       {
         expectedHTML:
-          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">Hello </span></p></div>',
+          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph"><span data-lexical-text="true">Hello </span></p></div>',
         expectedSelection: {
           anchorOffset: 6,
           anchorPath: [0, 0, 0],
@@ -859,7 +859,7 @@ describe('LexicalSelection tests', () => {
       },
       {
         expectedHTML:
-          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph" dir="ltr">' +
+          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph">' +
           '<span data-lexical-text="true">this is weird test</span></p></div>',
         expectedSelection: {
           anchorOffset: 0,
@@ -876,7 +876,7 @@ describe('LexicalSelection tests', () => {
       },
       {
         expectedHTML:
-          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph" dir="ltr">' +
+          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph">' +
           '<span data-lexical-text="true">Hello </span>' +
           '<span data-lexical-text="true">Bob</span>' +
           '</p></div>',
@@ -897,7 +897,7 @@ describe('LexicalSelection tests', () => {
       },
       {
         expectedHTML:
-          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">ABD</span><span data-lexical-text="true">\t</span><span data-lexical-text="true">EFG</span></p></div>',
+          '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph"><span data-lexical-text="true">ABD</span><span data-lexical-text="true">\t</span><span data-lexical-text="true">EFG</span></p></div>',
         expectedSelection: {
           anchorOffset: 3,
           anchorPath: [0, 0, 0],
@@ -1883,7 +1883,7 @@ describe('LexicalSelection tests', () => {
       });
 
       expect(element.innerHTML).toBe(
-        '<p dir="ltr"><span data-lexical-text="true">Hello </span><strong data-lexical-text="true">awesome</strong></p><p dir="ltr"><span data-lexical-text="true"> world</span></p>',
+        '<p><span data-lexical-text="true">Hello </span><strong data-lexical-text="true">awesome</strong></p><p><span data-lexical-text="true"> world</span></p>',
       );
     });
 
@@ -1931,7 +1931,7 @@ describe('LexicalSelection tests', () => {
       });
 
       expect(element.innerHTML).toBe(
-        '<p dir="ltr"><span data-lexical-text="true">Hello </span><strong data-lexical-text="true">awesome </strong></p><p dir="ltr"><span data-lexical-text="true">beautiful</span><strong data-lexical-text="true"> world</strong></p>',
+        '<p><span data-lexical-text="true">Hello </span><strong data-lexical-text="true">awesome </strong></p><p><span data-lexical-text="true">beautiful</span><strong data-lexical-text="true"> world</strong></p>',
       );
     });
 

resources/js/wysiwyg/lexical/selection/__tests__/unit/LexicalSelectionHelpers.test.ts

@@ -1827,7 +1827,7 @@ describe('LexicalSelectionHelpers tests', () => {
         });
 
         expect(element.innerHTML).toBe(
-          '<p dir="ltr"><span data-lexical-text="true">foo</span></p>',
+          '<p><span data-lexical-text="true">foo</span></p>',
         );
       });
 
@@ -1868,7 +1868,7 @@ describe('LexicalSelectionHelpers tests', () => {
         });
 
         expect(element.innerHTML).toBe(
-          '<p dir="ltr"><span data-lexical-text="true">foobar</span></p>',
+          '<p><span data-lexical-text="true">foobar</span></p>',
         );
       });
 
@@ -1913,7 +1913,7 @@ describe('LexicalSelectionHelpers tests', () => {
         });
 
         expect(element.innerHTML).toBe(
-          '<p dir="ltr"><span data-lexical-text="true">h</span><a href="https://" dir="ltr"><span data-lexical-text="true">ello worl</span></a><span data-lexical-text="true">d</span></p>',
+          '<p><span data-lexical-text="true">h</span><a href="https://"><span data-lexical-text="true">ello worl</span></a><span data-lexical-text="true">d</span></p>',
         );
       });
 
@@ -1956,7 +1956,7 @@ describe('LexicalSelectionHelpers tests', () => {
         });
 
         expect(element.innerHTML).toBe(
-          '<h1 dir="ltr"><span data-lexical-text="true">foo</span></h1>',
+          '<h1><span data-lexical-text="true">foo</span></h1>',
         );
       });
     });
@@ -1999,7 +1999,7 @@ describe('LexicalSelectionHelpers tests', () => {
         });
 
         expect(element.innerHTML).toBe(
-          '<p dir="ltr"><span data-lexical-text="true">Existing text...foo</span></p>',
+          '<p><span data-lexical-text="true">Existing text...foo</span></p>',
         );
       });
 
@@ -2044,7 +2044,7 @@ describe('LexicalSelectionHelpers tests', () => {
         });
 
         expect(element.innerHTML).toBe(
-          '<p dir="ltr"><span data-lexical-text="true">Existing text...foobar</span></p>',
+          '<p><span data-lexical-text="true">Existing text...foobar</span></p>',
         );
       });
 
@@ -2091,7 +2091,7 @@ describe('LexicalSelectionHelpers tests', () => {
         });
 
         expect(element.innerHTML).toBe(
-          '<p dir="ltr"><span data-lexical-text="true">Existing text...foo</span></p>',
+          '<p><span data-lexical-text="true">Existing text...foo</span></p>',
         );
       });
 
@@ -2162,7 +2162,7 @@ describe('LexicalSelectionHelpers tests', () => {
         });
 
         expect(element.innerHTML).toBe(
-          '<p dir="ltr"><span data-lexical-text="true">AB</span><em data-lexical-text="true">C</em><span data-lexical-text="true">DE</span></p>',
+          '<p><span data-lexical-text="true">AB</span><em data-lexical-text="true">C</em><span data-lexical-text="true">DE</span></p>',
         );
       });
     });
@@ -2205,7 +2205,7 @@ describe('LexicalSelectionHelpers tests', () => {
         });
 
         expect(element.innerHTML).toBe(
-          '<p dir="ltr"><span data-lexical-text="true">foo</span></p>',
+          '<p><span data-lexical-text="true">foo</span></p>',
         );
       });
     });
@@ -2252,7 +2252,7 @@ describe('LexicalSelectionHelpers tests', () => {
         });
 
         expect(element.innerHTML).toBe(
-          '<p dir="ltr"><span data-lexical-text="true">foo</span><a href="https://" dir="ltr"><span data-lexical-text="true">link</span></a></p>',
+          '<p><span data-lexical-text="true">foo</span><a href="https://"><span data-lexical-text="true">link</span></a></p>',
         );
       });
     });
@@ -2299,7 +2299,7 @@ describe('LexicalSelectionHelpers tests', () => {
         });
 
         expect(element.innerHTML).toBe(
-          '<p dir="ltr"><a href="https://" dir="ltr"><span data-lexical-text="true">link</span></a><span data-lexical-text="true">foo</span></p>',
+          '<p><a href="https://"><span data-lexical-text="true">link</span></a><span data-lexical-text="true">foo</span></p>',
         );
       });
     });
@@ -2324,7 +2324,7 @@ describe('LexicalSelectionHelpers tests', () => {
 
       // TODO #5109 ElementNode should have a way to control when other nodes can be inserted inside
       expect(element.innerHTML).toBe(
-        '<p><a href="https://lexical.dev/" dir="ltr"><br><span data-lexical-text="true">Lexical</span></a></p>',
+        '<p><a href="https://lexical.dev/"><br><span data-lexical-text="true">Lexical</span></a></p>',
       );
     });
   });
@@ -2371,7 +2371,7 @@ describe('LexicalSelectionHelpers tests', () => {
         });
 
         expect(element.innerHTML).toBe(
-          '<p dir="ltr"><span data-lexical-text="true">foo</span></p>',
+          '<p><span data-lexical-text="true">foo</span></p>',
         );
       });
     });
@@ -2421,7 +2421,7 @@ describe('LexicalSelectionHelpers tests', () => {
         });
 
         expect(element.innerHTML).toBe(
-          '<p dir="ltr"><span data-lexical-text="true">foo</span><a href="https://" dir="ltr"><span data-lexical-text="true">link</span></a></p>',
+          '<p><span data-lexical-text="true">foo</span><a href="https://"><span data-lexical-text="true">link</span></a></p>',
         );
       });
     });
@@ -2471,7 +2471,7 @@ describe('LexicalSelectionHelpers tests', () => {
         });
 
         expect(element.innerHTML).toBe(
-          '<p dir="ltr"><a href="https://" dir="ltr"><span data-lexical-text="true">link</span></a><span data-lexical-text="true">foo</span></p>',
+          '<p><a href="https://"><span data-lexical-text="true">link</span></a><span data-lexical-text="true">foo</span></p>',
         );
       });
     });
@@ -2491,7 +2491,7 @@ describe('LexicalSelectionHelpers tests', () => {
         $insertNodes([linkNode]);
       });
       expect(element.innerHTML).toBe(
-        '<p><a href="https://lexical.dev" dir="ltr"><span data-lexical-text="true">Lexical</span></a></p>',
+        '<p><a href="https://lexical.dev"><span data-lexical-text="true">Lexical</span></a></p>',
       );
     });
 
@@ -2511,7 +2511,7 @@ describe('LexicalSelectionHelpers tests', () => {
         $insertNodes([linkNode, textNode2]);
       });
       expect(element.innerHTML).toBe(
-        '<p><a href="https://lexical.dev" dir="ltr"><span data-lexical-text="true">Lexical</span></a><span data-lexical-text="true">...</span></p>',
+        '<p><a href="https://lexical.dev"><span data-lexical-text="true">Lexical</span></a><span data-lexical-text="true">...</span></p>',
       );
     });
 
@@ -2604,9 +2604,9 @@ describe('insertNodes', () => {
     });
 
     expect(element.innerHTML).toBe(
-      '<p dir="ltr"><span data-lexical-text="true">Text before</span></p>' +
+      '<p><span data-lexical-text="true">Text before</span></p>' +
         '<span data-lexical-decorator="true" contenteditable="false"></span>' +
-        '<p dir="ltr"><span data-lexical-text="true">Text after</span></p>',
+        '<p><span data-lexical-text="true">Text after</span></p>',
     );
   });
 
@@ -2678,7 +2678,7 @@ describe('insertNodes', () => {
     });
     editor.getEditorState().read(() => {
       expect(element.innerHTML).toBe(
-        '<h1 dir="ltr"><span data-lexical-text="true">heading</span></h1><p><br></p>',
+        '<h1><span data-lexical-text="true">heading</span></h1><p><br></p>',
       );
       const selectedNode = ($getSelection() as RangeSelection).anchor.getNode();
       expect($isParagraphNode(selectedNode)).toBeTruthy();
@@ -2736,8 +2736,8 @@ describe('$patchStyleText', () => {
     });
 
     expect(element.innerHTML).toBe(
-      '<p dir="ltr"><span data-lexical-text="true">a</span>' +
-        '<a href="https://" dir="ltr">' +
+      '<p><span data-lexical-text="true">a</span>' +
+        '<a href="https://">' +
         '<span style="text-emphasis: filled;" data-lexical-text="true">link</span>' +
         '</a>' +
         '<span style="text-emphasis: filled;" data-lexical-text="true">b</span></p>',
@@ -2789,8 +2789,8 @@ describe('$patchStyleText', () => {
     });
 
     expect(element.innerHTML).toBe(
-      '<p dir="ltr"><span data-lexical-text="true">a</span></p>' +
-        '<p dir="ltr"><span style="text-emphasis: filled;" data-lexical-text="true">b</span></p>',
+      '<p><span data-lexical-text="true">a</span></p>' +
+        '<p><span style="text-emphasis: filled;" data-lexical-text="true">b</span></p>',
     );
   });
 
@@ -2838,9 +2838,9 @@ describe('$patchStyleText', () => {
     });
 
     expect(element.innerHTML).toBe(
-      '<p dir="ltr">' +
+      '<p>' +
         '<span style="text-emphasis: filled;" data-lexical-text="true">a</span>' +
-        '<a href="https://" dir="ltr">' +
+        '<a href="https://">' +
         '<span style="text-emphasis: filled;" data-lexical-text="true">link</span>' +
         '</a>' +
         '</p>',
@@ -2891,9 +2891,9 @@ describe('$patchStyleText', () => {
     });
 
     expect(element.innerHTML).toBe(
-      '<p dir="ltr">' +
+      '<p>' +
         '<span style="text-emphasis: filled;" data-lexical-text="true">a</span>' +
-        '<a href="https://" dir="ltr">' +
+        '<a href="https://">' +
         '<span style="text-emphasis: filled;" data-lexical-text="true">link</span>' +
         '</a>' +
         '</p>',
@@ -2935,7 +2935,7 @@ describe('$patchStyleText', () => {
 
     expect(element.innerHTML).toBe(
       '<p>' +
-        '<a href="https://" dir="ltr">' +
+        '<a href="https://">' +
         '<span style="text-emphasis: filled;" data-lexical-text="true">link</span>' +
         '</a>' +
         '</p>',
@@ -2976,7 +2976,7 @@ describe('$patchStyleText', () => {
     });
 
     expect(element.innerHTML).toBe(
-      '<p dir="ltr"><span data-lexical-text="true">text</span></p>',
+      '<p><span data-lexical-text="true">text</span></p>',
     );
   });
 
@@ -3115,7 +3115,7 @@ describe('$patchStyleText', () => {
       });
 
       expect(element.innerHTML).toBe(
-        '<p dir="ltr">' +
+        '<p>' +
           '<strong data-lexical-text="true">fir</strong>' +
           '<strong style="font-size: 15px;" data-lexical-text="true">st</strong>' +
           '<span style="font-size: 15px;" data-lexical-text="true">second</span>' +

resources/js/wysiwyg/lexical/table/__tests__/unit/LexicalTableNode.test.ts

@@ -102,7 +102,7 @@ describe('LexicalTableNode tests', () => {
         const dataTransfer = new DataTransferMock();
         dataTransfer.setData(
           'text/html',
-          '<html><body><meta charset="utf-8"><b style="font-weight:normal;" id="docs-internal-guid-16a69100-7fff-6cb9-b829-cb1def16a58d"><div dir="ltr" style="margin-left:0pt;" align="left"><table style="border:none;border-collapse:collapse;table-layout:fixed;width:468pt"><colgroup><col /><col /></colgroup><tbody><tr style="height:22.015pt"><td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;"><p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Hello there</span></p></td><td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;"><p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">General Kenobi!</span></p></td></tr><tr style="height:22.015pt"><td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;"><p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Lexical is nice</span></p></td><td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;"><br /></td></tr></tbody></table></div></b><!--EndFragment--></body></html>',
+          '<html><body><meta charset="utf-8"><b style="font-weight:normal;" id="docs-internal-guid-16a69100-7fff-6cb9-b829-cb1def16a58d"><div style="margin-left:0pt;" align="left"><table style="border:none;border-collapse:collapse;table-layout:fixed;width:468pt"><colgroup><col /><col /></colgroup><tbody><tr style="height:22.015pt"><td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;"><p style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Hello there</span></p></td><td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;"><p style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">General Kenobi!</span></p></td></tr><tr style="height:22.015pt"><td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;"><p style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Lexical is nice</span></p></td><td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;"><br /></td></tr></tbody></table></div></b><!--EndFragment--></body></html>',
         );
         await editor.update(() => {
           const selection = $getSelection();
@@ -115,7 +115,7 @@ describe('LexicalTableNode tests', () => {
         // Make sure paragraph is inserted inside empty cells
         const emptyCell = '<td><p><br></p></td>';
         expect(testEnv.innerHTML).toBe(
-          `<table><tr><td><p dir="ltr"><span data-lexical-text="true">Hello there</span></p></td><td><p dir="ltr"><span data-lexical-text="true">General Kenobi!</span></p></td></tr><tr><td><p dir="ltr"><span data-lexical-text="true">Lexical is nice</span></p></td>${emptyCell}</tr></table>`,
+          `<table><tr><td><p><span data-lexical-text="true">Hello there</span></p></td><td><p><span data-lexical-text="true">General Kenobi!</span></p></td></tr><tr><td><p><span data-lexical-text="true">Lexical is nice</span></p></td>${emptyCell}</tr></table>`,
         );
       });
 
@@ -125,7 +125,7 @@ describe('LexicalTableNode tests', () => {
         const dataTransfer = new DataTransferMock();
         dataTransfer.setData(
           'text/html',
-          '<google-sheets-html-origin><style type="text/css"><!--td {border: 1px solid #cccccc;}br {mso-data-placement:same-cell;}--></style><table xmlns="http://www.w3.org/1999/xhtml" cellspacing="0" cellpadding="0" dir="ltr" border="1" style="table-layout:fixed;font-size:10pt;font-family:Arial;width:0px;border-collapse:collapse;border:none" data-sheets-root="1"><colgroup><col width="100"/><col width="189"/><col width="171"/></colgroup><tbody><tr style="height:21px;"><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;font-weight:bold;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;Surface&quot;}">Surface</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;font-style:italic;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;MWP_WORK_LS_COMPOSER&quot;}">MWP_WORK_LS_COMPOSER</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;text-decoration:underline;text-align:right;" data-sheets-value="{&quot;1&quot;:3,&quot;3&quot;:77349}">77349</td></tr><tr style="height:21px;"><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;Lexical&quot;}">Lexical</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;text-decoration:line-through;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;XDS_RICH_TEXT_AREA&quot;}">XDS_RICH_TEXT_AREA</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;sdvd sdfvsfs&quot;}" data-sheets-textstyleruns="{&quot;1&quot;:0}{&quot;1&quot;:5,&quot;2&quot;:{&quot;5&quot;:1}}"><span style="font-size:10pt;font-family:Arial;font-style:normal;">sdvd </span><span style="font-size:10pt;font-family:Arial;font-weight:bold;font-style:normal;">sdfvsfs</span></td></tr></tbody></table>',
+          '<google-sheets-html-origin><style type="text/css"><!--td {border: 1px solid #cccccc;}br {mso-data-placement:same-cell;}--></style><table xmlns="http://www.w3.org/1999/xhtml" cellspacing="0" cellpadding="0" border="1" style="table-layout:fixed;font-size:10pt;font-family:Arial;width:0px;border-collapse:collapse;border:none" data-sheets-root="1"><colgroup><col width="100"/><col width="189"/><col width="171"/></colgroup><tbody><tr style="height:21px;"><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;font-weight:bold;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;Surface&quot;}">Surface</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;font-style:italic;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;MWP_WORK_LS_COMPOSER&quot;}">MWP_WORK_LS_COMPOSER</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;text-decoration:underline;text-align:right;" data-sheets-value="{&quot;1&quot;:3,&quot;3&quot;:77349}">77349</td></tr><tr style="height:21px;"><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;Lexical&quot;}">Lexical</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;text-decoration:line-through;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;XDS_RICH_TEXT_AREA&quot;}">XDS_RICH_TEXT_AREA</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;sdvd sdfvsfs&quot;}" data-sheets-textstyleruns="{&quot;1&quot;:0}{&quot;1&quot;:5,&quot;2&quot;:{&quot;5&quot;:1}}"><span style="font-size:10pt;font-family:Arial;font-style:normal;">sdvd </span><span style="font-size:10pt;font-family:Arial;font-weight:bold;font-style:normal;">sdfvsfs</span></td></tr></tbody></table>',
         );
         await editor.update(() => {
           const selection = $getSelection();
@@ -136,7 +136,7 @@ describe('LexicalTableNode tests', () => {
           $insertDataTransferForRichText(dataTransfer, selection, editor);
         });
         expect(testEnv.innerHTML).toBe(
-          `<table><tr style="height: 21px;"><td><p dir="ltr"><strong data-lexical-text="true">Surface</strong></p></td><td><p dir="ltr"><em data-lexical-text="true">MWP_WORK_LS_COMPOSER</em></p></td><td><p style="text-align: right;"><span data-lexical-text="true">77349</span></p></td></tr><tr style="height: 21px;"><td><p dir="ltr"><span data-lexical-text="true">Lexical</span></p></td><td><p dir="ltr"><span data-lexical-text="true">XDS_RICH_TEXT_AREA</span></p></td><td><p dir="ltr"><span data-lexical-text="true">sdvd </span><strong data-lexical-text="true">sdfvsfs</strong></p></td></tr></table>`,
+          `<table><tr style="height: 21px;"><td><p><strong data-lexical-text="true">Surface</strong></p></td><td><p><em data-lexical-text="true">MWP_WORK_LS_COMPOSER</em></p></td><td><p style="text-align: right;"><span data-lexical-text="true">77349</span></p></td></tr><tr style="height: 21px;"><td><p><span data-lexical-text="true">Lexical</span></p></td><td><p><span data-lexical-text="true">XDS_RICH_TEXT_AREA</span></p></td><td><p><span data-lexical-text="true">sdvd </span><strong data-lexical-text="true">sdfvsfs</strong></p></td></tr></table>`,
         );
       });
     },

resources/js/wysiwyg/lexical/table/__tests__/unit/LexicalTableSelection.test.ts

@@ -99,7 +99,7 @@ describe('table selection', () => {
   it('Parses the nodes of a stringified editor state', async () => {
     expect(parsedRoot).toEqual({
       __cachedText: null,
-      __dir: 'ltr',
+      __dir: null,
       __first: paragraphKey,
       __format: 0,
       __indent: 0,
@@ -113,7 +113,7 @@ describe('table selection', () => {
       __type: 'root',
     });
     expect(parsedParagraph).toEqual({
-      __dir: 'ltr',
+      __dir: null,
       __first: textKey,
       __format: 0,
       __indent: 0,

resources/js/wysiwyg/lexical/utils/__tests__/unit/LexicalEventHelpers.test.ts

@@ -156,25 +156,25 @@ describe('LexicalEventHelpers', () => {
       const suite = [
         {
           expectedHTML:
-            '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><h1 class="editor-heading-h1" dir="ltr"><span data-lexical-text="true">Hello</span></h1></div>',
+            '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><h1 class="editor-heading-h1"><span data-lexical-text="true">Hello</span></h1></div>',
           inputs: [pasteHTML(`<meta charset='utf-8'><h1>Hello</h1>`)],
           name: 'should produce the correct editor state from a pasted HTML h1 element',
         },
         {
           expectedHTML:
-            '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><h2 class="editor-heading-h2" dir="ltr"><span data-lexical-text="true">From</span></h2></div>',
+            '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><h2 class="editor-heading-h2"><span data-lexical-text="true">From</span></h2></div>',
           inputs: [pasteHTML(`<meta charset='utf-8'><h2>From</h2>`)],
           name: 'should produce the correct editor state from a pasted HTML h2 element',
         },
         {
           expectedHTML:
-            '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><h3 class="editor-heading-h3" dir="ltr"><span data-lexical-text="true">The</span></h3></div>',
+            '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><h3 class="editor-heading-h3"><span data-lexical-text="true">The</span></h3></div>',
           inputs: [pasteHTML(`<meta charset='utf-8'><h3>The</h3>`)],
           name: 'should produce the correct editor state from a pasted HTML h3 element',
         },
         {
           expectedHTML:
-            '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><ul class="editor-list-ul"><li value="1" class="editor-listitem" dir="ltr"><span data-lexical-text="true">Other side</span></li><li value="2" class="editor-listitem" dir="ltr"><span data-lexical-text="true">I must have called</span></li></ul></div>',
+            '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><ul class="editor-list-ul"><li value="1" class="editor-listitem"><span data-lexical-text="true">Other side</span></li><li value="2" class="editor-listitem"><span data-lexical-text="true">I must have called</span></li></ul></div>',
           inputs: [
             pasteHTML(
               `<meta charset='utf-8'><ul><li>Other side</li><li>I must have called</li></ul>`,
@@ -184,7 +184,7 @@ describe('LexicalEventHelpers', () => {
         },
         {
           expectedHTML:
-            '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><ol class="editor-list-ol"><li value="1" class="editor-listitem" dir="ltr"><span data-lexical-text="true">To tell you</span></li><li value="2" class="editor-listitem" dir="ltr"><span data-lexical-text="true">I’m sorry</span></li></ol></div>',
+            '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><ol class="editor-list-ol"><li value="1" class="editor-listitem"><span data-lexical-text="true">To tell you</span></li><li value="2" class="editor-listitem"><span data-lexical-text="true">I’m sorry</span></li></ol></div>',
           inputs: [
             pasteHTML(
               `<meta charset='utf-8'><ol><li>To tell you</li><li>I’m sorry</li></ol>`,
@@ -194,37 +194,37 @@ describe('LexicalEventHelpers', () => {
         },
         {
           expectedHTML:
-            '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">A thousand times</span></p></div>',
+            '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph"><span data-lexical-text="true">A thousand times</span></p></div>',
           inputs: [pasteHTML(`<meta charset='utf-8'>A thousand times`)],
           name: 'should produce the correct editor state from pasted DOM Text Node',
         },
         {
           expectedHTML:
-            '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph" dir="ltr"><strong class="editor-text-bold" data-lexical-text="true">Bold</strong></p></div>',
+            '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph"><strong class="editor-text-bold" data-lexical-text="true">Bold</strong></p></div>',
           inputs: [pasteHTML(`<meta charset='utf-8'><b>Bold</b>`)],
           name: 'should produce the correct editor state from a pasted HTML b element',
         },
         {
           expectedHTML:
-            '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph" dir="ltr"><em class="editor-text-italic" data-lexical-text="true">Italic</em></p></div>',
+            '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph"><em class="editor-text-italic" data-lexical-text="true">Italic</em></p></div>',
           inputs: [pasteHTML(`<meta charset='utf-8'><i>Italic</i>`)],
           name: 'should produce the correct editor state from a pasted HTML i element',
         },
         {
           expectedHTML:
-            '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph" dir="ltr"><em class="editor-text-italic" data-lexical-text="true">Italic</em></p></div>',
+            '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph"><em class="editor-text-italic" data-lexical-text="true">Italic</em></p></div>',
           inputs: [pasteHTML(`<meta charset='utf-8'><em>Italic</em>`)],
           name: 'should produce the correct editor state from a pasted HTML em element',
         },
         {
           expectedHTML:
-            '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph" dir="ltr"><span class="editor-text-underline" data-lexical-text="true">Underline</span></p></div>',
+            '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph"><span class="editor-text-underline" data-lexical-text="true">Underline</span></p></div>',
           inputs: [pasteHTML(`<meta charset='utf-8'><u>Underline</u>`)],
           name: 'should produce the correct editor state from a pasted HTML u element',
         },
         {
           expectedHTML:
-            '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><h1 class="editor-heading-h1" dir="ltr"><span data-lexical-text="true">Lyrics to Hello by Adele</span></h1><p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">A thousand times</span></p></div>',
+            '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><h1 class="editor-heading-h1"><span data-lexical-text="true">Lyrics to Hello by Adele</span></h1><p class="editor-paragraph"><span data-lexical-text="true">A thousand times</span></p></div>',
           inputs: [
             pasteHTML(
               `<meta charset='utf-8'><h1>Lyrics to Hello by Adele</h1>A thousand times`,
@@ -234,7 +234,7 @@ describe('LexicalEventHelpers', () => {
         },
         {
           expectedHTML:
-            '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph"><a href="https://facebook.com" dir="ltr"><span data-lexical-text="true">Facebook</span></a></p></div>',
+            '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph"><a href="https://facebook.com"><span data-lexical-text="true">Facebook</span></a></p></div>',
           inputs: [
             pasteHTML(
               `<meta charset='utf-8'><a href="https://facebook.com">Facebook</a>`,
@@ -244,7 +244,7 @@ describe('LexicalEventHelpers', () => {
         },
         {
           expectedHTML:
-            '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">Welcome to</span><a href="https://facebook.com" dir="ltr"><span data-lexical-text="true">Facebook!</span></a></p></div>',
+            '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph"><span data-lexical-text="true">Welcome to</span><a href="https://facebook.com"><span data-lexical-text="true">Facebook!</span></a></p></div>',
           inputs: [
             pasteHTML(
               `<meta charset='utf-8'>Welcome to<a href="https://facebook.com">Facebook!</a>`,
@@ -254,7 +254,7 @@ describe('LexicalEventHelpers', () => {
         },
         {
           expectedHTML:
-            '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">Welcome to</span><a href="https://facebook.com" dir="ltr"><span data-lexical-text="true">Facebook!</span></a><span data-lexical-text="true">We hope you like it here.</span></p></div>',
+            '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph"><span data-lexical-text="true">Welcome to</span><a href="https://facebook.com"><span data-lexical-text="true">Facebook!</span></a><span data-lexical-text="true">We hope you like it here.</span></p></div>',
           inputs: [
             pasteHTML(
               `<meta charset='utf-8'>Welcome to<a href="https://facebook.com">Facebook!</a>We hope you like it here.`,
@@ -264,7 +264,7 @@ describe('LexicalEventHelpers', () => {
         },
         {
           expectedHTML:
-            '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><ul class="editor-list-ul"><li value="1" class="editor-listitem" dir="ltr"><span data-lexical-text="true">Hello</span></li><li value="2" class="editor-listitem" dir="ltr"><span data-lexical-text="true">from the other</span></li><li value="3" class="editor-listitem" dir="ltr"><span data-lexical-text="true">side</span></li></ul></div>',
+            '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><ul class="editor-list-ul"><li value="1" class="editor-listitem"><span data-lexical-text="true">Hello</span></li><li value="2" class="editor-listitem"><span data-lexical-text="true">from the other</span></li><li value="3" class="editor-listitem"><span data-lexical-text="true">side</span></li></ul></div>',
           inputs: [
             pasteHTML(
               `<meta charset='utf-8'><doesnotexist><ul><li>Hello</li><li>from the other</li><li>side</li></ul></doesnotexist>`,
@@ -274,7 +274,7 @@ describe('LexicalEventHelpers', () => {
         },
         {
           expectedHTML:
-            '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><ul class="editor-list-ul"><li value="1" class="editor-listitem" dir="ltr"><span data-lexical-text="true">Hello</span></li><li value="2" class="editor-listitem" dir="ltr"><span data-lexical-text="true">from the other</span></li><li value="3" class="editor-listitem" dir="ltr"><span data-lexical-text="true">side</span></li></ul></div>',
+            '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><ul class="editor-list-ul"><li value="1" class="editor-listitem"><span data-lexical-text="true">Hello</span></li><li value="2" class="editor-listitem"><span data-lexical-text="true">from the other</span></li><li value="3" class="editor-listitem"><span data-lexical-text="true">side</span></li></ul></div>',
           inputs: [
             pasteHTML(
               `<meta charset='utf-8'><doesnotexist><doesnotexist><ul><li>Hello</li><li>from the other</li><li>side</li></ul></doesnotexist></doesnotexist>`,
@@ -284,7 +284,7 @@ describe('LexicalEventHelpers', () => {
         },
         {
           expectedHTML:
-            '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">Welcome to</span><a href="https://facebook.com" dir="ltr"><strong class="editor-text-bold" data-lexical-text="true">Facebook!</strong></a><span data-lexical-text="true">We hope you like it here.</span></p></div>',
+            '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph"><span data-lexical-text="true">Welcome to</span><a href="https://facebook.com"><strong class="editor-text-bold" data-lexical-text="true">Facebook!</strong></a><span data-lexical-text="true">We hope you like it here.</span></p></div>',
           inputs: [
             pasteHTML(
               `<meta charset='utf-8'>Welcome to<b><a href="https://facebook.com">Facebook!</a></b>We hope you like it here.`,
@@ -294,7 +294,7 @@ describe('LexicalEventHelpers', () => {
         },
         {
           expectedHTML:
-            '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">Welcome to</span><a href="https://facebook.com" dir="ltr"><strong class="editor-text-bold" data-lexical-text="true">Facebook!</strong></a><strong class="editor-text-bold" data-lexical-text="true">We hope you like it here.</strong></p></div>',
+            '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph"><span data-lexical-text="true">Welcome to</span><a href="https://facebook.com"><strong class="editor-text-bold" data-lexical-text="true">Facebook!</strong></a><strong class="editor-text-bold" data-lexical-text="true">We hope you like it here.</strong></p></div>',
           inputs: [
             pasteHTML(
               `<meta charset='utf-8'>Welcome to<b><a href="https://facebook.com">Facebook!</a>We hope you like it here.</b>`,
@@ -304,7 +304,7 @@ describe('LexicalEventHelpers', () => {
         },
         {
           expectedHTML:
-            '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">Welcome to</span><a href="https://facebook.com" dir="ltr"><strong class="editor-text-bold editor-text-italic" data-lexical-text="true">Facebook!</strong></a><strong class="editor-text-bold editor-text-italic" data-lexical-text="true">We hope you like it here.</strong></p></div>',
+            '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph"><span data-lexical-text="true">Welcome to</span><a href="https://facebook.com"><strong class="editor-text-bold editor-text-italic" data-lexical-text="true">Facebook!</strong></a><strong class="editor-text-bold editor-text-italic" data-lexical-text="true">We hope you like it here.</strong></p></div>',
           inputs: [
             pasteHTML(
               `<meta charset='utf-8'>Welcome to<b><i><a href="https://facebook.com">Facebook!</a>We hope you like it here.</i></b>`,
@@ -330,7 +330,7 @@ describe('LexicalEventHelpers', () => {
       const suite = [
         {
           expectedHTML:
-            '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">Get schwifty!</span></p></div>',
+            '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph"><span data-lexical-text="true">Get schwifty!</span></p></div>',
           inputs: [
             pasteHTML(
               `<b style="font-weight:normal;" id="docs-internal-guid-2c706577-7fff-f54a-fe65-12f480020fac"><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Get schwifty!</span></b>`,
@@ -340,7 +340,7 @@ describe('LexicalEventHelpers', () => {
         },
         {
           expectedHTML:
-            '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph" dir="ltr"><strong class="editor-text-bold" data-lexical-text="true">Get schwifty!</strong></p></div>',
+            '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph"><strong class="editor-text-bold" data-lexical-text="true">Get schwifty!</strong></p></div>',
           inputs: [
             pasteHTML(
               `<b style="font-weight:normal;" id="docs-internal-guid-9db03964-7fff-c26c-8b1e-9484fb3b54a4"><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Get schwifty!</span></b>`,
@@ -350,7 +350,7 @@ describe('LexicalEventHelpers', () => {
         },
         {
           expectedHTML:
-            '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph" dir="ltr"><em class="editor-text-italic" data-lexical-text="true">Get schwifty!</em></p></div>',
+            '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph"><em class="editor-text-italic" data-lexical-text="true">Get schwifty!</em></p></div>',
           inputs: [
             pasteHTML(
               `<b style="font-weight:normal;" id="docs-internal-guid-9db03964-7fff-c26c-8b1e-9484fb3b54a4"><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:italic;font-variant:normal;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Get schwifty!</span></b>`,
@@ -360,7 +360,7 @@ describe('LexicalEventHelpers', () => {
         },
         {
           expectedHTML:
-            '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph" dir="ltr"><span class="editor-text-strikethrough" data-lexical-text="true">Get schwifty!</span></p></div>',
+            '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph"><span class="editor-text-strikethrough" data-lexical-text="true">Get schwifty!</span></p></div>',
           inputs: [
             pasteHTML(
               `<b style="font-weight:normal;" id="docs-internal-guid-9db03964-7fff-c26c-8b1e-9484fb3b54a4"><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:line-through;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Get schwifty!</span></b>`,
@@ -386,20 +386,20 @@ describe('LexicalEventHelpers', () => {
       const suite = [
         {
           expectedHTML:
-            '<p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">hello world</span></p>',
+            '<p class="editor-paragraph"><span data-lexical-text="true">hello world</span></p>',
           inputs: [pasteHTML('<span>hello world</span>')],
           name: 'inline hello world',
         },
         {
           expectedHTML:
-            '<p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">hello world</span></p>',
+            '<p class="editor-paragraph"><span data-lexical-text="true">hello world</span></p>',
           inputs: [pasteHTML('<span>    hello  </span>world  ')],
           name: 'inline hello world (2)',
         },
         {
           // MS Office got it right
           expectedHTML:
-            '<p class="editor-paragraph" dir="ltr"><span data-lexical-text="true"> hello world</span></p>',
+            '<p class="editor-paragraph"><span data-lexical-text="true"> hello world</span></p>',
           inputs: [
             pasteHTML(' <span style="white-space: pre"> hello </span> world  '),
           ],
@@ -407,19 +407,19 @@ describe('LexicalEventHelpers', () => {
         },
         {
           expectedHTML:
-            '<p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">  a b</span><span data-lexical-text="true">\t</span><span data-lexical-text="true">c  </span></p>',
+            '<p class="editor-paragraph"><span data-lexical-text="true">  a b</span><span data-lexical-text="true">\t</span><span data-lexical-text="true">c  </span></p>',
           inputs: [pasteHTML('<p style="white-space: pre">  a b\tc  </p>')],
           name: 'white-space: pre (1) (no touchy)',
         },
         {
           expectedHTML:
-            '<p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">a b c</span></p>',
+            '<p class="editor-paragraph"><span data-lexical-text="true">a b c</span></p>',
           inputs: [pasteHTML('<p>\ta\tb  <span>c\t</span>\t</p>')],
           name: 'tabs are collapsed',
         },
         {
           expectedHTML:
-            '<p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">hello world</span></p>',
+            '<p class="editor-paragraph"><span data-lexical-text="true">hello world</span></p>',
           inputs: [
             pasteHTML(`
               <div>
@@ -432,7 +432,7 @@ describe('LexicalEventHelpers', () => {
         },
         {
           expectedHTML:
-            '<p class="editor-paragraph" dir="ltr"><strong class="editor-text-bold" data-lexical-text="true">hello world</strong></p>',
+            '<p class="editor-paragraph"><strong class="editor-text-bold" data-lexical-text="true">hello world</strong></p>',
           inputs: [
             pasteHTML(`
               <div>
@@ -447,7 +447,7 @@ describe('LexicalEventHelpers', () => {
         },
         {
           expectedHTML:
-            '<p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">a </span><strong class="editor-text-bold" data-lexical-text="true">b</strong><span data-lexical-text="true"> c</span></p>',
+            '<p class="editor-paragraph"><span data-lexical-text="true">a </span><strong class="editor-text-bold" data-lexical-text="true">b</strong><span data-lexical-text="true"> c</span></p>',
           inputs: [
             pasteHTML(`
               <div>
@@ -461,25 +461,25 @@ describe('LexicalEventHelpers', () => {
         },
         {
           expectedHTML:
-            '<p class="editor-paragraph" dir="ltr"><strong class="editor-text-bold" data-lexical-text="true">a </strong><span data-lexical-text="true">b</span></p>',
+            '<p class="editor-paragraph"><strong class="editor-text-bold" data-lexical-text="true">a </strong><span data-lexical-text="true">b</span></p>',
           inputs: [pasteHTML('<div><strong>a </strong>b</div>')],
           name: 'collapsibles and neighbors (1)',
         },
         {
           expectedHTML:
-            '<p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">a</span><strong class="editor-text-bold" data-lexical-text="true"> b</strong></p>',
+            '<p class="editor-paragraph"><span data-lexical-text="true">a</span><strong class="editor-text-bold" data-lexical-text="true"> b</strong></p>',
           inputs: [pasteHTML('<div>a<strong> b</strong></div>')],
           name: 'collapsibles and neighbors (2)',
         },
         {
           expectedHTML:
-            '<p class="editor-paragraph" dir="ltr"><strong class="editor-text-bold" data-lexical-text="true">a </strong><span data-lexical-text="true">b</span></p>',
+            '<p class="editor-paragraph"><strong class="editor-text-bold" data-lexical-text="true">a </strong><span data-lexical-text="true">b</span></p>',
           inputs: [pasteHTML('<div><strong>a </strong><span></span>b</div>')],
           name: 'collapsibles and neighbors (3)',
         },
         {
           expectedHTML:
-            '<p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">a</span><strong class="editor-text-bold" data-lexical-text="true"> b</strong></p>',
+            '<p class="editor-paragraph"><span data-lexical-text="true">a</span><strong class="editor-text-bold" data-lexical-text="true"> b</strong></p>',
           inputs: [pasteHTML('<div>a<span></span><strong> b</strong></div>')],
           name: 'collapsibles and neighbors (4)',
         },
@@ -495,19 +495,19 @@ describe('LexicalEventHelpers', () => {
         },
         {
           expectedHTML:
-            '<p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">a</span></p>',
+            '<p class="editor-paragraph"><span data-lexical-text="true">a</span></p>',
           inputs: [pasteHTML('<span> </span><span>a</span>')],
           name: 'redundant inline at start',
         },
         {
           expectedHTML:
-            '<p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">a</span></p>',
+            '<p class="editor-paragraph"><span data-lexical-text="true">a</span></p>',
           inputs: [pasteHTML('<span>a</span><span> </span>')],
           name: 'redundant inline at end',
         },
         {
           expectedHTML:
-            '<p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">a</span></p><p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">b</span></p>',
+            '<p class="editor-paragraph"><span data-lexical-text="true">a</span></p><p class="editor-paragraph"><span data-lexical-text="true">b</span></p>',
           inputs: [
             pasteHTML(`
             <div>
@@ -524,7 +524,7 @@ describe('LexicalEventHelpers', () => {
         },
         {
           expectedHTML:
-            '<p class="editor-paragraph" dir="ltr"><strong class="editor-text-bold" data-lexical-text="true">a b</strong></p>',
+            '<p class="editor-paragraph"><strong class="editor-text-bold" data-lexical-text="true">a b</strong></p>',
           inputs: [
             pasteHTML(`
             <div>
@@ -541,7 +541,7 @@ describe('LexicalEventHelpers', () => {
         },
         {
           expectedHTML:
-            '<p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">a</span><br><span data-lexical-text="true">b</span></p>',
+            '<p class="editor-paragraph"><span data-lexical-text="true">a</span><br><span data-lexical-text="true">b</span></p>',
           inputs: [
             pasteHTML(`
             <p>
@@ -555,7 +555,7 @@ describe('LexicalEventHelpers', () => {
         },
         {
           expectedHTML:
-            '<p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">a</span><br><span data-lexical-text="true">b</span></p>',
+            '<p class="editor-paragraph"><span data-lexical-text="true">a</span><br><span data-lexical-text="true">b</span></p>',
           inputs: [
             pasteHTML(`
             <p>
@@ -569,7 +569,7 @@ describe('LexicalEventHelpers', () => {
         },
         {
           expectedHTML:
-            '<p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">paragraph1</span></p><p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">paragraph2</span></p>',
+            '<p class="editor-paragraph"><span data-lexical-text="true">paragraph1</span></p><p class="editor-paragraph"><span data-lexical-text="true">paragraph2</span></p>',
           inputs: [
             pasteHTML(
               '\n<p class="p1">paragraph1</p>\n<p class="p1">paragraph2</p>\n',
@@ -579,7 +579,7 @@ describe('LexicalEventHelpers', () => {
         },
         {
           expectedHTML:
-            '<p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">line 1</span><br><span data-lexical-text="true">line 2</span></p><p class="editor-paragraph"><br></p><p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">paragraph 1</span></p><p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">paragraph 2</span></p>',
+            '<p class="editor-paragraph"><span data-lexical-text="true">line 1</span><br><span data-lexical-text="true">line 2</span></p><p class="editor-paragraph"><br></p><p class="editor-paragraph"><span data-lexical-text="true">paragraph 1</span></p><p class="editor-paragraph"><span data-lexical-text="true">paragraph 2</span></p>',
           inputs: [
             pasteHTML(
               '\n<p class="p1">line 1<br>\nline 2</p>\n<p class="p2"><br></p>\n<p class="p1">paragraph 1</p>\n<p class="p1">paragraph 2</p>\n',
@@ -589,7 +589,7 @@ describe('LexicalEventHelpers', () => {
         },
         {
           expectedHTML:
-            '<p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">line 1</span><br><span data-lexical-text="true">line 2</span></p><p class="editor-paragraph"><br></p><p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">paragraph 1</span></p><p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">paragraph 2</span></p>',
+            '<p class="editor-paragraph"><span data-lexical-text="true">line 1</span><br><span data-lexical-text="true">line 2</span></p><p class="editor-paragraph"><br></p><p class="editor-paragraph"><span data-lexical-text="true">paragraph 1</span></p><p class="editor-paragraph"><span data-lexical-text="true">paragraph 2</span></p>',
           inputs: [
             pasteHTML(
               '\n<p class="p1">line 1<br>\nline 2</p>\n<p class="p2">\n<br>\n</p>\n<p class="p1">paragraph 1</p>\n<p class="p1">paragraph 2</p>\n',
@@ -599,7 +599,7 @@ describe('LexicalEventHelpers', () => {
         },
         {
           expectedHTML:
-            '<p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">line 1</span><br><span data-lexical-text="true">line 2</span></p>',
+            '<p class="editor-paragraph"><span data-lexical-text="true">line 1</span><br><span data-lexical-text="true">line 2</span></p>',
           inputs: [
             pasteHTML(
               '<p class="p1"><span>line 1</span><span><br></span><span>line 2</span></p>',
@@ -635,7 +635,7 @@ describe('LexicalEventHelpers', () => {
         },
         {
           expectedHTML:
-            '<p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">a</span></p><p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">b b</span></p><p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">c</span></p><p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">z</span></p><p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">d e</span></p><p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">fg</span></p>',
+            '<p class="editor-paragraph"><span data-lexical-text="true">a</span></p><p class="editor-paragraph"><span data-lexical-text="true">b b</span></p><p class="editor-paragraph"><span data-lexical-text="true">c</span></p><p class="editor-paragraph"><span data-lexical-text="true">z</span></p><p class="editor-paragraph"><span data-lexical-text="true">d e</span></p><p class="editor-paragraph"><span data-lexical-text="true">fg</span></p>',
           inputs: [
             pasteHTML(
               `<div>a<div>b b<div>c<div><div></div>z</div></div>d e</div>fg</div>`,

resources/js/wysiwyg/nodes/_common.ts

@@ -1,10 +1,12 @@
 import {LexicalNode, Spread} from "lexical";
 import type {SerializedElementNode} from "lexical/nodes/LexicalElementNode";
-import {sizeToPixels} from "../utils/dom";
+import {el, sizeToPixels} from "../utils/dom";
 
 export type CommonBlockAlignment = 'left' | 'right' | 'center' | 'justify' | '';
 const validAlignments: CommonBlockAlignment[] = ['left', 'right', 'center', 'justify'];
 
+type EditorNodeDirection = 'ltr' | 'rtl' | null;
+
 export type SerializedCommonBlockNode = Spread<{
     id: string;
     alignment: CommonBlockAlignment;
@@ -29,7 +31,13 @@ export interface NodeHasInset {
     getInset(): number;
 }
 
-interface CommonBlockInterface extends NodeHasId, NodeHasAlignment, NodeHasInset {}
+export interface NodeHasDirection {
+    readonly __dir: EditorNodeDirection;
+    setDirection(direction: EditorNodeDirection): void;
+    getDirection(): EditorNodeDirection;
+}
+
+interface CommonBlockInterface extends NodeHasId, NodeHasAlignment, NodeHasInset, NodeHasDirection {}
 
 export function extractAlignmentFromElement(element: HTMLElement): CommonBlockAlignment {
     const textAlignStyle: string = element.style.textAlign || '';
@@ -55,6 +63,15 @@ export function extractInsetFromElement(element: HTMLElement): number {
     return sizeToPixels(elemPadding);
 }
 
+function extractDirectionFromElement(element: HTMLElement): EditorNodeDirection {
+    const elemDir = (element.dir || '').toLowerCase();
+    if (elemDir === 'rtl' || elemDir === 'ltr') {
+        return elemDir;
+    }
+
+    return null;
+}
+
 export function setCommonBlockPropsFromElement(element: HTMLElement, node: CommonBlockInterface): void {
     if (element.id) {
         node.setId(element.id);
@@ -62,12 +79,14 @@ export function setCommonBlockPropsFromElement(element: HTMLElement, node: Commo
 
     node.setAlignment(extractAlignmentFromElement(element));
     node.setInset(extractInsetFromElement(element));
+    node.setDirection(extractDirectionFromElement(element));
 }
 
 export function commonPropertiesDifferent(nodeA: CommonBlockInterface, nodeB: CommonBlockInterface): boolean {
     return nodeA.__id !== nodeB.__id ||
         nodeA.__alignment !== nodeB.__alignment ||
-        nodeA.__inset !== nodeB.__inset;
+        nodeA.__inset !== nodeB.__inset ||
+        nodeA.__dir !== nodeB.__dir;
 }
 
 export function updateElementWithCommonBlockProps(element: HTMLElement, node: CommonBlockInterface): void {
@@ -82,12 +101,17 @@ export function updateElementWithCommonBlockProps(element: HTMLElement, node: Co
     if (node.__inset) {
         element.style.paddingLeft = `${node.__inset}px`;
     }
+
+    if (node.__dir) {
+        element.dir = node.__dir;
+    }
 }
 
 export function deserializeCommonBlockNode(serializedNode: SerializedCommonBlockNode, node: CommonBlockInterface): void {
     node.setId(serializedNode.id);
     node.setAlignment(serializedNode.alignment);
     node.setInset(serializedNode.inset);
+    node.setDirection(serializedNode.direction);
 }
 
 export interface NodeHasSize {

resources/js/wysiwyg/todo.md

@@ -3,6 +3,10 @@
 ## In progress
 
 - RTL/LTR support
+  - Basic implementation added 
+  - Test across main range of content blocks
+  - Test that HTML is being set as expected
+  - Test editor defaults when between RTL/LTR modes
 
 ## Main Todo
 

resources/js/wysiwyg/ui/defaults/buttons/alignments.ts

@@ -37,14 +37,15 @@ function setAlignmentForSelection(editor: LexicalEditor, alignment: CommonBlockA
     $toggleSelection(editor);
 }
 
-function setDirectionForSelection(editor: LexicalEditor, direction: 'ltr' | 'rtl'): void {
-    const selection = getLastSelection(editor);
+function setDirectionForSelection(context: EditorUiContext, direction: 'ltr' | 'rtl'): void {
+    const selection = getLastSelection(context.editor);
 
     const elements = $getBlockElementNodesInSelection(selection);
     for (const node of elements) {
-        console.log('setting direction', node);
         node.setDirection(direction);
     }
+
+    context.manager.triggerFutureStateRefresh();
 }
 
 export const alignLeft: EditorButtonDefinition = {
@@ -95,7 +96,7 @@ export const directionLTR: EditorButtonDefinition = {
     label: 'Left to right',
     icon: ltrIcon,
     action(context: EditorUiContext) {
-        context.editor.update(() => setDirectionForSelection(context.editor, 'ltr'));
+        context.editor.update(() => setDirectionForSelection(context, 'ltr'));
     },
     isActive(selection: BaseSelection|null) {
         return $selectionContainsDirection(selection, 'ltr');
@@ -106,7 +107,7 @@ export const directionRTL: EditorButtonDefinition = {
     label: 'Right to left',
     icon: rtlIcon,
     action(context: EditorUiContext) {
-        context.editor.update(() => setDirectionForSelection(context.editor, 'rtl'));
+        context.editor.update(() => setDirectionForSelection(context, 'rtl'));
     },
     isActive(selection: BaseSelection|null) {
         return $selectionContainsDirection(selection, 'rtl');

resources/js/wysiwyg/ui/defaults/buttons/lists.ts

@@ -3,7 +3,6 @@ import {EditorButtonDefinition} from "../../framework/buttons";
 import {EditorUiContext} from "../../framework/core";
 import {
     BaseSelection,
-    LexicalEditor,
     LexicalNode,
 } from "lexical";
 import listBulletIcon from "@icons/editor/list-bullet.svg";
@@ -12,15 +11,10 @@ import listCheckIcon from "@icons/editor/list-check.svg";
 import indentIncreaseIcon from "@icons/editor/indent-increase.svg";
 import indentDecreaseIcon from "@icons/editor/indent-decrease.svg";
 import {
-    $getBlockElementNodesInSelection,
-    $selectionContainsNodeType, $selectNodes, $selectSingleNode,
-    $toggleSelection,
-    getLastSelection
+    $selectionContainsNodeType,
 } from "../../../utils/selection";
 import {toggleSelectionAsList} from "../../../utils/formats";
-import {nodeHasInset} from "../../../utils/nodes";
-import {$isCustomListItemNode, CustomListItemNode} from "../../../nodes/custom-list-item";
-import {$nestListItem, $setInsetForSelection, $unnestListItem} from "../../../utils/lists";
+import {$setInsetForSelection} from "../../../utils/lists";
 
 
 function buildListButton(label: string, type: ListType, icon: string): EditorButtonDefinition {

tsconfig.json

@@ -1,5 +1,6 @@
 {
   "include": ["resources/js/**/*"],
+  "exclude": ["resources/js/wysiwyg/lexical/yjs/*"],
   "compilerOptions": {
     "target": "es2019",
     "module": "commonjs",