🚸 (buttons) Fix new buttons new line and escape behavior

apps/builder/src/features/blocks/inputs/buttons/components/ButtonsItemNode.tsx

@@ -18,7 +18,7 @@ import { PlusIcon, SettingsIcon } from '@/components/icons'
 import { useTypebot } from '@/features/editor/providers/TypebotProvider'
 import { ButtonItem, Item, ItemIndices } from '@typebot.io/schemas'
 import React, { useRef, useState } from 'react'
-import { isNotDefined } from '@typebot.io/lib'
+import { isEmpty } from '@typebot.io/lib'
 import { useGraph } from '@/features/graph/providers/GraphProvider'
 import { ButtonsItemSettings } from './ButtonsItemSettings'
 import { useTranslate } from '@tolgee/react'
@@ -34,7 +34,10 @@ export const ButtonsItemNode = ({ item, indices, isMouseOver }: Props) => {
   const { deleteItem, updateItem, createItem } = useTypebot()
   const { openedItemId, setOpenedItemId } = useGraph()
   const [itemValue, setItemValue] = useState(
-    item.content ?? t('blocks.inputs.button.clickToEdit.label')
+    item.content ??
+      (indices.itemIndex === 0
+        ? t('blocks.inputs.button.clickToEdit.label')
+        : '')
   )
   const editableRef = useRef<HTMLDivElement | null>(null)
   const ref = useRef<HTMLDivElement | null>(null)
@@ -53,7 +56,8 @@ export const ButtonsItemNode = ({ item, indices, isMouseOver }: Props) => {
   const handleKeyPress = async (e: React.KeyboardEvent<HTMLDivElement>) => {
     if (
       e.key === 'Escape' &&
-      itemValue === t('blocks.inputs.button.clickToEdit.label')
+      (itemValue === t('blocks.inputs.button.clickToEdit.label') ||
+        itemValue === '')
     )
       deleteItem(indices)
     if (
@@ -65,6 +69,7 @@ export const ButtonsItemNode = ({ item, indices, isMouseOver }: Props) => {
   }
 
   const handleEditableChange = (val: string) => {
+    if (val.length - itemValue.length && val.endsWith('\n')) return
     const splittedBreakLines = val.split('\n')
     const splittedCommas = val.split(',')
     const isPastingMultipleItems =
@@ -108,7 +113,10 @@ export const ButtonsItemNode = ({ item, indices, isMouseOver }: Props) => {
           <Editable
             ref={editableRef}
             flex="1"
-            startWithEditView={isNotDefined(item.content)}
+            startWithEditView={
+              isEmpty(item.content) ||
+              item.content === t('blocks.inputs.button.clickToEdit.label')
+            }
             value={itemValue}
             onChange={handleEditableChange}
             onSubmit={handleInputSubmit}
@@ -124,7 +132,11 @@ export const ButtonsItemNode = ({ item, indices, isMouseOver }: Props) => {
               }
               cursor="pointer"
             />
-            <EditableTextarea onMouseDownCapture={(e) => e.stopPropagation()} />
+            <EditableTextarea
+              onMouseDownCapture={(e) => e.stopPropagation()}
+              resize="none"
+              rows={1}
+            />
           </Editable>
           <HitboxExtension />
           <SlideFade