Closed VasylMarchuk closed 1 week ago
The changes in this pull request enhance the FileDiffCard
component in an Ember application by introducing conditional rendering based on the @useCodeMirror
property. If enabled, it utilizes a new CodeMirror
component for displaying code diffs; otherwise, it retains the previous rendering logic. Additionally, a new controller and route for the FileDiffCard
are created, allowing for dynamic interaction and navigation. Styling updates and a new template for the FileDiffCard
are also included, along with modifications to the DiffBasedExampleDocument
class to improve document handling.
File | Change Summary |
---|---|
app/components/file-diff-card.hbs | Modified rendering logic to conditionally use CodeMirror based on @useCodeMirror . |
app/components/file-diff-card.ts | Made code optional, added useCodeMirror , integrated dark mode functionality, and introduced a computed property for theme selection. |
app/controllers/demo/file-diff-card.ts | Introduced DemoFileDiffCardController to manage state and behavior for the file diff card, including tracked properties and actions. |
app/router.ts | Added a new route file-diff-card under the demo route. |
app/routes/demo/file-diff-card.ts | Created a new route class with query parameter handling for forceDarkTheme , selectedDocumentIndex , and useCodeMirror . |
app/styles/app.css | Added an import for course-admin-updates-diff.scss . |
app/styles/pages/course-admin-updates-diff.scss | Added a CSS rule for positioning collapsed lines in the CodeMirror component. |
app/templates/course-admin/update.hbs | Updated the main container div to include a new class and added @useCodeMirror={{true}} to the FileDiffCard component. |
app/templates/demo.hbs | Added a LinkTo component for navigation to the file-diff-card route. |
app/templates/demo/file-diff-card.hbs | Introduced a new template for rendering the FileDiffCard , including layout, options, and actions for user interaction. |
app/utils/code-mirror-documents.ts | Added a static method createEmpty to DiffBasedExampleDocument and updated the constructor for better diff parsing. |
@useCodeMirror
in the FileDiffCard
component, addressing the objective of ensuring consistent rendering behavior across instances.CodeMirror
component, directly related to the changes in rendering logic for the FileDiffCard
.FileContentsCard
component to use CodeMirror
, aligning with the main PR's focus.diff-container
to replace SyntaxHighlightedDiff
with CodeMirror
, relevant to the main PR's changes.bug
, dependencies
🐰 In the meadow, changes bloom bright,
AFileDiffCard
now shines with new light.
WithCodeMirror
to play, oh what a delight,
Dark themes and options, everything feels right!
Hop along, dear friends, let’s code with glee,
In this patch of wonder, come join me! 🌼✨
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?
1 files ±0 1 suites ±0 6m 42s ⏱️ +30s 583 tests ±0 543 ✅ ±0 40 💤 ±0 0 ❌ ±0 598 runs ±0 558 ✅ ±0 40 💤 ±0 0 ❌ ±0
Results for commit a0acaaa0. ± Comparison against base commit 801c4b2e.
:recycle: This comment has been updated with latest results.
Attention: Patch coverage is 56.25000%
with 7 lines
in your changes missing coverage. Please review.
:white_check_mark: All tests successful. No failed tests found.
:loudspeaker: Thoughts on this report? Let us know!
Changes will increase total bundle size by 6.83kB (0.02%) :arrow_up:. This is within the configured threshold :white_check_mark:
Rebased to include latest @codemirror/merge
from https://github.com/codecrafters-io/frontend/pull/2411
Related to #1231
Brief
This switches the Admin Course Updates page to use
CodeMirror
instead ofSyntaxHighlightedDiff
, as well as adds support for CodeMirror to theFileDiffCard
component.Details
FileDiffCard
now supports rendering the diff usingCodeMirror
instead ofSyntaxHighlightedDiff
@useCodeMirror={{true}}
argumentapp/components/course-page/course-stage-step/first-stage-tutorial-card/uncomment-code-step.hbs
app/components/course-page/course-stage-step/second-stage-instructions-card/implement-solution-step.hbs
app/components/course-page/test-results-bar/autofix-section/autofix-result.hbs
FileDiffCard
to the Demo page@useCodeMirror
to compare how diffs are rendered usingCodeMirror
vsSyntaxHighlightedDiff
@forceDarkTheme
it should have a working button for syncing with github for individual update
to check CodeMirror's elementsScreenshots
Checklist
[percy]
in the message to trigger)Summary by CodeRabbit
Release Notes
New Features
FileDiffCard
component for displaying file differences with enhanced rendering options, including support for CodeMirror and dark mode.FileDiffCard
component within the demo section.Bug Fixes
Documentation
Chores