fix(toolbar-plugin): Adding an extra empty paragraph when insert code…

… node
facebook · May 14, 2024 · 3699342 · 3699342
1 parent 267382e
commit 3699342
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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);
         }
       });
     }