Implementation:FlowiseAI Flowise ExpandTextDialog

Knowledge Sources	FlowiseAI Flowise
Domains	UI Components, Canvas Dialogs, Code Editing
Last Updated	2026-02-12 07:00 GMT

Overview

ExpandTextDialog is a portal-rendered modal dialog that provides an expanded code editor for editing string and code node input values, with optional JavaScript execution capability and result display.

Description

ExpandTextDialog renders a full-width MUI Dialog through a DOM portal with an embedded CodeEditor component. It supports both JSON and JavaScript language modes, automatically switching to js mode when the input parameter type is 'code'. For JavaScript inputs, it displays an "Execute" button (via LoadingButton) that calls nodesApi.executeCustomFunctionNode to run the code server-side and displays the result (or error) in a read-only CodeEditor below. The dialog uses PerfectScrollbar for smooth scrolling within the editor area and supports dark/light theme modes through the Redux customization state.

Usage

Use ExpandTextDialog when a node input field needs an expanded code or text editing experience. This is the primary dialog for editing JSON configurations, JavaScript custom functions, and other text-heavy node parameters. Control visibility with the show prop and pass editor configuration through dialogProps.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/ui-component/dialog/ExpandTextDialog.jsx
• Lines: 1-209

Signature

const ExpandTextDialog = ({ show, dialogProps, onCancel, onInputHintDialogClicked, onConfirm }) => { ... }

export default ExpandTextDialog

Import

import ExpandTextDialog from '@/ui-component/dialog/ExpandTextDialog'

I/O Contract

Inputs

Name	Type	Required	Description
show	bool	No	Controls dialog visibility
dialogProps	object	No	Configuration object containing value (string), inputParam (with label, type, placeholder, hint, hideCodeExecute), languageType (optional override), cancelButtonName, confirmButtonName, and disabled flag
onCancel	function	No	Callback invoked when the Cancel button is clicked
onInputHintDialogClicked	function	No	Callback invoked with the hint object when the hint button is clicked
onConfirm	function	No	Callback invoked with (inputValue, inputParam.name) when the Confirm button is clicked

Outputs

Name	Type	Description
(rendered JSX)	React portal	A modal dialog with a CodeEditor, optional Execute button for JS code, and execution result display, rendered into the #portal DOM element

Usage Examples

Basic Usage

import ExpandTextDialog from '@/ui-component/dialog/ExpandTextDialog'

const [showDialog, setShowDialog] = useState(false)

// For JSON editing
const dialogProps = {
    value: '{"key": "value"}',
    inputParam: {
        name: 'jsonConfig',
        label: 'JSON Configuration',
        type: 'string',
        placeholder: 'Enter JSON...'
    },
    cancelButtonName: 'Cancel',
    confirmButtonName: 'Save',
    disabled: false
}

// For JavaScript code editing with execution
const codeDialogProps = {
    value: 'return $input.data;',
    inputParam: {
        name: 'customFunction',
        label: 'Custom Function',
        type: 'code',
        placeholder: 'Write JavaScript...',
        hideCodeExecute: false
    },
    cancelButtonName: 'Cancel',
    confirmButtonName: 'Save',
    disabled: false
}

<ExpandTextDialog
    show={showDialog}
    dialogProps={dialogProps}
    onCancel={() => setShowDialog(false)}
    onInputHintDialogClicked={(hint) => openHintDialog(hint)}
    onConfirm={(value, paramName) => {
        handleSave(value, paramName)
        setShowDialog(false)
    }}
/>

Related Pages

• Principle:FlowiseAI_Flowise_Node_Parameter_Configuration