markdown widget#1433
Merged
Merged
Conversation
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR adds a new Markdown widget that enables markdown rendering and editing capabilities across table display, record view, and record edit contexts. The implementation uses ngx-markdown for rendering and the Monaco-based code editor for editing with syntax highlighting.
Key Changes
- Added three markdown field components: display (for tables), view (for record detail), and edit (for record editing)
- Integrated markdown components into the widget registry for all three contexts
- Implemented truncation logic for table display to handle long markdown content
Reviewed Changes
Copilot reviewed 16 out of 16 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/app/consts/table-display-types.ts | Registers MarkdownDisplayComponent in the table display widget registry |
| frontend/src/app/consts/record-view-types.ts | Registers MarkdownRecordViewComponent in the record view widget registry |
| frontend/src/app/consts/record-edit-types.ts | Registers MarkdownEditComponent in the record edit widget registry |
| frontend/src/app/components/ui-components/table-display-fields/markdown/markdown.component.ts | Implements table display with truncation and copy-to-clipboard functionality |
| frontend/src/app/components/ui-components/table-display-fields/markdown/markdown.component.spec.ts | Basic component creation test for table display |
| frontend/src/app/components/ui-components/table-display-fields/markdown/markdown.component.html | Template with markdown rendering, tooltip, and copy button |
| frontend/src/app/components/ui-components/table-display-fields/markdown/markdown.component.css | Styling for inline table display with ellipsis |
| frontend/src/app/components/ui-components/record-view-fields/markdown/markdown.component.ts | Implements read-only markdown rendering for record detail view |
| frontend/src/app/components/ui-components/record-view-fields/markdown/markdown.component.spec.ts | Basic component creation test for record view |
| frontend/src/app/components/ui-components/record-view-fields/markdown/markdown.component.html | Template for full markdown rendering in record view |
| frontend/src/app/components/ui-components/record-view-fields/markdown/markdown.component.css | Styling for record view with proper markdown element spacing |
| frontend/src/app/components/ui-components/record-edit-fields/markdown/markdown.component.ts | Implements Monaco-based markdown editor with theme support |
| frontend/src/app/components/ui-components/record-edit-fields/markdown/markdown.component.spec.ts | Basic component creation test for edit component |
| frontend/src/app/components/ui-components/record-edit-fields/markdown/markdown.component.html | Template for code editor with markdown syntax highlighting |
| frontend/src/app/components/ui-components/record-edit-fields/markdown/markdown.component.css | Styling for code editor container |
| frontend/src/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.ts | Imports MarkdownEditComponent and adds placeholder widget settings |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+14
to
+18
| public renderedMarkdown: string = ''; | ||
|
|
||
| ngOnInit(): void { | ||
| this.renderedMarkdown = this.value || ''; | ||
| } |
There was a problem hiding this comment.
The renderedMarkdown property is unnecessary as it's just a copy of this.value. Consider using value directly in the template: <markdown [data]="value || ''"></markdown>. This simplifies the code and removes unnecessary state management.
Suggested change
| public renderedMarkdown: string = ''; | |
| ngOnInit(): void { | |
| this.renderedMarkdown = this.value || ''; | |
| } |
Comment on lines
+10
to
+15
| @Component({ | ||
| selector: 'app-markdown-display', | ||
| templateUrl: './markdown.component.html', | ||
| styleUrls: ['../base-table-display-field/base-table-display-field.component.css', './markdown.component.css'], | ||
| imports: [CommonModule, MarkdownModule, ClipboardModule, MatIconModule, MatButtonModule, MatTooltipModule] | ||
| }) |
There was a problem hiding this comment.
The @Injectable() decorator is missing. Other similar table display components (e.g., TextDisplayComponent, LongTextDisplayComponent) use this decorator. Add @Injectable() above the @Component decorator for consistency.
Comment on lines
+17
to
+21
| public renderedMarkdown: string = ''; | ||
| public truncatedValue: string = ''; | ||
|
|
||
| ngOnInit(): void { | ||
| this.renderedMarkdown = this.value || ''; |
There was a problem hiding this comment.
The renderedMarkdown property is initialized but never used. The template uses truncatedValue instead. Consider removing this unused property.
Suggested change
| public renderedMarkdown: string = ''; | |
| public truncatedValue: string = ''; | |
| ngOnInit(): void { | |
| this.renderedMarkdown = this.value || ''; | |
| public truncatedValue: string = ''; | |
| ngOnInit(): void { |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.