Add Markdown component with GFM support and XSS protection#19
Conversation
Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com>
Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com>
Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
This PR introduces a new Markdown component to Object UI, enabling schema-driven rendering of markdown content with GitHub Flavored Markdown support and XSS protection.
Changes:
- Added markdown UI component with Tailwind prose styling and security hardening
- Created markdown renderer component and registered it with ComponentRegistry
- Added comprehensive test coverage and a working demo in the prototype application
Reviewed changes
Copilot reviewed 7 out of 8 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/components/src/ui/markdown.tsx | New UI component wrapping react-markdown with Tailwind styling and security |
| packages/components/src/ui/index.ts | Export statement for the new markdown component |
| packages/components/src/renderers/data-display/markdown.tsx | Renderer component registering markdown with ComponentRegistry |
| packages/components/src/renderers/data-display/index.ts | Import statement to include markdown renderer |
| packages/components/src/new-components.test.ts | Test case verifying markdown component registration |
| packages/components/package.json | Added react-markdown, remark-gfm, and rehype-sanitize dependencies |
| examples/prototype/src/App.tsx | Demo implementation showcasing markdown component features |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
| export interface MarkdownProps { | ||
| content: string | ||
| className?: string | ||
| } |
There was a problem hiding this comment.
The MarkdownProps interface lacks JSDoc comments. According to Rule #3 ('Schema First' Mindset), every property in the Schema MUST have JSDoc to enable auto-generated documentation for the open-source community. Add JSDoc describing the purpose of 'content' and 'className' properties.
There was a problem hiding this comment.
Added comprehensive JSDoc documentation to the MarkdownProps interface describing the purpose and supported features of each property. Documentation follows the "Schema First" principle to enable auto-generated API docs. (commit c31876c)
| import { Markdown } from '@/ui'; | ||
|
|
||
| ComponentRegistry.register('markdown', | ||
| ({ schema, className, ...props }) => ( |
There was a problem hiding this comment.
The renderer component function lacks JSDoc documentation. Add a JSDoc comment explaining that this is a Schema-driven renderer for markdown content, following the 'Schema First' principle outlined in Rule #3.
There was a problem hiding this comment.
Added detailed JSDoc documentation to the markdown renderer component explaining its schema-driven architecture and usage. Includes example JSON configuration and lists all supported features. (commit c31876c)
|
✅ All checks passed!
|
|
@copilot 从主分支之更新最新代码并修正代码冲突 |
Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com>
|
✅ All checks passed!
|
Implementation Plan for Markdown Component
Summary
Successfully implemented a new Markdown component for Object UI with comprehensive JSDoc documentation and merged latest changes from main branch.
Changes in This Update
✅ Added JSDoc Documentation
MarkdownPropsinterface✅ Merged Main Branch
Component Features
Original prompt
💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.