Fix can format backwards when at first text node boundary (#2445)

facebook · Jun 17, 2022 · 0b7635a · 0b7635a · vercel · Jun 17, 2022
1 parent 9dcdd3c
commit 0b7635a
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 9 deletions.
diff --git a/packages/lexical-playground/__tests__/e2e/TextFormatting.spec.mjs b/packages/lexical-playground/__tests__/e2e/TextFormatting.spec.mjs
@@ -10,6 +10,7 @@ import {
   moveLeft,
   moveRight,
   moveToLineBeginning,
+  moveToLineEnd,
   selectCharacters,
   toggleBold,
   toggleItalic,
@@ -22,6 +23,7 @@ import {
   focusEditor,
   html,
   initialize,
+  repeat,
   selectOption,
   test,
   waitForSelector,
@@ -861,4 +863,55 @@ test.describe('TextFormatting', () => {
       focusPath: [0, 0, 0],
     });
   });
+
+  test(`Regression test #2439: can format backwards when at first text node boundary`, async ({
+    page,
+    isPlainText,
+  }) => {
+    test.skip(isPlainText);
+    await focusEditor(page);
+    await page.keyboard.type('123456');
+
+    await repeat(3, async () => await page.keyboard.press('ArrowLeft'));
+    await page.keyboard.down('Shift');
+    await repeat(3, async () => await page.keyboard.press('ArrowLeft'));
+    await page.keyboard.up('Shift');
+    await toggleBold(page);
+
+    await moveToLineEnd(page);
+    await page.keyboard.down('Shift');
+    await repeat(4, async () => await page.keyboard.press('ArrowLeft'));
+    await page.keyboard.up('Shift');
+    await toggleBold(page);
+
+    await assertHTML(
+      page,
+      html`
+        <p class="PlaygroundEditorTheme__paragraph">
+          <strong
+            class="PlaygroundEditorTheme__textBold"
+            data-lexical-text="true">
+            12
+          </strong>
+          <span data-lexical-text="true">3456</span>
+        </p>
+      `,
+    );
+
+    // Toggle once more
+    await toggleBold(page);
+
+    await assertHTML(
+      page,
+      html`
+        <p class="PlaygroundEditorTheme__paragraph">
+          <strong
+            class="PlaygroundEditorTheme__textBold"
+            data-lexical-text="true">
+            123456
+          </strong>
+        </p>
+      `,
+    );
+  });
 });
diff --git a/packages/lexical/src/LexicalSelection.ts b/packages/lexical/src/LexicalSelection.ts
@@ -1054,6 +1054,7 @@ export class RangeSelection implements BaseSelection {
     }
     const anchor = this.anchor;
     const focus = this.focus;
+    const anchorOffset = anchor.offset;
     const focusOffset = focus.offset;
     let firstNextFormat = 0;
     let firstNodeTextLength = firstNode.getTextContent().length;
@@ -1065,13 +1066,9 @@ export class RangeSelection implements BaseSelection {
         break;
       }
     }
-    let anchorOffset = anchor.offset;
-    let startOffset;
-    let endOffset;
-
     const isBefore = anchor.isBefore(focus);
-    startOffset = isBefore ? anchorOffset : focusOffset;
-    endOffset = isBefore ? focusOffset : anchorOffset;
+    const endOffset = isBefore ? focusOffset : anchorOffset;
+    let startOffset = isBefore ? anchorOffset : focusOffset;
 
     // This is the case where the user only selected the very end of the
     // first node so we don't want to include it in the formatting change.
@@ -1084,7 +1081,6 @@ export class RangeSelection implements BaseSelection {
 
       if ($isTextNode(nextSibling)) {
         // we basically make the second node the firstNode, changing offsets accordingly
-        anchorOffset = 0;
         startOffset = 0;
         firstNode = nextSibling;
         firstNodeTextLength = nextSibling.getTextContent().length;
@@ -1101,8 +1097,6 @@ export class RangeSelection implements BaseSelection {
           this.format = firstNextFormat;
           return;
         }
-        startOffset = anchorOffset > focusOffset ? focusOffset : anchorOffset;
-        endOffset = anchorOffset > focusOffset ? anchorOffset : focusOffset;
 
         // No actual text is selected, so do nothing.
         if (startOffset === endOffset) {