From 927feae32b13b87a476f73b206680dcca1c6c588 Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <baptiste.arnaud95@gmail.com>
Date: Mon, 19 Feb 2024 16:50:26 +0100
Subject: [PATCH] =?UTF-8?q?:children=5Fcrossing:=20(buttons)=20Detect=20mu?=
 =?UTF-8?q?lti=20items=20pasting=20with=20br=E2=80=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../inputs/buttons/components/ButtonsItemNode.tsx    | 12 ++++++++----
 .../editor/providers/typebotActions/items.ts         |  1 +
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/apps/builder/src/features/blocks/inputs/buttons/components/ButtonsItemNode.tsx b/apps/builder/src/features/blocks/inputs/buttons/components/ButtonsItemNode.tsx
index 043b73642..7e83a19b6 100644
--- a/apps/builder/src/features/blocks/inputs/buttons/components/ButtonsItemNode.tsx
+++ b/apps/builder/src/features/blocks/inputs/buttons/components/ButtonsItemNode.tsx
@@ -1,6 +1,5 @@
 import {
   EditablePreview,
-  EditableInput,
   Editable,
   Fade,
   IconButton,
@@ -13,6 +12,7 @@ import {
   Portal,
   useColorModeValue,
   SlideFade,
+  EditableTextarea,
 } from '@chakra-ui/react'
 import { PlusIcon, SettingsIcon } from '@/components/icons'
 import { useTypebot } from '@/features/editor/providers/TypebotProvider'
@@ -65,10 +65,14 @@ export const ButtonsItemNode = ({ item, indices, isMouseOver }: Props) => {
   }
 
   const handleEditableChange = (val: string) => {
+    const splittedBreakLines = val.split('\n')
+    const splittedCommas = val.split(',')
     const isPastingMultipleItems =
-      val.length - itemValue.length > 1 && val.includes(',')
+      val.length - itemValue.length > 1 &&
+      (splittedBreakLines.length > 2 || splittedCommas.length > 2)
     if (isPastingMultipleItems) {
-      const values = val.split(',')
+      const values =
+        splittedBreakLines.length > 2 ? splittedBreakLines : splittedCommas
       return values.forEach((v, i) => {
         if (i === 0) {
           setItemValue(v)
@@ -120,7 +124,7 @@ export const ButtonsItemNode = ({ item, indices, isMouseOver }: Props) => {
               }
               cursor="pointer"
             />
-            <EditableInput onMouseDownCapture={(e) => e.stopPropagation()} />
+            <EditableTextarea onMouseDownCapture={(e) => e.stopPropagation()} />
           </Editable>
           <HitboxExtension />
           <SlideFade
diff --git a/apps/builder/src/features/editor/providers/typebotActions/items.ts b/apps/builder/src/features/editor/providers/typebotActions/items.ts
index 52995b97a..9030d23ec 100644
--- a/apps/builder/src/features/editor/providers/typebotActions/items.ts
+++ b/apps/builder/src/features/editor/providers/typebotActions/items.ts
@@ -170,6 +170,7 @@ const itemsAction = (setTypebot: SetTypebot): ItemsActions => ({
         const block = typebot.groups[groupIndex].blocks[
           blockIndex
         ] as BlockWithItems
+        if (block.items.length === 1) return
         const removingItem = block.items[itemIndex]
         block.items.splice(itemIndex, 1)
         deleteConnectedEdgesDraft(typebot, removingItem.id)