[lexical-playground]: Fix empty layout item causes 100% CPU usage (#6906

)

Co-authored-by: Ivaylo Pavlov <[email protected]>

packages/lexical-playground/src/plugins/LayoutPlugin/LayoutPlugin.tsx

@@ -97,6 +97,25 @@ export function LayoutPlugin(): null {
       return false;
     };
 
+    const $fillLayoutItemIfEmpty = (node: LayoutItemNode) => {
+      if (node.isEmpty()) {
+        node.append($createParagraphNode());
+      }
+    };
+
+    const $removeIsolatedLayoutItem = (node: LayoutItemNode): boolean => {
+      const parent = node.getParent<ElementNode>();
+      if (!$isLayoutContainerNode(parent)) {
+        const children = node.getChildren<LexicalNode>();
+        for (const child of children) {
+          node.insertBefore(child);
+        }
+        node.remove();
+        return true;
+      }
+      return false;
+    };
+
     return mergeRegister(
       // When layout is the last child pressing down/right arrow will insert paragraph
       // below it to allow adding more content. It's similar what $insertBlockNode
@@ -186,17 +205,17 @@ export function LayoutPlugin(): null {
         },
         COMMAND_PRIORITY_EDITOR,
       ),
-      // Structure enforcing transformers for each node type. In case nesting structure is not
-      // "Container > Item" it'll unwrap nodes and convert it back
-      // to regular content.
+
       editor.registerNodeTransform(LayoutItemNode, (node) => {
-        const parent = node.getParent<ElementNode>();
-        if (!$isLayoutContainerNode(parent)) {
-          const children = node.getChildren<LexicalNode>();
-          for (const child of children) {
-            node.insertBefore(child);
-          }
-          node.remove();
+        // Structure enforcing transformers for each node type. In case nesting structure is not
+        // "Container > Item" it'll unwrap nodes and convert it back
+        // to regular content.
+        const isRemoved = $removeIsolatedLayoutItem(node);
+
+        if (!isRemoved) {
+          // Layout item should always have a child. this function will listen
+          // for any empty layout item and fill it with a paragraph node
+          $fillLayoutItemIfEmpty(node);
         }
       }),
       editor.registerNodeTransform(LayoutContainerNode, (node) => {