Function ExpandTextDialog

packages/agentflow/src/atoms/ExpandTextDialog.tsx:39–194

({
    open,
    value,
    title,
    placeholder,
    disabled = false,
    inputType = 'string',
    language,
    suggestionItems,
    onConfirm,
    onCancel
}: ExpandTextDialogProps)

 * WYSIWYG TipTap editor and a raw markdown text view.
 */
export function ExpandTextDialog({
    open,
    value,
    title,
    placeholder,
    disabled = false,
    inputType = 'string',
    language,
    suggestionItems,
    onConfirm,
    onCancel
}: ExpandTextDialogProps) {
    const [localValue, setLocalValue] = useState(value)
    const [prevOpen, setPrevOpen] = useState(open)
    const [mode, setMode] = useState<EditorMode>('edit')
    const editorRef = useRef<Editor | null>(null)

    // Sync localValue and reset mode synchronously when the dialog opens so the TipTap
    // editor initialises with the correct content (useEffect would leave a one-render
    // gap where localValue is stale, causing the editor to show empty/old text).
    if (open && !prevOpen) {
        setLocalValue(value)
        setMode('edit')
        setPrevOpen(true)
    } else if (!open && prevOpen) {
        setPrevOpen(false)
    }

    const handleConfirm = useCallback(() => {
        onConfirm(localValue)
    }, [localValue, onConfirm])

    const handleModeChange = (_: React.MouseEvent<HTMLElement>, newMode: EditorMode | null) => {
        if (!newMode || newMode === mode) return
        // When switching to Source, flush the editor's current state to markdown so the
        // textarea shows markdown rather than a raw HTML string (Gap 3 fix — mirrors PR #6021).
        if (newMode === 'source' && editorRef.current) {
            setLocalValue(unescapeXmlTags(getEditorMarkdown(editorRef.current)))
        }
        setMode(newMode)
    }

    const isRichText = inputType === 'string'

    return (
        <Dialog open={open} fullWidth maxWidth='md'>
            <DialogContent>
                {(title || isRichText) && (
                    <Box sx={{ display: 'flex', alignItems: 'center', mb: '10px' }}>
                        {title && (
                            <Typography variant='h4' sx={{ flex: 1 }}>
                                {title}
                            </Typography>
                        )}
                        {!title && <Box sx={{ flex: 1 }} />}
                        {isRichText && (
                            <ToggleButtonGroup
                                value={mode}