Implementation:FlowiseAI Flowise ExpandRichInputDialog

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

Overview

ExpandRichInputDialog is a portal-rendered modal dialog that provides an expanded TipTap rich text editor for editing node input values with variable mention support, code block syntax highlighting, and theme-aware styling.

Description

ExpandRichInputDialog renders a full-width MUI Dialog through a DOM portal with an embedded TipTap editor (via useEditor). It configures TipTap with StarterKit, CustomMention (for variable insertion with {{ }} syntax), CodeBlockLowlight (for syntax-highlighted code blocks), and Placeholder extensions. The mention system is powered by suggestionOptions which provides autocomplete for available node variables and state. The editor's StyledEditorContent is a styled component that adapts its appearance based on dark/light mode, including CSS custom properties for syntax highlighting colors. The dialog resolves available variables by analyzing the node graph (nodes and edges) through getAvailableNodesForVariable.

Usage

Use ExpandRichInputDialog when a node input field needs an expanded rich text editing experience with variable mention support. Control visibility with the show prop and pass editor configuration through dialogProps including value, inputParam, nodes, edges, nodeId, and disabled state.

Code Reference

Source Location

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

Signature

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

export default ExpandRichInputDialog

Import

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

I/O Contract

Inputs

Name	Type	Required	Description
show	bool	No	Controls dialog visibility
dialogProps	object	No	Configuration object containing value (HTML string), inputParam (with label, placeholder, acceptVariable, acceptNodeOutputAsVariable, hint), nodes, edges, nodeId, 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 TipTap rich text editor supporting variable mentions and code blocks, rendered into the #portal DOM element

Usage Examples

Basic Usage

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

const [showDialog, setShowDialog] = useState(false)

const dialogProps = {
    value: '<p>Hello {{variable}}</p>',
    inputParam: {
        name: 'systemMessage',
        label: 'System Message',
        placeholder: 'Enter system message...',
        acceptVariable: true,
        hint: { label: 'See Examples' }
    },
    nodes: reactFlowInstance.getNodes(),
    edges: reactFlowInstance.getEdges(),
    nodeId: currentNodeId,
    cancelButtonName: 'Cancel',
    confirmButtonName: 'Save',
    disabled: false
}

<ExpandRichInputDialog
    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