feat: add CodeMirror editor to Base64 tool#21
Merged
Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (2)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughThis pull request integrates CodeMirror as the editor backend for the Base64 tool. It adds CodeMirror dependencies, theme CSS variables, implements language detection for JSON/XML/text, creates a reusable ChangesCodeMirror Editor Integration
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~35 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
devbox | c879e36 | Commit Preview URL Branch Preview URL |
Jun 03 2026, 05:08 PM |
RIV-5. Replace the input/output textareas with a shared CodeMirror 6 editor: line numbers, multi-line editing, and JSON/XML syntax highlighting auto-detected from the input. Highlight + chrome follow the app theme via CSS vars (dark/light), and font-size / tab-size come from the existing settings store. - shared/ui/code-editor.tsx: generic, controlled CodeEditor (fontSize/ tabSize as props so shared/ui stays free of app state). - shared/lib/editor/detect-language.ts: pure JSON/XML/text heuristic + test. - index.css: per-theme --cm-* syntax token colors. - e2e/base64.e2e.ts: encode/decode, URL-safe, error, persistence, gutter, and highlighting coverage. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
rivodotlove
force-pushed
the
feat/riv-5-codemirror-base64
branch
from
d73b5e8 to
d672f98
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/shared/ui/code-editor.tsx`:
- Around line 96-97: The editor builds an extensions array using indentUnit.of("
".repeat(tabSize)) and keymap.of([indentWithTab]) but it doesn't guard against
invalid tabSize nor set EditorState.tabSize, so repeat can throw and actual tab
width for '\t' will differ; clamp tabSize to a safe integer range (e.g., 1..8)
before using it, replace " ".repeat(tabSize) with the clamped value, and add
EditorState.tabSize.of(clampedTabSize) to the extensions alongside
indentUnit.of(...) (locate the extensions/creation code in
src/shared/ui/code-editor.tsx that references indentUnit.of and keymap.of to
apply the change).
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: e02321bd-4be9-4efb-8a68-ad279401b218
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (8)
e2e/base64.e2e.tspackage.jsonsrc/index.csssrc/modules/base64/ui/base64-tool.tsxsrc/shared/lib/editor/detect-language.test.tssrc/shared/lib/editor/detect-language.tssrc/shared/ui/code-editor.tsxsrc/shared/ui/index.ts
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In @.claude/plans/RIV-5-codemirror-base64-editor.html:
- Line 77: The external anchor element rendering the Linear link currently uses
target="_blank" with only noopener; update the anchor's rel attribute to include
"noreferrer" as well (i.e., rel="noopener noreferrer") to harden external link
behavior — locate the <a ...> element containing the Linear URL text ("View
RIV-5 in Linear ↗") and add "noreferrer" to its rel list.
- Around line 230-240: The detectLanguage function contains an unescaped literal
'<' in the expression t.startsWith("<") which breaks the HTML snippet rendering;
update only the detectLanguage snippet so that any literal angle brackets inside
it are HTML-escaped (replace "<" with < and ">" with > as needed) while
leaving the already-escaped CodeEditor/Record<...> parts untouched — locate the
detectLanguage function and change its t.startsWith("<") (and any other raw
'<'/'>' inside that small snippet) to the corresponding entities.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 445d8256-2074-461d-85a3-c3de7fd167ad
⛔ Files ignored due to path filters (3)
.claude/plans/assets/RIV-5-after-1.pngis excluded by!**/*.png.claude/plans/assets/RIV-5-current-1.pngis excluded by!**/*.pngpnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (9)
.claude/plans/RIV-5-codemirror-base64-editor.htmle2e/base64.e2e.tspackage.jsonsrc/index.csssrc/modules/base64/ui/base64-tool.tsxsrc/shared/lib/editor/detect-language.test.tssrc/shared/lib/editor/detect-language.tssrc/shared/ui/code-editor.tsxsrc/shared/ui/index.ts
🚧 Files skipped from review as they are similar to previous changes (8)
- src/shared/ui/index.ts
- src/shared/lib/editor/detect-language.ts
- package.json
- src/shared/lib/editor/detect-language.test.ts
- src/index.css
- src/modules/base64/ui/base64-tool.tsx
- e2e/base64.e2e.ts
- src/shared/ui/code-editor.tsx
Guard `" ".repeat(tabSize)` against invalid persisted values (negative/ NaN would throw) and add EditorState.tabSize so literal tabs render at the configured width, not just indentUnit. Also stop tracking generated write-plan HTML under .claude/plans (gitignored) — it leaked into this feature PR. (CodeRabbit, PR #21) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
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
1 participant
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.
Closes RIV-5.
What
Replaces the Base64 tool's plain
<textarea>input/output with a shared CodeMirror 6 editor.--cm-*CSS vars.Why
Plain textareas were unreadable for the tool's real workflows — multi-line JSON/XML/config blocks. CodeMirror brings parity with other code-focused tooling.
How it's structured
src/shared/ui/code-editor.tsx— generic controlledCodeEditor;fontSize/tabSizeare props soshared/uinever imports app state.src/shared/lib/editor/detect-language.ts— pure JSON/XML/text heuristic (+ unit test).src/index.css— per-theme--cm-*syntax token colors.src/modules/base64/ui/base64-tool.tsx— wiring; domain codec untouched.e2e/base64.e2e.ts— extended for CodeMirror.Verification
vp check→ 0 lint/type errorsvp test→ 16 passed (unit)pnpm exec playwright test→ 7 passed (e2e: encode/decode, URL-safe, error, persistence, gutter, highlighting)Plan + Opus gap-review drove this; all blocker/major review gaps folded in. Built with the new
write-plan/implement-plantooling (PR #20).🤖 Generated with Claude Code
Summary by CodeRabbit
Release Notes
New Features
Tests
Refactor