blsmedia/bot
2
0
Fork 0
Code Activity

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

Browse Source
This commit is contained in:
Baptiste Arnaud
2024-02-21 09:25:04 +01:00
parent 7cf1a3e26d
commit 508859a550
1 changed files with 17 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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