# ParagraphNode

Text node dành cho đoạn văn bản. Render qua component `Text` từ `@janbox/storefront-ui`.

## Resolved name

`Paragraph`

## Configurable props

### Top-level props

| Prop | Type | Description |
| --- | --- | --- |
| `as` | `'p' \| 'div'` | HTML tag (chọn qua inspector) |
| `sizeVariant` | `TypographySizeVariant` | Kích cỡ typography (responsive) |

### `sx` props

```ts
sx?: {
  // typography
  color?: string
  fontStyle?: 'normal' | 'italic'
  fontWeight?: number | string
  textDecorationLine?: 'none' | 'underline' | 'line-through'
  textAlign?: 'left' | 'center' | 'right' | 'justify'
  textTransform?: 'none' | 'uppercase' | 'lowercase' | 'capitalize'

  // size
  width?: number | string

  // spacing
  paddingTop?: number
  paddingRight?: number
  paddingBottom?: number
  paddingLeft?: number
  marginTop?: number
  marginRight?: number
  marginBottom?: number
  marginLeft?: number

  // responsive overrides
  sm?: { /* same keys above */ }
  md?: { /* same keys above */ }
  lg?: { /* same keys above */ }
}
```

## Usage

```tsx
import { ParagraphNode } from '@janbox/storefront-builder';

// Đoạn văn đơn giản
<ParagraphNode>
  Lorem ipsum dolor sit amet.
</ParagraphNode>

// Với sizeVariant responsive
<ParagraphNode sizeVariant="sm" md={{ sizeVariant: 'base' }}>
  Body copy text
</ParagraphNode>

// Styled
<ParagraphNode
  sx={{
    color: '#555555',
    textAlign: 'center',
    marginTop: 8,
    marginBottom: 8,
  }}
>
  Centered paragraph
</ParagraphNode>
```

## Rules

- **Canvas**: no — không chứa node con.
- **Inline editing**: có thể double-click để chỉnh nội dung trong canvas.
- **Tag**: chọn qua inspector, giới hạn `p` hoặc `div`.

## Related nodes

- [`HeadingNode`](../heading/README.md) — dành cho tiêu đề với tag `h1`–`h6`