Lexical: Updated tests for node changes

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

@@ -974,7 +974,7 @@ describe('LexicalEditor tests', () => {
       editable ? 'editable' : 'non-editable'
     })`, async () => {
       const JSON_EDITOR_STATE =
-        '{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"123","type":"text","version":1}],"direction":null,"format":"","indent":0,"type":"paragraph","version":1,"textStyle":""}],"direction":null,"format":"","indent":0,"type":"root","version":1}}';
+        '{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"123","type":"text","version":1}],"direction":null,"type":"paragraph","version":1,"textStyle":""}],"direction":null,"type":"root","version":1}}';
       init();
       const contentEditable = editor.getRootElement();
       editor.setEditable(editable);
@@ -1047,8 +1047,6 @@ describe('LexicalEditor tests', () => {
           __cachedText: null,
           __dir: null,
           __first: paragraphKey,
-          __format: 0,
-          __indent: 0,
           __key: 'root',
           __last: paragraphKey,
           __next: null,
@@ -1059,10 +1057,11 @@ describe('LexicalEditor tests', () => {
           __type: 'root',
         });
         expect(parsedParagraph).toEqual({
+          "__alignment": "",
           __dir: null,
           __first: textKey,
-          __format: 0,
+          __id: '',
-          __indent: 0,
+          __inset: 0,
           __key: paragraphKey,
           __last: textKey,
           __next: null,
@@ -1070,7 +1069,6 @@ describe('LexicalEditor tests', () => {
           __prev: null,
           __size: 1,
           __style: '',
-          __textFormat: 0,
           __textStyle: '',
           __type: 'paragraph',
         });
@@ -1129,8 +1127,6 @@ describe('LexicalEditor tests', () => {
           __cachedText: null,
           __dir: null,
           __first: paragraphKey,
-          __format: 0,
-          __indent: 0,
           __key: 'root',
           __last: paragraphKey,
           __next: null,
@@ -1141,10 +1137,11 @@ describe('LexicalEditor tests', () => {
           __type: 'root',
         });
         expect(parsedParagraph).toEqual({
+          "__alignment": "",
           __dir: null,
           __first: textKey,
-          __format: 0,
+          __id: '',
-          __indent: 0,
+          __inset: 0,
           __key: paragraphKey,
           __last: textKey,
           __next: null,
@@ -1152,7 +1149,6 @@ describe('LexicalEditor tests', () => {
           __prev: null,
           __size: 1,
           __style: '',
-          __textFormat: 0,
           __textStyle: '',
           __type: 'paragraph',
         });

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

@@ -54,8 +54,6 @@ describe('LexicalEditorState tests', () => {
         __cachedText: 'foo',
         __dir: null,
         __first: '1',
-        __format: 0,
-        __indent: 0,
         __key: 'root',
         __last: '1',
         __next: null,
@@ -66,10 +64,11 @@ describe('LexicalEditorState tests', () => {
         __type: 'root',
       });
       expect(paragraph).toEqual({
+        "__alignment": "",
         __dir: null,
         __first: '2',
-        __format: 0,
+        __id: '',
-        __indent: 0,
+        __inset: 0,
         __key: '1',
         __last: '2',
         __next: null,
@@ -77,7 +76,6 @@ describe('LexicalEditorState tests', () => {
         __prev: null,
         __size: 1,
         __style: '',
-        __textFormat: 0,
         __textStyle: '',
         __type: 'paragraph',
       });
@@ -113,7 +111,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":null,"format":"","indent":0,"type":"paragraph","version":1,"textFormat":0,"textStyle":""}],"direction":null,"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,"type":"paragraph","version":1,"id":"","alignment":"","inset":0,"textStyle":""}],"direction":null,"type":"root","version":1}}`,
       );
     });
 
@@ -140,8 +138,6 @@ describe('LexicalEditorState tests', () => {
               __cachedText: '',
               __dir: null,
               __first: null,
-              __format: 0,
-              __indent: 0,
               __key: 'root',
               __last: null,
               __next: null,

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

@@ -84,8 +84,6 @@ describe('LexicalElementNode tests', () => {
         expect(node.exportJSON()).toStrictEqual({
           children: [],
           direction: null,
-          format: '',
-          indent: 0,
           type: 'test_block',
           version: 1,
         });

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

@@ -48,11 +48,11 @@ describe('LexicalParagraphNode tests', () => {
         // logic is in place in the corresponding importJSON  method
         // to accomodate these changes.
         expect(node.exportJSON()).toStrictEqual({
+          alignment: '',
           children: [],
           direction: null,
-          format: '',
+          id: '',
-          indent: 0,
+          inset: 0,
-          textFormat: 0,
           textStyle: '',
           type: 'paragraph',
           version: 1,
@@ -127,6 +127,21 @@ describe('LexicalParagraphNode tests', () => {
       });
     });
 
+    test('id is supported', async () => {
+      const {editor} = testEnv;
+      let paragraphNode: ParagraphNode;
+
+      await editor.update(() => {
+        paragraphNode = new ParagraphNode();
+        paragraphNode.setId('testid')
+        $getRoot().append(paragraphNode);
+      });
+
+      expect(testEnv.innerHTML).toBe(
+          '<p id="testid"><br></p>',
+      );
+    });
+
     test('$createParagraphNode()', async () => {
       const {editor} = testEnv;
 

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

@@ -77,8 +77,6 @@ describe('LexicalRootNode tests', () => {
         expect(node.exportJSON()).toStrictEqual({
           children: [],
           direction: null,
-          format: '',
-          indent: 0,
           type: 'root',
           version: 1,
         });

resources/js/wysiwyg/lexical/headless/__tests__/unit/LexicalHeadlessEditor.test.ts

@@ -206,7 +206,7 @@ describe('LexicalHeadlessEditor', () => {
     cleanup();
 
     expect(html).toBe(
-      '<p>hello world</p>',
+      '<p dir="ltr">hello world</p>',
     );
   });
 });

resources/js/wysiwyg/lexical/html/__tests__/unit/LexicalHtml.test.ts

@@ -176,7 +176,7 @@ describe('HTML', () => {
     });
 
     expect(html).toBe(
-      '<p style="text-align: center;">Hello world!</p>',
+      '<p class="align-center">Hello world!</p>',
     );
   });
 
@@ -206,7 +206,7 @@ describe('HTML', () => {
     });
 
     expect(html).toBe(
-      '<p style="text-align: center;">Hello world!</p>',
+      '<p class="align-center">Hello world!</p>',
     );
   });
 });

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

@@ -62,7 +62,7 @@ describe('LexicalListItemNode tests', () => {
         expectHtmlToBeEqual(
           listItemNode.createDOM(editorConfig).outerHTML,
           html`
-            <li value="1" class="my-listItem-item-class"></li>
+            <li value="1"></li>
           `,
         );
 
@@ -90,7 +90,7 @@ describe('LexicalListItemNode tests', () => {
           expectHtmlToBeEqual(
             domElement.outerHTML,
             html`
-              <li value="1" class="my-listItem-item-class"></li>
+              <li value="1"></li>
             `,
           );
           const newListItemNode = new ListItemNode();
@@ -106,7 +106,7 @@ describe('LexicalListItemNode tests', () => {
           expectHtmlToBeEqual(
             domElement.outerHTML,
             html`
-              <li value="1" class="my-listItem-item-class"></li>
+              <li value="1"></li>
             `,
           );
         });
@@ -125,7 +125,7 @@ describe('LexicalListItemNode tests', () => {
           expectHtmlToBeEqual(
             domElement.outerHTML,
             html`
-              <li value="1" class="my-listItem-item-class"></li>
+              <li value="1"></li>
             `,
           );
           const nestedListNode = new ListNode('bullet', 1);
@@ -142,7 +142,7 @@ describe('LexicalListItemNode tests', () => {
           expectHtmlToBeEqual(
             domElement.outerHTML,
             html`
-              <li value="1" class="my-listItem-item-class my-nested-list-listItem-class"></li>
+              <li value="1" style="list-style: none;"></li>
             `,
           );
         });
@@ -486,14 +486,10 @@ describe('LexicalListItemNode tests', () => {
         });
 
         expectHtmlToBeEqual(
-          testEnv.outerHTML,
+          testEnv.innerHTML,
           html`
-            <div
-              contenteditable="true"
-              style="user-select: text; white-space: pre-wrap; word-break: break-word;"
-              data-lexical-editor="true">
             <ul>
-                <li value="1">
+              <li value="1" style="list-style: none;">
                 <ul>
                   <li value="1">
                     <span data-lexical-text="true">A</span>
@@ -507,21 +503,16 @@ describe('LexicalListItemNode tests', () => {
                 <span data-lexical-text="true">B</span>
               </li>
             </ul>
-            </div>
           `,
         );
 
         await editor.update(() => x.remove());
 
         expectHtmlToBeEqual(
-          testEnv.outerHTML,
+          testEnv.innerHTML,
           html`
-            <div
-              contenteditable="true"
-              style="user-select: text; white-space: pre-wrap; word-break: break-word;"
-              data-lexical-editor="true">
             <ul>
-                <li value="1">
+              <li value="1" style="list-style: none;">
                 <ul>
                   <li value="1">
                     <span data-lexical-text="true">A</span>
@@ -532,7 +523,6 @@ describe('LexicalListItemNode tests', () => {
                 <span data-lexical-text="true">B</span>
               </li>
             </ul>
-            </div>
           `,
         );
       });
@@ -566,12 +556,8 @@ describe('LexicalListItemNode tests', () => {
         });
 
         expectHtmlToBeEqual(
-          testEnv.outerHTML,
+          testEnv.innerHTML,
           html`
-            <div
-              contenteditable="true"
-              style="user-select: text; white-space: pre-wrap; word-break: break-word;"
-              data-lexical-editor="true">
             <ul>
               <li value="1">
                 <span data-lexical-text="true">A</span>
@@ -579,7 +565,7 @@ describe('LexicalListItemNode tests', () => {
               <li value="2">
                 <span data-lexical-text="true">x</span>
               </li>
-                <li value="3">
+              <li value="3" style="list-style: none;">
                 <ul>
                   <li value="1">
                     <span data-lexical-text="true">B</span>
@@ -587,24 +573,19 @@ describe('LexicalListItemNode tests', () => {
                 </ul>
               </li>
             </ul>
-            </div>
           `,
         );
 
         await editor.update(() => x.remove());
 
         expectHtmlToBeEqual(
-          testEnv.outerHTML,
+          testEnv.innerHTML,
           html`
-            <div
-              contenteditable="true"
-              style="user-select: text; white-space: pre-wrap; word-break: break-word;"
-              data-lexical-editor="true">
             <ul>
               <li value="1">
                 <span data-lexical-text="true">A</span>
               </li>
-                <li value="2">
+              <li value="2" style="list-style: none;">
                 <ul>
                   <li value="1">
                     <span data-lexical-text="true">B</span>
@@ -612,7 +593,6 @@ describe('LexicalListItemNode tests', () => {
                 </ul>
               </li>
             </ul>
-            </div>
           `,
         );
       });
@@ -650,14 +630,10 @@ describe('LexicalListItemNode tests', () => {
         });
 
         expectHtmlToBeEqual(
-          testEnv.outerHTML,
+          testEnv.innerHTML,
           html`
-            <div
-              contenteditable="true"
-              style="user-select: text; white-space: pre-wrap; word-break: break-word;"
-              data-lexical-editor="true">
             <ul>
-                <li value="1">
+              <li value="1" style="list-style: none;">
                 <ul>
                   <li value="1">
                     <span data-lexical-text="true">A</span>
@@ -667,7 +643,7 @@ describe('LexicalListItemNode tests', () => {
               <li value="1">
                 <span data-lexical-text="true">x</span>
               </li>
-                <li value="2">
+              <li value="2" style="list-style: none;">
                 <ul>
                   <li value="1">
                     <span data-lexical-text="true">B</span>
@@ -675,21 +651,16 @@ describe('LexicalListItemNode tests', () => {
                 </ul>
               </li>
             </ul>
-            </div>
           `,
         );
 
         await editor.update(() => x.remove());
 
         expectHtmlToBeEqual(
-          testEnv.outerHTML,
+          testEnv.innerHTML,
           html`
-            <div
-              contenteditable="true"
-              style="user-select: text; white-space: pre-wrap; word-break: break-word;"
-              data-lexical-editor="true">
             <ul>
-                <li value="1">
+              <li value="1" style="list-style: none;">
                 <ul>
                   <li value="1">
                     <span data-lexical-text="true">A</span>
@@ -700,7 +671,6 @@ describe('LexicalListItemNode tests', () => {
                 </ul>
               </li>
             </ul>
-            </div>
           `,
         );
       });
@@ -746,19 +716,15 @@ describe('LexicalListItemNode tests', () => {
         });
 
         expectHtmlToBeEqual(
-          testEnv.outerHTML,
+          testEnv.innerHTML,
           html`
-            <div
-              contenteditable="true"
-              style="user-select: text; white-space: pre-wrap; word-break: break-word;"
-              data-lexical-editor="true">
             <ul>
-                <li value="1">
+              <li value="1" style="list-style: none;">
                 <ul>
                   <li value="1">
                     <span data-lexical-text="true">A1</span>
                   </li>
-                    <li value="2">
+                  <li value="2" style="list-style: none;">
                     <ul>
                       <li value="1">
                         <span data-lexical-text="true">A2</span>
@@ -770,7 +736,7 @@ describe('LexicalListItemNode tests', () => {
               <li value="1">
                 <span data-lexical-text="true">x</span>
               </li>
-                <li value="2">
+              <li value="2" style="list-style: none;">
                 <ul>
                   <li value="1">
                     <span data-lexical-text="true">B</span>
@@ -778,26 +744,21 @@ describe('LexicalListItemNode tests', () => {
                 </ul>
               </li>
             </ul>
-            </div>
           `,
         );
 
         await editor.update(() => x.remove());
 
         expectHtmlToBeEqual(
-          testEnv.outerHTML,
+          testEnv.innerHTML,
           html`
-            <div
-              contenteditable="true"
-              style="user-select: text; white-space: pre-wrap; word-break: break-word;"
-              data-lexical-editor="true">
             <ul>
-                <li value="1">
+              <li value="1" style="list-style: none;">
                 <ul>
                   <li value="1">
                     <span data-lexical-text="true">A1</span>
                   </li>
-                    <li value="2">
+                  <li value="2" style="list-style: none;">
                     <ul>
                       <li value="1">
                         <span data-lexical-text="true">A2</span>
@@ -810,7 +771,6 @@ describe('LexicalListItemNode tests', () => {
                 </ul>
               </li>
             </ul>
-            </div>
           `,
         );
       });
@@ -856,14 +816,10 @@ describe('LexicalListItemNode tests', () => {
         });
 
         expectHtmlToBeEqual(
-          testEnv.outerHTML,
+          testEnv.innerHTML,
           html`
-            <div
-              contenteditable="true"
-              style="user-select: text; white-space: pre-wrap; word-break: break-word;"
-              data-lexical-editor="true">
             <ul>
-                <li value="1">
+              <li value="1" style="list-style: none;">
                 <ul>
                   <li value="1">
                     <span data-lexical-text="true">A</span>
@@ -873,9 +829,9 @@ describe('LexicalListItemNode tests', () => {
               <li value="1">
                 <span data-lexical-text="true">x</span>
               </li>
-                <li value="2">
+              <li value="2" style="list-style: none;">
                 <ul>
-                    <li value="1">
+                  <li value="1" style="list-style: none;">
                     <ul>
                       <li value="1">
                         <span data-lexical-text="true">B1</span>
@@ -888,26 +844,21 @@ describe('LexicalListItemNode tests', () => {
                 </ul>
               </li>
             </ul>
-            </div>
           `,
         );
 
         await editor.update(() => x.remove());
 
         expectHtmlToBeEqual(
-          testEnv.outerHTML,
+          testEnv.innerHTML,
           html`
-            <div
-              contenteditable="true"
-              style="user-select: text; white-space: pre-wrap; word-break: break-word;"
-              data-lexical-editor="true">
             <ul>
-                <li value="1">
+              <li value="1" style="list-style: none;">
                 <ul>
                   <li value="1">
                     <span data-lexical-text="true">A</span>
                   </li>
-                    <li value="2">
+                  <li value="2" style="list-style: none;">
                     <ul>
                       <li value="1">
                         <span data-lexical-text="true">B1</span>
@@ -920,7 +871,6 @@ describe('LexicalListItemNode tests', () => {
                 </ul>
               </li>
             </ul>
-            </div>
           `,
         );
       });
@@ -974,19 +924,15 @@ describe('LexicalListItemNode tests', () => {
         });
 
         expectHtmlToBeEqual(
-          testEnv.outerHTML,
+          testEnv.innerHTML,
           html`
-            <div
-              contenteditable="true"
-              style="user-select: text; white-space: pre-wrap; word-break: break-word;"
-              data-lexical-editor="true">
             <ul>
-                <li value="1">
+              <li value="1" style="list-style: none;">
                 <ul>
                   <li value="1">
                     <span data-lexical-text="true">A1</span>
                   </li>
-                    <li value="2">
+                  <li value="2" style="list-style: none;">
                     <ul>
                       <li value="1">
                         <span data-lexical-text="true">A2</span>
@@ -998,9 +944,9 @@ describe('LexicalListItemNode tests', () => {
               <li value="1">
                 <span data-lexical-text="true">x</span>
               </li>
-                <li value="2">
+              <li value="2" style="list-style: none;">
                 <ul>
-                    <li value="1">
+                  <li value="1" style="list-style: none;">
                     <ul>
                       <li value="1">
                         <span data-lexical-text="true">B1</span>
@@ -1013,26 +959,21 @@ describe('LexicalListItemNode tests', () => {
                 </ul>
               </li>
             </ul>
-            </div>
           `,
         );
 
         await editor.update(() => x.remove());
 
         expectHtmlToBeEqual(
-          testEnv.outerHTML,
+          testEnv.innerHTML,
           html`
-            <div
-              contenteditable="true"
-              style="user-select: text; white-space: pre-wrap; word-break: break-word;"
-              data-lexical-editor="true">
             <ul>
-                <li value="1">
+              <li value="1" style="list-style: none;">
                 <ul>
                   <li value="1">
                     <span data-lexical-text="true">A1</span>
                   </li>
-                    <li value="2">
+                  <li value="2" style="list-style: none;">
                     <ul>
                       <li value="1">
                         <span data-lexical-text="true">A2</span>
@@ -1048,7 +989,6 @@ describe('LexicalListItemNode tests', () => {
                 </ul>
               </li>
             </ul>
-            </div>
           `,
         );
       });

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

@@ -294,24 +294,5 @@ describe('LexicalListNode tests', () => {
         expect(bulletList.__listType).toBe('bullet');
       });
     });
-
-    test('ListNode.clone() without list type (backward compatibility)', async () => {
-      const {editor} = testEnv;
-
-      await editor.update(() => {
-        const olNode = ListNode.clone({
-          __key: '1',
-          __start: 1,
-          __tag: 'ol',
-        } as unknown as ListNode);
-        const ulNode = ListNode.clone({
-          __key: '1',
-          __start: 1,
-          __tag: 'ul',
-        } as unknown as ListNode);
-        expect(olNode.__listType).toBe('number');
-        expect(ulNode.__listType).toBe('bullet');
-      });
-    });
   });
 });

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

@@ -2605,7 +2605,7 @@ describe('LexicalSelection tests', () => {
           return $createHeadingNode('h1');
         });
         expect(JSON.stringify(testEditor._pendingEditorState?.toJSON())).toBe(
-          '{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"","type":"text","version":1},{"detail":0,"format":0,"mode":"normal","style":"","text":"","type":"text","version":1}],"direction":null,"format":"","indent":0,"type":"heading","version":1,"tag":"h1"},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"","type":"text","version":1},{"detail":0,"format":0,"mode":"normal","style":"","text":"","type":"text","version":1}],"direction":null,"format":"","indent":0,"type":"heading","version":1,"tag":"h1"},{"children":[{"children":[{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"","type":"text","version":1}],"direction":null,"format":"","indent":0,"type":"heading","version":1,"tag":"h1"},{"children":[],"direction":null,"format":"","indent":0,"type":"heading","version":1,"tag":"h1"},{"children":[],"direction":null,"format":"","indent":0,"type":"heading","version":1,"tag":"h1"}],"direction":null,"format":"","indent":0,"type":"tablecell","version":1,"backgroundColor":null,"colSpan":1,"headerState":3,"rowSpan":1},{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"","type":"text","version":1}],"direction":null,"format":"","indent":0,"type":"heading","version":1,"tag":"h1"},{"children":[],"direction":null,"format":"","indent":0,"type":"heading","version":1,"tag":"h1"},{"children":[],"direction":null,"format":"","indent":0,"type":"heading","version":1,"tag":"h1"}],"direction":null,"format":"","indent":0,"type":"tablecell","version":1,"backgroundColor":null,"colSpan":1,"headerState":1,"rowSpan":1}],"direction":null,"format":"","indent":0,"type":"tablerow","version":1}],"direction":null,"format":"","indent":0,"type":"table","version":1},{"children":[],"direction":null,"format":"","indent":0,"type":"heading","version":1,"tag":"h1"}],"direction":null,"format":"","indent":0,"type":"root","version":1}}',
+          '{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"","type":"text","version":1},{"detail":0,"format":0,"mode":"normal","style":"","text":"","type":"text","version":1}],"direction":null,"type":"heading","version":1,"id":"","alignment":"","inset":0,"tag":"h1"},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"","type":"text","version":1},{"detail":0,"format":0,"mode":"normal","style":"","text":"","type":"text","version":1}],"direction":null,"type":"heading","version":1,"id":"","alignment":"","inset":0,"tag":"h1"},{"children":[{"children":[{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"","type":"text","version":1}],"direction":null,"type":"heading","version":1,"id":"","alignment":"","inset":0,"tag":"h1"},{"children":[],"direction":null,"type":"heading","version":1,"id":"","alignment":"","inset":0,"tag":"h1"},{"children":[],"direction":null,"type":"heading","version":1,"id":"","alignment":"","inset":0,"tag":"h1"}],"direction":null,"type":"tablecell","version":1,"backgroundColor":null,"colSpan":1,"headerState":3,"rowSpan":1,"styles":{},"alignment":""},{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"","type":"text","version":1}],"direction":null,"type":"heading","version":1,"id":"","alignment":"","inset":0,"tag":"h1"},{"children":[],"direction":null,"type":"heading","version":1,"id":"","alignment":"","inset":0,"tag":"h1"},{"children":[],"direction":null,"type":"heading","version":1,"id":"","alignment":"","inset":0,"tag":"h1"}],"direction":null,"type":"tablecell","version":1,"backgroundColor":null,"colSpan":1,"headerState":1,"rowSpan":1,"styles":{},"alignment":""}],"direction":null,"type":"tablerow","version":1,"styles":{},"height":0}],"direction":null,"type":"table","version":1,"id":"","alignment":"","inset":0,"colWidths":[],"styles":{}},{"children":[],"direction":null,"type":"heading","version":1,"id":"","alignment":"","inset":0,"tag":"h1"}],"direction":null,"type":"root","version":1}}',
         );
       });
     });
@@ -2695,7 +2695,7 @@ describe('LexicalSelection tests', () => {
         });
       });
       expect(element.innerHTML).toStrictEqual(
-        `<h1><span data-lexical-text="true">1</span></h1><h1 style="padding-inline-start: calc(1 * 40px);"><span data-lexical-text="true">1.1</span></h1>`,
+        `<h1><span data-lexical-text="true">1</span></h1><ul><li value="1"><h1><span data-lexical-text="true">1.1</span></h1></li></ul>`,
       );
     });
 
@@ -2734,7 +2734,7 @@ describe('LexicalSelection tests', () => {
         });
       });
       expect(element.innerHTML).toStrictEqual(
-        `<h1 style="padding-inline-start: calc(1 * 40px);"><span data-lexical-text="true">1.1</span></h1>`,
+        `<ul><li value="1"><h1><span data-lexical-text="true">1.1</span></h1></li></ul>`,
       );
     });
   });

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

@@ -113,9 +113,8 @@ describe('LexicalTableNode tests', () => {
           $insertDataTransferForRichText(dataTransfer, selection, editor);
         });
         // Make sure paragraph is inserted inside empty cells
-        const emptyCell = '<td><p><br></p></td>';
         expect(testEnv.innerHTML).toBe(
-          `<table><tr><td><p><span style="color: rgb(0, 0, 0);" data-lexical-text="true">Hello there</span></p></td><td><p><span style="color: rgb(0, 0, 0);" data-lexical-text="true">General Kenobi!</span></p></td></tr><tr><td><p><span style="color: rgb(0, 0, 0);" data-lexical-text="true">Lexical is nice</span></p></td>${emptyCell}</tr></table>`,
+          `<table style="border-collapse: collapse; table-layout: fixed; width: 468pt;"><colgroup><col><col></colgroup><tr style="height: 22.015pt;"><td style="border-left: 1pt solid #000000; border-right: 1pt solid #000000; border-bottom: 1pt solid #000000; border-top: 1pt solid #000000; vertical-align: top; padding: 5pt 5pt 5pt 5pt; overflow: hidden; overflow-wrap: break-word;"><p><span style="color: rgb(0, 0, 0);" data-lexical-text="true">Hello there</span></p></td><td style="border-left: 1pt solid #000000; border-right: 1pt solid #000000; border-bottom: 1pt solid #000000; border-top: 1pt solid #000000; vertical-align: top; padding: 5pt 5pt 5pt 5pt; overflow: hidden; overflow-wrap: break-word;"><p><span style="color: rgb(0, 0, 0);" data-lexical-text="true">General Kenobi!</span></p></td></tr><tr style="height: 22.015pt;"><td style="border-left: 1pt solid #000000; border-right: 1pt solid #000000; border-bottom: 1pt solid #000000; border-top: 1pt solid #000000; vertical-align: top; padding: 5pt 5pt 5pt 5pt; overflow: hidden; overflow-wrap: break-word;"><p><span style="color: rgb(0, 0, 0);" data-lexical-text="true">Lexical is nice</span></p></td><td style="border-left: 1pt solid #000000; border-right: 1pt solid #000000; border-bottom: 1pt solid #000000; border-top: 1pt solid #000000; vertical-align: top; padding: 5pt 5pt 5pt 5pt; overflow: hidden; overflow-wrap: break-word;"><p><br></p></td></tr></table>`,
         );
       });
 
@@ -136,7 +135,7 @@ describe('LexicalTableNode tests', () => {
           $insertDataTransferForRichText(dataTransfer, selection, editor);
         });
         expect(testEnv.innerHTML).toBe(
-          `<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>`,
+          `<table style="table-layout: fixed; font-size: 10pt; font-family: Arial; width: 0px; border-collapse: collapse;"><colgroup><col style="width: 100px;"><col style="width: 189px;"><col style="width: 171px;"></colgroup><tr style="height: 21px;"><td style="overflow: hidden; padding: 2px 3px 2px 3px; vertical-align: bottom; font-weight: bold;"><p><strong data-lexical-text="true">Surface</strong></p></td><td style="overflow: hidden; padding: 2px 3px 2px 3px; vertical-align: bottom; font-style: italic;"><p><em data-lexical-text="true">MWP_WORK_LS_COMPOSER</em></p></td><td style="overflow: hidden; padding: 2px 3px 2px 3px; vertical-align: bottom; text-decoration: underline; text-align: right;" class="align-right"><p><span data-lexical-text="true">77349</span></p></td></tr><tr style="height: 21px;"><td style="overflow: hidden; padding: 2px 3px 2px 3px; vertical-align: bottom;"><p><span data-lexical-text="true">Lexical</span></p></td><td style="overflow: hidden; padding: 2px 3px 2px 3px; vertical-align: bottom; text-decoration: line-through;"><p><span data-lexical-text="true">XDS_RICH_TEXT_AREA</span></p></td><td style="overflow: hidden; padding: 2px 3px 2px 3px; vertical-align: bottom;"><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

@@ -101,8 +101,6 @@ describe('table selection', () => {
       __cachedText: null,
       __dir: null,
       __first: paragraphKey,
-      __format: 0,
-      __indent: 0,
       __key: 'root',
       __last: paragraphKey,
       __next: null,
@@ -113,10 +111,11 @@ describe('table selection', () => {
       __type: 'root',
     });
     expect(parsedParagraph).toEqual({
+      __alignment: "",
       __dir: null,
       __first: textKey,
-      __format: 0,
+      __id: '',
-      __indent: 0,
+      __inset: 0,
       __key: paragraphKey,
       __last: textKey,
       __next: null,
@@ -124,7 +123,6 @@ describe('table selection', () => {
       __prev: null,
       __size: 1,
       __style: '',
-      __textFormat: 0,
       __textStyle: '',
       __type: 'paragraph',
     });

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

@@ -176,7 +176,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"><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>',
+            '<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"><span data-lexical-text="true">Other side</span></li><li value="2"><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>`,
@@ -186,7 +186,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"><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>',
+            '<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"><span data-lexical-text="true">To tell you</span></li><li value="2"><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>`,
@@ -266,7 +266,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"><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>',
+            '<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"><span data-lexical-text="true">Hello</span></li><li value="2"><span data-lexical-text="true">from the other</span></li><li value="3"><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>`,
@@ -276,7 +276,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"><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>',
+            '<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"><span data-lexical-text="true">Hello</span></li><li value="2"><span data-lexical-text="true">from the other</span></li><li value="3"><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>`,
@@ -611,7 +611,7 @@ describe('LexicalEventHelpers', () => {
         },
         {
           expectedHTML:
-            '<ol class="editor-list-ol"><li value="1" class="editor-listitem"><span data-lexical-text="true">1</span><br><span data-lexical-text="true">2</span></li><li value="2" class="editor-listitem"><br></li><li value="3" class="editor-listitem"><span data-lexical-text="true">3</span></li></ol>',
+            '<ol class="editor-list-ol"><li value="1"><span data-lexical-text="true">1</span><br><span data-lexical-text="true">2</span></li><li value="2"><br></li><li value="3"><span data-lexical-text="true">3</span></li></ol>',
           inputs: [
             pasteHTML('<ol><li>1<div></div>2</li><li></li><li>3</li></ol>'),
           ],
@@ -647,7 +647,7 @@ describe('LexicalEventHelpers', () => {
         },
         {
           expectedHTML:
-            '<ol class="editor-list-ol"><li value="1" class="editor-listitem"><span data-lexical-text="true">1</span></li><li value="2" class="editor-listitem"><br></li><li value="3" class="editor-listitem"><span data-lexical-text="true">3</span></li></ol>',
+            '<ol class="editor-list-ol"><li value="1"><span data-lexical-text="true">1</span></li><li value="2"><br></li><li value="3"><span data-lexical-text="true">3</span></li></ol>',
           inputs: [pasteHTML('<ol><li>1</li><li><br /></li><li>3</li></ol>')],
           name: 'only br in a li',
         },

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

@@ -82,10 +82,10 @@ describe('LexicalUtils#splitNode', () => {
       expectedHtml:
         '<ul>' +
         '<li>Before</li>' +
-        '<li><ul><li>Hello</li></ul></li>' +
+        '<li style="list-style: none;"><ul><li>Hello</li></ul></li>' +
         '</ul>' +
         '<ul>' +
-        '<li><ul><li>world</li></ul></li>' +
+        '<li style="list-style: none;"><ul><li>world</li></ul></li>' +
         '<li>After</li>' +
         '</ul>',
       initialHtml:

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

@@ -56,11 +56,11 @@ describe('LexicalUtils#insertNodeToNearestRoot', () => {
       expectedHtml:
         '<ul>' +
         '<li>Before</li>' +
-        '<li><ul><li>Hello</li></ul></li>' +
+        '<li style="list-style: none;"><ul><li>Hello</li></ul></li>' +
         '</ul>' +
         '<test-decorator></test-decorator>' +
         '<ul>' +
-        '<li><ul><li>world</li></ul></li>' +
+        '<li style="list-style: none;"><ul><li>world</li></ul></li>' +
         '<li>After</li>' +
         '</ul>',
       initialHtml: