# Templates Plugin

Adds a toolbar button that opens a popup with predefined content templates.
Each card shows a preview (image or rendered HTML), title, and description.
Clicking a card inserts the template HTML at the current cursor position.

## Configuration

```js
Jodit.make('#editor', {
    contentTemplates: {
        definitions: Jodit.atom([
            {
                title: 'Two columns',
                description: 'Creates a two-column layout',
                html: '<div class="two-columns"><div class="column">Column 1</div><div class="column">Column 2</div></div>'
            },
            {
                title: 'Image with caption',
                description: 'Image block with a caption below',
                image: '/templates/image-caption.png',
                html: '<figure><img src="" alt=""><figcaption>Caption</figcaption></figure>'
            },
            {
                title: 'Info block',
                description: 'Highlighted information block',
                html: '<div class="info-block"><h3>Title</h3><p>Description text here</p></div>'
            }
        ])
    }
});
```

## Template Definition Format

| Property      | Type     | Required | Description                                   |
|---------------|----------|----------|-----------------------------------------------|
| `title`       | `string` | Yes      | Display name shown in the popup card          |
| `description` | `string` | Yes      | Short description shown below the title       |
| `image`       | `string` | No       | Preview image URL (shown instead of HTML)     |
| `html`        | `string` | Yes      | HTML content to insert into the editor        |

## Preview Behavior

- If `image` is provided, the card shows the image as preview
- If no `image`, the card renders a miniature HTML preview of the template content

## Insertion Behavior

Clicking a template card inserts its HTML content at the current cursor position.
Existing editor content is preserved.