From c4bcfb231cb58c351e38524281534c102f4608c9 Mon Sep 17 00:00:00 2001
From: Sherry Wong <potatowagon@fb.com>
Date: Sat, 4 May 2024 15:18:09 +0800
Subject: [PATCH 1/3] add mention test

---
 .../__tests__/e2e/Mentions.spec.mjs           | 54 +++++++++++++++++++
 1 file changed, 54 insertions(+)

diff --git a/packages/lexical-playground/__tests__/e2e/Mentions.spec.mjs b/packages/lexical-playground/__tests__/e2e/Mentions.spec.mjs
index 756790f6670..3d0e716644f 100644
--- a/packages/lexical-playground/__tests__/e2e/Mentions.spec.mjs
+++ b/packages/lexical-playground/__tests__/e2e/Mentions.spec.mjs
@@ -6,6 +6,8 @@
  *
  */
 
+import {$selectAll} from 'lexical';
+
 import {
   deleteNextWord,
   moveLeft,
@@ -18,6 +20,7 @@ import {
   html,
   initialize,
   IS_WINDOWS,
+  pasteFromClipboard,
   test,
   waitForSelector,
 } from '../utils/index.mjs';
@@ -930,4 +933,55 @@ test.describe('Mentions', () => {
       focusPath: [0, 0, 0],
     });
   });
+
+  test(`Pasting over a mention does not lead to crash`, async ({page}) => {
+    await focusEditor(page);
+    await page.keyboard.type('@Luke');
+    await assertSelection(page, {
+      anchorOffset: 5,
+      anchorPath: [0, 0, 0],
+      focusOffset: 5,
+      focusPath: [0, 0, 0],
+    });
+
+    await waitForSelector(
+      page,
+      '#typeahead-menu ul li:has-text("Luke Skywalker")',
+    );
+    await page.keyboard.press('Enter');
+
+    await waitForSelector(page, '.mention');
+
+    $selectAll();
+
+    await pasteFromClipboard(page, {
+      'text/html':
+        '<meta charset="utf-8"><span data-lexical-mention="true">Luke Skywalker</span>',
+    });
+
+    await page.keyboard.type(' foo bar');
+
+    await assertHTML(
+      page,
+      html`
+        <p
+          class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
+          dir="ltr">
+          <span
+            class="mention"
+            style="background-color: rgba(24, 119, 232, 0.2);"
+            data-lexical-text="true">
+            Luke Skywalker
+          </span>
+          <span data-lexical-text="true">foo bar</span>
+        </p>
+      `,
+    );
+    await assertSelection(page, {
+      anchorOffset: 8,
+      anchorPath: [0, 1, 0],
+      focusOffset: 8,
+      focusPath: [0, 1, 0],
+    });
+  });
 });

From bb9511df9f48e2696d5ad45d70adda14a8663a45 Mon Sep 17 00:00:00 2001
From: Sherry Wong <potatowagon@fb.com>
Date: Sat, 4 May 2024 15:25:36 +0800
Subject: [PATCH 2/3] fix test

---
 packages/lexical-playground/__tests__/e2e/Mentions.spec.mjs | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/lexical-playground/__tests__/e2e/Mentions.spec.mjs b/packages/lexical-playground/__tests__/e2e/Mentions.spec.mjs
index 3d0e716644f..df17e847f7c 100644
--- a/packages/lexical-playground/__tests__/e2e/Mentions.spec.mjs
+++ b/packages/lexical-playground/__tests__/e2e/Mentions.spec.mjs
@@ -6,12 +6,11 @@
  *
  */
 
-import {$selectAll} from 'lexical';
-
 import {
   deleteNextWord,
   moveLeft,
   moveToEditorBeginning,
+  selectAll,
 } from '../keyboardShortcuts/index.mjs';
 import {
   assertHTML,
@@ -952,7 +951,7 @@ test.describe('Mentions', () => {
 
     await waitForSelector(page, '.mention');
 
-    $selectAll();
+    await selectAll(page);
 
     await pasteFromClipboard(page, {
       'text/html':

From d384eac6245f3d5be08c77c33bdd989ad6aa03c1 Mon Sep 17 00:00:00 2001
From: Sherry Wong <potatowagon@fb.com>
Date: Tue, 28 May 2024 17:47:43 +0800
Subject: [PATCH 3/3] move cursor right

---
 packages/lexical-playground/__tests__/e2e/Mentions.spec.mjs | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/lexical-playground/__tests__/e2e/Mentions.spec.mjs b/packages/lexical-playground/__tests__/e2e/Mentions.spec.mjs
index df17e847f7c..197f106a132 100644
--- a/packages/lexical-playground/__tests__/e2e/Mentions.spec.mjs
+++ b/packages/lexical-playground/__tests__/e2e/Mentions.spec.mjs
@@ -9,6 +9,7 @@
 import {
   deleteNextWord,
   moveLeft,
+  moveRight,
   moveToEditorBeginning,
   selectAll,
 } from '../keyboardShortcuts/index.mjs';
@@ -958,6 +959,8 @@ test.describe('Mentions', () => {
         '<meta charset="utf-8"><span data-lexical-mention="true">Luke Skywalker</span>',
     });
 
+    await moveRight(page, 2);
+
     await page.keyboard.type(' foo bar');
 
     await assertHTML(