From a3e38fb90ad53b66acd99ee2c1ffb25804eb522d Mon Sep 17 00:00:00 2001 From: Bill Leoutsakos Date: Tue, 22 Sep 2026 10:30:26 -0700 Subject: [PATCH] refactor(ui): make measurement styles explicit and reuse preview white --- .../sub-block/components/code/code.tsx | 26 +++++++++---------- .../condition-input/condition-input.tsx | 23 +++++++--------- .../components/code-editor/code-editor.tsx | 20 +++++++------- apps/sim/lib/pptx-renderer/core/viewer.ts | 2 +- 4 files changed, 34 insertions(+), 37 deletions(-) diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.tsx index 191fa72fb71..4fc1e9f94b8 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.tsx +++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.tsx @@ -564,19 +564,19 @@ export const Code = memo(function Code({ const newVisualLineHeights: number[] = [] const tempContainer = document.createElement('div') - tempContainer.style.cssText = ` - position: absolute; - visibility: hidden; - height: auto; - width: ${preElement.clientWidth}px; - font-family: ${window.getComputedStyle(preElement).fontFamily}; - font-size: ${window.getComputedStyle(preElement).fontSize}; - line-height: ${LINE_HEIGHT_PX}px; - padding: 8px; - white-space: pre-wrap; - word-break: break-word; - box-sizing: border-box; - ` + Object.assign(tempContainer.style, { + position: 'absolute', + visibility: 'hidden', + height: 'auto', + width: `${preElement.clientWidth}px`, + fontFamily: window.getComputedStyle(preElement).fontFamily, + fontSize: window.getComputedStyle(preElement).fontSize, + lineHeight: `${LINE_HEIGHT_PX}px`, + padding: '8px', + whiteSpace: 'pre-wrap', + wordBreak: 'break-word', + boxSizing: 'border-box', + }) document.body.appendChild(tempContainer) lines.forEach((line: string) => { diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx index f29ef3eae1d..5169f4697fd 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx +++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx @@ -466,16 +466,16 @@ export function ConditionInput({ // Create a hidden container with the same width as the editor const container = document.createElement('div') - container.style.cssText = ` - position: absolute; - visibility: hidden; - width: ${preElement.clientWidth}px; - font-family: ${window.getComputedStyle(preElement).fontFamily}; - font-size: ${window.getComputedStyle(preElement).fontSize}; - padding: 12px; - white-space: pre-wrap; - word-break: break-word; - ` + Object.assign(container.style, { + position: 'absolute', + visibility: 'hidden', + width: `${preElement.clientWidth}px`, + fontFamily: window.getComputedStyle(preElement).fontFamily, + fontSize: window.getComputedStyle(preElement).fontSize, + padding: '12px', + whiteSpace: 'pre-wrap', + wordBreak: 'break-word', + }) document.body.appendChild(container) // Process each line @@ -487,9 +487,6 @@ export function ConditionInput({ parts.forEach((part) => { const span = document.createElement('span') span.textContent = part - if (part.startsWith('<') && part.endsWith('>')) { - span.style.color = 'rgb(153, 0, 85)' - } lineDiv.appendChild(span) }) } else { diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/code-editor/code-editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/code-editor/code-editor.tsx index d0a6b84f7dd..63ac5a07253 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/code-editor/code-editor.tsx +++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/code-editor/code-editor.tsx @@ -64,16 +64,16 @@ export function CodeEditor({ const newVisualLineHeights: number[] = [] const container = document.createElement('div') - container.style.cssText = ` - position: absolute; - visibility: hidden; - width: ${preElement.clientWidth}px; - font-family: ${window.getComputedStyle(preElement).fontFamily}; - font-size: ${window.getComputedStyle(preElement).fontSize}; - padding: 12px; - white-space: pre-wrap; - word-break: break-word; - ` + Object.assign(container.style, { + position: 'absolute', + visibility: 'hidden', + width: `${preElement.clientWidth}px`, + fontFamily: window.getComputedStyle(preElement).fontFamily, + fontSize: window.getComputedStyle(preElement).fontSize, + padding: '12px', + whiteSpace: 'pre-wrap', + wordBreak: 'break-word', + }) document.body.appendChild(container) lines.forEach((line) => { diff --git a/apps/sim/lib/pptx-renderer/core/viewer.ts b/apps/sim/lib/pptx-renderer/core/viewer.ts index bd24037a059..683b5e93ac1 100644 --- a/apps/sim/lib/pptx-renderer/core/viewer.ts +++ b/apps/sim/lib/pptx-renderer/core/viewer.ts @@ -617,7 +617,7 @@ export class PptxViewer extends EventTarget { box-shadow: 0 2px 8px rgba(0,0,0,0.15); overflow: hidden; position: relative; - background: #fff; + background: var(--white); ` item.appendChild(wrapper)