From 369934289d5477c916805dc63dc79c6a48458720 Mon Sep 17 00:00:00 2001
From: Maksym Plavinskyi <Maksym_Plavinskyi@epam.com>
Date: Tue, 14 May 2024 10:49:29 -0500
Subject: [PATCH] fix(toolbar-plugin): Adding an extra empty paragraph when
 insert code node

---
 .../lexical-playground/__tests__/e2e/CodeBlock.spec.mjs   | 1 +
 .../lexical-playground/__tests__/e2e/Selection.spec.mjs   | 1 +
 .../src/plugins/ToolbarPlugin/index.tsx                   | 8 ++++++--
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/lexical-playground/__tests__/e2e/CodeBlock.spec.mjs b/packages/lexical-playground/__tests__/e2e/CodeBlock.spec.mjs
index 0026e7131760..430e14272cbc 100644
--- a/packages/lexical-playground/__tests__/e2e/CodeBlock.spec.mjs
+++ b/packages/lexical-playground/__tests__/e2e/CodeBlock.spec.mjs
@@ -221,6 +221,7 @@ test.describe('CodeBlock', () => {
     await assertHTML(
       page,
       html`
+        <p class="PlaygroundEditorTheme__paragraph"><br /></p>
         <code
           class="PlaygroundEditorTheme__code PlaygroundEditorTheme__ltr"
           dir="ltr"
diff --git a/packages/lexical-playground/__tests__/e2e/Selection.spec.mjs b/packages/lexical-playground/__tests__/e2e/Selection.spec.mjs
index 3956e85420a6..5aa9fe1f6af4 100644
--- a/packages/lexical-playground/__tests__/e2e/Selection.spec.mjs
+++ b/packages/lexical-playground/__tests__/e2e/Selection.spec.mjs
@@ -144,6 +144,7 @@ test.describe('Selection', () => {
           dir="ltr">
           <span data-lexical-text="true">Line1</span>
         </p>
+        <p class="PlaygroundEditorTheme__paragraph"><br /></p>
         <code
           class="PlaygroundEditorTheme__code PlaygroundEditorTheme__ltr"
           spellcheck="false"
diff --git a/packages/lexical-playground/src/plugins/ToolbarPlugin/index.tsx b/packages/lexical-playground/src/plugins/ToolbarPlugin/index.tsx
index 33207abdcba6..696bf1cb8425 100644
--- a/packages/lexical-playground/src/plugins/ToolbarPlugin/index.tsx
+++ b/packages/lexical-playground/src/plugins/ToolbarPlugin/index.tsx
@@ -269,17 +269,21 @@ function BlockFormatDropDown({
         let selection = $getSelection();
 
         if (selection !== null) {
+          const emptyParagraph = $createParagraphNode();
+          const codeNode = $createCodeNode();
+
           if (selection.isCollapsed()) {
-            $setBlocksType(selection, () => $createCodeNode());
+            $setBlocksType(selection, () => codeNode);
           } else {
             const textContent = selection.getTextContent();
-            const codeNode = $createCodeNode();
             selection.insertNodes([codeNode]);
             selection = $getSelection();
             if ($isRangeSelection(selection)) {
               selection.insertRawText(textContent);
             }
           }
+
+          codeNode.insertBefore(emptyParagraph);
         }
       });
     }