Lexical: Finished conversion/update of test files

jest.config.ts

@@ -21,7 +21,7 @@ const config: Config = {
   clearMocks: true,
 
   // Indicates whether the coverage information should be collected while executing the test
-  collectCoverage: true,
+  collectCoverage: false,
 
   // An array of glob patterns indicating a set of files for which coverage information should be collected
   // collectCoverageFrom: undefined,
@@ -164,10 +164,9 @@ const config: Config = {
   // testLocationInResults: false,
 
   // The glob patterns Jest uses to detect test files
-  // testMatch: [
+  testMatch: [
-  //   "**/__tests__/**/*.[jt]s?(x)",
+    "**/__tests__/**/*.test.[jt]s",
-  //   "**/?(*.)+(spec|test).[tj]s?(x)"
+  ],
-  // ],
 
   // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
   // testPathIgnorePatterns: [

resources/js/wysiwyg/lexical/core/__tests__/utils/index.ts

@@ -717,3 +717,11 @@ export function html(
   }
   return output;
 }
+
+export function expectHtmlToBeEqual(expected: string, actual: string): void {
+  expect(formatHtml(expected)).toBe(formatHtml(actual));
+}
+
+function formatHtml(s: string): string {
+  return s.replace(/>\s+</g, '><').replace(/\s*\n\s*/g, ' ').trim();
+}

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

@@ -21,7 +21,6 @@ import {
   TextModeType,
   TextNode,
 } from 'lexical';
-import * as ReactTestUtils from 'lexical/shared/react-test-utils';
 
 import {
   $createTestSegmentedNode,

resources/js/wysiwyg/lexical/core/shared/react-test-utils.ts

@@ -1,18 +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 * as React from 'react';
-import * as ReactTestUtils from 'react-dom/test-utils';
-
-/**
- * React 19 moved act from react-dom/test-utils to react
- * https://react.dev/blog/2024/04/25/react-19-upgrade-guide#removed-react-dom-test-utils
- */
-export const act =
-  'act' in React
-    ? (React.act as typeof ReactTestUtils.act)
-    : ReactTestUtils.act;

resources/js/wysiwyg/lexical/link/__tests__/unit/LexicalAutoLinkNode.test.ts

@@ -19,7 +19,7 @@ import {
   ParagraphNode,
   SerializedParagraphNode,
   TextNode,
-} from 'lexical/src';
+} from 'lexical';
 import {initializeUnitTest} from 'lexical/__tests__/utils';
 
 const editorConfig = Object.freeze({

resources/js/wysiwyg/lexical/link/__tests__/unit/LexicalLinkNode.test.ts

@@ -19,7 +19,7 @@ import {
   ParagraphNode,
   SerializedParagraphNode,
   TextNode,
-} from 'lexical/src';
+} from 'lexical';
 import {initializeUnitTest} from 'lexical/__tests__/utils';
 
 const editorConfig = Object.freeze({

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

@@ -62,7 +62,7 @@ describe('LexicalListItemNode tests', () => {
         expectHtmlToBeEqual(
           listItemNode.createDOM(editorConfig).outerHTML,
           html`
-            <li class="my-listItem-item-class" value="1"></li>
+            <li value="1" class="my-listItem-item-class"></li>
           `,
         );
 
@@ -90,7 +90,7 @@ describe('LexicalListItemNode tests', () => {
           expectHtmlToBeEqual(
             domElement.outerHTML,
             html`
-              <li class="my-listItem-item-class" value="1"></li>
+              <li value="1" class="my-listItem-item-class"></li>
             `,
           );
           const newListItemNode = new ListItemNode();
@@ -106,7 +106,7 @@ describe('LexicalListItemNode tests', () => {
           expectHtmlToBeEqual(
             domElement.outerHTML,
             html`
-              <li class="my-listItem-item-class" value="1"></li>
+              <li value="1" class="my-listItem-item-class"></li>
             `,
           );
         });
@@ -125,7 +125,7 @@ describe('LexicalListItemNode tests', () => {
           expectHtmlToBeEqual(
             domElement.outerHTML,
             html`
-              <li class="my-listItem-item-class" value="1"></li>
+              <li value="1" class="my-listItem-item-class"></li>
             `,
           );
           const nestedListNode = new ListNode('bullet', 1);
@@ -142,9 +142,7 @@ describe('LexicalListItemNode tests', () => {
           expectHtmlToBeEqual(
             domElement.outerHTML,
             html`
-              <li
+              <li value="1" class="my-listItem-item-class my-nested-list-listItem-class"></li>
-                class="my-listItem-item-class my-nested-list-listItem-class"
-                value="1"></li>
             `,
           );
         });
@@ -184,13 +182,13 @@ describe('LexicalListItemNode tests', () => {
               style="user-select: text; white-space: pre-wrap; word-break: break-word;"
               data-lexical-editor="true">
               <ul>
-                <li dir="ltr" value="1">
+                <li value="1" dir="ltr">
                   <span data-lexical-text="true">one</span>
                 </li>
-                <li dir="ltr" value="2">
+                <li value="2" dir="ltr">
                   <span data-lexical-text="true">two</span>
                 </li>
-                <li dir="ltr" value="3">
+                <li value="3" dir="ltr">
                   <span data-lexical-text="true">three</span>
                 </li>
               </ul>
@@ -217,13 +215,13 @@ describe('LexicalListItemNode tests', () => {
               style="user-select: text; white-space: pre-wrap; word-break: break-word;"
               data-lexical-editor="true">
               <ul>
-                <li dir="ltr" value="1">
+                <li value="1" dir="ltr">
                   <span data-lexical-text="true">bar</span>
                 </li>
-                <li dir="ltr" value="2">
+                <li value="2" dir="ltr">
                   <span data-lexical-text="true">two</span>
                 </li>
-                <li dir="ltr" value="3">
+                <li value="3" dir="ltr">
                   <span data-lexical-text="true">three</span>
                 </li>
               </ul>
@@ -247,13 +245,13 @@ describe('LexicalListItemNode tests', () => {
               style="user-select: text; white-space: pre-wrap; word-break: break-word;"
               data-lexical-editor="true">
               <ul>
-                <li dir="ltr" value="1">
+                <li value="1" dir="ltr">
                   <span data-lexical-text="true">one</span>
                 </li>
-                <li dir="ltr" value="2">
+                <li value="2" dir="ltr">
                   <span data-lexical-text="true">two</span>
                 </li>
-                <li dir="ltr" value="3">
+                <li value="3" dir="ltr">
                   <span data-lexical-text="true">three</span>
                 </li>
               </ul>
@@ -273,12 +271,12 @@ describe('LexicalListItemNode tests', () => {
               contenteditable="true"
               style="user-select: text; white-space: pre-wrap; word-break: break-word;"
               data-lexical-editor="true">
-              <p><br /></p>
+              <p><br></p>
               <ul>
-                <li dir="ltr" value="1">
+                <li value="1" dir="ltr">
                   <span data-lexical-text="true">two</span>
                 </li>
-                <li dir="ltr" value="2">
+                <li value="2" dir="ltr">
                   <span data-lexical-text="true">three</span>
                 </li>
               </ul>
@@ -303,14 +301,14 @@ describe('LexicalListItemNode tests', () => {
               style="user-select: text; white-space: pre-wrap; word-break: break-word;"
               data-lexical-editor="true">
               <ul>
-                <li dir="ltr" value="1">
+                <li value="1" dir="ltr">
                   <span data-lexical-text="true">one</span>
                 </li>
-                <li dir="ltr" value="2">
+                <li value="2" dir="ltr">
                   <span data-lexical-text="true">two</span>
                 </li>
               </ul>
-              <p><br /></p>
+              <p><br></p>
             </div>
           `,
         );
@@ -332,13 +330,13 @@ describe('LexicalListItemNode tests', () => {
               style="user-select: text; white-space: pre-wrap; word-break: break-word;"
               data-lexical-editor="true">
               <ul>
-                <li dir="ltr" value="1">
+                <li value="1" dir="ltr">
                   <span data-lexical-text="true">one</span>
                 </li>
               </ul>
-              <p><br /></p>
+              <p><br></p>
               <ul>
-                <li dir="ltr" value="1">
+                <li value="1" dir="ltr">
                   <span data-lexical-text="true">three</span>
                 </li>
               </ul>
@@ -363,7 +361,7 @@ describe('LexicalListItemNode tests', () => {
               style="user-select: text; white-space: pre-wrap; word-break: break-word;"
               data-lexical-editor="true">
               <ul>
-                <li dir="ltr" value="1">
+                <li value="1" dir="ltr">
                   <span data-lexical-text="true">one</span>
                 </li>
               </ul>
@@ -383,7 +381,7 @@ describe('LexicalListItemNode tests', () => {
               contenteditable="true"
               style="user-select: text; white-space: pre-wrap; word-break: break-word;"
               data-lexical-editor="true">
-              <p><br /></p>
+              <p><br></p>
             </div>
           `,
         );
@@ -423,13 +421,13 @@ describe('LexicalListItemNode tests', () => {
               style="user-select: text; white-space: pre-wrap; word-break: break-word;"
               data-lexical-editor="true">
               <ul>
-                <li dir="ltr" value="1">
+                <li value="1" dir="ltr">
                   <span data-lexical-text="true">A</span>
                 </li>
-                <li dir="ltr" value="2">
+                <li value="2" dir="ltr">
                   <span data-lexical-text="true">x</span>
                 </li>
-                <li dir="ltr" value="3">
+                <li value="3" dir="ltr">
                   <span data-lexical-text="true">B</span>
                 </li>
               </ul>
@@ -447,10 +445,10 @@ describe('LexicalListItemNode tests', () => {
               style="user-select: text; white-space: pre-wrap; word-break: break-word;"
               data-lexical-editor="true">
               <ul>
-                <li dir="ltr" value="1">
+                <li value="1" dir="ltr">
                   <span data-lexical-text="true">A</span>
                 </li>
-                <li dir="ltr" value="2">
+                <li value="2" dir="ltr">
                   <span data-lexical-text="true">B</span>
                 </li>
               </ul>
@@ -497,15 +495,15 @@ describe('LexicalListItemNode tests', () => {
               <ul>
                 <li value="1">
                   <ul>
-                    <li dir="ltr" value="1">
+                    <li value="1" dir="ltr">
                       <span data-lexical-text="true">A</span>
                     </li>
                   </ul>
                 </li>
-                <li dir="ltr" value="1">
+                <li value="1" dir="ltr">
                   <span data-lexical-text="true">x</span>
                 </li>
-                <li dir="ltr" value="2">
+                <li value="2" dir="ltr">
                   <span data-lexical-text="true">B</span>
                 </li>
               </ul>
@@ -525,12 +523,12 @@ describe('LexicalListItemNode tests', () => {
               <ul>
                 <li value="1">
                   <ul>
-                    <li dir="ltr" value="1">
+                    <li value="1" dir="ltr">
                       <span data-lexical-text="true">A</span>
                     </li>
                   </ul>
                 </li>
-                <li dir="ltr" value="1">
+                <li value="1" dir="ltr">
                   <span data-lexical-text="true">B</span>
                 </li>
               </ul>
@@ -575,15 +573,15 @@ describe('LexicalListItemNode tests', () => {
               style="user-select: text; white-space: pre-wrap; word-break: break-word;"
               data-lexical-editor="true">
               <ul>
-                <li dir="ltr" value="1">
+                <li value="1" dir="ltr">
                   <span data-lexical-text="true">A</span>
                 </li>
-                <li dir="ltr" value="2">
+                <li value="2" dir="ltr">
                   <span data-lexical-text="true">x</span>
                 </li>
                 <li value="3">
                   <ul>
-                    <li dir="ltr" value="1">
+                    <li value="1" dir="ltr">
                       <span data-lexical-text="true">B</span>
                     </li>
                   </ul>
@@ -603,12 +601,12 @@ describe('LexicalListItemNode tests', () => {
               style="user-select: text; white-space: pre-wrap; word-break: break-word;"
               data-lexical-editor="true">
               <ul>
-                <li dir="ltr" value="1">
+                <li value="1" dir="ltr">
                   <span data-lexical-text="true">A</span>
                 </li>
                 <li value="2">
                   <ul>
-                    <li dir="ltr" value="1">
+                    <li value="1" dir="ltr">
                       <span data-lexical-text="true">B</span>
                     </li>
                   </ul>
@@ -661,17 +659,17 @@ describe('LexicalListItemNode tests', () => {
               <ul>
                 <li value="1">
                   <ul>
-                    <li dir="ltr" value="1">
+                    <li value="1" dir="ltr">
                       <span data-lexical-text="true">A</span>
                     </li>
                   </ul>
                 </li>
-                <li dir="ltr" value="1">
+                <li value="1" dir="ltr">
                   <span data-lexical-text="true">x</span>
                 </li>
                 <li value="2">
                   <ul>
-                    <li dir="ltr" value="1">
+                    <li value="1" dir="ltr">
                       <span data-lexical-text="true">B</span>
                     </li>
                   </ul>
@@ -693,10 +691,10 @@ describe('LexicalListItemNode tests', () => {
               <ul>
                 <li value="1">
                   <ul>
-                    <li dir="ltr" value="1">
+                    <li value="1" dir="ltr">
                       <span data-lexical-text="true">A</span>
                     </li>
-                    <li dir="ltr" value="2">
+                    <li value="2" dir="ltr">
                       <span data-lexical-text="true">B</span>
                     </li>
                   </ul>
@@ -757,24 +755,24 @@ describe('LexicalListItemNode tests', () => {
               <ul>
                 <li value="1">
                   <ul>
-                    <li dir="ltr" value="1">
+                    <li value="1" dir="ltr">
                       <span data-lexical-text="true">A1</span>
                     </li>
                     <li value="2">
                       <ul>
-                        <li dir="ltr" value="1">
+                        <li value="1" dir="ltr">
                           <span data-lexical-text="true">A2</span>
                         </li>
                       </ul>
                     </li>
                   </ul>
                 </li>
-                <li dir="ltr" value="1">
+                <li value="1" dir="ltr">
                   <span data-lexical-text="true">x</span>
                 </li>
                 <li value="2">
                   <ul>
-                    <li dir="ltr" value="1">
+                    <li value="1" dir="ltr">
                       <span data-lexical-text="true">B</span>
                     </li>
                   </ul>
@@ -796,17 +794,17 @@ describe('LexicalListItemNode tests', () => {
               <ul>
                 <li value="1">
                   <ul>
-                    <li dir="ltr" value="1">
+                    <li value="1" dir="ltr">
                       <span data-lexical-text="true">A1</span>
                     </li>
                     <li value="2">
                       <ul>
-                        <li dir="ltr" value="1">
+                        <li value="1" dir="ltr">
                           <span data-lexical-text="true">A2</span>
                         </li>
                       </ul>
                     </li>
-                    <li dir="ltr" value="2">
+                    <li value="2" dir="ltr">
                       <span data-lexical-text="true">B</span>
                     </li>
                   </ul>
@@ -867,24 +865,24 @@ describe('LexicalListItemNode tests', () => {
               <ul>
                 <li value="1">
                   <ul>
-                    <li dir="ltr" value="1">
+                    <li value="1" dir="ltr">
                       <span data-lexical-text="true">A</span>
                     </li>
                   </ul>
                 </li>
-                <li dir="ltr" value="1">
+                <li value="1" dir="ltr">
                   <span data-lexical-text="true">x</span>
                 </li>
                 <li value="2">
                   <ul>
                     <li value="1">
                       <ul>
-                        <li dir="ltr" value="1">
+                        <li value="1" dir="ltr">
                           <span data-lexical-text="true">B1</span>
                         </li>
                       </ul>
                     </li>
-                    <li dir="ltr" value="1">
+                    <li value="1" dir="ltr">
                       <span data-lexical-text="true">B2</span>
                     </li>
                   </ul>
@@ -906,17 +904,17 @@ describe('LexicalListItemNode tests', () => {
               <ul>
                 <li value="1">
                   <ul>
-                    <li dir="ltr" value="1">
+                    <li value="1" dir="ltr">
                       <span data-lexical-text="true">A</span>
                     </li>
                     <li value="2">
                       <ul>
-                        <li dir="ltr" value="1">
+                        <li value="1" dir="ltr">
                           <span data-lexical-text="true">B1</span>
                         </li>
                       </ul>
                     </li>
-                    <li dir="ltr" value="2">
+                    <li value="2" dir="ltr">
                       <span data-lexical-text="true">B2</span>
                     </li>
                   </ul>
@@ -985,31 +983,31 @@ describe('LexicalListItemNode tests', () => {
               <ul>
                 <li value="1">
                   <ul>
-                    <li dir="ltr" value="1">
+                    <li value="1" dir="ltr">
                       <span data-lexical-text="true">A1</span>
                     </li>
                     <li value="2">
                       <ul>
-                        <li dir="ltr" value="1">
+                        <li value="1" dir="ltr">
                           <span data-lexical-text="true">A2</span>
                         </li>
                       </ul>
                     </li>
                   </ul>
                 </li>
-                <li dir="ltr" value="1">
+                <li value="1" dir="ltr">
                   <span data-lexical-text="true">x</span>
                 </li>
                 <li value="2">
                   <ul>
                     <li value="1">
                       <ul>
-                        <li dir="ltr" value="1">
+                        <li value="1" dir="ltr">
                           <span data-lexical-text="true">B1</span>
                         </li>
                       </ul>
                     </li>
-                    <li dir="ltr" value="1">
+                    <li value="1" dir="ltr">
                       <span data-lexical-text="true">B2</span>
                     </li>
                   </ul>
@@ -1031,20 +1029,20 @@ describe('LexicalListItemNode tests', () => {
               <ul>
                 <li value="1">
                   <ul>
-                    <li dir="ltr" value="1">
+                    <li value="1" dir="ltr">
                       <span data-lexical-text="true">A1</span>
                     </li>
                     <li value="2">
                       <ul>
-                        <li dir="ltr" value="1">
+                        <li value="1" dir="ltr">
                           <span data-lexical-text="true">A2</span>
                         </li>
-                        <li dir="ltr" value="2">
+                        <li value="2" dir="ltr">
                           <span data-lexical-text="true">B1</span>
                         </li>
                       </ul>
                     </li>
-                    <li dir="ltr" value="2">
+                    <li value="2" dir="ltr">
                       <span data-lexical-text="true">B2</span>
                     </li>
                   </ul>
@@ -1089,13 +1087,13 @@ describe('LexicalListItemNode tests', () => {
               style="user-select: text; white-space: pre-wrap; word-break: break-word;"
               data-lexical-editor="true">
               <ul>
-                <li dir="ltr" value="1">
+                <li value="1" dir="ltr">
                   <span data-lexical-text="true">one</span>
                 </li>
-                <li dir="ltr" value="2">
+                <li value="2" dir="ltr">
                   <span data-lexical-text="true">two</span>
                 </li>
-                <li dir="ltr" value="3">
+                <li value="3" dir="ltr">
                   <span data-lexical-text="true">three</span>
                 </li>
               </ul>
@@ -1119,14 +1117,14 @@ describe('LexicalListItemNode tests', () => {
               style="user-select: text; white-space: pre-wrap; word-break: break-word;"
               data-lexical-editor="true">
               <ul>
-                <li dir="ltr" value="1">
+                <li value="1" dir="ltr">
                   <span data-lexical-text="true">one</span>
                 </li>
-                <li value="2"><br /></li>
+                <li value="2"><br></li>
-                <li dir="ltr" value="3">
+                <li value="3" dir="ltr">
                   <span data-lexical-text="true">two</span>
                 </li>
-                <li dir="ltr" value="4">
+                <li value="4" dir="ltr">
                   <span data-lexical-text="true">three</span>
                 </li>
               </ul>
@@ -1150,16 +1148,16 @@ describe('LexicalListItemNode tests', () => {
               style="user-select: text; white-space: pre-wrap; word-break: break-word;"
               data-lexical-editor="true">
               <ul>
-                <li dir="ltr" value="1">
+                <li value="1" dir="ltr">
                   <span data-lexical-text="true">one</span>
                 </li>
-                <li dir="ltr" value="2">
+                <li value="2" dir="ltr">
                   <span data-lexical-text="true">two</span>
                 </li>
-                <li dir="ltr" value="3">
+                <li value="3" dir="ltr">
                   <span data-lexical-text="true">three</span>
                 </li>
-                <li value="4"><br /></li>
+                <li value="4"><br></li>
               </ul>
             </div>
           `,
@@ -1181,16 +1179,16 @@ describe('LexicalListItemNode tests', () => {
               style="user-select: text; white-space: pre-wrap; word-break: break-word;"
               data-lexical-editor="true">
               <ul>
-                <li dir="ltr" value="1">
+                <li value="1" dir="ltr">
                   <span data-lexical-text="true">one</span>
                 </li>
-                <li dir="ltr" value="2">
+                <li value="2" dir="ltr">
                   <span data-lexical-text="true">two</span>
                 </li>
-                <li dir="ltr" value="3">
+                <li value="3" dir="ltr">
                   <span data-lexical-text="true">three</span>
                 </li>
-                <li value="4"><br /></li>
+                <li value="4"><br></li>
               </ul>
             </div>
           `,
@@ -1213,7 +1211,7 @@ describe('LexicalListItemNode tests', () => {
               style="user-select: text; white-space: pre-wrap; word-break: break-word;"
               data-lexical-editor="true">
               <ul>
-                <li dir="ltr" value="1">
+                <li value="1" dir="ltr">
                   <span data-lexical-text="true">one</span>
                 </li>
               </ul>
@@ -1233,10 +1231,10 @@ describe('LexicalListItemNode tests', () => {
               style="user-select: text; white-space: pre-wrap; word-break: break-word;"
               data-lexical-editor="true">
               <ul>
-                <li dir="ltr" value="1">
+                <li value="1" dir="ltr">
                   <span data-lexical-text="true">one</span>
                 </li>
-                <li value="2"><br /></li>
+                <li value="2"><br></li>
               </ul>
             </div>
           `,
@@ -1310,7 +1308,7 @@ describe('LexicalListItemNode tests', () => {
                     <ul>
                       <li value="1">
                         <ul>
-                          <li dir="ltr" value="1">
+                          <li value="1" dir="ltr">
                             <span data-lexical-text="true">one</span>
                           </li>
                         </ul>
@@ -1319,7 +1317,7 @@ describe('LexicalListItemNode tests', () => {
                   </li>
                 </ul>
               </li>
-              <li dir="ltr" value="1">
+              <li value="1" dir="ltr">
                 <span data-lexical-text="true">two</span>
               </li>
             </ul>
@@ -1338,10 +1336,10 @@ describe('LexicalListItemNode tests', () => {
           editor.getRootElement()!.innerHTML,
           html`
             <ul>
-              <li dir="ltr" value="1">
+              <li value="1" dir="ltr">
                 <span data-lexical-text="true">one</span>
               </li>
-              <li dir="ltr" value="2">
+              <li value="2" dir="ltr">
                 <span data-lexical-text="true">two</span>
               </li>
             </ul>

resources/js/wysiwyg/lexical/list/__tests__/utils.ts

@@ -1,33 +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 {expect} from '@playwright/test';
-import prettier from 'prettier';
-
-// This tag function is just used to trigger prettier auto-formatting.
-// (https://prettier.io/blog/2020/08/24/2.1.0.html#api)
-export function html(
-  partials: TemplateStringsArray,
-  ...params: string[]
-): string {
-  let output = '';
-  for (let i = 0; i < partials.length; i++) {
-    output += partials[i];
-    if (i < partials.length - 1) {
-      output += params[i];
-    }
-  }
-  return output;
-}
-
-export function expectHtmlToBeEqual(expected: string, actual: string): void {
-  expect(prettifyHtml(expected)).toBe(prettifyHtml(actual));
-}
-
-export function prettifyHtml(s: string): string {
-  return prettier.format(s.replace(/\n/g, ''), {parser: 'html'});
-}

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

@@ -8,13 +8,7 @@
 
 import {$createLinkNode} from '@lexical/link';
 import {$createListItemNode, $createListNode} from '@lexical/list';
-import {AutoFocusPlugin} from '@lexical/react/LexicalAutoFocusPlugin';
+import {$createHeadingNode, registerRichText} from '@lexical/rich-text';
-import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
-import {ContentEditable} from '@lexical/react/LexicalContentEditable';
-import {LexicalErrorBoundary} from '@lexical/react/LexicalErrorBoundary';
-import {HistoryPlugin} from '@lexical/react/LexicalHistoryPlugin';
-import {RichTextPlugin} from '@lexical/react/LexicalRichTextPlugin';
-import {$createHeadingNode} from '@lexical/rich-text';
 import {
   $addNodeStyle,
   $getSelectionStyleValueForProperty,
@@ -28,7 +22,7 @@ import {
   $createRangeSelection,
   $createTextNode,
   $getRoot,
-  $getSelection,
+  $getSelection, $insertNodes,
   $isElementNode,
   $isRangeSelection,
   $isTextNode,
@@ -49,10 +43,7 @@ import {
   createTestEditor,
   initializeClipboard,
   invariant,
-  TestComposer,
 } from 'lexical/__tests__/utils';
-import {createRoot, Root} from 'react-dom/client';
-import * as ReactTestUtils from 'lexical/shared/react-test-utils';
 
 import {
   $setAnchorPoint,
@@ -81,6 +72,8 @@ import {
   setNativeSelectionWithPaths,
   undo,
 } from '../utils';
+import {createEmptyHistoryState, registerHistory} from "@lexical/history";
+import {mergeRegister} from "@lexical/utils";
 
 interface ExpectedSelection {
   anchorPath: number[];
@@ -118,37 +111,27 @@ Range.prototype.getBoundingClientRect = function (): DOMRect {
 
 describe('LexicalSelection tests', () => {
   let container: HTMLElement;
-  let reactRoot: Root;
+  let root: HTMLDivElement;
   let editor: LexicalEditor | null = null;
 
   beforeEach(async () => {
     container = document.createElement('div');
     document.body.appendChild(container);
-    reactRoot = createRoot(container);
+
+    root = document.createElement('div');
+    root.setAttribute('contenteditable', 'true');
+    container.append(root);
+
     await init();
   });
 
   afterEach(async () => {
-    // Ensure we are clearing out any React state and running effects with
-    // act
-    await ReactTestUtils.act(async () => {
-      reactRoot.unmount();
-      await Promise.resolve().then();
-    });
     document.body.removeChild(container);
   });
 
   async function init() {
-    function TestBase() {
-      function TestPlugin() {
-        [editor] = useLexicalComposerContext();
 
-        return null;
+    editor = createTestEditor({
-      }
-
-      return (
-        <TestComposer
-          config={{
       nodes: [],
       theme: {
         code: 'editor-code',
@@ -178,29 +161,22 @@ describe('LexicalSelection tests', () => {
           underline: 'editor-text-underline',
           underlineStrikethrough: 'editor-text-underlineStrikethrough',
         },
-            },
-          }}>
-          <RichTextPlugin
-            contentEditable={
-              // eslint-disable-next-line jsx-a11y/aria-role, @typescript-eslint/no-explicit-any
-              <ContentEditable role={null as any} spellCheck={null as any} />
       }
-            placeholder={null}
-            ErrorBoundary={LexicalErrorBoundary}
-          />
-          <HistoryPlugin />
-          <TestPlugin />
-          <AutoFocusPlugin />
-        </TestComposer>
-      );
-    }
-
-    await ReactTestUtils.act(async () => {
-      reactRoot.render(<TestBase />);
-      await Promise.resolve().then();
     });
 
-    await Promise.resolve().then();
+    mergeRegister(
+      registerHistory(editor, createEmptyHistoryState(), 300),
+      registerRichText(editor),
+    );
+
+    editor.setRootElement(root);
+    editor.update(() => {
+        const p = $createParagraphNode();
+        $insertNodes([p]);
+    });
+    editor.commitUpdates();
+    editor.focus();
+
     // Focus first element
     setNativeSelectionWithPaths(
       editor!.getRootElement()!,
@@ -212,9 +188,8 @@ describe('LexicalSelection tests', () => {
   }
 
   async function update(fn: () => void) {
-    await ReactTestUtils.act(async () => {
+    editor!.update(fn);
-      await editor!.update(fn);
+    editor!.commitUpdates();
-    });
   }
 
   test('Expect initial output to be a block with no text.', () => {
@@ -734,301 +709,6 @@ describe('LexicalSelection tests', () => {
       name: 'Format selection that contains a token node in the middle should format the token node',
     },
 
-    // Tests need fixing:
-    // ...GRAPHEME_SCENARIOS.flatMap(({description, grapheme}) => [
-    //   {
-    //     name: `Delete backward eliminates entire ${description} (${grapheme})`,
-    //     inputs: [insertText(grapheme + grapheme), deleteBackward(1)],
-    //     expectedHTML: `<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir=\"ltr\"><span>${grapheme}</span></p></div>`,
-    //     expectedSelection: {
-    //       anchorPath: [0, 0, 0],
-    //       anchorOffset: grapheme.length,
-    //       focusPath: [0, 0, 0],
-    //       focusOffset: grapheme.length,
-    //     },
-    //     setup: emptySetup,
-    //   },
-    //   {
-    //     name: `Delete forward eliminates entire ${description} (${grapheme})`,
-    //     inputs: [
-    //       insertText(grapheme + grapheme),
-    //       moveNativeSelection([0, 0, 0], 0, [0, 0, 0], 0),
-    //       deleteForward(),
-    //     ],
-    //     expectedHTML: `<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir=\"ltr\"><span>${grapheme}</span></p></div>`,
-    //     expectedSelection: {
-    //       anchorPath: [0, 0, 0],
-    //       anchorOffset: 0,
-    //       focusPath: [0, 0, 0],
-    //       focusOffset: 0,
-    //     },
-    //     setup: emptySetup,
-    //   },
-    //   {
-    //     name: `Move backward skips over grapheme cluster (${grapheme})`,
-    //     inputs: [insertText(grapheme + grapheme), moveBackward(1)],
-    //     expectedHTML: `<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir=\"ltr\"><span>${grapheme}${grapheme}</span></p></div>`,
-    //     expectedSelection: {
-    //       anchorPath: [0, 0, 0],
-    //       anchorOffset: grapheme.length,
-    //       focusPath: [0, 0, 0],
-    //       focusOffset: grapheme.length,
-    //     },
-    //     setup: emptySetup,
-    //   },
-    //   {
-    //     name: `Move forward skips over grapheme cluster (${grapheme})`,
-    //     inputs: [
-    //       insertText(grapheme + grapheme),
-    //       moveNativeSelection([0, 0, 0], 0, [0, 0, 0], 0),
-    //       moveForward(),
-    //     ],
-    //     expectedHTML: `<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir=\"ltr\"><span>${grapheme}${grapheme}</span></p></div>`,
-    //     expectedSelection: {
-    //       anchorPath: [0, 0, 0],
-    //       anchorOffset: grapheme.length,
-    //       focusPath: [0, 0, 0],
-    //       focusOffset: grapheme.length,
-    //     },
-    //     setup: emptySetup,
-    //   },
-    // ]),
-    // {
-    //   name: 'Jump to beginning and insert',
-    //   inputs: [
-    //     insertText('1'),
-    //     insertText('1'),
-    //     insertText('2'),
-    //     insertText('3'),
-    //     moveNativeSelection([0, 0, 0], 0, [0, 0, 0], 0),
-    //     insertText('a'),
-    //     insertText('b'),
-    //     insertText('c'),
-    //     deleteForward(),
-    //   ],
-    //   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">abc123</span></p></div>',
-    //   expectedSelection: {
-    //     anchorPath: [0, 0, 0],
-    //     anchorOffset: 3,
-    //     focusPath: [0, 0, 0],
-    //     focusOffset: 3,
-    //   },
-    // },
-    // {
-    //   name: 'Select and replace',
-    //   inputs: [
-    //     insertText('Hello draft!'),
-    //     moveNativeSelection([0, 0, 0], 6, [0, 0, 0], 11),
-    //     insertText('lexical'),
-    //   ],
-    //   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 lexical!</span></p></div>',
-    //   expectedSelection: {
-    //     anchorPath: [0, 0, 0],
-    //     anchorOffset: 13,
-    //     focusPath: [0, 0, 0],
-    //     focusOffset: 13,
-    //   },
-    // },
-    // {
-    //   name: 'Select and bold',
-    //   inputs: [
-    //     insertText('Hello draft!'),
-    //     moveNativeSelection([0, 0, 0], 6, [0, 0, 0], 11),
-    //     formatBold(),
-    //   ],
-    //   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>' +
-    //     '<strong class="editor-text-bold" data-lexical-text="true">draft</strong><span data-lexical-text="true">!</span></p></div>',
-    //   expectedSelection: {
-    //     anchorPath: [0, 1, 0],
-    //     anchorOffset: 0,
-    //     focusPath: [0, 1, 0],
-    //     focusOffset: 5,
-    //   },
-    // },
-    // {
-    //   name: 'Select and italic',
-    //   inputs: [
-    //     insertText('Hello draft!'),
-    //     moveNativeSelection([0, 0, 0], 6, [0, 0, 0], 11),
-    //     formatItalic(),
-    //   ],
-    //   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>' +
-    //     '<em class="editor-text-italic" data-lexical-text="true">draft</em><span data-lexical-text="true">!</span></p></div>',
-    //   expectedSelection: {
-    //     anchorPath: [0, 1, 0],
-    //     anchorOffset: 0,
-    //     focusPath: [0, 1, 0],
-    //     focusOffset: 5,
-    //   },
-    // },
-    // {
-    //   name: 'Select and bold + italic',
-    //   inputs: [
-    //     insertText('Hello draft!'),
-    //     moveNativeSelection([0, 0, 0], 6, [0, 0, 0], 11),
-    //     formatBold(),
-    //     formatItalic(),
-    //   ],
-    //   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>' +
-    //     '<strong class="editor-text-bold editor-text-italic" data-lexical-text="true">draft</strong><span data-lexical-text="true">!</span></p></div>',
-    //   expectedSelection: {
-    //     anchorPath: [0, 1, 0],
-    //     anchorOffset: 0,
-    //     focusPath: [0, 1, 0],
-    //     focusOffset: 5,
-    //   },
-    // },
-    // {
-    //   name: 'Select and underline',
-    //   inputs: [
-    //     insertText('Hello draft!'),
-    //     moveNativeSelection([0, 0, 0], 6, [0, 0, 0], 11),
-    //     formatUnderline(),
-    //   ],
-    //   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>' +
-    //     '<span class="editor-text-underline" data-lexical-text="true">draft</span><span data-lexical-text="true">!</span></p></div>',
-    //   expectedSelection: {
-    //     anchorPath: [0, 1, 0],
-    //     anchorOffset: 0,
-    //     focusPath: [0, 1, 0],
-    //     focusOffset: 5,
-    //   },
-    // },
-    // {
-    //   name: 'Select and strikethrough',
-    //   inputs: [
-    //     insertText('Hello draft!'),
-    //     moveNativeSelection([0, 0, 0], 6, [0, 0, 0], 11),
-    //     formatStrikeThrough(),
-    //   ],
-    //   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>' +
-    //     '<span class="editor-text-strikethrough" data-lexical-text="true">draft</span><span data-lexical-text="true">!</span></p></div>',
-    //   expectedSelection: {
-    //     anchorPath: [0, 1, 0],
-    //     anchorOffset: 0,
-    //     focusPath: [0, 1, 0],
-    //     focusOffset: 5,
-    //   },
-    // },
-    // {
-    //   name: 'Select and underline + strikethrough',
-    //   inputs: [
-    //     insertText('Hello draft!'),
-    //     moveNativeSelection([0, 0, 0], 6, [0, 0, 0], 11),
-    //     formatUnderline(),
-    //     formatStrikeThrough(),
-    //   ],
-    //   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>' +
-    //     '<span class="editor-text-underlineStrikethrough" data-lexical-text="true">draft</span><span data-lexical-text="true">!</span></p></div>',
-    //   expectedSelection: {
-    //     anchorPath: [0, 1, 0],
-    //     anchorOffset: 0,
-    //     focusPath: [0, 1, 0],
-    //     focusOffset: 5,
-    //   },
-    // },
-    // {
-    //   name: 'Select and replace all',
-    //   inputs: [
-    //     insertText('This is broken.'),
-    //     moveNativeSelection([0, 0, 0], 0, [0, 0, 0], 15),
-    //     insertText('This works!'),
-    //   ],
-    //   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">This works!</span></p></div>',
-    //   expectedSelection: {
-    //     anchorPath: [0, 0, 0],
-    //     anchorOffset: 11,
-    //     focusPath: [0, 0, 0],
-    //     focusOffset: 11,
-    //   },
-    // },
-    // {
-    //   name: 'Select and delete',
-    //   inputs: [
-    //     insertText('A lion.'),
-    //     moveNativeSelection([0, 0, 0], 2, [0, 0, 0], 6),
-    //     deleteForward(),
-    //     insertText('duck'),
-    //     moveNativeSelection([0, 0, 0], 2, [0, 0, 0], 6),
-    //   ],
-    //   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 duck.</span></p></div>',
-    //   expectedSelection: {
-    //     anchorPath: [0, 0, 0],
-    //     anchorOffset: 2,
-    //     focusPath: [0, 0, 0],
-    //     focusOffset: 6,
-    //   },
-    // },
-    // {
-    //   name: 'Inserting a paragraph',
-    //   inputs: [insertParagraph()],
-    //   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"><br></span></p>' +
-    //     '<p class="editor-paragraph"><span data-lexical-text="true"><br></span></p></div>',
-    //   expectedSelection: {
-    //     anchorPath: [1, 0, 0],
-    //     anchorOffset: 0,
-    //     focusPath: [1, 0, 0],
-    //     focusOffset: 0,
-    //   },
-    // },
-    // {
-    //   name: 'Inserting a paragraph and then removing it',
-    //   inputs: [insertParagraph(), deleteBackward(1)],
-    //   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"><br></span></p></div>',
-    //   expectedSelection: {
-    //     anchorPath: [0, 0, 0],
-    //     anchorOffset: 0,
-    //     focusPath: [0, 0, 0],
-    //     focusOffset: 0,
-    //   },
-    // },
-    // {
-    //   name: 'Inserting a paragraph part way through text',
-    //   inputs: [
-    //     insertText('Hello world'),
-    //     moveNativeSelection([0, 0, 0], 6, [0, 0, 0], 6),
-    //     insertParagraph(),
-    //   ],
-    //   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>' +
-    //     '<p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">world</span></p></div>',
-    //   expectedSelection: {
-    //     anchorPath: [1, 0, 0],
-    //     anchorOffset: 0,
-    //     focusPath: [1, 0, 0],
-    //     focusOffset: 0,
-    //   },
-    // },
-    // {
-    //   name: 'Inserting two paragraphs and then deleting via selection',
-    //   inputs: [
-    //     insertText('123'),
-    //     insertParagraph(),
-    //     insertText('456'),
-    //     moveNativeSelection([0, 0, 0], 0, [1, 0, 0], 3),
-    //     deleteBackward(1),
-    //   ],
-    //   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"><br></span></p></div>',
-    //   expectedSelection: {
-    //     anchorPath: [0, 0, 0],
-    //     anchorOffset: 0,
-    //     focusPath: [0, 0, 0],
-    //     focusOffset: 0,
-    //   },
-    // },
     ...[
       {
         whitespaceCharacter: ' ',
@@ -1254,7 +934,6 @@ describe('LexicalSelection tests', () => {
   });
 
   test('insert text one selected node element selection', async () => {
-    await ReactTestUtils.act(async () => {
     await editor!.update(() => {
       const root = $getRoot();
 
@@ -1275,10 +954,8 @@ describe('LexicalSelection tests', () => {
       expect(root.getTextContent()).toBe('');
     });
   });
-  });
 
   test('getNodes resolves nested block nodes', async () => {
-    await ReactTestUtils.act(async () => {
     await editor!.update(() => {
       const root = $getRoot();
 
@@ -1296,7 +973,6 @@ describe('LexicalSelection tests', () => {
       expect(selectedNodes[0].getKey()).toBe(text.getKey());
     });
   });
-  });
 
   describe('Block selection moves when new nodes are inserted', () => {
     const baseCases: {
@@ -1851,7 +1527,6 @@ describe('LexicalSelection tests', () => {
           // eslint-disable-next-line no-only-tests/no-only-tests
           const test_ = only === true ? test.only : test;
           test_(name, async () => {
-            await ReactTestUtils.act(async () => {
             await editor!.update(() => {
               const root = $getRoot();
 
@@ -1896,14 +1571,12 @@ describe('LexicalSelection tests', () => {
               }
             });
           });
-          });
         },
       );
   });
 
   describe('Selection correctly resolves to a sibling ElementNode when a node is removed', () => {
     test('', async () => {
-      await ReactTestUtils.act(async () => {
       await editor!.update(() => {
         const root = $getRoot();
 
@@ -1929,11 +1602,9 @@ describe('LexicalSelection tests', () => {
       });
     });
   });
-  });
 
   describe('Selection correctly resolves to a sibling ElementNode when a selected node child is removed', () => {
     test('', async () => {
-      await ReactTestUtils.act(async () => {
       let paragraphNodeKey: string;
       await editor!.update(() => {
         const root = $getRoot();
@@ -1964,11 +1635,9 @@ describe('LexicalSelection tests', () => {
       });
     });
   });
-  });
 
   describe('Selection correctly resolves to a sibling ElementNode that has multiple children with the correct offset when a node is removed', () => {
     test('', async () => {
-      await ReactTestUtils.act(async () => {
       await editor!.update(() => {
         // Arrange
         // Root
@@ -2016,10 +1685,8 @@ describe('LexicalSelection tests', () => {
       });
     });
   });
-  });
 
   test('isBackward', async () => {
-    await ReactTestUtils.act(async () => {
     await editor!.update(() => {
       const root = $getRoot();
 
@@ -2060,7 +1727,6 @@ describe('LexicalSelection tests', () => {
       expect(selection.isBackward()).toBe(true);
     });
   });
-  });
 
   describe('Decorator text content for selection', () => {
     const baseCases: {
@@ -2144,7 +1810,6 @@ describe('LexicalSelection tests', () => {
       })
       .forEach(({name, fn, invertSelection}) => {
         it(name, async () => {
-          await ReactTestUtils.act(async () => {
           await editor!.update(() => {
             const root = $getRoot();
 
@@ -2175,7 +1840,6 @@ describe('LexicalSelection tests', () => {
         });
       });
   });
-  });
 
   describe('insertParagraph', () => {
     test('three text nodes at offset 0 on third node', async () => {
@@ -2274,7 +1938,6 @@ describe('LexicalSelection tests', () => {
     it('adjust offset for inline elements text formatting', async () => {
       await init();
 
-      await ReactTestUtils.act(async () => {
       await editor!.update(() => {
         const root = $getRoot();
 
@@ -2314,7 +1977,6 @@ describe('LexicalSelection tests', () => {
       });
     });
   });
-  });
 
   describe('Node.replace', () => {
     let text1: TextNode,
@@ -2504,7 +2166,6 @@ describe('LexicalSelection tests', () => {
 
   describe('$patchStyle', () => {
     it('should patch the style with the new style object', async () => {
-      await ReactTestUtils.act(async () => {
       await editor!.update(() => {
         const root = $getRoot();
         const paragraph = $createParagraphNode();
@@ -2551,10 +2212,8 @@ describe('LexicalSelection tests', () => {
         expect(cssColorValue).toBe('blue');
       });
     });
-    });
 
     it('should patch the style with property function', async () => {
-      await ReactTestUtils.act(async () => {
       await editor!.update(() => {
         const currentColor = 'red';
         const nextColor = 'blue';
@@ -2607,7 +2266,6 @@ describe('LexicalSelection tests', () => {
       });
     });
   });
-  });
 
   describe('$setBlocksType', () => {
     test('Collapsed selection in text', async () => {

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

@@ -7,22 +7,14 @@
  */
 
 import {$insertDataTransferForRichText} from '@lexical/clipboard';
-import {TablePlugin} from '@lexical/react/LexicalTablePlugin';
 import {
   $createTableNode,
-  $createTableNodeWithDimensions,
-  $createTableSelection,
 } from '@lexical/table';
 import {
   $createParagraphNode,
-  $createTextNode,
   $getRoot,
   $getSelection,
   $isRangeSelection,
-  $selectAll,
-  $setSelection,
-  CUT_COMMAND,
-  ParagraphNode,
 } from 'lexical';
 import {
   DataTransferMock,
@@ -30,8 +22,6 @@ import {
   invariant,
 } from 'lexical/__tests__/utils';
 
-import {$getElementForTableNode, TableNode} from '../../LexicalTableNode';
-
 export class ClipboardDataMock {
   getData: jest.Mock<string, [string]>;
   setData: jest.Mock<void, [string, string]>;
@@ -149,203 +139,7 @@ describe('LexicalTableNode tests', () => {
           `<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>`,
         );
       });
-
-      test('Cut table in the middle of a range selection', async () => {
-        const {editor} = testEnv;
-
-        await editor.update(() => {
-          const root = $getRoot();
-          const paragraph = root.getFirstChild<ParagraphNode>();
-          const beforeText = $createTextNode('text before the table');
-          const table = $createTableNodeWithDimensions(4, 4, true);
-          const afterText = $createTextNode('text after the table');
-
-          paragraph?.append(beforeText);
-          paragraph?.append(table);
-          paragraph?.append(afterText);
-        });
-        await editor.update(() => {
-          editor.focus();
-          $selectAll();
-        });
-        await editor.update(() => {
-          editor.dispatchCommand(CUT_COMMAND, {} as ClipboardEvent);
-        });
-
-        expect(testEnv.innerHTML).toBe(`<p><br></p>`);
-      });
-
-      test('Cut table as last node in range selection ', async () => {
-        const {editor} = testEnv;
-
-        await editor.update(() => {
-          const root = $getRoot();
-          const paragraph = root.getFirstChild<ParagraphNode>();
-          const beforeText = $createTextNode('text before the table');
-          const table = $createTableNodeWithDimensions(4, 4, true);
-
-          paragraph?.append(beforeText);
-          paragraph?.append(table);
-        });
-        await editor.update(() => {
-          editor.focus();
-          $selectAll();
-        });
-        await editor.update(() => {
-          editor.dispatchCommand(CUT_COMMAND, {} as ClipboardEvent);
-        });
-
-        expect(testEnv.innerHTML).toBe(`<p><br></p>`);
-      });
-
-      test('Cut table as first node in range selection ', async () => {
-        const {editor} = testEnv;
-
-        await editor.update(() => {
-          const root = $getRoot();
-          const paragraph = root.getFirstChild<ParagraphNode>();
-          const table = $createTableNodeWithDimensions(4, 4, true);
-          const afterText = $createTextNode('text after the table');
-
-          paragraph?.append(table);
-          paragraph?.append(afterText);
-        });
-        await editor.update(() => {
-          editor.focus();
-          $selectAll();
-        });
-        await editor.update(() => {
-          editor.dispatchCommand(CUT_COMMAND, {} as ClipboardEvent);
-        });
-
-        expect(testEnv.innerHTML).toBe(`<p><br></p>`);
-      });
-
-      test('Cut table is whole selection, should remove it', async () => {
-        const {editor} = testEnv;
-
-        await editor.update(() => {
-          const root = $getRoot();
-          const table = $createTableNodeWithDimensions(4, 4, true);
-          root.append(table);
-        });
-        await editor.update(() => {
-          const root = $getRoot();
-          const table = root.getLastChild<TableNode>();
-          if (table) {
-            const DOMTable = $getElementForTableNode(editor, table);
-            if (DOMTable) {
-              table
-                ?.getCellNodeFromCords(0, 0, DOMTable)
-                ?.getLastChild<ParagraphNode>()
-                ?.append($createTextNode('some text'));
-              const selection = $createTableSelection();
-              selection.set(
-                table.__key,
-                table?.getCellNodeFromCords(0, 0, DOMTable)?.__key || '',
-                table?.getCellNodeFromCords(3, 3, DOMTable)?.__key || '',
-              );
-              $setSelection(selection);
-              editor.dispatchCommand(CUT_COMMAND, {
-                preventDefault: () => {},
-                stopPropagation: () => {},
-              } as ClipboardEvent);
-            }
-          }
-        });
-
-        expect(testEnv.innerHTML).toBe(`<p><br></p>`);
-      });
-
-      test('Cut subsection of table cells, should just clear contents', async () => {
-        const {editor} = testEnv;
-
-        await editor.update(() => {
-          const root = $getRoot();
-          const table = $createTableNodeWithDimensions(4, 4, true);
-          root.append(table);
-        });
-        await editor.update(() => {
-          const root = $getRoot();
-          const table = root.getLastChild<TableNode>();
-          if (table) {
-            const DOMTable = $getElementForTableNode(editor, table);
-            if (DOMTable) {
-              table
-                ?.getCellNodeFromCords(0, 0, DOMTable)
-                ?.getLastChild<ParagraphNode>()
-                ?.append($createTextNode('some text'));
-              const selection = $createTableSelection();
-              selection.set(
-                table.__key,
-                table?.getCellNodeFromCords(0, 0, DOMTable)?.__key || '',
-                table?.getCellNodeFromCords(2, 2, DOMTable)?.__key || '',
-              );
-              $setSelection(selection);
-              editor.dispatchCommand(CUT_COMMAND, {
-                preventDefault: () => {},
-                stopPropagation: () => {},
-              } as ClipboardEvent);
-            }
-          }
-        });
-
-        expect(testEnv.innerHTML).toBe(
-          `<p><br></p><table><tr><th><p><br></p></th><th><p><br></p></th><th><p><br></p></th><th><p><br></p></th></tr><tr><th><p><br></p></th><td><p><br></p></td><td><p><br></p></td><td><p><br></p></td></tr><tr><th><p><br></p></th><td><p><br></p></td><td><p><br></p></td><td><p><br></p></td></tr><tr><th><p><br></p></th><td><p><br></p></td><td><p><br></p></td><td><p><br></p></td></tr></table>`,
-        );
-      });
-
-      test('Table plain text output validation', async () => {
-        const {editor} = testEnv;
-
-        await editor.update(() => {
-          const root = $getRoot();
-          const table = $createTableNodeWithDimensions(4, 4, true);
-          root.append(table);
-        });
-        await editor.update(() => {
-          const root = $getRoot();
-          const table = root.getLastChild<TableNode>();
-          if (table) {
-            const DOMTable = $getElementForTableNode(editor, table);
-            if (DOMTable) {
-              table
-                ?.getCellNodeFromCords(0, 0, DOMTable)
-                ?.getLastChild<ParagraphNode>()
-                ?.append($createTextNode('1'));
-              table
-                ?.getCellNodeFromCords(1, 0, DOMTable)
-                ?.getLastChild<ParagraphNode>()
-                ?.append($createTextNode(''));
-              table
-                ?.getCellNodeFromCords(2, 0, DOMTable)
-                ?.getLastChild<ParagraphNode>()
-                ?.append($createTextNode('2'));
-              table
-                ?.getCellNodeFromCords(0, 1, DOMTable)
-                ?.getLastChild<ParagraphNode>()
-                ?.append($createTextNode('3'));
-              table
-                ?.getCellNodeFromCords(1, 1, DOMTable)
-                ?.getLastChild<ParagraphNode>()
-                ?.append($createTextNode('4'));
-              table
-                ?.getCellNodeFromCords(2, 1, DOMTable)
-                ?.getLastChild<ParagraphNode>()
-                ?.append($createTextNode(''));
-              const selection = $createTableSelection();
-              selection.set(
-                table.__key,
-                table?.getCellNodeFromCords(0, 0, DOMTable)?.__key || '',
-                table?.getCellNodeFromCords(2, 1, DOMTable)?.__key || '',
-              );
-              expect(selection.getTextContent()).toBe(`1\t\t2\n3\t4\t\n`);
-            }
-          }
-        });
-      });
     },
     undefined,
-    <TablePlugin />,
   );
 });

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

@@ -19,9 +19,6 @@ import {
   TextNode,
 } from 'lexical';
 import {createTestEditor} from 'lexical/__tests__/utils';
-import {createRef, useEffect, useMemo} from 'react';
-import {createRoot, Root} from 'react-dom/client';
-import * as ReactTestUtils from 'lexical/shared/react-test-utils';
 
 describe('table selection', () => {
   let originalText: TextNode;
@@ -31,23 +28,23 @@ describe('table selection', () => {
   let paragraphKey: string;
   let textKey: string;
   let parsedEditorState: EditorState;
-  let reactRoot: Root;
+  let root: HTMLDivElement;
   let container: HTMLDivElement | null = null;
   let editor: LexicalEditor | null = null;
 
   beforeEach(() => {
     container = document.createElement('div');
-    reactRoot = createRoot(container);
+    root = document.createElement('div');
+    root.setAttribute('contenteditable', 'true');
     document.body.appendChild(container);
   });
 
-  function useLexicalEditor(
+  afterEach(() => {
-    rootElementRef: React.RefObject<HTMLDivElement>,
+    container?.remove();
-    onError?: () => void,
+  });
-  ) {
+
-    const editorInHook = useMemo(
+  function init(onError?: () => void) {
-      () =>
+    editor = createTestEditor({
-        createTestEditor({
       nodes: [],
       onError: onError || jest.fn(),
       theme: {
@@ -57,31 +54,9 @@ describe('table selection', () => {
           underline: 'editor-text-underline',
         },
       },
-        }),
+    })
-      [onError],
-    );
 
-    useEffect(() => {
+    editor.setRootElement(root);
-      const rootElement = rootElementRef.current;
-
-      editorInHook.setRootElement(rootElement);
-    }, [rootElementRef, editorInHook]);
-
-    return editorInHook;
-  }
-
-  function init(onError?: () => void) {
-    const ref = createRef<HTMLDivElement>();
-
-    function TestBase() {
-      editor = useLexicalEditor(ref, onError);
-
-      return <div ref={ref} contentEditable={true} />;
-    }
-
-    ReactTestUtils.act(() => {
-      reactRoot.render(<TestBase />);
-    });
   }
 
   async function update(fn: () => void) {

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

@@ -5,27 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-
-import {CodeHighlightNode, CodeNode} from '@lexical/code';
-import {HashtagNode} from '@lexical/hashtag';
 import {AutoLinkNode, LinkNode} from '@lexical/link';
 import {ListItemNode, ListNode} from '@lexical/list';
-import {OverflowNode} from '@lexical/overflow';
+import {HeadingNode, QuoteNode, registerRichText} from '@lexical/rich-text';
-import {AutoFocusPlugin} from '@lexical/react/LexicalAutoFocusPlugin';
-import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
-import {ContentEditable} from '@lexical/react/LexicalContentEditable';
-import {LexicalErrorBoundary} from '@lexical/react/LexicalErrorBoundary';
-import {RichTextPlugin} from '@lexical/react/LexicalRichTextPlugin';
-import {HeadingNode, QuoteNode} from '@lexical/rich-text';
 import {
   applySelectionInputs,
   pasteHTML,
-} from '@lexical/selection/src/__tests__/utils';
+} from '@lexical/selection/__tests__/utils';
 import {TableCellNode, TableNode, TableRowNode} from '@lexical/table';
-import {LexicalEditor} from 'lexical';
+import {$createParagraphNode, $insertNodes, LexicalEditor} from 'lexical';
-import {initializeClipboard, TestComposer} from 'lexical/__tests__/utils';
+import {createTestEditor, initializeClipboard} from 'lexical/__tests__/utils';
-import {createRoot} from 'react-dom/client';
-import * as ReactTestUtils from 'lexical/shared/react-test-utils';
 
 jest.mock('lexical/shared/environment', () => {
   const originalModule = jest.requireActual('lexical/shared/environment');
@@ -89,30 +78,18 @@ describe('LexicalEventHelpers', () => {
   let editor: LexicalEditor | null = null;
 
   async function init() {
-    function TestBase() {
-      function TestPlugin(): null {
-        [editor] = useLexicalComposerContext();
 
-        return null;
+    const config = {
-      }
-
-      return (
-        <TestComposer
-          config={{
       nodes: [
         LinkNode,
         HeadingNode,
         ListNode,
         ListItemNode,
         QuoteNode,
-              CodeNode,
         TableNode,
         TableCellNode,
         TableRowNode,
-              HashtagNode,
-              CodeHighlightNode,
         AutoLinkNode,
-              OverflowNode,
       ],
       theme: {
         code: 'editor-code',
@@ -144,30 +121,26 @@ describe('LexicalEventHelpers', () => {
           underlineStrikethrough: 'editor-text-underlineStrikethrough',
         },
       },
-          }}>
+    };
-          <RichTextPlugin
-            contentEditable={
-              // eslint-disable-next-line jsx-a11y/aria-role, @typescript-eslint/no-explicit-any
-              <ContentEditable role={null as any} spellCheck={null as any} />
-            }
-            placeholder={null}
-            ErrorBoundary={LexicalErrorBoundary}
-          />
-          <AutoFocusPlugin />
-          <TestPlugin />
-        </TestComposer>
-      );
-    }
 
-    ReactTestUtils.act(() => {
+    editor = createTestEditor(config);
-      createRoot(container!).render(<TestBase />);
+    registerRichText(editor);
+
+    const root = document.createElement('div');
+    root.setAttribute('contenteditable', 'true');
+    container?.append(root);
+
+    editor.setRootElement(root);
+
+    editor.update(() => {
+      $insertNodes([$createParagraphNode()])
     });
+    editor.commitUpdates();
   }
 
   async function update(fn: () => void) {
-    await ReactTestUtils.act(async () => {
     await editor!.update(fn);
-    });
+    editor?.commitUpdates();
 
     return Promise.resolve().then();
   }
@@ -549,24 +522,6 @@ describe('LexicalEventHelpers', () => {
           ],
           name: 'collapsible spaces with nested structures',
         },
-        // TODO no proper support for divs #4465
-        // {
-        //   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>',
-        //   inputs: [
-        //     pasteHTML(`
-        //     <div>
-        //     <div>
-        //     a
-        //     </div>
-        //     <div>
-        //     b
-        //     </div>
-        //     </div>
-        //     `),
-        //   ],
-        //   name: 'collapsible spaces with nested structures (2)',
-        // },
         {
           expectedHTML:
             '<p class="editor-paragraph" dir="ltr"><strong class="editor-text-bold" data-lexical-text="true">a b</strong></p>',
@@ -612,32 +567,6 @@ describe('LexicalEventHelpers', () => {
           ],
           name: 'forced line break with tabs',
         },
-        // The 3 below are not correct, they're missing the first \n -> <br> but that's a fault with
-        // the implementation of DOMParser, it works correctly in Safari
-        {
-          expectedHTML:
-            '<code class="editor-code" spellcheck="false" dir="ltr"><span data-lexical-text="true">a</span><br><span data-lexical-text="true">b</span><br><br></code>',
-          inputs: [pasteHTML(`<pre>\na\r\nb\r\n</pre>`)],
-          name: 'pre (no touchy) (1)',
-        },
-        {
-          expectedHTML:
-            '<code class="editor-code" spellcheck="false" dir="ltr"><span data-lexical-text="true">a</span><br><span data-lexical-text="true">b</span><br><br></code>',
-          inputs: [
-            pasteHTML(`
-              <pre>\na\r\nb\r\n</pre>
-          `),
-          ],
-          name: 'pre (no touchy) (2)',
-        },
-        {
-          expectedHTML:
-            '<p class="editor-paragraph" dir="ltr"><br><span data-lexical-text="true">a</span><br><span data-lexical-text="true">b</span><br><br></p>',
-          inputs: [
-            pasteHTML(`<span style="white-space: pre">\na\r\nb\r\n</span>`),
-          ],
-          name: 'white-space: pre (no touchy) (2)',
-        },
         {
           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>',

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

@@ -6,14 +6,39 @@
  *
  */
 
-import {
-  $isRootTextContentEmpty,
-  $isRootTextContentEmptyCurry,
-  $rootTextContent,
-} from '@lexical/text';
 import {$createParagraphNode, $createTextNode, $getRoot} from 'lexical';
 import {initializeUnitTest} from 'lexical/__tests__/utils';
 
+export function $rootTextContent(): string {
+  const root = $getRoot();
+
+  return root.getTextContent();
+}
+
+export function $isRootTextContentEmpty(
+    isEditorComposing: boolean,
+    trim = true,
+): boolean {
+  if (isEditorComposing) {
+    return false;
+  }
+
+  let text = $rootTextContent();
+
+  if (trim) {
+    text = text.trim();
+  }
+
+  return text === '';
+}
+
+export function $isRootTextContentEmptyCurry(
+    isEditorComposing: boolean,
+    trim?: boolean,
+): () => boolean {
+  return () => $isRootTextContentEmpty(isEditorComposing, trim);
+}
+
 describe('LexicalRootHelpers tests', () => {
   initializeUnitTest((testEnv) => {
     it('textContent', async () => {