feat(code-editor): add a CodeMirror-based code and merge editor [1/21] - #322
Open
gusfcarvalho wants to merge 1 commit into
Open
gusfcarvalho wants to merge 1 commit into
gusfcarvalho wants to merge 1 commit into
Conversation
|
Navigate logical layers of code changes, visualize relationships, and explore their blast radius. Warning Review limit reachedYou've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository. Next included review available in 59 minutes. View limit detailsLimit details: You’ve used the included review currently available. Review configuration: ⚙️ Run configuration
⛔ Files ignored due to path filters (1)
📒 Files selected for processing (15)
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configuration
⛔ Files ignored due to path filters (1)
📒 Files selected for processing (15)
Included review availability: This review used your included allowance. Your plan provides up to 1 included review per hour; 0 remain after this review. 📝 WalkthroughWalkthroughThe PR adds editable CodeMirror and read-only diff components, language and diagnostic support, theme updates, and lazy loading with retry, loading, and error states. It also adds component tests and test-environment shims. ChangesCode editor components
Priority: ⬇️ Low Estimated code review effort: 3 (Moderate) | ~25 minutes Change: Feature Sequence Diagram(s)sequenceDiagram
participant VueParent
participant CodeEditor
participant EditorView
VueParent->>CodeEditor: Pass modelValue and editor props
CodeEditor->>EditorView: Create editor with modelValue
EditorView->>CodeEditor: Report document changes
CodeEditor->>VueParent: Emit update:modelValue
VueParent->>CodeEditor: Pass updated modelValue
CodeEditor->>EditorView: Replace document when values differ
Merge Risk: ⚪ Minimal · up to This adds reusable editor components that are not yet reachable in the app. No actionable merge-blocking risk was found. Security Architecture ReviewSecurity architecture risk: 🔵 Low · up to The new components are not wired into the application and do not directly save, transmit, or execute their content. Risk is limited, but isolation of undo history when an editor instance switches documents remains unresolved. Retained concerns
Security review detailsSecurity Blast Radius
Trust Boundaries and Controls
Resilience and Maintainability Implications
Hardening Proposals
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
Full details: Docstring CoverageExplanation Docstring coverage is 28.57% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 7 functions across 10 files. (5 skipped: 5 unsupported.)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. A rabbit taps keys in a burrow of light Comment |
Contributor
There was a problem hiding this comment.
Copilot review overview
🟡 Changes recommended
JSON custom diagnostics can be overwritten, and the new editor surfaces have unresolved accessibility issues.
Review effort: Balanced
Findings: 4
Open (4)
What changed in this PR
Adds reusable, asynchronously loaded CodeMirror editors for future agent configuration features.
Changes:
- Adds editable and merge-view components with JSON/YAML support, diagnostics, themes, and load states.
- Adds focused component tests and jsdom browser API stubs.
- Adds required CodeMirror and YAML dependencies.
| File | Description |
|---|---|
vitest.setup.ts |
Stubs editor-required browser APIs. |
src/components/code-editor/theme.ts |
Defines light/dark editor themes. |
src/components/code-editor/languages/index.ts |
Configures text, JSON, and YAML modes. |
src/components/code-editor/index.ts |
Exposes lazy-loaded editor components. |
src/components/code-editor/diagnostics.ts |
Converts positional errors to diagnostics. |
src/components/code-editor/CodeMergeView.vue |
Implements split and unified diffs. |
src/components/code-editor/CodeEditorFallback.vue |
Provides the loading placeholder. |
src/components/code-editor/CodeEditorError.vue |
Provides the load-error state. |
src/components/code-editor/CodeEditor.vue |
Implements the reusable editor. |
src/components/code-editor/__tests__/index.spec.ts |
Tests loading retries and errors. |
src/components/code-editor/__tests__/diagnostics.spec.ts |
Tests diagnostic position conversion. |
src/components/code-editor/__tests__/CodeMergeView.spec.ts |
Tests merge-view theme updates. |
src/components/code-editor/__tests__/CodeEditor.spec.ts |
Tests editor behavior and accessibility. |
src/components/agents/config/__tests__/codeEditorMock.ts |
Adds lightweight editor test doubles. |
package.json |
Declares editor dependencies. |
package-lock.json |
Locks added dependency versions. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| <p | ||
| v-if="!readonly" | ||
| :id="hintId" | ||
| class="text-[0.7rem] text-gray-400 dark:text-slate-500" |
Comment on lines
+106
to
+108
| v.dispatch( | ||
| setDiagnostics(v.state, toDiagnostics(v.state.doc, props.diagnostics)), | ||
| ); |
Comment on lines
+40
to
+43
| EditorState.readOnly.of(true), | ||
| EditorView.editable.of(false), | ||
| languageExtension(props.language, false), | ||
| themeConf.of(editorTheme(isDarkMode())), |
| { | ||
| backgroundColor: '#bae6fd', | ||
| }, | ||
| '&.cm-focused': { outline: '2px solid #38bdf8' }, |
Layer 1 of 21 in the stacked split of #318. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
gusfcarvalho
force-pushed
the
agent-config/01-code-editor
branch
from
October 5, 2026 16:32
facc992 to
dd93179
Compare
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.
Part 1 of 21 of the stacked split of #318 (agent remote configuration). Every layer adds the final version of its files from #318, and only imports from layers below it, so each layer passes
make reviewableon its own. Nothing is reachable in the app until layer 20 wires the Configuration tab in.What
Adds a reusable CodeMirror 6 editor (
CodeEditor) and side-by-side merge view (CodeMergeView) undersrc/components/code-editor/, with JSON/YAML languages, a light/dark theme, lint diagnostics and an async-load fallback/error state. Adds the CodeMirror and js-yaml dependencies, jsdom stubs forRangerects andResizeObserverinvitest.setup.ts, and a sharedcodeEditorMockfor component specs higher up the stack.Tests
Own specs for the editor, merge view, diagnostics and the lazy index.
🤖 Generated with Claude Code
Summary by CodeRabbit