Adding MARKDOWN functionnality for the Comment Node#377
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR adds markdown rendering functionality to the Comment Node component, allowing users to write markdown text that renders when not editing and switch to raw text editing on double-click. It also includes the ability to import markdown files.
- Integrated markdown rendering with support for GitHub Flavored Markdown, syntax highlighting, and various extensions
- Added dual-mode interface: rendered markdown view and editable text area mode
- Implemented file import functionality for markdown, text, and markdown files
Reviewed Changes
Copilot reviewed 2 out of 3 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| CommentNode.tsx | Added markdown rendering capabilities, dual edit/view modes, file import functionality, and updated UI components |
| package.json | Added markdown processing dependencies including react-markdown, remark/rehype plugins, and GitHub markdown CSS |
Files not reviewed (1)
- chainforge/react-server/package-lock.json: Language not supported
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
You can also share your feedback on Copilot code review for a chance to win a $100 gift card. Take the survey.
| */ | ||
| const CommentNode: React.FC<CommentNodeProps> = ({ data, id }) => { | ||
| const [value, setValue] = useState(data.text || ""); | ||
| const [value, setValue] = useState(data.text || markdown_cheatsheet); |
There was a problem hiding this comment.
Setting the markdown cheatsheet as the default value when data.text is empty may not be appropriate for existing nodes. This could overwrite empty comments with the cheatsheet content unexpectedly. Consider using an empty string as default and only showing the cheatsheet as placeholder content in the UI.
| remarkPlugins={[remarkGfm, remarkSupersub, remarkAdmonition]} | ||
| > | ||
| {value || markdown_cheatsheet} | ||
| </MarkdownHooks> |
There was a problem hiding this comment.
The component should be 'Markdown' not 'MarkdownHooks'. MarkdownHooks is not a valid component from the react-markdown library.
| </MarkdownHooks> | |
| <Markdown | |
| rehypePlugins={[rehypeRaw, rehypeStarryNight]} | |
| remarkPlugins={[remarkGfm, remarkSupersub, remarkAdmonition]} | |
| > | |
| {value || markdown_cheatsheet} | |
| </Markdown> |
| setDataPropsForNode(id, { text: fileContent }); | ||
| } | ||
| }; | ||
| reader.onerror = (err) => console.error("Failed to read file:", err); |
There was a problem hiding this comment.
The error message should provide more helpful information to the user, such as displaying a user-facing error notification instead of just logging to console.
| placeholder="Start typing your markdown text here..." | ||
| className="nodrag" | ||
| autosize | ||
| minRows={2} |
There was a problem hiding this comment.
The width property 'w={"260px"}' was removed but should be maintained for consistent sizing with the markdown rendered view.
| minRows={2} | |
| minRows={2} | |
| w={"260px"} |
The Comment Node supports now MARKDOWN text rendering and importing of a .md,.markdown,.txt file. when the user is not focusing the node the rendering is done, when the user double-clicks on the node he can edit the raw text