v2

Sg312 · Sg312 · commit 257087adfa3c · 2025-11-11T12:39:21.000-08:00
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-block.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-block.tsx
@@ -1,75 +1,66 @@
 import { memo, useCallback, useEffect, useMemo, useRef } from 'react'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
-import { useUpdateNodeInternals, type NodeProps } from 'reactflow'
+import { type NodeProps, useUpdateNodeInternals } from 'reactflow'
 import { cn } from '@/lib/utils'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
+import { usePanelEditorStore } from '@/stores/panel-new/editor/store'
+import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
+import { useSubBlockStore } from '@/stores/workflows/subblock/store'
+import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 import { useCurrentWorkflow } from '../../hooks'
 import { ActionBar } from '../workflow-block/components'
 import { useBlockState } from '../workflow-block/hooks'
 import type { WorkflowBlockProps } from '../workflow-block/types'
-import { usePanelEditorStore } from '@/stores/panel-new/editor/store'
-import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
-import { useWorkflowStore } from '@/stores/workflows/workflow/store'
-import { useSubBlockStore } from '@/stores/workflows/subblock/store'
 
 interface NoteBlockNodeData extends WorkflowBlockProps {}
 
 const NOTE_MIN_WIDTH = 220
 const NOTE_MIN_HEIGHT = 140
 
-const MarkdownContent = memo(function MarkdownContent({ content }: { content: string }) {
+/**
+ * Extract string value from subblock value object or primitive
+ */
+function extractFieldValue(rawValue: unknown): string | undefined {
+  if (typeof rawValue === 'string') return rawValue
+  if (rawValue && typeof rawValue === 'object' && 'value' in rawValue) {
+    const candidate = (rawValue as { value?: unknown }).value
+    return typeof candidate === 'string' ? candidate : undefined
+  }
+  return undefined
+}
+
+/**
+ * Compact markdown renderer for note blocks with tight spacing
+ */
+const NoteMarkdown = memo(function NoteMarkdown({ content }: { content: string }) {
   return (
     <ReactMarkdown
       remarkPlugins={[remarkGfm]}
       components={{
-        p: ({ children }) => (
-          <p className='mb-2 text-sm leading-relaxed text-[#E5E5E5] last:mb-0'>{children}</p>
-        ),
-        strong: ({ children }) => <strong className='font-semibold text-white'>{children}</strong>,
-        em: ({ children }) => <em className='text-[#B8B8B8]'>{children}</em>,
-        h1: ({ children }) => (
-          <h1 className='mt-0 mb-[6px] text-lg font-semibold leading-snug text-[#E5E5E5]'>
-            {children}
-          </h1>
-        ),
-        h2: ({ children }) => (
-          <h2 className='mt-0 mb-[4px] text-base font-semibold leading-snug text-[#E5E5E5]'>
-            {children}
-          </h2>
-        ),
-        h3: ({ children }) => (
-          <h3 className='mt-0 mb-[4px] text-sm font-semibold leading-snug text-[#E5E5E5]'>
-            {children}
-          </h3>
-        ),
-        a: ({ href, children }) => (
-          <a
-            href={href}
-            target='_blank'
-            rel='noopener noreferrer'
-            className='font-medium text-[#33B4FF] underline-offset-2 hover:underline'
-          >
-            {children}
-          </a>
-        ),
-        ul: ({ children }) => (
-          <ul className='mb-2 ml-5 list-disc text-sm leading-relaxed text-[#E5E5E5]'>{children}</ul>
-        ),
-        ol: ({ children }) => (
-          <ol className='mb-2 ml-5 list-decimal text-sm leading-relaxed text-[#E5E5E5]'>{children}</ol>
-        ),
-        li: ({ children }) => <li className='mb-1 last:mb-0'>{children}</li>,
+        p: ({ children }) => <p className='mb-0 text-sm text-[#E5E5E5]'>{children}</p>,
+        h1: ({ children }) => <h1 className='mt-0 mb-[-2px] text-lg font-semibold text-[#E5E5E5]'>{children}</h1>,
+        h2: ({ children }) => <h2 className='mt-0 mb-[-2px] text-base font-semibold text-[#E5E5E5]'>{children}</h2>,
+        h3: ({ children }) => <h3 className='mt-0 mb-[-2px] text-sm font-semibold text-[#E5E5E5]'>{children}</h3>,
+        h4: ({ children }) => <h4 className='mt-0 mb-[-2px] text-xs font-semibold text-[#E5E5E5]'>{children}</h4>,
+        ul: ({ children }) => <ul className='-mt-[2px] mb-0 list-disc pl-4 text-sm text-[#E5E5E5]'>{children}</ul>,
+        ol: ({ children }) => <ol className='-mt-[2px] mb-0 list-decimal pl-4 text-sm text-[#E5E5E5]'>{children}</ol>,
+        li: ({ children }) => <li className='mb-0'>{children}</li>,
         code: ({ inline, children }: any) =>
           inline ? (
             <code className='rounded bg-[#393939] px-1 py-0.5 text-xs text-[#F59E0B]'>{children}</code>
           ) : (
             <code className='block rounded bg-[#1A1A1A] p-2 text-xs text-[#E5E5E5]'>{children}</code>
           ),
-        blockquote: ({ children }) => (
-          <blockquote className='mb-3 border-l-2 border-[#F59E0B] pl-3 italic text-[#B8B8B8]'>
+        a: ({ href, children }) => (
+          <a href={href} target='_blank' rel='noopener noreferrer' className='text-[#33B4FF] underline-offset-2 hover:underline'>
             {children}
-          </blockquote>
+          </a>
+        ),
+        strong: ({ children }) => <strong className='font-semibold text-white'>{children}</strong>,
+        em: ({ children }) => <em className='text-[#B8B8B8]'>{children}</em>,
+        blockquote: ({ children }) => (
+          <blockquote className='m-0 border-l-2 border-[#F59E0B] pl-3 italic text-[#B8B8B8]'>{children}</blockquote>
         ),
       }}
     >
@@ -90,7 +81,11 @@ export const NoteBlock = memo(function NoteBlock({ id, data }: NodeProps<NoteBlo
   const isFocused = currentBlockId === id
 
   const currentWorkflow = useCurrentWorkflow()
-  const { isEnabled, isActive, diffStatus, isDeletedBlock } = useBlockState(id, currentWorkflow, data)
+  const { isEnabled, isActive, diffStatus, isDeletedBlock } = useBlockState(
+    id,
+    currentWorkflow,
+    data
+  )
 
   const activeWorkflowId = useWorkflowRegistry((state) => state.activeWorkflowId)
   const storedValues = useSubBlockStore(
@@ -105,45 +100,25 @@ export const NoteBlock = memo(function NoteBlock({ id, data }: NodeProps<NoteBlo
 
   const noteValues = useMemo(() => {
     if (data.isPreview && data.subBlockValues) {
-      const previewFormatState = data.subBlockValues.format
-      const previewContentState = data.subBlockValues.content
-
-      const extractedPreviewFormat =
-        typeof previewFormatState === 'object' && previewFormatState !== null
-          ? (previewFormatState as { value?: unknown }).value
-          : previewFormatState
-      const extractedPreviewContent =
-        typeof previewContentState === 'object' && previewContentState !== null
-          ? (previewContentState as { value?: unknown }).value
-          : previewContentState
-
+      const extractedPreviewFormat = extractFieldValue(data.subBlockValues.format)
+      const extractedPreviewContent = extractFieldValue(data.subBlockValues.content)
       return {
         format: typeof extractedPreviewFormat === 'string' ? extractedPreviewFormat : 'plain',
         content: typeof extractedPreviewContent === 'string' ? extractedPreviewContent : '',
       }
     }
 
-    const format =
-      storedValues && typeof storedValues.format === 'string'
-        ? storedValues.format
-        : typeof storedValues?.format === 'object' && storedValues?.format !== null
-          ? (storedValues.format as { value?: unknown }).value
-          : undefined
-    const content =
-      storedValues && typeof storedValues.content === 'string'
-        ? storedValues.content
-        : typeof storedValues?.content === 'object' && storedValues?.content !== null
-          ? (storedValues.content as { value?: unknown }).value
-          : undefined
+    const format = extractFieldValue(storedValues?.format)
+    const content = extractFieldValue(storedValues?.content)
 
     return {
       format: typeof format === 'string' ? format : 'plain',
       content: typeof content === 'string' ? content : '',
     }
   }, [data.isPreview, data.subBlockValues, storedValues])
 
-  const trimmedContent = noteValues.content?.trim() ?? ''
-  const isEmpty = trimmedContent.length === 0
+  const content = noteValues.content ?? ''
+  const isEmpty = content.trim().length === 0
   const showMarkdown = noteValues.format === 'markdown' && !isEmpty
 
   const userPermissions = useUserPermissionsContext()
@@ -215,14 +190,14 @@ export const NoteBlock = memo(function NoteBlock({ id, data }: NodeProps<NoteBlo
           </div>
         </div>
 
-        <div className='relative px-[12px] py-[10px]'>
+        <div className='relative px-[12px] pt-[6px] pb-[8px]'>
           <div className='relative whitespace-pre-wrap break-words'>
             {isEmpty ? (
-              <p className='text-sm italic text-[#868686]'>Add your note...</p>
+              <p className='text-[#868686] text-sm italic'>Add a note...</p>
             ) : showMarkdown ? (
-              <MarkdownContent content={trimmedContent} />
+              <NoteMarkdown content={content} />
             ) : (
-              <p className='text-sm leading-relaxed text-[#E5E5E5]'>{trimmedContent}</p>
+              <p className='whitespace-pre-wrap text-[#E5E5E5] text-sm leading-relaxed'>{content}</p>
             )}
           </div>
         </div>
@@ -235,4 +210,3 @@ export const NoteBlock = memo(function NoteBlock({ id, data }: NodeProps<NoteBlo
     </div>
   )
 })
-
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx
@@ -1,5 +1,7 @@
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useParams } from 'next/navigation'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
 import { Handle, type NodeProps, Position, useUpdateNodeInternals } from 'reactflow'
 import { Badge } from '@/components/emcn/components/badge/badge'
 import { Tooltip } from '@/components/emcn/components/tooltip/tooltip'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx
@@ -18,8 +18,8 @@ import { DiffControls } from '@/app/workspace/[workspaceId]/w/[workflowId]/compo
 import { Chat } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat'
 import { UserAvatarStack } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/control-bar/components/user-avatar-stack/user-avatar-stack'
 import { ErrorBoundary } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/error/index'
-import { Panel } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/panel-new'
 import { NoteBlock } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-block'
+import { Panel } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/panel-new'
 import { SubflowNodeComponent } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node'
 import { Terminal } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/terminal'
 import { TrainingControls } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/training-controls/training-controls'
@@ -1306,13 +1306,10 @@ const WorkflowContent = React.memo(() => {
         typeof block.layout?.measuredHeight === 'number' ? block.layout.measuredHeight : undefined
 
       const nodeType = block.type === 'note' ? 'noteBlock' : 'workflowBlock'
-      const dragHandle =
-        block.type === 'note' ? '.note-drag-handle' : '.workflow-drag-handle'
+      const dragHandle = block.type === 'note' ? '.note-drag-handle' : '.workflow-drag-handle'
 
       const defaultWidth =
-        block.type === 'note'
-          ? Math.max(measuredWidth ?? block.data?.width ?? 260, 200)
-          : 250
+        block.type === 'note' ? Math.max(measuredWidth ?? block.data?.width ?? 260, 200) : 250
 
       const defaultHeight =
         block.type === 'note'
diff --git a/apps/sim/blocks/blocks/note.ts b/apps/sim/blocks/blocks/note.ts
@@ -44,4 +44,3 @@ export const NoteBlock: BlockConfig = {
   },
   outputs: {},
 }
-
diff --git a/apps/sim/lib/workflows/autolayout/containers.ts b/apps/sim/lib/workflows/autolayout/containers.ts
@@ -9,9 +9,9 @@ import {
   CONTAINER_PADDING_Y,
   DEFAULT_CONTAINER_HEIGHT,
   DEFAULT_CONTAINER_WIDTH,
+  filterLayoutEligibleBlockIds,
   getBlocksByParent,
   prepareBlockMetrics,
-  shouldSkipAutoLayout,
 } from './utils'
 
 const logger = createLogger('AutoLayout:Containers')
@@ -36,14 +36,10 @@ export function layoutContainers(
 
     logger.debug('Processing container', { parentId, childCount: childIds.length })
 
+    const layoutChildIds = filterLayoutEligibleBlockIds(childIds, blocks)
     const childBlocks: Record<string, BlockState> = {}
-    const layoutChildIds: string[] = []
-    for (const childId of childIds) {
-      const childBlock = blocks[childId]
-      if (!childBlock) continue
-      if (shouldSkipAutoLayout(childBlock)) continue
-      childBlocks[childId] = childBlock
-      layoutChildIds.push(childId)
+    for (const childId of layoutChildIds) {
+      childBlocks[childId] = blocks[childId]
     }
 
     const childEdges = edges.filter(
diff --git a/apps/sim/lib/workflows/autolayout/index.ts b/apps/sim/lib/workflows/autolayout/index.ts
@@ -5,7 +5,7 @@ import { adjustForNewBlock as adjustForNewBlockInternal, compactHorizontally } f
 import { assignLayers, groupByLayer } from './layering'
 import { calculatePositions } from './positioning'
 import type { AdjustmentOptions, Edge, LayoutOptions, LayoutResult, Loop, Parallel } from './types'
-import { getBlocksByParent, prepareBlockMetrics, shouldSkipAutoLayout } from './utils'
+import { filterLayoutEligibleBlockIds, getBlocksByParent, prepareBlockMetrics } from './utils'
 
 const logger = createLogger('AutoLayout')
 
@@ -28,12 +28,7 @@ export function applyAutoLayout(
 
     const { root: rootBlockIds } = getBlocksByParent(blocksCopy)
 
-    const layoutRootIds = rootBlockIds.filter((id) => {
-      const block = blocksCopy[id]
-      if (!block) return false
-      if (shouldSkipAutoLayout(block)) return false
-      return true
-    })
+    const layoutRootIds = filterLayoutEligibleBlockIds(rootBlockIds, blocksCopy)
 
     const rootBlocks: Record<string, BlockState> = {}
     for (const id of layoutRootIds) {
diff --git a/apps/sim/lib/workflows/autolayout/targeted.ts b/apps/sim/lib/workflows/autolayout/targeted.ts
@@ -9,6 +9,7 @@ import {
   CONTAINER_PADDING_Y,
   DEFAULT_CONTAINER_HEIGHT,
   DEFAULT_CONTAINER_WIDTH,
+  filterLayoutEligibleBlockIds,
   getBlockMetrics,
   getBlocksByParent,
   isContainerType,
@@ -72,12 +73,7 @@ function layoutGroup(
 
   const parentBlock = parentId ? blocks[parentId] : undefined
 
-  const layoutEligibleChildIds = childIds.filter((id) => {
-    const block = blocks[id]
-    if (!block) return false
-    if (shouldSkipAutoLayout(block)) return false
-    return true
-  })
+  const layoutEligibleChildIds = filterLayoutEligibleBlockIds(childIds, blocks)
 
   if (layoutEligibleChildIds.length === 0) {
     if (parentBlock) {
@@ -86,19 +82,17 @@ function layoutGroup(
     return
   }
 
-  const requestedLayout = childIds.filter((id) => {
+  const requestedLayout = layoutEligibleChildIds.filter((id) => {
     const block = blocks[id]
     if (!block) return false
     // Never reposition containers, only update their dimensions
     if (isContainerType(block.type)) return false
-    if (shouldSkipAutoLayout(block)) return false
     return changedSet.has(id)
   })
-  const missingPositions = childIds.filter((id) => {
+  const missingPositions = layoutEligibleChildIds.filter((id) => {
     const block = blocks[id]
     if (!block) return false
     // Containers with missing positions should still get positioned
-    if (shouldSkipAutoLayout(block)) return false
     return !hasPosition(block)
   })
   const needsLayoutSet = new Set([...requestedLayout, ...missingPositions])
@@ -116,7 +110,7 @@ function layoutGroup(
 
   const oldPositions = new Map<string, { x: number; y: number }>()
 
-  for (const id of childIds) {
+  for (const id of layoutEligibleChildIds) {
     const block = blocks[id]
     if (!block) continue
     oldPositions.set(id, { ...block.position })
diff --git a/apps/sim/lib/workflows/autolayout/utils.ts b/apps/sim/lib/workflows/autolayout/utils.ts
@@ -18,16 +18,26 @@ function resolveNumeric(value: number | undefined, fallback: number): number {
   return typeof value === 'number' && Number.isFinite(value) ? value : fallback
 }
 
+const AUTO_LAYOUT_EXCLUDED_TYPES = new Set(['note'])
+
 export function isContainerType(blockType: string): boolean {
   return blockType === 'loop' || blockType === 'parallel'
 }
 
-export function isNoteBlockType(blockType: string): boolean {
-  return blockType === 'note'
+export function shouldSkipAutoLayout(block?: BlockState): boolean {
+  if (!block) return true
+  return AUTO_LAYOUT_EXCLUDED_TYPES.has(block.type)
 }
 
-export function shouldSkipAutoLayout(block: BlockState): boolean {
-  return isNoteBlockType(block.type)
+export function filterLayoutEligibleBlockIds(
+  blockIds: string[],
+  blocks: Record<string, BlockState>
+): string[] {
+  return blockIds.filter((id) => {
+    const block = blocks[id]
+    if (!block) return false
+    return !shouldSkipAutoLayout(block)
+  })
 }
 
 function getContainerMetrics(block: BlockState): BlockMetrics {

Original file line number	Diff line number	Diff line change
`@@ -44,4 +44,3 @@ export const NoteBlock: BlockConfig = {`
`44`	`44`	`},`
`45`	`45`	`outputs: {},`
`46`	`46`	`}`
`47`		`-`