From 51e081940900c08ed8e49243ed7a56d3a07b030e Mon Sep 17 00:00:00 2001 From: Emir Karabeg Date: Wed, 5 Feb 2025 19:26:23 -0800 Subject: [PATCH] Reverted code block and removed conditional-input; trying solution with codeblock params --- .../components/sub-block/components/code.tsx | 159 ++++++------------ .../sub-block/components/condition-input.tsx | 151 ----------------- .../components/sub-block/sub-block.tsx | 5 - blocks/blocks/condition.ts | 4 +- blocks/types.ts | 1 - 5 files changed, 52 insertions(+), 268 deletions(-) delete mode 100644 app/w/[id]/components/workflow-block/components/sub-block/components/condition-input.tsx diff --git a/app/w/[id]/components/workflow-block/components/sub-block/components/code.tsx b/app/w/[id]/components/workflow-block/components/sub-block/components/code.tsx index d9157298b7..31498f7849 100644 --- a/app/w/[id]/components/workflow-block/components/sub-block/components/code.tsx +++ b/app/w/[id]/components/workflow-block/components/sub-block/components/code.tsx @@ -11,23 +11,9 @@ interface CodeProps { blockId: string subBlockId: string isConnecting: boolean - inConditionSubBlock?: boolean - value?: string - onChange?: (value: string) => void - controlled?: boolean - onSourceBlockIdChange?: (blockId: string | null) => void } -export function Code({ - blockId, - subBlockId, - isConnecting, - inConditionSubBlock, - value: controlledValue, - onChange, - controlled = false, - onSourceBlockIdChange, -}: CodeProps) { +export function Code({ blockId, subBlockId, isConnecting }: CodeProps) { const [storeValue, setStoreValue] = useSubBlockValue(blockId, subBlockId) const [code, setCode] = useState('') const [lineCount, setLineCount] = useState(1) @@ -39,14 +25,12 @@ export function Code({ // Add new state for tracking visual line heights const [visualLineHeights, setVisualLineHeights] = useState([]) - // Modify the useEffect to handle both controlled and uncontrolled modes + // Sync code with store value on initial load and when store value changes useEffect(() => { - if (controlled) { - setCode(controlledValue || '') - } else if (storeValue !== null) { + if (storeValue !== null) { setCode(storeValue.toString()) } - }, [storeValue, controlledValue, controlled]) + }, [storeValue]) // Update the line counting logic to account for wrapped lines useEffect(() => { @@ -145,91 +129,30 @@ export function Code({ return numbers } - const handleCodeChange = (newCode: string) => { - setCode(newCode) - if (controlled) { - onChange?.(newCode) - } else { - setStoreValue(newCode) - } - - // Get the textarea element - const textarea = editorRef.current?.querySelector('textarea') - if (textarea) { - // Important: Use requestAnimationFrame to ensure we get the updated cursor position - requestAnimationFrame(() => { - const pos = textarea.selectionStart - setCursorPosition(pos) - - const trigger = checkTagTrigger(newCode, pos) - setShowTags(trigger.show) - if (!trigger.show) { - setActiveSourceBlockId(null) - onSourceBlockIdChange?.(null) - } - }) - } - } - - // Add an onKeyDown handler to ensure we catch the '<' character immediately - const handleKeyDown = (e: React.KeyboardEvent) => { - if (e.key === '<') { - const textarea = e.target as HTMLTextAreaElement - const pos = textarea.selectionStart - const newCode = code.slice(0, pos) + '<' + code.slice(pos) - - setCode(newCode) - if (controlled) { - onChange?.(newCode) - } else { - setStoreValue(newCode) - } - - setCursorPosition(pos + 1) - setShowTags(true) - } - } - - // Handle tag selection - const handleTagSelect = (newValue: string) => { - setCode(newValue) - if (controlled) { - onChange?.(newValue) - } else { - setStoreValue(newValue) - } - setShowTags(false) - setActiveSourceBlockId(null) - onSourceBlockIdChange?.(null) - } - - // Modify handleDrop to support both controlled and uncontrolled modes + // Handle drops from connection blocks const handleDrop = (e: React.DragEvent) => { e.preventDefault() try { const data = JSON.parse(e.dataTransfer.getData('application/json')) if (data.type !== 'connectionBlock') return + // Get current cursor position from the textarea const textarea = editorRef.current?.querySelector('textarea') const dropPosition = textarea?.selectionStart ?? code.length + // Insert '<' at drop position to trigger the dropdown const newValue = code.slice(0, dropPosition) + '<' + code.slice(dropPosition) setCode(newValue) - if (controlled) { - onChange?.(newValue) - } else { - setStoreValue(newValue) - } - + setStoreValue(newValue) setCursorPosition(dropPosition + 1) setShowTags(true) if (data.connectionData?.sourceBlockId) { setActiveSourceBlockId(data.connectionData.sourceBlockId) - onSourceBlockIdChange?.(data.connectionData.sourceBlockId) } + // Set cursor position after state updates setTimeout(() => { if (textarea) { textarea.selectionStart = dropPosition + 1 @@ -242,16 +165,23 @@ export function Code({ } } + // Handle tag selection + const handleTagSelect = (newValue: string) => { + setCode(newValue) + setStoreValue(newValue) + setShowTags(false) + setActiveSourceBlockId(null) + } + return (
!inConditionSubBlock && e.preventDefault()} - onDrop={(e) => !inConditionSubBlock && handleDrop(e)} + onDragOver={(e) => e.preventDefault()} + onDrop={handleDrop} > {/* Updated line numbers */}
{code.length === 0 && (
- {inConditionSubBlock ? ' === true' : 'Write JavaScript...'} + Write JavaScript...
)} { + setCode(newCode) + setStoreValue(newCode) + + // Check for tag trigger + const textarea = editorRef.current?.querySelector('textarea') + if (textarea) { + const pos = textarea.selectionStart + setCursorPosition(pos) + const trigger = checkTagTrigger(newCode, pos) + setShowTags(trigger.show) + if (!trigger.show) { + setActiveSourceBlockId(null) + } + } + }} highlight={(code) => highlight(code, languages.javascript, 'javascript')} padding={12} style={{ @@ -283,21 +227,18 @@ export function Code({ /> {showTags && ( -
- { - setShowTags(false) - setActiveSourceBlockId(null) - onSourceBlockIdChange?.(null) - }} - /> -
+ { + setShowTags(false) + setActiveSourceBlockId(null) + }} + /> )}
diff --git a/app/w/[id]/components/workflow-block/components/sub-block/components/condition-input.tsx b/app/w/[id]/components/workflow-block/components/sub-block/components/condition-input.tsx deleted file mode 100644 index 35297eac7f..0000000000 --- a/app/w/[id]/components/workflow-block/components/sub-block/components/condition-input.tsx +++ /dev/null @@ -1,151 +0,0 @@ -import { useState } from 'react' -import { PlusIcon, XIcon } from 'lucide-react' -import { Button } from '@/components/ui/button' -import { TagDropdown, checkTagTrigger } from '@/components/ui/tag-dropdown' -import { cn } from '@/lib/utils' -import { useSubBlockValue } from '../hooks/use-sub-block-value' -import { Code } from './code' - -interface ConditionInputProps { - blockId: string - subBlockId: string - isConnecting: boolean -} - -interface Condition { - id: string - type: 'if' | 'else if' | 'else' - code: string -} - -export function ConditionInput({ blockId, subBlockId, isConnecting }: ConditionInputProps) { - const [value, setValue] = useSubBlockValue(blockId, subBlockId) - const [showTags, setShowTags] = useState(false) - const [cursorPosition, setCursorPosition] = useState(0) - const [activeSourceBlockId, setActiveSourceBlockId] = useState(null) - const [activeConditionId, setActiveConditionId] = useState(null) - - // Initialize with default if/else conditions if no value exists - const conditions: Condition[] = - Array.isArray(value) && value.length > 0 && 'type' in value[0] - ? (value as unknown as Condition[]) - : [ - { id: crypto.randomUUID(), type: 'if', code: '' }, - { id: crypto.randomUUID(), type: 'else', code: '' }, - ] - - const addCondition = (afterId: string) => { - const index = conditions.findIndex((c) => c.id === afterId) - const newCondition: Condition = { - id: crypto.randomUUID(), - type: 'else if', - code: '', - } - const newConditions = [ - ...conditions.slice(0, index + 1), - newCondition, - ...conditions.slice(index + 1), - ] - setValue(newConditions) - } - - const removeCondition = (id: string) => { - setValue(conditions.filter((c) => c.id !== id)) - } - - const updateCode = (id: string, code: string) => { - setValue(conditions.map((c) => (c.id === id ? { ...c, code } : c))) - } - - // Handle tag selection - const handleTagSelect = (newValue: string) => { - if (activeConditionId) { - const condition = conditions.find((c) => c.id === activeConditionId) - if (condition) { - updateCode(activeConditionId, newValue) - } - } - setShowTags(false) - setActiveSourceBlockId(null) - setActiveConditionId(null) - } - - // Handle code changes and tag triggers - const handleCodeChange = (conditionId: string, newCode: string) => { - updateCode(conditionId, newCode) - - // Check for tag trigger - const trigger = checkTagTrigger(newCode, cursorPosition) - if (trigger.show) { - setShowTags(true) - setActiveConditionId(conditionId) - } else { - setShowTags(false) - setActiveSourceBlockId(null) - setActiveConditionId(null) - } - } - - return ( -
- {conditions.map((condition) => ( -
-
-
- {condition.type} -
- {condition.type !== 'else' && ( - - )} - {condition.type !== 'if' && ( - - )} -
-
- handleCodeChange(condition.id, newCode)} - controlled={true} - onSourceBlockIdChange={setActiveSourceBlockId} - /> -
- - {showTags && activeConditionId === condition.id && ( -
- { - setShowTags(false) - setActiveSourceBlockId(null) - setActiveConditionId(null) - }} - /> -
- )} -
- ))} -
- ) -} diff --git a/app/w/[id]/components/workflow-block/components/sub-block/sub-block.tsx b/app/w/[id]/components/workflow-block/components/sub-block/sub-block.tsx index 3bd7e12dc9..adb74f6fd8 100644 --- a/app/w/[id]/components/workflow-block/components/sub-block/sub-block.tsx +++ b/app/w/[id]/components/workflow-block/components/sub-block/sub-block.tsx @@ -2,7 +2,6 @@ import { Label } from '@/components/ui/label' import { SubBlockConfig } from '../../../../../../../blocks/types' import { CheckboxList } from './components/checkbox-list' import { Code } from './components/code' -import { ConditionInput } from './components/condition-input' import { Dropdown } from './components/dropdown' import { LongInput } from './components/long-input' import { ShortInput } from './components/short-input' @@ -83,10 +82,6 @@ export function SubBlock({ blockId, config, isConnecting }: SubBlockProps) { layout={config.layout} /> ) - case 'condition-input': - return ( - - ) default: return null } diff --git a/blocks/blocks/condition.ts b/blocks/blocks/condition.ts index 0f50f163ab..78f4215ab9 100644 --- a/blocks/blocks/condition.ts +++ b/blocks/blocks/condition.ts @@ -28,8 +28,8 @@ export const ConditionBlock: BlockConfig = { }, subBlocks: [ { - id: 'conditions', - type: 'condition-input', + id: 'if', + type: 'code', layout: 'full', outputHandle: true, }, diff --git a/blocks/types.ts b/blocks/types.ts index b05d2d6d97..a9957a088c 100644 --- a/blocks/types.ts +++ b/blocks/types.ts @@ -41,7 +41,6 @@ export type SubBlockType = | 'switch' | 'tool-input' | 'checkbox-list' - | 'condition-input' export type SubBlockLayout = 'full' | 'half' export interface ParamConfig {