Feat/Add Markdown support to RichInput with Edit/Source toggle#6021
Feat/Add Markdown support to RichInput with Edit/Source toggle#6021HenryHengZJ merged 3 commits intomainfrom
Conversation
|
Warning Gemini encountered an error creating the summary. You can try again by commenting |
|
/gemini review |
|
cc @jocelynlin-wd @j-sanaa can you guys update the same for the agentflow package richeditor |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request upgrades Tiptap dependencies to 3.20.3 and introduces a new Markdown extension to enable markdown content handling. The core change involves modifying resolveVariables in buildAgentflow.ts to conditionally convert HTML to markdown using TurndownService only if HTML tags are detected, with disabled escaping to preserve markdown syntax. In the UI, ExpandRichInputDialog.jsx and RichInput.jsx are updated to support both HTML and markdown content, dynamically detecting the content type for rendering and saving. ExpandRichInputDialog.jsx also gains a new toggle to switch between 'preview' (rich text editor) and 'raw' (textarea for source markdown/HTML) view modes, along with a new StyledTextarea component for the raw view. Review comments highlight a potential issue with the heuristic HTML detection regex, which might lead to false positives, and point out possible bugs in useEffect hooks in both ExpandRichInputDialog.jsx and RichInput.jsx where inputValue and value respectively are used but not included in the dependency arrays, potentially causing stale content.
| } | ||
| isSwitchingRef.current = false | ||
| } | ||
| }, [editor]) // eslint-disable-line react-hooks/exhaustive-deps |
There was a problem hiding this comment.
The useEffect responsible for loading content into the editor has [editor] as its dependency. However, inputValue is used within this effect but is not listed as a dependency. While the eslint-disable-line react-hooks/exhaustive-deps comment indicates awareness, this pattern can lead to subtle bugs where the effect does not re-run when inputValue changes, resulting in stale content being displayed in the editor. This is particularly relevant if inputValue can be updated by means other than the editor's onUpdate callback or handleViewModeChange.
If inputValue is expected to change and trigger a re-render of the editor's content, it should be included in the dependency array. If not, ensure that the current behavior is well-understood and doesn't lead to unexpected UI states.
hold on, there is issue with resolving variables |
- Implemented a custom tokenizer for recognizing {{...}} syntax in Markdown.
- Added parsing and rendering functions to handle mentions in Markdown format.
- Enhanced the CustomMention component to support Markdown serialization and deserialization.
|
This commit resolve custom mention issue: PreviouslyWhen we change to Source, it resolved into specific format: This causes backend not able to catch the double curly brackets, hence unable to get the actual value. After:
This ensure we are able to catch the double curly brackets with regex and replace with the actual value from server. |
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
3 participants
Summary
Before
After
Backward Compatibility
Test plan
{{nodeId.data.instance}}still works with markdown content<strong>, <table>, <a>tags are still converted properly by TurndownService