feat(agentflow): add Rich Text editor for Content Editing (FLOWISE-342)#5988
Conversation
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>
Summary of ChangesHello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request introduces a new Highlights
Changelog
Activity
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
There was a problem hiding this comment.
Code Review
The pull request introduces a new RichTextEditor component, built with TipTap, to provide rich text editing capabilities with syntax highlighting. This component is integrated into MessagesInput and ExpandTextDialog to replace basic text fields, improving the user experience for editing multi-line content. Supporting changes include updates to ESLint rules, architecture documentation, Jest configurations (including mocks for ESM-only TipTap/lowlight modules and new coverage thresholds), and new dependencies. The MessagesInput component now uses a latestContentRef to ensure the expanded dialog always displays the most current inline edits. Additionally, new theme tokens for syntax highlighting and typography were added to maintain consistent styling and sizing. A review comment suggests improving the RichTextEditor's autofocus mechanism by utilizing TipTap's native autofocus option instead of a potentially brittle setTimeout, or to provide justification for the current implementation.
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>
- 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>
|
/gemini review |
There was a problem hiding this comment.
Code Review
This pull request introduces a powerful RichTextEditor atom using TipTap, which is a significant enhancement for content editing. The implementation is very well done, with great attention to performance through lazy loading and selective language imports for syntax highlighting. The state management in MessagesInput to handle fresh content in the expand dialog is also a clever and robust solution. I have one suggestion in RichTextEditor.tsx to improve performance and clarify the behavior of props. Overall, this is an excellent contribution.
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>
|
/gemini review |
There was a problem hiding this comment.
Code Review
The pull request introduces a new lazy-loaded RichTextEditor component, built with TipTap and lowlight for syntax highlighting, to enable rich text editing. This editor replaces plain text fields in the MessagesInput component and is integrated into the ExpandTextDialog for an enhanced user experience. Supporting changes include Jest mocks for TipTap, updated ESLint rules, architecture documentation, and new theme tokens for syntax highlighting. A review comment suggests improving the useMemo dependency array in RichTextEditor for better code clarity and to prevent potential bugs.
Summary
RichTextEditoratom wrapping TipTap with code block syntax highlighting (lowlight) for the agentflow SDKExpandTextDialogto support arichtextmode alongside plain textTextFieldinMessagesInputcontent fields with the new rich text editorRichTextEditorviaReact.lazy+Suspenseand import only 4 highlight.js languages (js/json/py/ts) instead oflowlight/common(~400KB bundle savings)syntaxHighlightcolors andtypographyconstants to design tokenscore/themeimportsTest plan
RichTextEditor,ExpandTextDialog, andMessagesInput🤖 Generated with Claude Code
Bundle size analysis
The main entry is essentially unchanged — the only addition is the React.lazy() call and Suspense wrapper.
Summary: For ES module consumers (the common case), the upfront cost is +2 KB. TipTap + highlight.js load lazily as a 554 KB chunk only when a RichTextEditor actually renders. The UMD build takes the full hit since it can't code-split.
Recordings:
agentflow-sdk-rich-text-editor.mov
agentflow-sdk-rich-text-lang-highlights.mov
agentflow-sdk-rich-text-lazy-loaded.mov