feat: update Ace Editor's theme, border, background, and add mode-aware styling#8894
feat: update Ace Editor's theme, border, background, and add mode-aware styling#8894Cristhianzl merged 9 commits intomainfrom
Conversation
…for Monokai and GitHub themes
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughThe changes introduce a new CSS file for custom Ace Editor theme overrides, update the main app stylesheet to import these overrides, and expand the list of Ace Editor themes imported in the code editor modal. The default dark theme for the editor is switched from "twilight" to "monokai," with no changes to logic or exported entities. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant App
participant AceEditor
participant ThemeStyles
User->>App: Open code editor modal
App->>AceEditor: Initialize editor
AceEditor->>ThemeStyles: Apply imported themes (including Monokai, GitHub, etc.)
ThemeStyles-->>AceEditor: Apply custom overrides (from custom-ace-overrides.css)
AceEditor-->>User: Display editor with selected theme and custom styles
✨ Finishing touches🧪 Generate unit tests (beta)
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. Comment |
dosubot
bot
added
the
size:M
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (3)
src/frontend/src/style/custom-ace-overrides.css (2)
45-55: Consolidate repeated.ace-githubselectors for maintainability
.ace-githubappears three times across this rule; combining them into a single comma-separated group avoids duplication and eases future edits.-.dark .ace-monokai .ace_content, -.ace-github - -.dark .ace-monokai .ace_gutter, -.ace-github - -.dark .ace-monokai, -.ace-github { +.dark .ace-monokai .ace_content, +.dark .ace-monokai .ace_gutter, +.dark .ace-monokai, +.ace-github { border: 1px solid rgba(255,255,255,0.18) !important; box-shadow: none !important; }
1-70: Consider Tailwind plugin orapplyutilities before adding raw CSSProject guidelines prefer Tailwind for styling. While Ace requires some regular CSS, you could wrap these overrides in a small Tailwind plugin or use
@applywhere feasible to stay consistent.
Not blocking – just something to keep in mind for future overrides.src/frontend/src/App.css (1)
1-4: Import order may unintentionally lower override precedence
custom-ace-overrides.cssis imported before@tailwind base/components/utilities.
If any Tailwind pre-flight rule targets the same Ace classes (unlikely but possible in future upgrades), the!importantflags will bail you out, but the safer pattern is to place custom overrides after Tailwind so they naturally win without!important.No action required now, but worth noting.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/frontend/src/App.css(1 hunks)src/frontend/src/modals/codeAreaModal/index.tsx(2 hunks)src/frontend/src/style/custom-ace-overrides.css(1 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
`src/frontend/**/*.{ts,tsx,js,jsx,css,scss}`: Use Tailwind CSS for styling all frontend components.
src/frontend/**/*.{ts,tsx,js,jsx,css,scss}: Use Tailwind CSS for styling all frontend components.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/frontend_development.mdc)
List of files the instruction was applied to:
src/frontend/src/App.csssrc/frontend/src/modals/codeAreaModal/index.tsxsrc/frontend/src/style/custom-ace-overrides.css
`src/frontend/**/*.{ts,tsx}`: Use React 18 with TypeScript for all UI components and frontend logic.
src/frontend/**/*.{ts,tsx}: Use React 18 with TypeScript for all UI components and frontend logic.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/frontend_development.mdc)
List of files the instruction was applied to:
src/frontend/src/modals/codeAreaModal/index.tsx
🧠 Learnings (4)
📓 Common learnings
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.510Z
Learning: Applies to src/frontend/src/{components,hooks}/**/*.{ts,tsx} : Implement dark mode support in components and hooks where needed.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.510Z
Learning: All changes must be tested in both light and dark mode before committing.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-23T12:46:42.048Z
Learning: All changes must be tested in both light and dark mode to ensure consistent appearance and functionality.
src/frontend/src/App.css (4)
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.510Z
Learning: Applies to src/frontend/**/*.{ts,tsx,js,jsx,css,scss} : Use Tailwind CSS for styling all frontend components.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.510Z
Learning: Applies to src/frontend/src/components/**/*.{ts,tsx} : All components must be styled using Tailwind CSS utility classes.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.510Z
Learning: Applies to src/frontend/{package*.json,tsconfig.json,tailwind.config.*,vite.config.*} : Frontend configuration files such as 'package.json', 'tsconfig.json', 'tailwind.config.*', and 'vite.config.*' must be present and properly maintained in 'src/frontend/'.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-23T12:46:42.048Z
Learning: All UI components must be styled using Tailwind CSS utility classes, with support for different variants and sizes implemented via conditional className logic.
src/frontend/src/modals/codeAreaModal/index.tsx (11)
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.510Z
Learning: Applies to src/frontend/src/{components,hooks}/**/*.{ts,tsx} : Implement dark mode support in components and hooks where needed.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.510Z
Learning: All changes must be tested in both light and dark mode before committing.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.510Z
Learning: Applies to src/frontend/**/*.{ts,tsx} : Use React 18 with TypeScript for all UI components and frontend logic.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-30T14:40:50.846Z
Learning: Applies to src/frontend/src/icons/*/*.jsx : Always support both light and dark mode for custom icons by using the `isdark` prop in your SVG component.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.510Z
Learning: Applies to src/frontend/**/*.{ts,tsx,js,jsx,css,scss} : Use Tailwind CSS for styling all frontend components.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-30T14:40:50.846Z
Learning: Applies to src/frontend/src/icons/*/index.tsx : Create an `index.tsx` in your icon directory that exports your icon using `forwardRef` and passes the `isdark` prop.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/docs_development.mdc:0-0
Timestamp: 2025-06-30T14:40:02.682Z
Learning: Applies to docs/docusaurus.config.js : Site configuration, including navbar, title, and theme settings, must be managed in 'docs/docusaurus.config.js'.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.510Z
Learning: Applies to src/frontend/src/icons/**/*.{ts,tsx,js,jsx} : Use Lucide React for icons in frontend components.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-23T12:46:52.420Z
Learning: Custom SVG icon components in React should always support both light and dark mode by accepting an 'isdark' prop and adjusting colors accordingly.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-30T14:40:50.846Z
Learning: Applies to src/frontend/src/icons/*/* : Create a new directory for your icon in `src/frontend/src/icons/YourIconName/` and add your SVG as a React component (e.g., `YourIconName.jsx`) that uses the `isdark` prop to support both light and dark mode.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-23T12:46:42.048Z
Learning: Dark mode support should be implemented using a dedicated Zustand store (e.g., useDarkStore), and toggled via a custom hook (e.g., useDarkMode) that exposes isDark and toggle.
src/frontend/src/style/custom-ace-overrides.css (3)
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.510Z
Learning: Applies to src/frontend/src/{components,hooks}/**/*.{ts,tsx} : Implement dark mode support in components and hooks where needed.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.510Z
Learning: Applies to src/frontend/**/*.{ts,tsx,js,jsx,css,scss} : Use Tailwind CSS for styling all frontend components.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.510Z
Learning: All changes must be tested in both light and dark mode before committing.
🪛 Biome (1.9.4)
src/frontend/src/style/custom-ace-overrides.css
[error] 24-24: Unexpected shorthand property background after background-color
(lint/suspicious/noShorthandPropertyOverrides)
[error] 40-40: Unexpected shorthand property background after background-color
(lint/suspicious/noShorthandPropertyOverrides)
⏰ 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). (1)
- GitHub Check: Validate PR
🔇 Additional comments (1)
src/frontend/src/modals/codeAreaModal/index.tsx (1)
245-246: Confirm"monokai"renders correctly under light mode togglingWhen
darkflipsfalse → truethe Ace editor instance remains mounted; Ace doesn’t re-read thethemeprop unlesssetThemeis invoked. Ensuredarkis part of the component’s render dependency (it currently is), or calleditor.setThemein auseEffectwatchingdarkto avoid a stale theme.Just double-check during manual QA in light/dark mode.
| .dark .ace-monokai .ace_marker-layer .ace_active-line, | ||
| .dark .ace-monokai .ace_active-line, | ||
| .dark .ace-monokai .ace_gutter-active-line, | ||
| .dark .ace-monokai .ace_marker-layer .ace_selected-word { | ||
| background-color: #181818 !important; | ||
| background: #181818 !important; | ||
| box-shadow: none !important; | ||
| border: 1px !important; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Same redundancy as above – keep only one background declaration
.dark .ace-monokai .ace_marker-layer .ace_active-line,
.dark .ace-monokai .ace_active-line,
.dark .ace-monokai .ace_gutter-active-line,
.dark .ace-monokai .ace_marker-layer .ace_selected-word {
- background-color: #181818 !important;
- background: #181818 !important;
+ background-color: #181818 !important;
box-shadow: none !important;
border: 1px !important;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| .dark .ace-monokai .ace_marker-layer .ace_active-line, | |
| .dark .ace-monokai .ace_active-line, | |
| .dark .ace-monokai .ace_gutter-active-line, | |
| .dark .ace-monokai .ace_marker-layer .ace_selected-word { | |
| background-color: #181818 !important; | |
| background: #181818 !important; | |
| box-shadow: none !important; | |
| border: 1px !important; | |
| } | |
| .dark .ace-monokai .ace_marker-layer .ace_active-line, | |
| .dark .ace-monokai .ace_active-line, | |
| .dark .ace-monokai .ace_gutter-active-line, | |
| .dark .ace-monokai .ace_marker-layer .ace_selected-word { | |
| background-color: #181818 !important; | |
| box-shadow: none !important; | |
| border: 1px !important; | |
| } |
🧰 Tools
🪛 Biome (1.9.4)
[error] 40-40: Unexpected shorthand property background after background-color
(lint/suspicious/noShorthandPropertyOverrides)
🤖 Prompt for AI Agents
In src/frontend/src/style/custom-ace-overrides.css between lines 35 and 43,
there are two redundant background declarations in the same CSS rule. Remove one
of the background or background-color properties to keep only a single
background declaration for clarity and maintainability.
| .ace-monokai .ace_marker-layer .ace_active-line, | ||
| .ace-monokai .ace_active-line, | ||
| .ace-monokai .ace_gutter-active-line, | ||
| .ace-monokai .ace_marker-layer .ace_selected-word { | ||
| background-color: #181818 !important; | ||
| background: #181818 !important; | ||
| box-shadow: none !important; | ||
| border: 0px !important; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Remove redundant background declarations to satisfy linter and reduce CSS noise
Each selector already sets background-color; immediately re-declaring background to the same value is flagged by Biome (noShorthandPropertyOverrides) and is unnecessary.
.ace-monokai .ace_marker-layer .ace_active-line,
.ace-monokai .ace_active-line,
.ace-monokai .ace_gutter-active-line,
.ace-monokai .ace_marker-layer .ace_selected-word {
- background-color: #181818 !important;
- background: #181818 !important;
+ background-color: #181818 !important;
box-shadow: none !important;
border: 0px !important;
}Repeat for the dark-mode block below (lines 35-43).
🧰 Tools
🪛 Biome (1.9.4)
[error] 24-24: Unexpected shorthand property background after background-color
(lint/suspicious/noShorthandPropertyOverrides)
🤖 Prompt for AI Agents
In src/frontend/src/style/custom-ace-overrides.css around lines 19 to 27, remove
the redundant background property declarations that duplicate the
background-color settings to satisfy the linter and reduce CSS noise. Also,
apply the same removal of redundant background declarations in the dark-mode
block between lines 35 and 43.
| import "ace-builds/src-noconflict/theme-one_dark"; | ||
| import "ace-builds/src-noconflict/theme-github_dark"; | ||
| import "ace-builds/src-noconflict/theme-twilight"; | ||
| import "ace-builds/src-noconflict/theme-dracula"; | ||
| import "ace-builds/src-noconflict/theme-monokai"; | ||
| import "ace-builds/src-noconflict/theme-nord_dark"; | ||
| import "ace-builds/src-noconflict/theme-pastel_on_dark"; | ||
| import "ace-builds/src-noconflict/theme-solarized_dark"; | ||
| import "ace-builds/src-noconflict/theme-terminal"; | ||
| import "ace-builds/src-noconflict/theme-tomorrow_night"; | ||
| import "ace-builds/src-noconflict/theme-vibrant_ink"; | ||
| import "ace-builds/src-noconflict/theme-chaos"; | ||
| import "ace-builds/src-noconflict/theme-cobalt"; | ||
| import "ace-builds/src-noconflict/theme-gruvbox"; | ||
| import "ace-builds/src-noconflict/theme-idle_fingers"; | ||
| import "ace-builds/src-noconflict/theme-kr_theme"; | ||
| import "ace-builds/src-noconflict/theme-merbivore"; | ||
| import "ace-builds/src-noconflict/theme-merbivore_soft"; | ||
| import "ace-builds/src-noconflict/theme-mono_industrial"; | ||
| import "ace-builds/src-noconflict/theme-ambiance"; | ||
| import "ace-builds/src-noconflict/theme-clouds_midnight"; | ||
| import "ace-builds/src-noconflict/theme-gob"; | ||
| import "ace-builds/src-noconflict/theme-sqlserver"; | ||
| import { useEffect, useRef, useState } from "react"; |
There was a problem hiding this comment.
Bulk-importing 20+ Ace themes bloats the bundle ~3-4 MB
Only monokai and github are currently used (theme={dark ? "monokai" : "github"}).
Drop the unused imports or load themes lazily when/if a theme selector is introduced:
-import "ace-builds/src-noconflict/theme-one_dark";
-import "ace-builds/src-noconflict/theme-github_dark";
-…
-import "ace-builds/src-noconflict/theme-sqlserver";
+// Keep only what is actually selected at runtime
+import "ace-builds/src-noconflict/theme-monokai";
+import "ace-builds/src-noconflict/theme-github";This keeps initial JS payload small and improves first-paint in the editor.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import "ace-builds/src-noconflict/theme-one_dark"; | |
| import "ace-builds/src-noconflict/theme-github_dark"; | |
| import "ace-builds/src-noconflict/theme-twilight"; | |
| import "ace-builds/src-noconflict/theme-dracula"; | |
| import "ace-builds/src-noconflict/theme-monokai"; | |
| import "ace-builds/src-noconflict/theme-nord_dark"; | |
| import "ace-builds/src-noconflict/theme-pastel_on_dark"; | |
| import "ace-builds/src-noconflict/theme-solarized_dark"; | |
| import "ace-builds/src-noconflict/theme-terminal"; | |
| import "ace-builds/src-noconflict/theme-tomorrow_night"; | |
| import "ace-builds/src-noconflict/theme-vibrant_ink"; | |
| import "ace-builds/src-noconflict/theme-chaos"; | |
| import "ace-builds/src-noconflict/theme-cobalt"; | |
| import "ace-builds/src-noconflict/theme-gruvbox"; | |
| import "ace-builds/src-noconflict/theme-idle_fingers"; | |
| import "ace-builds/src-noconflict/theme-kr_theme"; | |
| import "ace-builds/src-noconflict/theme-merbivore"; | |
| import "ace-builds/src-noconflict/theme-merbivore_soft"; | |
| import "ace-builds/src-noconflict/theme-mono_industrial"; | |
| import "ace-builds/src-noconflict/theme-ambiance"; | |
| import "ace-builds/src-noconflict/theme-clouds_midnight"; | |
| import "ace-builds/src-noconflict/theme-gob"; | |
| import "ace-builds/src-noconflict/theme-sqlserver"; | |
| import { useEffect, useRef, useState } from "react"; | |
| // Keep only what is actually selected at runtime | |
| import "ace-builds/src-noconflict/theme-monokai"; | |
| import "ace-builds/src-noconflict/theme-github"; | |
| import { useEffect, useRef, useState } from "react"; |
🤖 Prompt for AI Agents
In src/frontend/src/modals/codeAreaModal/index.tsx between lines 8 and 31,
multiple Ace editor themes are imported but only "monokai" and "github" are
used. Remove all unused theme imports to reduce bundle size and improve load
performance. If theme selection is added later, implement lazy loading for
themes instead of bulk importing them upfront.
ogabrielluiz
changed the title
github-actions
bot
added
enhancement
github-actions
bot
added
enhancement
| import "ace-builds/src-noconflict/theme-ambiance"; | ||
| import "ace-builds/src-noconflict/theme-chaos"; | ||
| import "ace-builds/src-noconflict/theme-clouds_midnight"; | ||
| import "ace-builds/src-noconflict/theme-cobalt"; | ||
| import "ace-builds/src-noconflict/theme-dracula"; | ||
| import "ace-builds/src-noconflict/theme-github_dark"; | ||
| import "ace-builds/src-noconflict/theme-gob"; | ||
| import "ace-builds/src-noconflict/theme-gruvbox"; | ||
| import "ace-builds/src-noconflict/theme-idle_fingers"; | ||
| import "ace-builds/src-noconflict/theme-kr_theme"; | ||
| import "ace-builds/src-noconflict/theme-merbivore"; | ||
| import "ace-builds/src-noconflict/theme-merbivore_soft"; | ||
| import "ace-builds/src-noconflict/theme-mono_industrial"; | ||
| import "ace-builds/src-noconflict/theme-monokai"; | ||
| import "ace-builds/src-noconflict/theme-nord_dark"; | ||
| import "ace-builds/src-noconflict/theme-one_dark"; | ||
| import "ace-builds/src-noconflict/theme-pastel_on_dark"; | ||
| import "ace-builds/src-noconflict/theme-solarized_dark"; | ||
| import "ace-builds/src-noconflict/theme-sqlserver"; | ||
| import "ace-builds/src-noconflict/theme-terminal"; | ||
| import "ace-builds/src-noconflict/theme-tomorrow_night"; | ||
| import "ace-builds/src-noconflict/theme-twilight"; | ||
| import "ace-builds/src-noconflict/theme-vibrant_ink"; |
There was a problem hiding this comment.
do we need all these new imports?
There was a problem hiding this comment.
I do not think so! do we plan to expose these theme?
|
@Cristhianzl can you take a look into this PR and can we get this merged? |
github-actions
bot
added
enhancement
Frontend Unit Test Coverage ReportCoverage Summary
Unit Test Results
|
Codecov Report❌ Patch coverage is
❌ Your patch status has failed because the patch coverage (0.00%) is below the target coverage (40.00%). You can increase the patch coverage or adjust the target coverage. Additional details and impacted files@@ Coverage Diff @@
## main #8894 +/- ##
=======================================
Coverage 33.36% 33.36%
=======================================
Files 1399 1399
Lines 66229 66229
Branches 9785 9785
=======================================
Hits 22100 22100
Misses 43005 43005
Partials 1124 1124
Flags with carried forward coverage won't be shown. Click here to find out more.
🚀 New features to boost your workflow:
|
Cristhianzl
left a comment
Cristhianzl
left a comment
There was a problem hiding this comment.
@edwinjosechittilappilly @rodrigosnader
I need to understand why are we importing all these themes..
I don't think we are using them on Langflow..
I would say to remove the unnecessary themes and keep only what we are using
github-actions
bot
added
enhancement
lucaseduoli
left a comment
lucaseduoli
left a comment
There was a problem hiding this comment.
Active line indicator out of place:
lucaseduoli
left a comment
lucaseduoli
left a comment
There was a problem hiding this comment.
LGTM! We should create a task to update the Syntax Hightlighter as well (on the API page) to match the design.
github-actions
bot
added
lgtm
5 participants
This PR improves the Ace code editor experience in Langflow by:
This PR brings a more polished, visually consistent, and mode-aware code editing experience to Langflow.