Implementation:FlowiseAI Flowise RichInput

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

Overview

The RichInput component is a Tiptap-based rich text editor that supports code syntax highlighting, variable mention insertion via {{ trigger, and dark/light theme awareness.

Description

RichInput wraps the Tiptap useEditor hook with StarterKit, CodeBlockLowlight (using lowlight for syntax highlighting), and a CustomMention extension configured with the suggestionOptions handler. It renders a styled EditorContent component that adapts its appearance based on dark mode, disabled state, and the number of rows specified by the input parameter. When the user types {{, a suggestion popover appears listing available node outputs, flow variables, state keys, form inputs, and custom variables for insertion as mention tokens.

Usage

Use this component for node parameter inputs that require rich text editing with inline variable references, code block support, and formatted content output (HTML).

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/ui-component/input/RichInput.jsx
• Lines: 1-158

Signature

export const RichInput = ({ inputParam, value, nodes, edges, nodeId, onChange, disabled = false }) => {
    // ...
}

Import

import { RichInput } from '@/ui-component/input/RichInput'

I/O Contract

Inputs

Name	Type	Required	Description
inputParam	object	Yes	Configuration with placeholder, rows, acceptVariable, and acceptNodeOutputAsVariable flags
value	string or number	No	Initial HTML content for the editor
nodes	array	No	Array of canvas nodes for variable resolution
edges	array	No	Array of canvas edges for connectivity traversal
nodeId	string	No	The current node's ID
onChange	func	Yes	Callback invoked with the editor's HTML output on each update
disabled	bool	No	When true, makes the editor read-only (defaults to false)

Outputs

Name	Type	Description
Rendered JSX	React element	A themed rich text editor with mention and code block support

Usage Examples

Basic Usage

<RichInput
    inputParam={{
        placeholder: 'Write your system message...',
        rows: 5,
        acceptVariable: true,
        acceptNodeOutputAsVariable: false
    }}
    value="<p>You are a helpful assistant.</p>"
    nodes={canvasNodes}
    edges={canvasEdges}
    nodeId="node_xyz789"
    onChange={(htmlContent) => updateNodeParam('systemMessage', htmlContent)}
/>

Related Pages

• Principle:FlowiseAI_Flowise_Node_Parameter_Configuration