feat(agentflow): add Rich Text editor for Content Editing (FLOWISE-342) (#5988)

* Add TipTap RichTextEditor atom for expandable content editing

Introduce a RichTextEditor atom wrapping TipTap with code block syntax
highlighting (lowlight). Update ExpandTextDialog to support a 'richtext'
mode and replace plain TextFields in MessagesInput with the new editor.

Lazy-load RichTextEditor via React.lazy + Suspense to keep the initial
bundle lean. Import only 4 highlight.js languages (js/json/py/ts)
instead of lowlight/common (~400KB savings).

FLOWISE-342

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* Fix CI lockfile mismatch and use TipTap native autofocus

Remove stale @types/uuid from pnpm-lock.yaml to fix frozen-lockfile
CI failure. Replace setTimeout-based autofocus with TipTap's built-in
autofocus option for more reliable focus behavior.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* Fix React warnings in MessagesInput and RichTextEditor

- Generate item keys synchronously to fix missing key prop warning
- Wrap IconVariable in span for MUI Tooltip ref forwarding
- Use :first-of-type/:last-of-type instead of :first-child/:last-child

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* Fix syntax highlighting and block element spacing in RichTextEditor

Add CSS selectors for hljs classes so lowlight syntax colors are
actually applied. Fix block spacing by targeting only the first/last
child of the editor instead of first/last-of-type per element.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* address gemini review comment, fix  css warning on ssr

* fix rich text editor lazy load flow

* address gemini review feedback

* address review feedback

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: jocelynlin-wd

packages/agentflow/.eslintrc.js

@@ -81,6 +81,9 @@ module.exports = {
         'import/first': 'error',
         'import/newline-after-import': 'error',
         'import/no-duplicates': 'error',
+        // Allow autoFocus on custom components (e.g. RichTextEditor in dialogs) — they manage
+        // focus programmatically per WAI-ARIA dialog patterns. Native elements are still flagged.
+        'jsx-a11y/no-autofocus': ['error', { ignoreNonDOM: true }],
         'prettier/prettier': 'error',
         // Ban @/features alias — features use relative imports internally, and no other
         // layer should import from features (enforced by import/no-restricted-paths below).
@@ -116,8 +119,8 @@ module.exports = {
                     {
                         target: './src/atoms',
                         from: './src/core',
-                        except: ['./types'],
-                        message: 'Atoms can only import types from core/types, not utilities or business logic.'
+                        except: ['./types', './theme'],
+                        message: 'Atoms can only import from core/types and core/theme, not utilities or business logic.'
                     },
                     // core/ cannot import from anything (leaf node)
                     {

packages/agentflow/ARCHITECTURE.md

@@ -42,7 +42,7 @@ atoms/
 -   No API calls
 -   Stateless or minimal local state
 -   Imported by features, never the reverse
--   **Forbidden**: Importing from `features/` or `infrastructure/` (except types from `core/types` for prop definitions)
+-   **Forbidden**: Importing from `features/` or `infrastructure/` (except types from `core/types` for prop definitions and design tokens from `core/theme`)
 
 **Goal:** 100% visual consistency.
 
@@ -210,7 +210,7 @@ infrastructure/
 
 -   `features` → `atoms`, `infrastructure`, `core` ✅
 -   `infrastructure` → `core` ✅
--   `atoms` → `core/types` only (for type definitions) ✅
+-   `atoms` → `core/types` and `core/theme` only (for type definitions and design tokens) ✅
 -   `core` → nothing (leaf node) ✅
 -   **Atoms and Core are "leaf" nodes** - they cannot import from `features/` or `infrastructure/`
 

packages/agentflow/examples/src/demos/BasicExample.tsx

@@ -28,9 +28,31 @@ const initialFlow: FlowData = {
                 hideInput: true,
                 outputAnchors: [{ id: 'startAgentflow_0-output-0', name: 'start', label: 'Start', type: 'start' }]
             }
+        },
+        {
+            id: 'agentAgentflow_0',
+            type: 'agentflowNode',
+            position: { x: 250, y: 100 },
+            data: {
+                id: 'agentAgentflow_0',
+                name: 'agentAgentflow',
+                label: 'Agent',
+                color: '#4DD0E1',
+                outputAnchors: [{ id: 'agentAgentflow_0-output-0', name: 'output', label: 'Output', type: 'string' }]
+            }
+        }
+    ],
+    edges: [
+        {
+            id: 'edge-1',
+            source: 'startAgentflow_0',
+            sourceHandle: 'startAgentflow_0-output-0',
+            target: 'agentAgentflow_0',
+            targetHandle: 'agentAgentflow_0',
+            type: 'agentflowEdge',
+            data: { sourceColor: '#7EE787', targetColor: '#4DD0E1' }
         }
     ],
-    edges: [],
     viewport: { x: 0, y: 0, zoom: 1 }
 }
 

packages/agentflow/jest.config.js

@@ -12,10 +12,16 @@ const baseConfig = {
     },
     testPathIgnorePatterns: ['/node_modules/', '/dist/'],
     moduleNameMapper: {
-        '^@test-utils/(.*)$': '<rootDir>/src/__test_utils__/$1',
+        '\\.(css|less|scss|sass)$': '<rootDir>/src/__mocks__/styleMock.js',
         '\\.svg$': '<rootDir>/src/__mocks__/styleMock.js',
         '^@/(.*)$': '<rootDir>/src/$1',
-        '\\.(css|less|scss|sass)$': '<rootDir>/src/__mocks__/styleMock.js'
+        '^@test-utils/(.*)$': '<rootDir>/src/__test_utils__/$1',
+        // TipTap + lowlight ship ESM-only — Jest (CJS) cannot import them,
+        // so we redirect to lightweight CJS stubs under src/__mocks__/.
+        '^@tiptap/(.+)$': '<rootDir>/src/__mocks__/@tiptap/$1.ts',
+        '^lowlight$': '<rootDir>/src/__mocks__/lowlight.ts',
+        // Bypass React.lazy wrappers — resolve Foo.lazy → Foo so tests render synchronously
+        '(.*)\\.lazy$': '$1'
     }
 }
 
@@ -39,6 +45,10 @@ module.exports = {
         './src/*.ts': { branches: 80, functions: 80, lines: 80, statements: 80 },
         './src/Agentflow.tsx': { branches: 80, functions: 80, lines: 80, statements: 80 },
         './src/atoms/ArrayInput.tsx': { branches: 80, functions: 80, lines: 80, statements: 80 },
+        './src/atoms/ExpandTextDialog.tsx': { branches: 80, functions: 80, lines: 80, statements: 80 },
+        './src/atoms/MessagesInput.tsx': { branches: 80, functions: 80, lines: 80, statements: 80 },
+        // Tier 3 UI atom — only the onChange/disabled/sync logic is tested, not styled internals
+        './src/atoms/RichTextEditor.tsx': { branches: 30, functions: 50, lines: 50, statements: 50 },
         './src/core/': { branches: 80, functions: 80, lines: 80, statements: 80 },
         './src/features/canvas/components/ConnectionLine.tsx': { branches: 80, functions: 80, lines: 80, statements: 80 },
         // Only getMinimumNodeHeight() is tested; the component is Tier 3 UI with no business logic

packages/agentflow/package.json

@@ -69,8 +69,13 @@
     },
     "dependencies": {
         "@tabler/icons-react": "^3.7.0",
+        "@tiptap/extension-code-block-lowlight": "^3.4.3",
+        "@tiptap/extension-placeholder": "^2.11.5",
+        "@tiptap/react": "^2.11.5",
+        "@tiptap/starter-kit": "^2.11.5",
         "axios": "^1.7.2",
         "lodash": "^4.17.21",
+        "lowlight": "^3.3.0",
         "uuid": "^10.0.0"
     },
     "devDependencies": {

packages/agentflow/src/__mocks__/@tiptap/extension-code-block-lowlight.ts

@@ -0,0 +1,5 @@
+const CodeBlockLowlight = {
+    configure: jest.fn(() => 'CodeBlockLowlight'),
+    extend: jest.fn(() => 'CodeBlockLowlightExtended')
+}
+export default CodeBlockLowlight

packages/agentflow/src/__mocks__/@tiptap/extension-placeholder.ts

@@ -0,0 +1,2 @@
+const Placeholder = { configure: jest.fn(() => 'Placeholder') }
+export default Placeholder

packages/agentflow/src/__mocks__/@tiptap/react.ts

@@ -0,0 +1,13 @@
+import { createElement, forwardRef } from 'react'
+
+export const useEditor = (config?: Record<string, unknown>) => ({
+    getHTML: () => (config?.content as string) ?? '<p></p>',
+    setEditable: jest.fn(),
+    commands: { focus: jest.fn(), setContent: jest.fn() },
+    _onUpdate: config?.onUpdate
+})
+
+export const EditorContent = forwardRef<HTMLDivElement, { editor?: unknown; [k: string]: unknown }>(({ editor, ...rest }, ref) =>
+    createElement('div', { ref, 'data-testid': 'tiptap-editor-content', 'data-has-editor': !!editor, ...rest })
+)
+EditorContent.displayName = 'EditorContent'

packages/agentflow/src/__mocks__/@tiptap/starter-kit.ts

@@ -0,0 +1,2 @@
+const StarterKit = { configure: jest.fn(() => 'StarterKit') }
+export default StarterKit

packages/agentflow/src/__mocks__/lowlight.ts

@@ -0,0 +1,2 @@
+export const common = {}
+export const createLowlight = jest.fn(() => ({ register: jest.fn() }))