blsmedia/bot
2
0
Fork 0
Code Activity

⚡ (editor) Improve textbox incoming variable detection

Browse Source
This commit is contained in:
Baptiste Arnaud
2023-01-28 15:36:49 +01:00
parent cb83935da9
commit 8d592a3cc3
2 changed files with 49 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
apps/builder/src/components/inputs/TextBox.tsx
View File

@ -14,6 +14,7 @@ import { VariablesButton } from '@/features/variables'
import { MoreInfoTooltip } from '../MoreInfoTooltip' import { MoreInfoTooltip } from '../MoreInfoTooltip'
export type TextBoxProps = { export type TextBoxProps = {
defaultValue?: string
onChange: (value: string) => void onChange: (value: string) => void
TextBox: TextBox:
| ComponentWithAs<'textarea', TextareaProps> | ComponentWithAs<'textarea', TextareaProps>
@ -22,7 +23,7 @@ export type TextBoxProps = {
debounceTimeout?: number debounceTimeout?: number
label?: string label?: string
moreInfoTooltip?: string moreInfoTooltip?: string
} & Omit<InputProps & TextareaProps, 'onChange'> } & Omit<InputProps & TextareaProps, 'onChange' | 'defaultValue'>
export const TextBox = ({ export const TextBox = ({
onChange, onChange,
@ -36,8 +37,10 @@ export const TextBox = ({
const textBoxRef = useRef<(HTMLInputElement & HTMLTextAreaElement) | null>( const textBoxRef = useRef<(HTMLInputElement & HTMLTextAreaElement) | null>(
null null
) )
const [carretPosition, setCarretPosition] = useState<number>(0) const [value, setValue] = useState<string>(props.defaultValue ?? '')
const [value, setValue] = useState(props.defaultValue ?? '') const [carretPosition, setCarretPosition] = useState<number>(
props.defaultValue?.length ?? 0
)
const [isTouched, setIsTouched] = useState(false) const [isTouched, setIsTouched] = useState(false)
const debounced = useDebouncedCallback( const debounced = useDebouncedCallback(
(value) => { (value) => {
@ -68,16 +71,12 @@ export const TextBox = ({
} }
const handleVariableSelected = (variable?: Variable) => { const handleVariableSelected = (variable?: Variable) => {
if (!textBoxRef.current || !variable) return if (!variable) return
setIsTouched(true) setIsTouched(true)
const cursorPosition = carretPosition const textBeforeCursorPosition = value.substring(0, carretPosition)
const textBeforeCursorPosition = textBoxRef.current.value.substring( const textAfterCursorPosition = value.substring(
0, carretPosition,
cursorPosition value.length
)
const textAfterCursorPosition = textBoxRef.current.value.substring(
cursorPosition,
textBoxRef.current.value.length
) )
const newValue = const newValue =
textBeforeCursorPosition + textBeforeCursorPosition +
@ -85,17 +84,18 @@ export const TextBox = ({
textAfterCursorPosition textAfterCursorPosition
setValue(newValue) setValue(newValue)
debounced(newValue) debounced(newValue)
textBoxRef.current.focus() const newCarretPosition = carretPosition + `{{${variable.name}}}`.length
setCarretPosition(newCarretPosition)
textBoxRef.current?.focus()
setTimeout(() => { setTimeout(() => {
if (!textBoxRef.current) return if (!textBoxRef.current) return
textBoxRef.current.selectionStart = textBoxRef.current.selectionEnd = textBoxRef.current.selectionStart = textBoxRef.current.selectionEnd =
carretPosition + `{{${variable.name}}}`.length newCarretPosition
setCarretPosition(textBoxRef.current.selectionStart)
}, 100) }, 100)
} }
const handleKeyUp = () => { const updateCarretPosition = () => {
if (!textBoxRef.current?.selectionStart) return if (textBoxRef.current?.selectionStart === undefined) return
setCarretPosition(textBoxRef.current.selectionStart) setCarretPosition(textBoxRef.current.selectionStart)
} }
@ -103,8 +103,8 @@ export const TextBox = ({
<TextBox <TextBox
ref={textBoxRef} ref={textBoxRef}
value={value} value={value}
onKeyUp={handleKeyUp} onKeyUp={updateCarretPosition}
onClick={handleKeyUp} onClick={updateCarretPosition}
onChange={handleChange} onChange={handleChange}
{...props} {...props}
/> />

52
apps/docs/openapi/builder/_spec_.json
View File

@ -696,30 +696,38 @@
"typebots": { "typebots": {
"type": "array", "type": "array",
"items": { "items": {
"type": "object", "allOf": [
"properties": { {
"name": { "type": "object",
"type": "string" "properties": {
"name": {
"type": "string"
},
"icon": {
"type": "string",
"nullable": true
},
"id": {
"type": "string"
}
},
"required": [
"name",
"icon",
"id"
],
"additionalProperties": false
}, },
"icon": { {
"type": "string", "type": "object",
"nullable": true "properties": {
}, "publishedTypebotId": {
"id": { "type": "string"
"type": "string" }
}, },
"publishedTypebotId": { "additionalProperties": false
"type": "string",
"nullable": true
} }
}, ]
"required": [
"name",
"icon",
"id",
"publishedTypebotId"
],
"additionalProperties": false
} }
} }
}, },