fix: code editor/block theme inconsistency #2393
Conversation
Tiny fix to make the themes across code blocks and editor components across the app consistent.
|
WalkthroughUpdates adjust syntax highlighting colors in two frontend files. In CodeBlock.tsx (Prism), boolean and number tokens are moved to a new style block colored #E5C07B, while the original group retains #9B99FF for remaining tokens. In codeMirrorTheme.ts, a new lilac color (#9B99FF) is introduced, sage changes to #afec73, and token-to-color mappings are updated: name-related tags use lilac; booleans shift from the atom group to the typeName group (chalky). Inserted/string/processingInstruction tokens inherit the updated sage color. Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. ✨ Finishing Touches
🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
![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
🧹 Nitpick comments (2)
apps/webapp/app/components/code/codeMirrorTheme.ts (1)
14-18: Palette updates look good; consider centralizing shared colorsSage update and new lilac color align with the CodeBlock theme. To avoid future drift between CodeMirror and Prism themes, consider extracting these hex values into a shared palette module consumed by both components.
apps/webapp/app/components/code/CodeBlock.tsx (1)
89-93: Remove “deleted” from this group to avoid duplication/override later“deleted” is also styled explicitly later with red (#F85149). Keeping it here is redundant and can be confusing when reading the theme. Suggest removing it from this earlier group.
- types: ["property", "tag", "constant", "symbol", "deleted"], + types: ["property", "tag", "constant", "symbol"],
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these settings in your CodeRabbit configuration.
📒 Files selected for processing (2)
apps/webapp/app/components/code/CodeBlock.tsx(1 hunks)apps/webapp/app/components/code/codeMirrorTheme.ts(4 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (.github/copilot-instructions.md)
**/*.{ts,tsx}: Always prefer using isomorphic code like fetch, ReadableStream, etc. instead of Node.js specific code
For TypeScript, we usually use types over interfaces
Avoid enums
No default exports, use function declarations
Files:
apps/webapp/app/components/code/codeMirrorTheme.tsapps/webapp/app/components/code/CodeBlock.tsx
{packages/core,apps/webapp}/**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (.github/copilot-instructions.md)
We use zod a lot in packages/core and in the webapp
Files:
apps/webapp/app/components/code/codeMirrorTheme.tsapps/webapp/app/components/code/CodeBlock.tsx
apps/webapp/**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/webapp.mdc)
apps/webapp/**/*.{ts,tsx}: In the webapp, all environment variables must be accessed through theenvexport ofenv.server.ts, instead of directly accessingprocess.env.
When importing from@trigger.dev/corein the webapp, never import from the root@trigger.dev/corepath; always use one of the subpath exports as defined in the package's package.json.
Files:
apps/webapp/app/components/code/codeMirrorTheme.tsapps/webapp/app/components/code/CodeBlock.tsx
🧬 Code Graph Analysis (1)
apps/webapp/app/components/code/codeMirrorTheme.ts (1)
packages/trigger-sdk/src/v3/tags.ts (1)
tags(12-14)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (23)
- GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (5, 8)
- GitHub Check: units / internal / 🧪 Unit Tests: Internal (3, 8)
- GitHub Check: units / internal / 🧪 Unit Tests: Internal (5, 8)
- GitHub Check: units / internal / 🧪 Unit Tests: Internal (7, 8)
- GitHub Check: units / internal / 🧪 Unit Tests: Internal (8, 8)
- GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (8, 8)
- GitHub Check: units / internal / 🧪 Unit Tests: Internal (2, 8)
- GitHub Check: units / internal / 🧪 Unit Tests: Internal (4, 8)
- GitHub Check: units / internal / 🧪 Unit Tests: Internal (6, 8)
- GitHub Check: units / internal / 🧪 Unit Tests: Internal (1, 8)
- GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (7, 8)
- GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (4, 8)
- GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (6, 8)
- GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (3, 8)
- GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (2, 8)
- GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (1, 8)
- GitHub Check: units / packages / 🧪 Unit Tests: Packages (1, 1)
- GitHub Check: e2e / 🧪 CLI v3 tests (windows-latest - pnpm)
- GitHub Check: e2e / 🧪 CLI v3 tests (windows-latest - npm)
- GitHub Check: typecheck / typecheck
- GitHub Check: e2e / 🧪 CLI v3 tests (ubuntu-latest - pnpm)
- GitHub Check: e2e / 🧪 CLI v3 tests (ubuntu-latest - npm)
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (3)
apps/webapp/app/components/code/codeMirrorTheme.ts (2)
190-191: Booleans moved to chalky group — LGTM and matches CodeBlock (#E5C07B)This brings CodeMirror booleans/numbers in line with Prism’s dedicated block.
218-219: Removed bool from atom group — LGTMPrevents conflicting/ambiguous coloring now that booleans are handled in the chalky group.
apps/webapp/app/components/code/CodeBlock.tsx (1)
89-99: Split booleans/numbers into dedicated style — LGTM and consistent with CodeMirrorBooleans and numbers now use #E5C07B, matching the CodeMirror “chalky” group. This directly addresses the theme inconsistency.
| tag: [tags.name, tags.deleted, tags.character, tags.propertyName, tags.macroName], | ||
| color: coral, | ||
| color: lilac, | ||
| }, |
There was a problem hiding this comment.
Deleted and character tokens now colored lilac — inconsistent with CodeBlock (red and pale green respectively)
Including tags.deleted and tags.character in the lilac group makes CodeMirror render them as lilac, while CodeBlock renders:
- deleted as red (#F85149)
- char as pale green (#b5cea8)
This contradicts the PR goal of consistency across editors. Remove these tags from the lilac group and add explicit rules matching CodeBlock.
Apply this diff to the current block:
- tag: [tags.name, tags.deleted, tags.character, tags.propertyName, tags.macroName],
+ tag: [tags.name, tags.propertyName, tags.macroName],Then add explicit deleted/character styles near other token rules:
// Add after the heading rule or nearby token rules
{ tag: tags.deleted, color: "#F85149" },
{ tag: tags.character, color: "#b5cea8" },🤖 Prompt for AI Agents
In apps/webapp/app/components/code/codeMirrorTheme.ts around lines 176-178,
remove tags.deleted and tags.character from the lilac tag group so they are no
longer colored lilac, and then add explicit token rules (placed near the heading
or other token rules) for deleted and character with the CodeBlock colors: set
tags.deleted to "#F85149" and tags.character to "#b5cea8"; ensure the new
explicit rules are ordered so they override the lilac group.
Tiny fix to make the themes across code blocks and editor components across the app consistent.