# Style Plugin

Adds a toolbar button that opens a popup with categorized style cards (Block styles / Text styles).
Each card shows a visual preview using the actual HTML tag and CSS classes.
Clicking a card applies or removes CSS classes on the current element.
The button label reflects the active style name.

## Configuration

```js
Jodit.make('#editor', {
    customStyles: {
        definitions: Jodit.atom([
            { name: 'Title', element: 'h2', classes: ['document-title'] },
            { name: 'Subtitle', element: 'h3', classes: ['document-subtitle'] },
            { name: 'Info box', element: 'p', classes: ['info-box', 'highlighted'] },
            { name: 'Marker', element: 'span', classes: ['marker'] },
            { name: 'Typewriter', element: 'span', classes: ['typewriter-text'] }
        ])
    }
});
```

## Attributes format

Definitions also support the `attributes` property (same format as `IStyleOptions`).
This gives full control over classes, inline styles, and arbitrary attributes.

```js
Jodit.make('#editor', {
    customStyles: {
        definitions: Jodit.atom([
            // Class via attributes
            { name: 'Title', element: 'h2', attributes: { class: 'document-title' } },
            // Inline styles
            { name: 'Red Text', element: 'span', attributes: { style: { color: 'red' } } },
            // Combined
            {
                name: 'Highlight',
                element: 'span',
                attributes: { class: 'highlight', style: { backgroundColor: '#ff0' } }
            }
        ])
    }
});
```

Both `classes` (legacy) and `attributes` formats can be mixed in the same definitions array.
When `attributes` is present it takes precedence over `classes`.

## Style Definition Format

| Property     | Type         | Description                                       |
|--------------|--------------|---------------------------------------------------|
| `name`       | `string`     | Display name shown in the popup card              |
| `element`    | `string`     | HTML tag name (e.g. `h2`, `span`, `p`)            |
| `classes`    | `string[]`   | CSS classes to apply (legacy format)               |
| `attributes` | `IAttributes`| Attributes object (`class`, `style`, etc.)         |

## CSS Requirements

You must provide the CSS for the classes you define.
The plugin only adds/removes classes — it does not inject any styling for your custom classes.

```css
.document-title { font-size: 2em; color: #333; }
.document-subtitle { font-size: 1.5em; color: #666; }
.info-box.highlighted { background: #e8f4fd; padding: 12px; border-left: 4px solid #2196f3; }
.marker { background: #ff0; }
.typewriter-text { font-family: monospace; }
```

## Block vs Text Styles

- **Block styles** use block-level elements (`h1`-`h6`, `p`, `div`, `blockquote`, `pre`, etc.).
  They replace the current block element.
- **Text styles** use inline elements (`span`, `strong`, `em`, `code`, etc.).
  They wrap the selection or apply to the current inline ancestor.

## Toggle Behavior

Clicking an already-active style removes it:
- Block styles revert to `<p>`
- Inline styles unwrap the element (if it becomes a bare `<span>` with no attributes)