[lexical][lexical-utils][lexical-selection][lexical-table] Feature: N…

…odeCaret abstraction for traversals and ranges (#7046)
facebook · Feb 8, 2025 · c82e7bb · c82e7bb
1 parent 88c3f18
commit c82e7bb
Show file tree

Hide file tree

Showing 25 changed files with 5,370 additions and 909 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -163,8 +163,8 @@
     "glob": "^10.4.1",
     "google-closure-compiler": "^20220202.0.0",
     "gzip-size": "^6.0.0",
-    "hermes-parser": "^0.20.1",
-    "hermes-transform": "^0.20.1",
+    "hermes-parser": "^0.26.0",
+    "hermes-transform": "^0.26.0",
     "husky": "^7.0.1",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
@@ -173,7 +173,7 @@
     "minimist": "^1.2.5",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.3.2",
-    "prettier-plugin-hermes-parser": "^0.20.1",
+    "prettier-plugin-hermes-parser": "^0.26.0",
     "prettier-plugin-organize-attributes": "^0.0.5",
     "prettier-plugin-tailwindcss": "^0.4.1",
     "proper-lockfile": "^4.1.2",

diff --git a/packages/lexical-playground/__tests__/e2e/Links.spec.mjs b/packages/lexical-playground/__tests__/e2e/Links.spec.mjs
@@ -1714,7 +1714,9 @@ test.describe.parallel('Links', () => {
     );
     await assertSelection(page, {
       anchorOffset: 0,
-      anchorPath: [0, 1],
+      // Previous to #7046 NodeCaret the selection anchor would've been
+      // inside the <a> tag but now it's normalized to the text
+      anchorPath: [0, 1, 0, 0],
       focusOffset: 5,
       focusPath: [0, 1, 0, 0],
     });
@@ -1739,21 +1741,14 @@ test.describe.parallel('Links', () => {
       `,
     );
 
-    if (browserName === 'webkit') {
-      await assertSelection(page, {
-        anchorOffset: 0,
-        anchorPath: [0, 1, 0, 0],
-        focusOffset: 5,
-        focusPath: [0, 1, 0, 0],
-      });
-    } else {
-      await assertSelection(page, {
-        anchorOffset: 0,
-        anchorPath: [0, 1, 0, 0],
-        focusOffset: 5,
-        focusPath: [0, 1, 0, 0],
-      });
-    }
+    // Previous to #7046 NodeCaret the selection anchor would've been
+    // inside the <a> tag but now it's normalized to the text
+    await assertSelection(page, {
+      anchorOffset: 0,
+      anchorPath: [0, 1, 0, 0],
+      focusOffset: 5,
+      focusPath: [0, 1, 0, 0],
+    });
 
     // unlink
     await click(page, '.link');
@@ -1819,21 +1814,12 @@ test.describe.parallel('Links', () => {
       `,
     );
 
-    if (browserName === 'chromium') {
-      await assertSelection(page, {
-        anchorOffset: 5,
-        anchorPath: [0, 1, 0, 0],
-        focusOffset: 0,
-        focusPath: [0, 1],
-      });
-    } else {
-      await assertSelection(page, {
-        anchorOffset: 5,
-        anchorPath: [0, 1, 0, 0],
-        focusOffset: 0,
-        focusPath: [0, 1],
-      });
-    }
+    await assertSelection(page, {
+      anchorOffset: 5,
+      anchorPath: [0, 1, 0, 0],
+      focusOffset: 0,
+      focusPath: [0, 1, 0, 0],
+    });
 
     await setURL(page, 'facebook.com');
 

diff --git a/packages/lexical-selection/src/__tests__/unit/LexicalSelection.test.tsx b/packages/lexical-selection/src/__tests__/unit/LexicalSelection.test.tsx
@@ -1290,7 +1290,8 @@ describe('LexicalSelection tests', () => {
         paragraph.append(elementNode);
         elementNode.append(text);
 
-        const selectedNodes = $getSelection()!.getNodes();
+        const selection = $getSelection()!;
+        const selectedNodes = selection.getNodes();
 
         expect(selectedNodes.length).toBe(1);
         expect(selectedNodes[0].getKey()).toBe(text.getKey());
@@ -2756,7 +2757,11 @@ describe('LexicalSelection tests', () => {
         expect(rootChildren[1].__type).toBe('heading');
         expect(rootChildren.length).toBe(2);
         const sel = $getSelection()!;
-        expect(sel.getNodes().length).toBe(2);
+        expect(sel).toMatchObject({
+          anchor: {key: rootChildren[0].__key, offset: 0, type: 'element'},
+          focus: {key: rootChildren[1].__key, offset: 0, type: 'element'},
+        });
+        expect(sel.getNodes()).toEqual(rootChildren);
       });
     });
 
@@ -3008,15 +3013,17 @@ describe('LexicalSelection tests', () => {
         const root = $getRoot();
         const ul1 = $createListNode('bullet');
         const text1 = $createTextNode('1');
-        const li1 = $createListItemNode().append(text1);
+        const li1 = $createListItemNode();
         const li1_wrapper = $createListItemNode();
         const ul2 = $createListNode('bullet');
         const text1_1 = $createTextNode('1.1');
-        const li1_1 = $createListItemNode().append(text1_1);
-        ul1.append(li1, li1_wrapper);
-        li1_wrapper.append(ul2);
-        ul2.append(li1_1);
-        root.append(ul1);
+        const li1_1 = $createListItemNode();
+        root.append(
+          ul1.append(
+            li1.append(text1),
+            li1_wrapper.append(ul2.append(li1_1.append(text1_1))),
+          ),
+        );
 
         const selection = $createRangeSelection();
         $setSelection(selection);
@@ -3040,7 +3047,7 @@ describe('LexicalSelection tests', () => {
       );
     });
 
-    test('Nested list with listItem twice indented from his father', async () => {
+    test('Nested list with listItem twice indented from its parent', async () => {
       const testEditor = createTestEditor();
       const element = document.createElement('div');
       testEditor.setRootElement(element);
@@ -3051,11 +3058,10 @@ describe('LexicalSelection tests', () => {
         const li1_wrapper = $createListItemNode();
         const ul2 = $createListNode('bullet');
         const text1_1 = $createTextNode('1.1');
-        const li1_1 = $createListItemNode().append(text1_1);
-        ul1.append(li1_wrapper);
-        li1_wrapper.append(ul2);
-        ul2.append(li1_1);
-        root.append(ul1);
+        const li1_1 = $createListItemNode();
+        root.append(
+          ul1.append(li1_wrapper.append(ul2.append(li1_1.append(text1_1)))),
+        );
 
         const selection = $createRangeSelection();
         $setSelection(selection);

diff --git a/packages/lexical-selection/src/__tests__/unit/LexicalSelectionHelpers.test.ts b/packages/lexical-selection/src/__tests__/unit/LexicalSelectionHelpers.test.ts
@@ -3155,11 +3155,11 @@ describe('$patchStyleText', () => {
         type: 'text',
       });
 
-      const selection = $getSelection();
+      const selection = $getSelection()!;
 
-      $patchStyleText(selection!, {'font-size': '11px'});
+      $patchStyleText(selection, {'font-size': '11px'});
 
-      const [newAnchor, newFocus] = selection!.getStartEndPoints()!;
+      const [newAnchor, newFocus] = selection.getStartEndPoints()!;
 
       const newAnchorNode: LexicalNode = newAnchor.getNode();
       expect(newAnchorNode.getTextContent()).toBe('sec');