Function NoteBlockView

packages/workflow-renderer/src/note/note-block-view.tsx:194–247

({
  name,
  content,
  isEnabled,
  hasRing,
  ringStyles,
  onSelect,
  actionBar,
}: NoteBlockViewProps)

 * body (rich text + embeds). Carries no store, socket, or permission coupling.
 */
export function NoteBlockView({
  name,
  content,
  isEnabled,
  hasRing,
  ringStyles,
  onSelect,
  actionBar,
}: NoteBlockViewProps) {
  const isEmpty = content.trim().length === 0

  return (
    <div className='group relative'>
      <div
        role='button'
        tabIndex={0}
        className={cn(
          'note-drag-handle relative z-[20] w-[250px] cursor-grab select-none rounded-lg border border-[var(--border)] bg-[var(--surface-2)] [&:active]:cursor-grabbing'
        )}
        onClick={onSelect}
        onKeyDown={(event) => handleKeyboardActivation(event, onSelect)}
      >
        {actionBar}

        <div className='flex items-center justify-between border-[var(--divider)] border-b p-2'>
          <div className='flex min-w-0 flex-1 items-center'>
            <span
              className={cn(
                'truncate font-medium text-md',
                !isEnabled && 'text-[var(--text-muted)]'
              )}
              title={name}
            >
              {name}
            </span>
          </div>
        </div>

        <div className='relative overflow-hidden p-2'>
          <div className='relative max-w-full break-all'>
            {isEmpty ? (
              <p className='text-[var(--text-placeholder)] text-sm'>Add note…</p>
            ) : (
              <NoteMarkdown content={content} />
            )}
          </div>
        </div>
        {hasRing && (
          <div className={cn('pointer-events-none absolute inset-0 z-40 rounded-lg', ringStyles)} />
        )}
      </div>
    </div>
  )
}