admin/VolcanicCore
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(editor): move bg color from textarea to overlay so highlighted text is visible

Browse Source 
The textarea sits above the highlight overlay in paint order (same stacking
context, later in DOM). With bg-slate-950 on the textarea, its opaque
background painted over the overlay's light text — every code field (Python
Transform's script, any format:"code" or expression field) rendered as an
apparently-empty black box.

Swap: bg-slate-950 moves onto the overlay; the textarea becomes bg-transparent
and keeps its border, caret, and selection styling.
This commit is contained in:
Claude
2026-08-30 19:47:30 +00:00
parent ac2ccf3b64
commit dc32b6def9
2 changed files with 10 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
CLAUDE.md
View File

@@ -1,3 +1,7 @@
<!-- release-notes-config
declined: true
-->
# VolcanicCore — project context for Claude sessions # VolcanicCore — project context for Claude sessions
VolcanicCore is a self-hosted N8N-style workflow engine (C# backend + React frontend). Operator draws a directed graph of nodes (triggers → actions → terminals) in a browser canvas; each workflow can be activated independently. When active, trigger nodes subscribe/listen and each event fires one execution through the graph. VolcanicCore is a self-hosted N8N-style workflow engine (C# backend + React frontend). Operator draws a directed graph of nodes (triggers → actions → terminals) in a browser canvas; each workflow can be activated independently. When active, trigger nodes subscribe/listen and each event fires one execution through the graph.

11
frontend/src/expr/ExpressionField.tsx
View File

@@ -83,12 +83,13 @@ export const ExpressionField = forwardRef<ExpressionFieldHandle, Props>(function
<div <div
ref={overlayRef} ref={overlayRef}
aria-hidden aria-hidden
// border-transparent matches the textarea's 1px border so the // The overlay carries the bg (not the textarea): the textarea sits on top
// padding starts at the same offset — otherwise highlights render // in stacking order, and if it had an opaque bg it would paint over the
// 1px off from the caret column. // highlighted text. border-transparent matches the textarea's 1px border
// so the padding starts at the same offset.
className={ className={
"absolute inset-0 pointer-events-none whitespace-pre-wrap break-words font-mono text-sm " + "absolute inset-0 pointer-events-none whitespace-pre-wrap break-words font-mono text-sm " +
"px-3 py-2 leading-5 text-slate-100 overflow-hidden border border-transparent rounded" "px-3 py-2 leading-5 text-slate-100 overflow-hidden border border-transparent rounded bg-slate-950"
} }
> >
{tokens.map((t, i) => {tokens.map((t, i) =>
@@ -117,7 +118,7 @@ export const ExpressionField = forwardRef<ExpressionFieldHandle, Props>(function
placeholder={placeholder} placeholder={placeholder}
spellCheck={false} spellCheck={false}
className={ className={
"relative w-full rounded bg-slate-950 border border-slate-800 " + "relative w-full rounded bg-transparent border border-slate-800 " +
"px-3 py-2 outline-none focus:border-brand-500 " + "px-3 py-2 outline-none focus:border-brand-500 " +
"font-mono text-sm leading-5 resize-none " + "font-mono text-sm leading-5 resize-none " +
"text-transparent caret-slate-100 selection:text-slate-100 selection:bg-brand-600/40" "text-transparent caret-slate-100 selection:text-slate-100 selection:bg-brand-600/40"