Lexical: Finished conversion/update of test files

diff --git a/jest.config.ts b/jest.config.ts
index 11a86c672ce2376f0f370a336c7901bce60d1c12..3c04f05b218362510b2721cfca6c8d00b965e2a0 100644 (file)
--- a/jest.config.ts
+++ b/jest.config.ts
@@ -21,7 +21,7 @@ const config: Config = {
   clearMocks: true,
 
   // Indicates whether the coverage information should be collected while executing the test
   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,
 
   // 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
   // testLocationInResults: false,
 
   // The glob patterns Jest uses to detect test files

-  // testMatch: [
-  //   "**/__tests__/**/*.[jt]s?(x)",
-  //   "**/?(*.)+(spec|test).[tj]s?(x)"
-  // ],
+  testMatch: [
+    "**/__tests__/**/*.test.[jt]s",
+  ],

 
   // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
   // testPathIgnorePatterns: [
 
   // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
   // testPathIgnorePatterns: [

diff --git a/resources/js/wysiwyg/lexical/core/__tests__/utils/index.ts b/resources/js/wysiwyg/lexical/core/__tests__/utils/index.ts
index 30b0bc8c8187a6a4469da070b195c9f05d06fab0..f7230595a43d7abae8b81bdd9f52d6b36ebb439e 100644 (file)
--- a/resources/js/wysiwyg/lexical/core/__tests__/utils/index.ts
+++ b/resources/js/wysiwyg/lexical/core/__tests__/utils/index.ts
@@ -717,3 +717,11 @@ export function html(
   }
   return output;
 }
   }
   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();
+}
\ No newline at end of file

diff --git a/resources/js/wysiwyg/lexical/core/nodes/__tests__/unit/LexicalTextNode.test.ts b/resources/js/wysiwyg/lexical/core/nodes/__tests__/unit/LexicalTextNode.test.ts
index 337c96a41630c8b037810ebdaa0ca6ac4808ca70..57e1dcb3baf59bd8c120924bf687f4e29e64327a 100644 (file)
--- a/resources/js/wysiwyg/lexical/core/nodes/__tests__/unit/LexicalTextNode.test.ts
+++ b/resources/js/wysiwyg/lexical/core/nodes/__tests__/unit/LexicalTextNode.test.ts
@@ -21,7 +21,6 @@ import {
   TextModeType,
   TextNode,
 } from 'lexical';
   TextModeType,
   TextNode,
 } from 'lexical';

-import * as ReactTestUtils from 'lexical/shared/react-test-utils';

 
 import {
   $createTestSegmentedNode,
 
 import {
   $createTestSegmentedNode,

diff --git a/resources/js/wysiwyg/lexical/core/shared/react-test-utils.ts b/resources/js/wysiwyg/lexical/core/shared/react-test-utils.ts
deleted file mode 100644 (file)
index 8e08674..0000000
--- a/resources/js/wysiwyg/lexical/core/shared/react-test-utils.ts
+++ /dev/null
@@ -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;

diff --git a/resources/js/wysiwyg/lexical/link/__tests__/unit/LexicalAutoLinkNode.test.ts b/resources/js/wysiwyg/lexical/link/__tests__/unit/LexicalAutoLinkNode.test.ts
index ffcefd7c8d90751b64703e9ecb03aeb34973c2cb..0f35136821be7d88c57dfb891b8934c1c286e5f9 100644 (file)
--- a/resources/js/wysiwyg/lexical/link/__tests__/unit/LexicalAutoLinkNode.test.ts
+++ b/resources/js/wysiwyg/lexical/link/__tests__/unit/LexicalAutoLinkNode.test.ts
@@ -19,7 +19,7 @@ import {
   ParagraphNode,
   SerializedParagraphNode,
   TextNode,
   ParagraphNode,
   SerializedParagraphNode,
   TextNode,

-} from 'lexical/src';
+} from 'lexical';

 import {initializeUnitTest} from 'lexical/__tests__/utils';
 
 const editorConfig = Object.freeze({
 import {initializeUnitTest} from 'lexical/__tests__/utils';
 
 const editorConfig = Object.freeze({

diff --git a/resources/js/wysiwyg/lexical/link/__tests__/unit/LexicalLinkNode.test.ts b/resources/js/wysiwyg/lexical/link/__tests__/unit/LexicalLinkNode.test.ts
index fe978849b153776a5f9d2698845ed8f91dc5c3c3..1aff9186306a25d008000bb19f4744e1728c49ea 100644 (file)
--- a/resources/js/wysiwyg/lexical/link/__tests__/unit/LexicalLinkNode.test.ts
+++ b/resources/js/wysiwyg/lexical/link/__tests__/unit/LexicalLinkNode.test.ts
@@ -19,7 +19,7 @@ import {
   ParagraphNode,
   SerializedParagraphNode,
   TextNode,
   ParagraphNode,
   SerializedParagraphNode,
   TextNode,

-} from 'lexical/src';
+} from 'lexical';

 import {initializeUnitTest} from 'lexical/__tests__/utils';
 
 const editorConfig = Object.freeze({
 import {initializeUnitTest} from 'lexical/__tests__/utils';
 
 const editorConfig = Object.freeze({

diff --git a/resources/js/wysiwyg/lexical/list/__tests__/unit/LexicalListItemNode.test.ts b/resources/js/wysiwyg/lexical/list/__tests__/unit/LexicalListItemNode.test.ts
index a1ccd50207c2ef74eadecd1aa5e854ed9d013566..22e555f35b5e006ff274ed0e0e62e800ef6616b9 100644 (file)
--- a/resources/js/wysiwyg/lexical/list/__tests__/unit/LexicalListItemNode.test.ts
+++ b/resources/js/wysiwyg/lexical/list/__tests__/unit/LexicalListItemNode.test.ts
@@ -62,7 +62,7 @@ describe('LexicalListItemNode tests', () => {
         expectHtmlToBeEqual(
           listItemNode.createDOM(editorConfig).outerHTML,
           html`
         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`
           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();
             `,
           );
           const newListItemNode = new ListItemNode();


@@ -106,7 +106,7 @@ describe('LexicalListItemNode tests', () => {
           expectHtmlToBeEqual(
             domElement.outerHTML,
             html`
           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`
           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);
             `,
           );
           const nestedListNode = new ListNode('bullet', 1);


@@ -142,9 +142,7 @@ describe('LexicalListItemNode tests', () => {
           expectHtmlToBeEqual(
             domElement.outerHTML,
             html`
           expectHtmlToBeEqual(
             domElement.outerHTML,
             html`

-              <li
-                class="my-listItem-item-class my-nested-list-listItem-class"
-                value="1"></li>
+              <li value="1" class="my-listItem-item-class my-nested-list-listItem-class"></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>
               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>
                   <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>
                   <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>
                   <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>
               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>
                   <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>
                   <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>
                   <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>
               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>
                   <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>
                   <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>
                   <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">
               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>
               <ul>

-                <li dir="ltr" value="1">
+                <li value="1" dir="ltr">

                   <span data-lexical-text="true">two</span>
                 </li>
                   <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>
                   <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>
               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>
                   <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>
                   <span data-lexical-text="true">two</span>
                 </li>
               </ul>

-              <p><br /></p>
+              <p><br></p>

             </div>
           `,
         );
             </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>
               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>
                   <span data-lexical-text="true">one</span>
                 </li>
               </ul>

-              <p><br /></p>
+              <p><br></p>

               <ul>
               <ul>

-                <li dir="ltr" value="1">
+                <li value="1" dir="ltr">

                   <span data-lexical-text="true">three</span>
                 </li>
               </ul>
                   <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>
               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>
                   <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">
               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>
           `,
         );
             </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>
               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>
                   <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>
                   <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>
                   <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>
               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>
                   <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>
                   <span data-lexical-text="true">B</span>
                 </li>
               </ul>


@@ -497,15 +495,15 @@ describe('LexicalListItemNode tests', () => {
               <ul>
                 <li value="1">
                   <ul>
               <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>
                       <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>
                   <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>
                   <span data-lexical-text="true">B</span>
                 </li>
               </ul>


@@ -525,12 +523,12 @@ describe('LexicalListItemNode tests', () => {
               <ul>
                 <li value="1">
                   <ul>
               <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>
                       <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>
                   <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>
               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>
                   <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>
                   <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>
                       <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>
               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>
                   <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>
                       <span data-lexical-text="true">B</span>
                     </li>
                   </ul>


@@ -661,17 +659,17 @@ describe('LexicalListItemNode tests', () => {
               <ul>
                 <li value="1">
                   <ul>
               <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>
                       <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>
                   <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>
                       <span data-lexical-text="true">B</span>
                     </li>
                   </ul>


@@ -693,10 +691,10 @@ describe('LexicalListItemNode tests', () => {
               <ul>
                 <li value="1">
                   <ul>
               <ul>
                 <li value="1">
                   <ul>

-                    <li dir="ltr" value="1">
+                    <li value="1" dir="ltr">

                       <span data-lexical-text="true">A</span>
                     </li>
                       <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>
                       <span data-lexical-text="true">B</span>
                     </li>
                   </ul>


@@ -757,24 +755,24 @@ describe('LexicalListItemNode tests', () => {
               <ul>
                 <li value="1">
                   <ul>
               <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>
                       <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>
                           <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>
                   <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>
                       <span data-lexical-text="true">B</span>
                     </li>
                   </ul>


@@ -796,17 +794,17 @@ describe('LexicalListItemNode tests', () => {
               <ul>
                 <li value="1">
                   <ul>
               <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>
                       <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>
                           <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>
                       <span data-lexical-text="true">B</span>
                     </li>
                   </ul>


@@ -867,24 +865,24 @@ describe('LexicalListItemNode tests', () => {
               <ul>
                 <li value="1">
                   <ul>
               <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>
                       <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>
                   <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>
                           <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>
                       <span data-lexical-text="true">B2</span>
                     </li>
                   </ul>


@@ -906,17 +904,17 @@ describe('LexicalListItemNode tests', () => {
               <ul>
                 <li value="1">
                   <ul>
               <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>
                       <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>
                           <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>
                       <span data-lexical-text="true">B2</span>
                     </li>
                   </ul>


@@ -985,31 +983,31 @@ describe('LexicalListItemNode tests', () => {
               <ul>
                 <li value="1">
                   <ul>
               <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>
                       <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>
                           <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>
                   <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>
                           <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>
                       <span data-lexical-text="true">B2</span>
                     </li>
                   </ul>


@@ -1031,20 +1029,20 @@ describe('LexicalListItemNode tests', () => {
               <ul>
                 <li value="1">
                   <ul>
               <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>
                       <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>
                           <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>
                           <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>
                       <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>
               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>
                   <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>
                   <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>
                   <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>
               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>
                   <span data-lexical-text="true">one</span>
                 </li>

-                <li value="2"><br /></li>
-                <li dir="ltr" value="3">
+                <li value="2"><br></li>
+                <li value="3" dir="ltr">

                   <span data-lexical-text="true">two</span>
                 </li>
                   <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>
                   <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>
               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>
                   <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>
                   <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>
                   <span data-lexical-text="true">three</span>
                 </li>

-                <li value="4"><br /></li>
+                <li value="4"><br></li>

               </ul>
             </div>
           `,
               </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>
               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>
                   <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>
                   <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>
                   <span data-lexical-text="true">three</span>
                 </li>

-                <li value="4"><br /></li>
+                <li value="4"><br></li>

               </ul>
             </div>
           `,
               </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>
               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>
                   <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>
               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>
                   <span data-lexical-text="true">one</span>
                 </li>

-                <li value="2"><br /></li>
+                <li value="2"><br></li>

               </ul>
             </div>
           `,
               </ul>
             </div>
           `,


@@ -1310,7 +1308,7 @@ describe('LexicalListItemNode tests', () => {
                     <ul>
                       <li value="1">
                         <ul>
                     <ul>
                       <li value="1">
                         <ul>

-                          <li dir="ltr" value="1">
+                          <li value="1" dir="ltr">

                             <span data-lexical-text="true">one</span>
                           </li>
                         </ul>
                             <span data-lexical-text="true">one</span>
                           </li>
                         </ul>


@@ -1319,7 +1317,7 @@ describe('LexicalListItemNode tests', () => {
                   </li>
                 </ul>
               </li>
                   </li>
                 </ul>
               </li>

-              <li dir="ltr" value="1">
+              <li value="1" dir="ltr">

                 <span data-lexical-text="true">two</span>
               </li>
             </ul>
                 <span data-lexical-text="true">two</span>
               </li>
             </ul>


@@ -1338,10 +1336,10 @@ describe('LexicalListItemNode tests', () => {
           editor.getRootElement()!.innerHTML,
           html`
             <ul>
           editor.getRootElement()!.innerHTML,
           html`
             <ul>

-              <li dir="ltr" value="1">
+              <li value="1" dir="ltr">

                 <span data-lexical-text="true">one</span>
               </li>
                 <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>
                 <span data-lexical-text="true">two</span>
               </li>
             </ul>

diff --git a/resources/js/wysiwyg/lexical/list/__tests__/utils.ts b/resources/js/wysiwyg/lexical/list/__tests__/utils.ts
deleted file mode 100644 (file)
index aa95a7a..0000000
--- a/resources/js/wysiwyg/lexical/list/__tests__/utils.ts
+++ /dev/null
@@ -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'});
-}

diff --git a/resources/js/wysiwyg/lexical/selection/__tests__/unit/LexicalSelection.test.tsx b/resources/js/wysiwyg/lexical/selection/__tests__/unit/LexicalSelection.test.ts
similarity index 73%
rename from resources/js/wysiwyg/lexical/selection/__tests__/unit/LexicalSelection.test.tsx
rename to resources/js/wysiwyg/lexical/selection/__tests__/unit/LexicalSelection.test.ts
index 68e9dcab5557a0d0368683c5d8a947db62680441..665f5d854e2b0f2bd8cddf22239330f4d0fa9c26 100644 (file)
--- a/resources/js/wysiwyg/lexical/selection/__tests__/unit/LexicalSelection.test.tsx
+++ b/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 {$createLinkNode} from '@lexical/link';
 import {$createListItemNode, $createListNode} from '@lexical/list';

-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 {HistoryPlugin} from '@lexical/react/LexicalHistoryPlugin';
-import {RichTextPlugin} from '@lexical/react/LexicalRichTextPlugin';
-import {$createHeadingNode} from '@lexical/rich-text';
+import {$createHeadingNode, registerRichText} from '@lexical/rich-text';

 import {
   $addNodeStyle,
   $getSelectionStyleValueForProperty,
 import {
   $addNodeStyle,
   $getSelectionStyleValueForProperty,


@@ -28,7 +22,7 @@ import {
   $createRangeSelection,
   $createTextNode,
   $getRoot,
   $createRangeSelection,
   $createTextNode,
   $getRoot,

-  $getSelection,
+  $getSelection, $insertNodes,

   $isElementNode,
   $isRangeSelection,
   $isTextNode,
   $isElementNode,
   $isRangeSelection,
   $isTextNode,


@@ -49,10 +43,7 @@ import {
   createTestEditor,
   initializeClipboard,
   invariant,
   createTestEditor,
   initializeClipboard,
   invariant,

-  TestComposer,

 } from 'lexical/__tests__/utils';
 } from 'lexical/__tests__/utils';

-import {createRoot, Root} from 'react-dom/client';
-import * as ReactTestUtils from 'lexical/shared/react-test-utils';

 
 import {
   $setAnchorPoint,
 
 import {
   $setAnchorPoint,


@@ -81,6 +72,8 @@ import {
   setNativeSelectionWithPaths,
   undo,
 } from '../utils';
   setNativeSelectionWithPaths,
   undo,
 } from '../utils';

+import {createEmptyHistoryState, registerHistory} from "@lexical/history";
+import {mergeRegister} from "@lexical/utils";

 
 interface ExpectedSelection {
   anchorPath: number[];
 
 interface ExpectedSelection {
   anchorPath: number[];


@@ -118,89 +111,72 @@ Range.prototype.getBoundingClientRect = function (): DOMRect {
 
 describe('LexicalSelection tests', () => {
   let container: HTMLElement;
 
 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);
   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 () => {
     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() {
     document.body.removeChild(container);
   });
 
   async function init() {

-    function TestBase() {
-      function TestPlugin() {
-        [editor] = useLexicalComposerContext();

 
 

-        return null;
+    editor = createTestEditor({
+      nodes: [],
+      theme: {
+        code: 'editor-code',
+        heading: {
+          h1: 'editor-heading-h1',
+          h2: 'editor-heading-h2',
+          h3: 'editor-heading-h3',
+          h4: 'editor-heading-h4',
+          h5: 'editor-heading-h5',
+          h6: 'editor-heading-h6',
+        },
+        image: 'editor-image',
+        list: {
+          ol: 'editor-list-ol',
+          ul: 'editor-list-ul',
+        },
+        listitem: 'editor-listitem',
+        paragraph: 'editor-paragraph',
+        quote: 'editor-quote',
+        text: {
+          bold: 'editor-text-bold',
+          code: 'editor-text-code',
+          hashtag: 'editor-text-hashtag',
+          italic: 'editor-text-italic',
+          link: 'editor-text-link',
+          strikethrough: 'editor-text-strikethrough',
+          underline: 'editor-text-underline',
+          underlineStrikethrough: 'editor-text-underlineStrikethrough',
+        },

       }
       }

+    });

 
 

-      return (
-        <TestComposer
-          config={{
-            nodes: [],
-            theme: {
-              code: 'editor-code',
-              heading: {
-                h1: 'editor-heading-h1',
-                h2: 'editor-heading-h2',
-                h3: 'editor-heading-h3',
-                h4: 'editor-heading-h4',
-                h5: 'editor-heading-h5',
-                h6: 'editor-heading-h6',
-              },
-              image: 'editor-image',
-              list: {
-                ol: 'editor-list-ol',
-                ul: 'editor-list-ul',
-              },
-              listitem: 'editor-listitem',
-              paragraph: 'editor-paragraph',
-              quote: 'editor-quote',
-              text: {
-                bold: 'editor-text-bold',
-                code: 'editor-text-code',
-                hashtag: 'editor-text-hashtag',
-                italic: 'editor-text-italic',
-                link: 'editor-text-link',
-                strikethrough: 'editor-text-strikethrough',
-                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>
-      );
-    }
+    mergeRegister(
+      registerHistory(editor, createEmptyHistoryState(), 300),
+      registerRichText(editor),
+    );

 
 

-    await ReactTestUtils.act(async () => {
-      reactRoot.render(<TestBase />);
-      await Promise.resolve().then();
+    editor.setRootElement(root);
+    editor.update(() => {
+        const p = $createParagraphNode();
+        $insertNodes([p]);

     });
     });

+    editor.commitUpdates();
+    editor.focus();

 
 

-    await Promise.resolve().then();

     // Focus first element
     setNativeSelectionWithPaths(
       editor!.getRootElement()!,
     // Focus first element
     setNativeSelectionWithPaths(
       editor!.getRootElement()!,


@@ -212,9 +188,8 @@ describe('LexicalSelection tests', () => {
   }
 
   async function update(fn: () => void) {
   }
 
   async function update(fn: () => void) {

-    await ReactTestUtils.act(async () => {
-      await editor!.update(fn);
-    });
+    editor!.update(fn);
+    editor!.commitUpdates();

   }
 
   test('Expect initial output to be a block with no text.', () => {
   }
 
   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',
     },
 
       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: ' ',
     ...[
       {
         whitespaceCharacter: ' ',


@@ -1254,47 +934,43 @@ describe('LexicalSelection tests', () => {
   });
 
   test('insert text one selected node element selection', async () => {
   });
 
   test('insert text one selected node element selection', async () => {

-    await ReactTestUtils.act(async () => {
-      await editor!.update(() => {
-        const root = $getRoot();
+    await editor!.update(() => {
+      const root = $getRoot();

 
 

-        const paragraph = root.getFirstChild<ParagraphNode>()!;
+      const paragraph = root.getFirstChild<ParagraphNode>()!;

 
 

-        const elementNode = $createTestElementNode();
-        const text = $createTextNode('foo');
+      const elementNode = $createTestElementNode();
+      const text = $createTextNode('foo');

 
 

-        paragraph.append(elementNode);
-        elementNode.append(text);
+      paragraph.append(elementNode);
+      elementNode.append(text);

 
 

-        const selection = $createRangeSelection();
-        selection.anchor.set(text.__key, 0, 'text');
-        selection.focus.set(paragraph.__key, 1, 'element');
+      const selection = $createRangeSelection();
+      selection.anchor.set(text.__key, 0, 'text');
+      selection.focus.set(paragraph.__key, 1, 'element');

 
 

-        selection.insertText('');
+      selection.insertText('');

 
 

-        expect(root.getTextContent()).toBe('');
-      });
+      expect(root.getTextContent()).toBe('');

     });
   });
 
   test('getNodes resolves nested block nodes', async () => {
     });
   });
 
   test('getNodes resolves nested block nodes', async () => {

-    await ReactTestUtils.act(async () => {
-      await editor!.update(() => {
-        const root = $getRoot();
+    await editor!.update(() => {
+      const root = $getRoot();

 
 

-        const paragraph = root.getFirstChild<ParagraphNode>()!;
+      const paragraph = root.getFirstChild<ParagraphNode>()!;

 
 

-        const elementNode = $createTestElementNode();
-        const text = $createTextNode();
+      const elementNode = $createTestElementNode();
+      const text = $createTextNode();

 
 

-        paragraph.append(elementNode);
-        elementNode.append(text);
+      paragraph.append(elementNode);
+      elementNode.append(text);

 
 

-        const selectedNodes = $getSelection()!.getNodes();
+      const selectedNodes = $getSelection()!.getNodes();

 
 

-        expect(selectedNodes.length).toBe(1);
-        expect(selectedNodes[0].getKey()).toBe(text.getKey());
-      });
+      expect(selectedNodes.length).toBe(1);
+      expect(selectedNodes[0].getKey()).toBe(text.getKey());

     });
   });
 
     });
   });
 


@@ -1851,50 +1527,48 @@ describe('LexicalSelection tests', () => {
           // eslint-disable-next-line no-only-tests/no-only-tests
           const test_ = only === true ? test.only : test;
           test_(name, async () => {
           // 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();
-
-                const paragraph = root.getFirstChild<ParagraphNode>()!;
-                const textNode = $createTextNode('foo');
-                // Note: line break can't be selected by the DOM
-                const linebreak = $createLineBreakNode();
-
-                const selection = $getSelection();
-
-                if (!$isRangeSelection(selection)) {
-                  return;
-                }
-
-                const anchor = selection.anchor;
-                const focus = selection.focus;
-
-                paragraph.append(textNode, linebreak);
-
-                fnBefore(paragraph, textNode);
-
-                anchor.set(paragraph.getKey(), anchorOffset, 'element');
-                focus.set(paragraph.getKey(), focusOffset, 'element');
-
-                const {
-                  expectedAnchor,
-                  expectedAnchorOffset,
-                  expectedFocus,
-                  expectedFocusOffset,
-                } = fn(paragraph, textNode);
-
-                if (invertSelection !== true) {
-                  expect(selection.anchor.key).toBe(expectedAnchor.__key);
-                  expect(selection.anchor.offset).toBe(expectedAnchorOffset);
-                  expect(selection.focus.key).toBe(expectedFocus.__key);
-                  expect(selection.focus.offset).toBe(expectedFocusOffset);
-                } else {
-                  expect(selection.anchor.key).toBe(expectedFocus.__key);
-                  expect(selection.anchor.offset).toBe(expectedFocusOffset);
-                  expect(selection.focus.key).toBe(expectedAnchor.__key);
-                  expect(selection.focus.offset).toBe(expectedAnchorOffset);
-                }
-              });
+            await editor!.update(() => {
+              const root = $getRoot();
+
+              const paragraph = root.getFirstChild<ParagraphNode>()!;
+              const textNode = $createTextNode('foo');
+              // Note: line break can't be selected by the DOM
+              const linebreak = $createLineBreakNode();
+
+              const selection = $getSelection();
+
+              if (!$isRangeSelection(selection)) {
+                return;
+              }
+
+              const anchor = selection.anchor;
+              const focus = selection.focus;
+
+              paragraph.append(textNode, linebreak);
+
+              fnBefore(paragraph, textNode);
+
+              anchor.set(paragraph.getKey(), anchorOffset, 'element');
+              focus.set(paragraph.getKey(), focusOffset, 'element');
+
+              const {
+                expectedAnchor,
+                expectedAnchorOffset,
+                expectedFocus,
+                expectedFocusOffset,
+              } = fn(paragraph, textNode);
+
+              if (invertSelection !== true) {
+                expect(selection.anchor.key).toBe(expectedAnchor.__key);
+                expect(selection.anchor.offset).toBe(expectedAnchorOffset);
+                expect(selection.focus.key).toBe(expectedFocus.__key);
+                expect(selection.focus.offset).toBe(expectedFocusOffset);
+              } else {
+                expect(selection.anchor.key).toBe(expectedFocus.__key);
+                expect(selection.anchor.offset).toBe(expectedFocusOffset);
+                expect(selection.focus.key).toBe(expectedAnchor.__key);
+                expect(selection.focus.offset).toBe(expectedAnchorOffset);
+              }

             });
           });
         },
             });
           });
         },


@@ -1903,162 +1577,154 @@ describe('LexicalSelection tests', () => {
 
   describe('Selection correctly resolves to a sibling ElementNode when a node is removed', () => {
     test('', async () => {
 
   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();
+      await editor!.update(() => {
+        const root = $getRoot();

 
 

-          const listNode = $createListNode('bullet');
-          const listItemNode = $createListItemNode();
-          const paragraph = $createParagraphNode();
+        const listNode = $createListNode('bullet');
+        const listItemNode = $createListItemNode();
+        const paragraph = $createParagraphNode();

 
 

-          root.append(listNode);
+        root.append(listNode);

 
 

-          listNode.append(listItemNode);
-          listItemNode.select();
-          listNode.insertAfter(paragraph);
-          listItemNode.remove();
+        listNode.append(listItemNode);
+        listItemNode.select();
+        listNode.insertAfter(paragraph);
+        listItemNode.remove();

 
 

-          const selection = $getSelection();
+        const selection = $getSelection();

 
 

-          if (!$isRangeSelection(selection)) {
-            return;
-          }
+        if (!$isRangeSelection(selection)) {
+          return;
+        }

 
 

-          expect(selection.anchor.getNode().__type).toBe('paragraph');
-          expect(selection.focus.getNode().__type).toBe('paragraph');
-        });
+        expect(selection.anchor.getNode().__type).toBe('paragraph');
+        expect(selection.focus.getNode().__type).toBe('paragraph');

       });
     });
   });
 
   describe('Selection correctly resolves to a sibling ElementNode when a selected node child is removed', () => {
     test('', async () => {
       });
     });
   });
 
   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();
-
-          const paragraphNode = $createParagraphNode();
-          paragraphNodeKey = paragraphNode.__key;
-          const listNode = $createListNode('number');
-          const listItemNode1 = $createListItemNode();
-          const textNode1 = $createTextNode('foo');
-          const listItemNode2 = $createListItemNode();
-          const listNode2 = $createListNode('number');
-          const listItemNode2x1 = $createListItemNode();
-
-          listNode.append(listItemNode1, listItemNode2);
-          listItemNode1.append(textNode1);
-          listItemNode2.append(listNode2);
-          listNode2.append(listItemNode2x1);
-          root.append(paragraphNode, listNode);
-
-          listItemNode2.select();
-
-          listNode.remove();
-        });
-        await editor!.getEditorState().read(() => {
-          const selection = $assertRangeSelection($getSelection());
-          expect(selection.anchor.key).toBe(paragraphNodeKey);
-          expect(selection.focus.key).toBe(paragraphNodeKey);
-        });
+      let paragraphNodeKey: string;
+      await editor!.update(() => {
+        const root = $getRoot();
+
+        const paragraphNode = $createParagraphNode();
+        paragraphNodeKey = paragraphNode.__key;
+        const listNode = $createListNode('number');
+        const listItemNode1 = $createListItemNode();
+        const textNode1 = $createTextNode('foo');
+        const listItemNode2 = $createListItemNode();
+        const listNode2 = $createListNode('number');
+        const listItemNode2x1 = $createListItemNode();
+
+        listNode.append(listItemNode1, listItemNode2);
+        listItemNode1.append(textNode1);
+        listItemNode2.append(listNode2);
+        listNode2.append(listItemNode2x1);
+        root.append(paragraphNode, listNode);
+
+        listItemNode2.select();
+
+        listNode.remove();
+      });
+      await editor!.getEditorState().read(() => {
+        const selection = $assertRangeSelection($getSelection());
+        expect(selection.anchor.key).toBe(paragraphNodeKey);
+        expect(selection.focus.key).toBe(paragraphNodeKey);

       });
     });
   });
 
   describe('Selection correctly resolves to a sibling ElementNode that has multiple children with the correct offset when a node is removed', () => {
     test('', async () => {
       });
     });
   });
 
   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
-          //  |- Paragraph
-          //    |- Link
-          //      |- Text
-          //      |- LineBreak
-          //      |- Text
-          //    |- Text
-          const root = $getRoot();
-
-          const paragraph = $createParagraphNode();
-          const link = $createLinkNode('bullet');
-          const textOne = $createTextNode('Hello');
-          const br = $createLineBreakNode();
-          const textTwo = $createTextNode('world');
-          const textThree = $createTextNode(' ');
-
-          root.append(paragraph);
-          link.append(textOne);
-          link.append(br);
-          link.append(textTwo);
-
-          paragraph.append(link);
-          paragraph.append(textThree);
-
-          textThree.select();
-          // Act
-          textThree.remove();
-          // Assert
-          const expectedKey = link.getKey();
+      await editor!.update(() => {
+        // Arrange
+        // Root
+        //  |- Paragraph
+        //    |- Link
+        //      |- Text
+        //      |- LineBreak
+        //      |- Text
+        //    |- Text
+        const root = $getRoot();

 
 

-          const selection = $getSelection();
+        const paragraph = $createParagraphNode();
+        const link = $createLinkNode('bullet');
+        const textOne = $createTextNode('Hello');
+        const br = $createLineBreakNode();
+        const textTwo = $createTextNode('world');
+        const textThree = $createTextNode(' ');

 
 

-          if (!$isRangeSelection(selection)) {
-            return;
-          }
+        root.append(paragraph);
+        link.append(textOne);
+        link.append(br);
+        link.append(textTwo);

 
 

-          const {anchor, focus} = selection;
+        paragraph.append(link);
+        paragraph.append(textThree);

 
 

-          expect(anchor.getNode().getKey()).toBe(expectedKey);
-          expect(focus.getNode().getKey()).toBe(expectedKey);
-          expect(anchor.offset).toBe(3);
-          expect(focus.offset).toBe(3);
-        });
+        textThree.select();
+        // Act
+        textThree.remove();
+        // Assert
+        const expectedKey = link.getKey();
+
+        const selection = $getSelection();
+
+        if (!$isRangeSelection(selection)) {
+          return;
+        }
+
+        const {anchor, focus} = selection;
+
+        expect(anchor.getNode().getKey()).toBe(expectedKey);
+        expect(focus.getNode().getKey()).toBe(expectedKey);
+        expect(anchor.offset).toBe(3);
+        expect(focus.offset).toBe(3);

       });
     });
   });
 
   test('isBackward', async () => {
       });
     });
   });
 
   test('isBackward', async () => {

-    await ReactTestUtils.act(async () => {
-      await editor!.update(() => {
-        const root = $getRoot();
+    await editor!.update(() => {
+      const root = $getRoot();

 
 

-        const paragraph = root.getFirstChild<ParagraphNode>()!;
-        const paragraphKey = paragraph.getKey();
-        const textNode = $createTextNode('foo');
-        const textNodeKey = textNode.getKey();
-        // Note: line break can't be selected by the DOM
-        const linebreak = $createLineBreakNode();
+      const paragraph = root.getFirstChild<ParagraphNode>()!;
+      const paragraphKey = paragraph.getKey();
+      const textNode = $createTextNode('foo');
+      const textNodeKey = textNode.getKey();
+      // Note: line break can't be selected by the DOM
+      const linebreak = $createLineBreakNode();

 
 

-        const selection = $getSelection();
+      const selection = $getSelection();

 
 

-        if (!$isRangeSelection(selection)) {
-          return;
-        }
+      if (!$isRangeSelection(selection)) {
+        return;
+      }

 
 

-        const anchor = selection.anchor;
-        const focus = selection.focus;
-        paragraph.append(textNode, linebreak);
-        anchor.set(textNodeKey, 0, 'text');
-        focus.set(textNodeKey, 0, 'text');
+      const anchor = selection.anchor;
+      const focus = selection.focus;
+      paragraph.append(textNode, linebreak);
+      anchor.set(textNodeKey, 0, 'text');
+      focus.set(textNodeKey, 0, 'text');

 
 

-        expect(selection.isBackward()).toBe(false);
+      expect(selection.isBackward()).toBe(false);

 
 

-        anchor.set(paragraphKey, 1, 'element');
-        focus.set(paragraphKey, 1, 'element');
+      anchor.set(paragraphKey, 1, 'element');
+      focus.set(paragraphKey, 1, 'element');

 
 

-        expect(selection.isBackward()).toBe(false);
+      expect(selection.isBackward()).toBe(false);

 
 

-        anchor.set(paragraphKey, 0, 'element');
-        focus.set(paragraphKey, 1, 'element');
+      anchor.set(paragraphKey, 0, 'element');
+      focus.set(paragraphKey, 1, 'element');

 
 

-        expect(selection.isBackward()).toBe(false);
+      expect(selection.isBackward()).toBe(false);

 
 

-        anchor.set(paragraphKey, 1, 'element');
-        focus.set(paragraphKey, 0, 'element');
+      anchor.set(paragraphKey, 1, 'element');
+      focus.set(paragraphKey, 0, 'element');

 
 

-        expect(selection.isBackward()).toBe(true);
-      });
+      expect(selection.isBackward()).toBe(true);

     });
   });
 
     });
   });
 


@@ -2144,34 +1810,32 @@ describe('LexicalSelection tests', () => {
       })
       .forEach(({name, fn, invertSelection}) => {
         it(name, async () => {
       })
       .forEach(({name, fn, invertSelection}) => {
         it(name, async () => {

-          await ReactTestUtils.act(async () => {
-            await editor!.update(() => {
-              const root = $getRoot();
+          await editor!.update(() => {
+            const root = $getRoot();

 
 

-              const paragraph = root.getFirstChild<ParagraphNode>()!;
-              const textNode1 = $createTextNode('1');
-              const textNode2 = $createTextNode('2');
-              const decorator = $createTestDecoratorNode();
+            const paragraph = root.getFirstChild<ParagraphNode>()!;
+            const textNode1 = $createTextNode('1');
+            const textNode2 = $createTextNode('2');
+            const decorator = $createTestDecoratorNode();

 
 

-              paragraph.append(textNode1, decorator, textNode2);
+            paragraph.append(textNode1, decorator, textNode2);

 
 

-              const selection = $getSelection();
+            const selection = $getSelection();

 
 

-              if (!$isRangeSelection(selection)) {
-                return;
-              }
-
-              const expectedTextContent = fn({
-                anchor: invertSelection ? selection.focus : selection.anchor,
-                decorator,
-                focus: invertSelection ? selection.anchor : selection.focus,
-                paragraph,
-                textNode1,
-                textNode2,
-              });
+            if (!$isRangeSelection(selection)) {
+              return;
+            }

 
 

-              expect(selection.getTextContent()).toBe(expectedTextContent);
+            const expectedTextContent = fn({
+              anchor: invertSelection ? selection.focus : selection.anchor,
+              decorator,
+              focus: invertSelection ? selection.anchor : selection.focus,
+              paragraph,
+              textNode1,
+              textNode2,

             });
             });

+
+            expect(selection.getTextContent()).toBe(expectedTextContent);

           });
         });
       });
           });
         });
       });


@@ -2274,44 +1938,42 @@ describe('LexicalSelection tests', () => {
     it('adjust offset for inline elements text formatting', async () => {
       await init();
 
     it('adjust offset for inline elements text formatting', async () => {
       await init();
 

-      await ReactTestUtils.act(async () => {
-        await editor!.update(() => {
-          const root = $getRoot();
+      await editor!.update(() => {
+        const root = $getRoot();

 
 

-          const text1 = $createTextNode('--');
-          const text2 = $createTextNode('abc');
-          const text3 = $createTextNode('--');
+        const text1 = $createTextNode('--');
+        const text2 = $createTextNode('abc');
+        const text3 = $createTextNode('--');

 
 

-          root.append(
+        root.append(

             $createParagraphNode().append(
             $createParagraphNode().append(

-              text1,
-              $createLinkNode('https://lexical.dev').append(text2),
-              text3,
+                text1,
+                $createLinkNode('https://lexical.dev').append(text2),
+                text3,

             ),
             ),

-          );
+        );

 
 

-          $setAnchorPoint({
-            key: text1.getKey(),
-            offset: 2,
-            type: 'text',
-          });
+        $setAnchorPoint({
+          key: text1.getKey(),
+          offset: 2,
+          type: 'text',
+        });

 
 

-          $setFocusPoint({
-            key: text3.getKey(),
-            offset: 0,
-            type: 'text',
-          });
+        $setFocusPoint({
+          key: text3.getKey(),
+          offset: 0,
+          type: 'text',
+        });

 
 

-          const selection = $getSelection();
+        const selection = $getSelection();

 
 

-          if (!$isRangeSelection(selection)) {
-            return;
-          }
+        if (!$isRangeSelection(selection)) {
+          return;
+        }

 
 

-          selection.formatText('bold');
+        selection.formatText('bold');

 
 

-          expect(text2.hasFormat('bold')).toBe(true);
-        });
+        expect(text2.hasFormat('bold')).toBe(true);

       });
     });
   });
       });
     });
   });


@@ -2504,107 +2166,103 @@ describe('LexicalSelection tests', () => {
 
   describe('$patchStyle', () => {
     it('should patch the style with the new style object', async () => {
 
   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();
-          const textNode = $createTextNode('Hello, World!');
-          textNode.setStyle('font-family: serif; color: red;');
-          $addNodeStyle(textNode);
-          paragraph.append(textNode);
-          root.append(paragraph);
-
-          const selection = $createRangeSelection();
-          $setSelection(selection);
-          selection.insertParagraph();
-          $setAnchorPoint({
-            key: textNode.getKey(),
-            offset: 0,
-            type: 'text',
-          });
+      await editor!.update(() => {
+        const root = $getRoot();
+        const paragraph = $createParagraphNode();
+        const textNode = $createTextNode('Hello, World!');
+        textNode.setStyle('font-family: serif; color: red;');
+        $addNodeStyle(textNode);
+        paragraph.append(textNode);
+        root.append(paragraph);

 
 

-          $setFocusPoint({
-            key: textNode.getKey(),
-            offset: 10,
-            type: 'text',
-          });
+        const selection = $createRangeSelection();
+        $setSelection(selection);
+        selection.insertParagraph();
+        $setAnchorPoint({
+          key: textNode.getKey(),
+          offset: 0,
+          type: 'text',
+        });

 
 

-          const newStyle = {
-            color: 'blue',
-            'font-family': 'Arial',
-          };
+        $setFocusPoint({
+          key: textNode.getKey(),
+          offset: 10,
+          type: 'text',
+        });
+
+        const newStyle = {
+          color: 'blue',
+          'font-family': 'Arial',
+        };

 
 

-          $patchStyleText(selection, newStyle);
+        $patchStyleText(selection, newStyle);

 
 

-          const cssFontFamilyValue = $getSelectionStyleValueForProperty(
+        const cssFontFamilyValue = $getSelectionStyleValueForProperty(

             selection,
             'font-family',
             '',
             selection,
             'font-family',
             '',

-          );
-          expect(cssFontFamilyValue).toBe('Arial');
+        );
+        expect(cssFontFamilyValue).toBe('Arial');

 
 

-          const cssColorValue = $getSelectionStyleValueForProperty(
+        const cssColorValue = $getSelectionStyleValueForProperty(

             selection,
             'color',
             '',
             selection,
             'color',
             '',

-          );
-          expect(cssColorValue).toBe('blue');
-        });
+        );
+        expect(cssColorValue).toBe('blue');

       });
     });
 
     it('should patch the style with property function', async () => {
       });
     });
 
     it('should patch the style with property function', async () => {

-      await ReactTestUtils.act(async () => {
-        await editor!.update(() => {
-          const currentColor = 'red';
-          const nextColor = 'blue';
-
-          const root = $getRoot();
-          const paragraph = $createParagraphNode();
-          const textNode = $createTextNode('Hello, World!');
-          textNode.setStyle(`color: ${currentColor};`);
-          $addNodeStyle(textNode);
-          paragraph.append(textNode);
-          root.append(paragraph);
-
-          const selection = $createRangeSelection();
-          $setSelection(selection);
-          selection.insertParagraph();
-          $setAnchorPoint({
-            key: textNode.getKey(),
-            offset: 0,
-            type: 'text',
-          });
+      await editor!.update(() => {
+        const currentColor = 'red';
+        const nextColor = 'blue';

 
 

-          $setFocusPoint({
-            key: textNode.getKey(),
-            offset: 10,
-            type: 'text',
-          });
+        const root = $getRoot();
+        const paragraph = $createParagraphNode();
+        const textNode = $createTextNode('Hello, World!');
+        textNode.setStyle(`color: ${currentColor};`);
+        $addNodeStyle(textNode);
+        paragraph.append(textNode);
+        root.append(paragraph);

 
 

-          const newStyle = {
-            color: jest.fn(
+        const selection = $createRangeSelection();
+        $setSelection(selection);
+        selection.insertParagraph();
+        $setAnchorPoint({
+          key: textNode.getKey(),
+          offset: 0,
+          type: 'text',
+        });
+
+        $setFocusPoint({
+          key: textNode.getKey(),
+          offset: 10,
+          type: 'text',
+        });
+
+        const newStyle = {
+          color: jest.fn(

               (current: string | null, target: LexicalNode | RangeSelection) =>
               (current: string | null, target: LexicalNode | RangeSelection) =>

-                nextColor,
-            ),
-          };
+                  nextColor,
+          ),
+        };

 
 

-          $patchStyleText(selection, newStyle);
+        $patchStyleText(selection, newStyle);

 
 

-          const cssColorValue = $getSelectionStyleValueForProperty(
+        const cssColorValue = $getSelectionStyleValueForProperty(

             selection,
             'color',
             '',
             selection,
             'color',
             '',

-          );
+        );

 
 

-          expect(cssColorValue).toBe(nextColor);
-          expect(newStyle.color).toHaveBeenCalledTimes(1);
+        expect(cssColorValue).toBe(nextColor);
+        expect(newStyle.color).toHaveBeenCalledTimes(1);

 
 

-          const lastCall = newStyle.color.mock.lastCall!;
-          expect(lastCall[0]).toBe(currentColor);
-          // @ts-ignore - It expected to be a LexicalNode
-          expect($isTextNode(lastCall[1])).toBeTruthy();
-        });
+        const lastCall = newStyle.color.mock.lastCall!;
+        expect(lastCall[0]).toBe(currentColor);
+        // @ts-ignore - It expected to be a LexicalNode
+        expect($isTextNode(lastCall[1])).toBeTruthy();

       });
     });
   });
       });
     });
   });

diff --git a/resources/js/wysiwyg/lexical/table/__tests__/unit/LexicalTableNode.test.tsx b/resources/js/wysiwyg/lexical/table/__tests__/unit/LexicalTableNode.test.ts
similarity index 53%
rename from resources/js/wysiwyg/lexical/table/__tests__/unit/LexicalTableNode.test.tsx
rename to resources/js/wysiwyg/lexical/table/__tests__/unit/LexicalTableNode.test.ts
index 37049e598d6a58025a57a0374ea9d98ea7aedf8b..6ce133d184e3eda1e57aaac4ea2655ff8ca8bf0b 100644 (file)
--- a/resources/js/wysiwyg/lexical/table/__tests__/unit/LexicalTableNode.test.tsx
+++ b/resources/js/wysiwyg/lexical/table/__tests__/unit/LexicalTableNode.test.ts
@@ -7,22 +7,14 @@
  */
 
 import {$insertDataTransferForRichText} from '@lexical/clipboard';
  */
 
 import {$insertDataTransferForRichText} from '@lexical/clipboard';

-import {TablePlugin} from '@lexical/react/LexicalTablePlugin';

 import {
   $createTableNode,
 import {
   $createTableNode,

-  $createTableNodeWithDimensions,
-  $createTableSelection,

 } from '@lexical/table';
 import {
   $createParagraphNode,
 } from '@lexical/table';
 import {
   $createParagraphNode,

-  $createTextNode,

   $getRoot,
   $getSelection,
   $isRangeSelection,
   $getRoot,
   $getSelection,
   $isRangeSelection,

-  $selectAll,
-  $setSelection,
-  CUT_COMMAND,
-  ParagraphNode,

 } from 'lexical';
 import {
   DataTransferMock,
 } from 'lexical';
 import {
   DataTransferMock,


@@ -30,8 +22,6 @@ import {
   invariant,
 } from 'lexical/__tests__/utils';
 
   invariant,
 } from 'lexical/__tests__/utils';
 

-import {$getElementForTableNode, TableNode} from '../../LexicalTableNode';
-

 export class ClipboardDataMock {
   getData: jest.Mock<string, [string]>;
   setData: jest.Mock<void, [string, string]>;
 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>`,
         );
       });
           `<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,
     },
     undefined,

-    <TablePlugin />,

   );
 });
   );
 });

diff --git a/resources/js/wysiwyg/lexical/table/__tests__/unit/LexicalTableSelection.test.tsx b/resources/js/wysiwyg/lexical/table/__tests__/unit/LexicalTableSelection.test.ts
similarity index 73%
rename from resources/js/wysiwyg/lexical/table/__tests__/unit/LexicalTableSelection.test.tsx
rename to resources/js/wysiwyg/lexical/table/__tests__/unit/LexicalTableSelection.test.ts
index 9e9dbac8131891400702e1f3184d30d144015e35..35ee65b688c8b912e8e0be9d6a3738715536641d 100644 (file)
--- a/resources/js/wysiwyg/lexical/table/__tests__/unit/LexicalTableSelection.test.tsx
+++ b/resources/js/wysiwyg/lexical/table/__tests__/unit/LexicalTableSelection.test.ts
@@ -19,9 +19,6 @@ import {
   TextNode,
 } from 'lexical';
 import {createTestEditor} from 'lexical/__tests__/utils';
   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;
 
 describe('table selection', () => {
   let originalText: TextNode;


@@ -31,57 +28,35 @@ describe('table selection', () => {
   let paragraphKey: string;
   let textKey: string;
   let parsedEditorState: EditorState;
   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');
   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);
   });
 
     document.body.appendChild(container);
   });
 

-  function useLexicalEditor(
-    rootElementRef: React.RefObject<HTMLDivElement>,
-    onError?: () => void,
-  ) {
-    const editorInHook = useMemo(
-      () =>
-        createTestEditor({
-          nodes: [],
-          onError: onError || jest.fn(),
-          theme: {
-            text: {
-              bold: 'editor-text-bold',
-              italic: 'editor-text-italic',
-              underline: 'editor-text-underline',
-            },
-          },
-        }),
-      [onError],
-    );
-
-    useEffect(() => {
-      const rootElement = rootElementRef.current;
-
-      editorInHook.setRootElement(rootElement);
-    }, [rootElementRef, editorInHook]);
-
-    return editorInHook;
-  }
+  afterEach(() => {
+    container?.remove();
+  });

 
   function init(onError?: () => void) {
 
   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 />);
-    });
+    editor = createTestEditor({
+      nodes: [],
+      onError: onError || jest.fn(),
+      theme: {
+        text: {
+          bold: 'editor-text-bold',
+          italic: 'editor-text-italic',
+          underline: 'editor-text-underline',
+        },
+      },
+    })
+
+    editor.setRootElement(root);

   }
 
   async function update(fn: () => void) {
   }
 
   async function update(fn: () => void) {

diff --git a/resources/js/wysiwyg/lexical/utils/__tests__/unit/LexicalEventHelpers.test.tsx b/resources/js/wysiwyg/lexical/utils/__tests__/unit/LexicalEventHelpers.test.ts
similarity index 85%
rename from resources/js/wysiwyg/lexical/utils/__tests__/unit/LexicalEventHelpers.test.tsx
rename to resources/js/wysiwyg/lexical/utils/__tests__/unit/LexicalEventHelpers.test.ts
index 2d5db2c69138e13c7b2fcd54511ffca8611038c4..53c743df6371ca218f1438dc328ef7a2943b5583 100644 (file)
--- a/resources/js/wysiwyg/lexical/utils/__tests__/unit/LexicalEventHelpers.test.tsx
+++ b/resources/js/wysiwyg/lexical/utils/__tests__/unit/LexicalEventHelpers.test.ts
@@ -5,27 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
  * 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 {AutoLinkNode, LinkNode} from '@lexical/link';
 import {ListItemNode, ListNode} from '@lexical/list';

-import {OverflowNode} from '@lexical/overflow';
-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 {HeadingNode, QuoteNode, registerRichText} from '@lexical/rich-text';

 import {
   applySelectionInputs,
   pasteHTML,
 import {
   applySelectionInputs,
   pasteHTML,

-} from '@lexical/selection/src/__tests__/utils';
+} from '@lexical/selection/__tests__/utils';

 import {TableCellNode, TableNode, TableRowNode} from '@lexical/table';
 import {TableCellNode, TableNode, TableRowNode} from '@lexical/table';

-import {LexicalEditor} from 'lexical';
-import {initializeClipboard, TestComposer} from 'lexical/__tests__/utils';
-import {createRoot} from 'react-dom/client';
-import * as ReactTestUtils from 'lexical/shared/react-test-utils';
+import {$createParagraphNode, $insertNodes, LexicalEditor} from 'lexical';
+import {createTestEditor, initializeClipboard} from 'lexical/__tests__/utils';

 
 jest.mock('lexical/shared/environment', () => {
   const originalModule = jest.requireActual('lexical/shared/environment');
 
 jest.mock('lexical/shared/environment', () => {
   const originalModule = jest.requireActual('lexical/shared/environment');


@@ -89,85 +78,69 @@ describe('LexicalEventHelpers', () => {
   let editor: LexicalEditor | null = null;
 
   async function init() {
   let editor: LexicalEditor | null = null;
 
   async function init() {

-    function TestBase() {
-      function TestPlugin(): null {
-        [editor] = useLexicalComposerContext();

 
 

-        return null;
-      }
+    const config = {
+      nodes: [
+        LinkNode,
+        HeadingNode,
+        ListNode,
+        ListItemNode,
+        QuoteNode,
+        TableNode,
+        TableCellNode,
+        TableRowNode,
+        AutoLinkNode,
+      ],
+      theme: {
+        code: 'editor-code',
+        heading: {
+          h1: 'editor-heading-h1',
+          h2: 'editor-heading-h2',
+          h3: 'editor-heading-h3',
+          h4: 'editor-heading-h4',
+          h5: 'editor-heading-h5',
+          h6: 'editor-heading-h6',
+        },
+        image: 'editor-image',
+        list: {
+          listitem: 'editor-listitem',
+          olDepth: ['editor-list-ol'],
+          ulDepth: ['editor-list-ul'],
+        },
+        paragraph: 'editor-paragraph',
+        placeholder: 'editor-placeholder',
+        quote: 'editor-quote',
+        text: {
+          bold: 'editor-text-bold',
+          code: 'editor-text-code',
+          hashtag: 'editor-text-hashtag',
+          italic: 'editor-text-italic',
+          link: 'editor-text-link',
+          strikethrough: 'editor-text-strikethrough',
+          underline: 'editor-text-underline',
+          underlineStrikethrough: 'editor-text-underlineStrikethrough',
+        },
+      },
+    };
+
+    editor = createTestEditor(config);
+    registerRichText(editor);
+
+    const root = document.createElement('div');
+    root.setAttribute('contenteditable', 'true');
+    container?.append(root);

 
 

-      return (
-        <TestComposer
-          config={{
-            nodes: [
-              LinkNode,
-              HeadingNode,
-              ListNode,
-              ListItemNode,
-              QuoteNode,
-              CodeNode,
-              TableNode,
-              TableCellNode,
-              TableRowNode,
-              HashtagNode,
-              CodeHighlightNode,
-              AutoLinkNode,
-              OverflowNode,
-            ],
-            theme: {
-              code: 'editor-code',
-              heading: {
-                h1: 'editor-heading-h1',
-                h2: 'editor-heading-h2',
-                h3: 'editor-heading-h3',
-                h4: 'editor-heading-h4',
-                h5: 'editor-heading-h5',
-                h6: 'editor-heading-h6',
-              },
-              image: 'editor-image',
-              list: {
-                listitem: 'editor-listitem',
-                olDepth: ['editor-list-ol'],
-                ulDepth: ['editor-list-ul'],
-              },
-              paragraph: 'editor-paragraph',
-              placeholder: 'editor-placeholder',
-              quote: 'editor-quote',
-              text: {
-                bold: 'editor-text-bold',
-                code: 'editor-text-code',
-                hashtag: 'editor-text-hashtag',
-                italic: 'editor-text-italic',
-                link: 'editor-text-link',
-                strikethrough: 'editor-text-strikethrough',
-                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}
-          />
-          <AutoFocusPlugin />
-          <TestPlugin />
-        </TestComposer>
-      );
-    }
+    editor.setRootElement(root);

 
 

-    ReactTestUtils.act(() => {
-      createRoot(container!).render(<TestBase />);
+    editor.update(() => {
+      $insertNodes([$createParagraphNode()])

     });
     });

+    editor.commitUpdates();

   }
 
   async function update(fn: () => void) {
   }
 
   async function update(fn: () => void) {

-    await ReactTestUtils.act(async () => {
-      await editor!.update(fn);
-    });
+    await editor!.update(fn);
+    editor?.commitUpdates();

 
     return Promise.resolve().then();
   }
 
     return Promise.resolve().then();
   }


@@ -549,24 +522,6 @@ describe('LexicalEventHelpers', () => {
           ],
           name: 'collapsible spaces with nested structures',
         },
           ],
           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>',
         {
           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',
         },
           ],
           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>',
         {
           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>',

diff --git a/resources/js/wysiwyg/lexical/utils/__tests__/unit/LexicalRootHelpers.test.ts b/resources/js/wysiwyg/lexical/utils/__tests__/unit/LexicalRootHelpers.test.ts
index 369caaea4af569d69945bfb2ce5fb2bec935cf58..1322b482be9a811ed227ec3ecb72195b22db693c 100644 (file)
--- a/resources/js/wysiwyg/lexical/utils/__tests__/unit/LexicalRootHelpers.test.ts
+++ b/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';
 
 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 () => {
 describe('LexicalRootHelpers tests', () => {
   initializeUnitTest((testEnv) => {
     it('textContent', async () => {

diff --git a/resources/js/wysiwyg/lexical/utils/__tests__/unit/LexicalUtilsSplitNode.test.tsx b/resources/js/wysiwyg/lexical/utils/__tests__/unit/LexicalUtilsSplitNode.test.ts
similarity index 100%
rename from resources/js/wysiwyg/lexical/utils/__tests__/unit/LexicalUtilsSplitNode.test.tsx
rename to resources/js/wysiwyg/lexical/utils/__tests__/unit/LexicalUtilsSplitNode.test.ts

diff --git a/resources/js/wysiwyg/lexical/utils/__tests__/unit/LexlcaiUtilsInsertNodeToNearestRoot.test.tsx b/resources/js/wysiwyg/lexical/utils/__tests__/unit/LexlcaiUtilsInsertNodeToNearestRoot.test.ts
similarity index 100%
rename from resources/js/wysiwyg/lexical/utils/__tests__/unit/LexlcaiUtilsInsertNodeToNearestRoot.test.tsx
rename to resources/js/wysiwyg/lexical/utils/__tests__/unit/LexlcaiUtilsInsertNodeToNearestRoot.test.ts