feat(editor): ♿️ Create new item when hitting enter

apps/builder/components/shared/Graph/Nodes/ItemNode/ItemNode.tsx

@@ -20,20 +20,13 @@ type Props = {
   item: Item
   indices: ItemIndices
   isReadOnly: boolean
-  isLastItem: boolean
   onMouseDown?: (
     stepNodePosition: { absolute: Coordinates; relative: Coordinates },
     item: ButtonItem
   ) => void
 }
 
-export const ItemNode = ({
+export const ItemNode = ({ item, indices, isReadOnly, onMouseDown }: Props) => {
-  item,
-  indices,
-  isReadOnly,
-  isLastItem,
-  onMouseDown,
-}: Props) => {
   const { typebot } = useTypebot()
   const { previewingEdge } = useGraph()
   const [isMouseOver, setIsMouseOver] = useState(false)
@@ -86,7 +79,6 @@ export const ItemNode = ({
               item={item}
               isMouseOver={isMouseOver}
               indices={indices}
-              isLastItem={isLastItem}
             />
             {typebot && isConnectable && (
               <SourceEndpoint

apps/builder/components/shared/Graph/Nodes/ItemNode/ItemNodeContent/ItemNodeContent.tsx

@@ -7,15 +7,9 @@ type Props = {
   item: Item
   indices: ItemIndices
   isMouseOver: boolean
-  isLastItem: boolean
 }
 
-export const ItemNodeContent = ({
+export const ItemNodeContent = ({ item, indices, isMouseOver }: Props) => {
-  item,
-  indices,
-  isMouseOver,
-  isLastItem,
-}: Props) => {
   switch (item.type) {
     case ItemType.BUTTON:
       return (
@@ -23,7 +17,6 @@ export const ItemNodeContent = ({
           item={item}
           isMouseOver={isMouseOver}
           indices={indices}
-          isLastItem={isLastItem}
         />
       )
     case ItemType.CONDITION:

apps/builder/components/shared/Graph/Nodes/ItemNode/ItemNodeContent/contents/ButtonNodeContent.tsx

@@ -15,16 +15,10 @@ import { isNotDefined } from 'utils'
 type Props = {
   item: ButtonItem
   indices: ItemIndices
-  isLastItem: boolean
   isMouseOver: boolean
 }
 
-export const ButtonNodeContent = ({
+export const ButtonNodeContent = ({ item, indices, isMouseOver }: Props) => {
-  item,
-  indices,
-  isMouseOver,
-  isLastItem,
-}: Props) => {
   const { deleteItem, updateItem, createItem } = useTypebot()
   const [initialContent] = useState(item.content ?? '')
   const [itemValue, setItemValue] = useState(item.content ?? 'Click to edit')
@@ -44,12 +38,7 @@ export const ButtonNodeContent = ({
 
   const handleKeyPress = (e: React.KeyboardEvent<HTMLDivElement>) => {
     if (e.key === 'Escape' && itemValue === 'Click to edit') deleteItem(indices)
-    if (
+    if (e.key === 'Enter' && itemValue !== '' && initialContent === '')
-      e.key === 'Enter' &&
-      itemValue !== '' &&
-      isLastItem &&
-      initialContent === ''
-    )
       handlePlusClick()
   }
 

apps/builder/components/shared/Graph/Nodes/ItemNode/ItemNodesList.tsx

@@ -135,7 +135,6 @@ export const ItemNodesList = ({
             indices={{ blockIndex, stepIndex, itemIndex: idx }}
             onMouseDown={handleStepMouseDown(idx)}
             isReadOnly={isReadOnly}
-            isLastItem={idx === step.items.length - 1}
           />
           <Flex
             ref={handlePushElementRef(idx + 1)}