From 2bdaed5e434cc0ab33d417a2a7f27dbba5b2611e Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Mon, 11 Nov 2024 15:03:47 +0530
Subject: [PATCH 1/2] [lexical-list] Bug Fix: Handle appending inline element
 nodes in ListNode.append (#6791)

---
 packages/lexical-list/src/LexicalListNode.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/lexical-list/src/LexicalListNode.ts b/packages/lexical-list/src/LexicalListNode.ts
index 45a87f30d2a..2af911c7a8e 100644
--- a/packages/lexical-list/src/LexicalListNode.ts
+++ b/packages/lexical-list/src/LexicalListNode.ts
@@ -200,8 +200,12 @@ export class ListNode extends ElementNode {
         if ($isListNode(currentNode)) {
           listItemNode.append(currentNode);
         } else if ($isElementNode(currentNode)) {
-          const textNode = $createTextNode(currentNode.getTextContent());
-          listItemNode.append(textNode);
+          if (currentNode.isInline()) {
+            listItemNode.append(currentNode);
+          } else {
+            const textNode = $createTextNode(currentNode.getTextContent());
+            listItemNode.append(textNode);
+          }
         } else {
           listItemNode.append(currentNode);
         }

From 23f4a7e953075320e3c2113f4feeb8b62934f208 Mon Sep 17 00:00:00 2001
From: Sevki <s@sevki.io>
Date: Mon, 11 Nov 2024 11:12:58 +0000
Subject: [PATCH 2/2] Mention nodes shouldn't be spellcheck'd :) (#6788)

Co-authored-by: Bob Ippolito <bob@redivi.com>
Co-authored-by: Sherry Wong <potatowagon@fb.com>
Co-authored-by: Sherry <potatowagon@meta.com>
---
 .../__tests__/e2e/ClearFormatting.spec.mjs    |  2 ++
 .../__tests__/e2e/Composition.spec.mjs        |  2 ++
 .../__tests__/e2e/Mentions.spec.mjs           | 33 +++++++++++++++++++
 .../379-backspace-with-mentions.spec.mjs      |  2 ++
 .../src/nodes/MentionNode.ts                  |  1 +
 5 files changed, 40 insertions(+)

diff --git a/packages/lexical-playground/__tests__/e2e/ClearFormatting.spec.mjs b/packages/lexical-playground/__tests__/e2e/ClearFormatting.spec.mjs
index 2749686abe0..c52a894569c 100644
--- a/packages/lexical-playground/__tests__/e2e/ClearFormatting.spec.mjs
+++ b/packages/lexical-playground/__tests__/e2e/ClearFormatting.spec.mjs
@@ -159,6 +159,7 @@ test.describe('Clear All Formatting', () => {
           <p class="PlaygroundEditorTheme__paragraph">
             <span
               class="mention"
+              spellcheck="false"
               style="background-color: rgba(24, 119, 232, 0.2);"
               data-lexical-text="true">
               Luke Skywalker
@@ -180,6 +181,7 @@ test.describe('Clear All Formatting', () => {
             dir="ltr">
             <span
               class="mention"
+              spellcheck="false"
               style="background-color: rgba(24, 119, 232, 0.2);"
               data-lexical-text="true">
               Luke Skywalker
diff --git a/packages/lexical-playground/__tests__/e2e/Composition.spec.mjs b/packages/lexical-playground/__tests__/e2e/Composition.spec.mjs
index 5685cc2b95c..6e07eaae818 100644
--- a/packages/lexical-playground/__tests__/e2e/Composition.spec.mjs
+++ b/packages/lexical-playground/__tests__/e2e/Composition.spec.mjs
@@ -750,6 +750,7 @@ test.describe('Composition', () => {
             dir="ltr">
             <span
               class="mention"
+              spellcheck="false"
               style="background-color: rgba(24, 119, 232, 0.2);"
               data-lexical-text="true">
               Luke Skywalker
@@ -950,6 +951,7 @@ test.describe('Composition', () => {
             dir="ltr">
             <span
               class="mention"
+              spellcheck="false"
               style="background-color: rgba(24, 119, 232, 0.2)"
               data-lexical-text="true">
               Luke Skywalker
diff --git a/packages/lexical-playground/__tests__/e2e/Mentions.spec.mjs b/packages/lexical-playground/__tests__/e2e/Mentions.spec.mjs
index 197f106a132..86084759c66 100644
--- a/packages/lexical-playground/__tests__/e2e/Mentions.spec.mjs
+++ b/packages/lexical-playground/__tests__/e2e/Mentions.spec.mjs
@@ -61,6 +61,7 @@ test.describe('Mentions', () => {
         <p class="PlaygroundEditorTheme__paragraph">
           <span
             class="mention"
+            spellcheck="false"
             style="background-color: rgba(24, 119, 232, 0.2);"
             data-lexical-text="true">
             Luke Skywalker
@@ -137,6 +138,7 @@ test.describe('Mentions', () => {
         <p class="PlaygroundEditorTheme__paragraph">
           <span
             class="mention"
+            spellcheck="false"
             style="background-color: rgba(24, 119, 232, 0.2);"
             data-lexical-text="true">
             Luke Skywalker
@@ -168,6 +170,7 @@ test.describe('Mentions', () => {
         <p class="PlaygroundEditorTheme__paragraph">
           <span
             class="mention"
+            spellcheck="false"
             style="background-color: rgba(24, 119, 232, 0.2);"
             data-lexical-text="true">
             Luke
@@ -232,6 +235,7 @@ test.describe('Mentions', () => {
         <p class="PlaygroundEditorTheme__paragraph">
           <span
             class="mention"
+            spellcheck="false"
             style="background-color: rgba(24, 119, 232, 0.2);"
             data-lexical-text="true">
             Luke Skywalker
@@ -264,6 +268,7 @@ test.describe('Mentions', () => {
         <p class="PlaygroundEditorTheme__paragraph">
           <span
             class="mention"
+            spellcheck="false"
             style="background-color: rgba(24, 119, 232, 0.2);"
             data-lexical-text="true">
             Skywalker
@@ -308,6 +313,7 @@ test.describe('Mentions', () => {
         <p class="PlaygroundEditorTheme__paragraph">
           <span
             class="mention"
+            spellcheck="false"
             style="background-color: rgba(24, 119, 232, 0.2);"
             data-lexical-text="true">
             Luke Skywalker
@@ -340,6 +346,7 @@ test.describe('Mentions', () => {
         <p class="PlaygroundEditorTheme__paragraph">
           <span
             class="mention"
+            spellcheck="false"
             style="background-color: rgba(24, 119, 232, 0.2);"
             data-lexical-text="true">
             Luke
@@ -384,6 +391,7 @@ test.describe('Mentions', () => {
         <p class="PlaygroundEditorTheme__paragraph">
           <span
             class="mention"
+            spellcheck="false"
             style="background-color: rgba(24, 119, 232, 0.2);"
             data-lexical-text="true">
             Luke Skywalker
@@ -407,6 +415,7 @@ test.describe('Mentions', () => {
         <p class="PlaygroundEditorTheme__paragraph">
           <span
             class="mention"
+            spellcheck="false"
             style="background-color: rgba(24, 119, 232, 0.2);"
             data-lexical-text="true">
             Luke
@@ -486,6 +495,7 @@ test.describe('Mentions', () => {
           <span data-lexical-text="true">abc</span>
           <span
             class="mention"
+            spellcheck="false"
             style="background-color: rgba(24, 119, 232, 0.2);"
             data-lexical-text="true">
             Luke Skywalker
@@ -511,6 +521,7 @@ test.describe('Mentions', () => {
           <span data-lexical-text="true">abc</span>
           <span
             class="mention"
+            spellcheck="false"
             style="background-color: rgba(24, 119, 232, 0.2);"
             data-lexical-text="true">
             Luke
@@ -590,6 +601,7 @@ test.describe('Mentions', () => {
         <p class="PlaygroundEditorTheme__paragraph">
           <span
             class="mention"
+            spellcheck="false"
             style="background-color: rgba(24, 119, 232, 0.2);"
             data-lexical-text="true">
             Luke Skywalker
@@ -597,6 +609,7 @@ test.describe('Mentions', () => {
           <span data-lexical-text="true"></span>
           <span
             class="mention"
+            spellcheck="false"
             style="background-color: rgba(24, 119, 232, 0.2);"
             data-lexical-text="true">
             Luke Skywalker
@@ -604,6 +617,7 @@ test.describe('Mentions', () => {
           <span data-lexical-text="true"></span>
           <span
             class="mention"
+            spellcheck="false"
             style="background-color: rgba(24, 119, 232, 0.2);"
             data-lexical-text="true">
             Luke Skywalker
@@ -611,6 +625,7 @@ test.describe('Mentions', () => {
           <span data-lexical-text="true"></span>
           <span
             class="mention"
+            spellcheck="false"
             style="background-color: rgba(24, 119, 232, 0.2);"
             data-lexical-text="true">
             Luke Skywalker
@@ -646,6 +661,7 @@ test.describe('Mentions', () => {
             <span data-lexical-text="true">Skywalker</span>
             <span
               class="mention"
+              spellcheck="false"
               style="background-color: rgba(24, 119, 232, 0.2);"
               data-lexical-text="true">
               Luke Skywalker
@@ -653,6 +669,7 @@ test.describe('Mentions', () => {
             <span data-lexical-text="true"></span>
             <span
               class="mention"
+              spellcheck="false"
               style="background-color: rgba(24, 119, 232, 0.2);"
               data-lexical-text="true">
               Luke Skywalker
@@ -660,6 +677,7 @@ test.describe('Mentions', () => {
             <span data-lexical-text="true"></span>
             <span
               class="mention"
+              spellcheck="false"
               style="background-color: rgba(24, 119, 232, 0.2);"
               data-lexical-text="true">
               Luke Skywalker
@@ -677,6 +695,7 @@ test.describe('Mentions', () => {
             <span data-lexical-text="true">Skywalker</span>
             <span
               class="mention"
+              spellcheck="false"
               style="background-color: rgba(24, 119, 232, 0.2);"
               data-lexical-text="true">
               Luke Skywalker
@@ -684,6 +703,7 @@ test.describe('Mentions', () => {
             <span data-lexical-text="true"></span>
             <span
               class="mention"
+              spellcheck="false"
               style="background-color: rgba(24, 119, 232, 0.2);"
               data-lexical-text="true">
               Luke Skywalker
@@ -691,6 +711,7 @@ test.describe('Mentions', () => {
             <span data-lexical-text="true"></span>
             <span
               class="mention"
+              spellcheck="false"
               style="background-color: rgba(24, 119, 232, 0.2);"
               data-lexical-text="true">
               Luke Skywalker
@@ -714,6 +735,7 @@ test.describe('Mentions', () => {
           <p class="PlaygroundEditorTheme__paragraph">
             <span
               class="mention"
+              spellcheck="false"
               style="background-color: rgba(24, 119, 232, 0.2);"
               data-lexical-text="true">
               Luke Skywalker
@@ -721,6 +743,7 @@ test.describe('Mentions', () => {
             <span data-lexical-text="true"></span>
             <span
               class="mention"
+              spellcheck="false"
               style="background-color: rgba(24, 119, 232, 0.2);"
               data-lexical-text="true">
               Luke Skywalker
@@ -728,6 +751,7 @@ test.describe('Mentions', () => {
             <span data-lexical-text="true"></span>
             <span
               class="mention"
+              spellcheck="false"
               style="background-color: rgba(24, 119, 232, 0.2);"
               data-lexical-text="true">
               Luke Skywalker
@@ -743,6 +767,7 @@ test.describe('Mentions', () => {
             <span data-lexical-text="true"></span>
             <span
               class="mention"
+              spellcheck="false"
               style="background-color: rgba(24, 119, 232, 0.2);"
               data-lexical-text="true">
               Luke Skywalker
@@ -750,6 +775,7 @@ test.describe('Mentions', () => {
             <span data-lexical-text="true"></span>
             <span
               class="mention"
+              spellcheck="false"
               style="background-color: rgba(24, 119, 232, 0.2);"
               data-lexical-text="true">
               Luke Skywalker
@@ -757,6 +783,7 @@ test.describe('Mentions', () => {
             <span data-lexical-text="true"></span>
             <span
               class="mention"
+              spellcheck="false"
               style="background-color: rgba(24, 119, 232, 0.2);"
               data-lexical-text="true">
               Luke Skywalker
@@ -783,6 +810,7 @@ test.describe('Mentions', () => {
             <span data-lexical-text="true">Skywalker</span>
             <span
               class="mention"
+              spellcheck="false"
               style="background-color: rgba(24, 119, 232, 0.2);"
               data-lexical-text="true">
               Luke Skywalker
@@ -790,6 +818,7 @@ test.describe('Mentions', () => {
             <span data-lexical-text="true"></span>
             <span
               class="mention"
+              spellcheck="false"
               style="background-color: rgba(24, 119, 232, 0.2);"
               data-lexical-text="true">
               Luke Skywalker
@@ -807,6 +836,7 @@ test.describe('Mentions', () => {
             <span data-lexical-text="true">Skywalker</span>
             <span
               class="mention"
+              spellcheck="false"
               style="background-color: rgba(24, 119, 232, 0.2);"
               data-lexical-text="true">
               Luke Skywalker
@@ -814,6 +844,7 @@ test.describe('Mentions', () => {
             <span data-lexical-text="true"></span>
             <span
               class="mention"
+              spellcheck="false"
               style="background-color: rgba(24, 119, 232, 0.2);"
               data-lexical-text="true">
               Luke Skywalker
@@ -879,6 +910,7 @@ test.describe('Mentions', () => {
           dir="ltr">
           <span
             class="mention"
+            spellcheck="false"
             style="background-color: rgba(24, 119, 232, 0.2);"
             data-lexical-text="true">
             Luke Skywalker
@@ -971,6 +1003,7 @@ test.describe('Mentions', () => {
           dir="ltr">
           <span
             class="mention"
+            spellcheck="false"
             style="background-color: rgba(24, 119, 232, 0.2);"
             data-lexical-text="true">
             Luke Skywalker
diff --git a/packages/lexical-playground/__tests__/regression/379-backspace-with-mentions.spec.mjs b/packages/lexical-playground/__tests__/regression/379-backspace-with-mentions.spec.mjs
index 01635c43d02..51185ecc75b 100644
--- a/packages/lexical-playground/__tests__/regression/379-backspace-with-mentions.spec.mjs
+++ b/packages/lexical-playground/__tests__/regression/379-backspace-with-mentions.spec.mjs
@@ -35,6 +35,7 @@ test.describe('Regression test #379', () => {
         <p class="PlaygroundEditorTheme__paragraph">
           <span
             class="mention"
+            spellcheck="false"
             style="background-color: rgba(24, 119, 232, 0.2);"
             data-lexical-text="true">
             Luke Skywalker
@@ -57,6 +58,7 @@ test.describe('Regression test #379', () => {
         <p class="PlaygroundEditorTheme__paragraph">
           <span
             class="mention"
+            spellcheck="false"
             style="background-color: rgba(24, 119, 232, 0.2);"
             data-lexical-text="true">
             Luke Skywalker
diff --git a/packages/lexical-playground/src/nodes/MentionNode.ts b/packages/lexical-playground/src/nodes/MentionNode.ts
index 9f0d6e1423a..b6a41754025 100644
--- a/packages/lexical-playground/src/nodes/MentionNode.ts
+++ b/packages/lexical-playground/src/nodes/MentionNode.ts
@@ -80,6 +80,7 @@ export class MentionNode extends TextNode {
     const dom = super.createDOM(config);
     dom.style.cssText = mentionStyle;
     dom.className = 'mention';
+    dom.spellcheck = false;
     return dom;
   }