# Page Break Plugin

This plugin adds support for page breaks and allows the user to insert page breaks into an editor.
This is useful when the CMS uses a custom separator to separate the content into pages.

## Features

- Adds a "Page Break" button to the toolbar in the "insert" group
- Inserts a visual page break indicator in the editor
- Converts the visual indicator to a configurable separator in the final HTML output
- Automatically detects and styles existing page breaks in the content

## Installation

If you are using a fat build of the editor, then the plugin is already included in it.
If you are using the slim build, then you need to enable it manually:

```js
Jodit.make('#editor', {
    extraPlugins: ['pageBreak']
});
```

## Options

### pageBreak.separator

- Type: `string`
- Default: `'<div style="page-break-before: always"></div>'`

The HTML separator that will be used in the final output when a page break is inserted. This can be customized to match your CMS's page break format.

```js
Jodit.make('#editor', {
    pageBreak: {
        separator: '<!-- pagebreak -->'
    }
});
```

## Usage

### Adding a Page Break

1. Place the cursor where you want to insert a page break
2. Click the "Page Break" button in the toolbar
3. A visual page break indicator will be inserted

### Programmatic Insertion

You can also insert a page break programmatically:

```js
const editor = Jodit.make('#editor');

// Insert a page break at the current cursor position
editor.execCommand('insertPageBreak');
```

## Examples

### Basic Usage

```js
const editor = Jodit.make('#editor', {
    buttons: ['pageBreak'],
    extraPlugins: ['pageBreak']
});
```

### Custom Separator for WordPress

```js
const editor = Jodit.make('#editor', {
    buttons: ['pageBreak'],
    extraPlugins: ['pageBreak'],
    pageBreak: {
        separator: '<!--nextpage-->'
    }
});
```

### Custom Separator with HTML Comment

```js
const editor = Jodit.make('#editor', {
    buttons: ['pageBreak'],
    extraPlugins: ['pageBreak'],
    pageBreak: {
        separator: '<!-- PAGE BREAK -->'
    }
});
```

## API Reference

### Configuration Interface

```typescript
interface PageBreakConfig {
    separator: string;  // HTML separator for page breaks in output
}
```

### Control Configuration

The page break control configuration:

```typescript
interface PageBreakControl extends IControlType {
    tooltip: string;    // Tooltip text ('Insert page break')
    icon: string;       // Icon SVG
    command: string;    // Command name ('insertPageBreak')
}
```

## How It Works

1. When you insert a page break, the plugin creates a visual indicator in the editor
2. This indicator is styled to look like a page break and is not editable
3. When you get the editor's content (e.g., when saving), the visual indicators are replaced with the configured separator
4. If content with existing page breaks (matching the style pattern) is loaded into the editor, they are automatically converted to visual indicators

This approach allows for a user-friendly way to insert and visualize page breaks while maintaining compatibility with various CMS systems that use different page break formats.