🚸 Auto focus new blocks and fix text editor close callback

apps/builder/src/features/editor/providers/typebotActions/blocks.ts

@@ -16,7 +16,10 @@ import { duplicateItemDraft } from './items'
 import { parseNewBlock } from '@/features/typebot/helpers/parseNewBlock'
 
 export type BlocksActions = {
-  createBlock: (block: BlockV6 | BlockV6['type'], indices: BlockIndices) => void
+  createBlock: (
+    block: BlockV6 | BlockV6['type'],
+    indices: BlockIndices
+  ) => string | undefined
   updateBlock: (
     indices: BlockIndices,
     updates: Partial<Omit<BlockV6, 'id' | 'type'>>
@@ -35,12 +38,15 @@ export type WebhookCallBacks = {
 }
 
 export const blocksAction = (setTypebot: SetTypebot): BlocksActions => ({
-  createBlock: (block: BlockV6 | BlockV6['type'], indices: BlockIndices) =>
+  createBlock: (block: BlockV6 | BlockV6['type'], indices: BlockIndices) => {
+    let blockId
     setTypebot((typebot) =>
       produce(typebot, (typebot) => {
-        createBlockDraft(typebot, block, indices)
+        blockId = createBlockDraft(typebot, block, indices)
       })
-    ),
+    )
+    return blockId
+  },
   updateBlock: (
     { groupIndex, blockIndex }: BlockIndices,
     updates: Partial<Omit<Block, 'id' | 'type'>>
@@ -97,19 +103,22 @@ export const createBlockDraft = (
       edgeId: blocks[blockIndex - 1].outgoingEdgeId as string,
       groupIndex,
     })
-  typeof block === 'string'
-    ? createNewBlock(typebot, block, { groupIndex, blockIndex })
-    : moveBlockToGroup(typebot, block, { groupIndex, blockIndex })
+  const blockId =
+    typeof block === 'string'
+      ? createNewBlock(typebot, block, { groupIndex, blockIndex })
+      : moveBlockToGroup(typebot, block, { groupIndex, blockIndex })
   removeEmptyGroups(typebot)
+  return blockId
 }
 
-const createNewBlock = async (
+const createNewBlock = (
   typebot: Draft<Typebot>,
   type: BlockV6['type'],
   { groupIndex, blockIndex }: BlockIndices
 ) => {
   const newBlock = parseNewBlock(type)
   typebot.groups[groupIndex].blocks.splice(blockIndex ?? 0, 0, newBlock)
+  return newBlock.id
 }
 
 const moveBlockToGroup = (

apps/builder/src/features/editor/providers/typebotActions/groups.ts

@@ -26,7 +26,7 @@ export type GroupsActions = {
       block: BlockV6 | BlockV6['type']
       indices: BlockIndices
     }
-  ) => void
+  ) => string | void
   updateGroup: (
     groupIndex: number,
     updates: Partial<Omit<GroupV6, 'id'>>
@@ -54,7 +54,8 @@ const groupsActions = (setTypebot: SetTypebot): GroupsActions => ({
     groupLabel?: string
     block: BlockV6 | BlockV6['type']
     indices: BlockIndices
-  }) =>
+  }) => {
+    let newBlockId
     setTypebot((typebot) =>
       produce(typebot, (typebot) => {
         const newGroup: GroupV6 = {
@@ -64,9 +65,11 @@ const groupsActions = (setTypebot: SetTypebot): GroupsActions => ({
           blocks: [],
         }
         typebot.groups.push(newGroup)
-        createBlockDraft(typebot, block, indices)
+        newBlockId = createBlockDraft(typebot, block, indices)
       })
-    ),
+    )
+    return newBlockId
+  },
   updateGroup: (groupIndex: number, updates: Partial<Omit<GroupV6, 'id'>>) =>
     setTypebot((typebot) =>
       produce(typebot, (typebot) => {

apps/builder/src/features/graph/components/Graph.tsx

@@ -148,7 +148,7 @@ export const Graph = ({
     )
     const id = createId()
     updateGroupCoordinates(id, coordinates)
-    createGroup({
+    const newBlockId = createGroup({
       id,
       ...coordinates,
       block: draggedBlock ?? (draggedBlockType as BlockV6['type']),
@@ -156,6 +156,7 @@ export const Graph = ({
     })
     setDraggedBlock(undefined)
     setDraggedBlockType(undefined)
+    if (newBlockId) setOpenedBlockId(newBlockId)
   }
 
   const handleCaptureMouseDown = (e: MouseEvent) => {

apps/builder/src/features/graph/components/nodes/block/BlockNode.tsx

@@ -147,6 +147,7 @@ export const BlockNode = ({
   const handleCloseEditor = (content: TElement[]) => {
     const updatedBlock = { ...block, content: { richText: content } }
     updateBlock(indices, updatedBlock)
+    setOpenedBlockId(undefined)
   }
 
   const handleClick = (e: React.MouseEvent) => {

apps/builder/src/features/graph/components/nodes/block/BlockNodesList.tsx

@@ -27,7 +27,7 @@ export const BlockNodesList = ({ blocks, groupIndex, groupRef }: Props) => {
     setDraggedBlockType,
   } = useBlockDnd()
   const { typebot, createBlock, detachBlockFromGroup } = useTypebot()
-  const { isReadOnly, graphPosition } = useGraph()
+  const { isReadOnly, graphPosition, setOpenedBlockId } = useGraph()
   const [expandedPlaceholderIndex, setExpandedPlaceholderIndex] = useState<
     number | undefined
   >()
@@ -72,7 +72,7 @@ export const BlockNodesList = ({ blocks, groupIndex, groupRef }: Props) => {
       e.clientY,
       placeholderRefs
     )
-    createBlock(
+    const blockId = createBlock(
       (draggedBlock || draggedBlockType) as BlockV6 | BlockV6['type'],
       {
         groupIndex,
@@ -81,6 +81,7 @@ export const BlockNodesList = ({ blocks, groupIndex, groupRef }: Props) => {
     )
     setDraggedBlock(undefined)
     setDraggedBlockType(undefined)
+    if (blockId) setOpenedBlockId(blockId)
   }
 
   const handleBlockMouseDown =