Adjust first node when applying format to selection (facebook#2012)

mrdivyansh · May 4, 2022 · 26abf1f · 26abf1f
1 parent adea51c
commit 26abf1f
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 1 deletion.
diff --git a/packages/lexical-selection/src/__tests__/unit/LexicalSelection.test.js b/packages/lexical-selection/src/__tests__/unit/LexicalSelection.test.js
@@ -1732,5 +1732,36 @@ describe('LexicalSelection tests', () => {
         '<p dir="ltr"><span data-lexical-text="true">Hello </span><strong data-lexical-text="true">awesome </strong></p><p dir="ltr"><span data-lexical-text="true">beautiful</span><strong data-lexical-text="true"> world</strong></p>',
       );
     });
+
+    it('adjust offset for inline elements text formatting', async () => {
+      init();
+      await editor.update(() => {
+        const root = $getRoot();
+        const text1 = $createTextNode('--');
+        const text2 = $createTextNode('abc');
+        const text3 = $createTextNode('--');
+        root.append(
+          $createParagraphNode().append(
+            text1,
+            $createLinkNode('http://lexical.dev').append(text2),
+            text3,
+          ),
+        );
+
+        setAnchorPoint({
+          key: text1.getKey(),
+          offset: 2,
+          type: 'text',
+        });
+        setFocusPoint({
+          key: text3.getKey(),
+          offset: 0,
+          type: 'text',
+        });
+        const selection = $getSelection();
+        selection.formatText('bold');
+        expect(text2.hasFormat('bold')).toBe(true);
+      });
+    });
   });
 });
diff --git a/packages/lexical/src/LexicalSelection.js b/packages/lexical/src/LexicalSelection.js
@@ -1001,7 +1001,11 @@ export class RangeSelection implements BaseSelection {
     // 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.
     if (startOffset === firstNode.getTextContentSize()) {
-      const nextSibling = firstNode.getNextSibling();
+      let nextSibling = firstNode.getNextSibling();
+
+      if ($isElementNode(nextSibling) && nextSibling.isInline()) {
+        nextSibling = nextSibling.getFirstChild();
+      }
 
       if ($isTextNode(nextSibling)) {
         // we basically make the second node the firstNode, changing offsets accordingly