Function RichInput

packages/ui/src/ui-component/input/RichInput.jsx:109–184

({ inputParam, value, nodes, edges, nodeId, onChange, disabled = false })

}))

export const RichInput = ({ inputParam, value, nodes, edges, nodeId, onChange, disabled = false }) => {
    const useMarkdown = !!inputParam?.rows
    const customization = useSelector((state) => state.customization)
    const isDarkMode = customization.isDarkMode
    const [availableNodesForVariable, setAvailableNodesForVariable] = useState([])
    const [availableState, setAvailableState] = useState([])
    const [nodeData, setNodeData] = useState({})
    const [isNodeInsideInteration, setIsNodeInsideInteration] = useState(false)

    useEffect(() => {
        if (!disabled && nodes && edges && nodeId && inputParam) {
            const nodesForVariable = inputParam?.acceptVariable ? getAvailableNodesForVariable(nodes, edges, nodeId, inputParam.id) : []
            setAvailableNodesForVariable(nodesForVariable)

            const startAgentflowNode = nodes.find((node) => node.data.name === 'startAgentflow')
            const state = startAgentflowNode?.data?.inputs?.startState
            setAvailableState(state)

            const agentflowNode = nodes.find((node) => node.data.id === nodeId)
            setNodeData(agentflowNode?.data)

            setIsNodeInsideInteration(nodes.find((node) => node.data.id === nodeId)?.extent === 'parent')
        }
    }, [disabled, inputParam, nodes, edges, nodeId])

    const editor = useEditor(
        {
            extensions: [
                ...extensions(
                    availableNodesForVariable,
                    availableState,
                    inputParam?.acceptNodeOutputAsVariable,
                    nodes,
                    nodeData,
                    isNodeInsideInteration,
                    useMarkdown
                ),
                Placeholder.configure({ placeholder: inputParam?.placeholder })
            ],
            content: '',
            onUpdate: ({ editor }) => {
                if (useMarkdown) {
                    try {
                        onChange(unescapeXmlTags(editor.getMarkdown()))
                    } catch {
                        onChange(editor.getHTML())
                    }
                } else {
                    onChange(editor.getHTML())
                }
            },
            editable: !disabled
        },
        [availableNodesForVariable]
    )

    // Load initial content after editor is ready, detecting HTML vs markdown
    useEffect(() => {