# Show Blocks Plugin

This plugin adds the ability to visualize all block-level elements in the editor by surrounding them with an outline and displaying their element name at the top-right. This is particularly useful for understanding the structure of your content and identifying different HTML elements.

## Features

- Adds a "Show Blocks" button to the toolbar in the "state" group
- Outlines all specified HTML elements with a dashed border
- Displays the element name at the top-right corner of each element
- Provides commands to enable, disable, or toggle the feature
- Supports customization of colors and which elements to highlight

## 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: ['show-blocks']
});
```

## Options

### showBlocks.enable

- Type: `boolean`
- Default: `false`

Enables or disables the show blocks feature when the editor is initialized.

```js
Jodit.make('#editor', {
    showBlocks: {
        enable: true
    }
});
```

### showBlocks.color

- Type: `string`
- Default: `'#ccc'`

Sets the color of the outlines and element names.

```js
Jodit.make('#editor', {
    showBlocks: {
        color: '#ff0000' // Red outlines and element names
    }
});
```

### showBlocks.tagList

- Type: `string[]`
- Default: See below

An array of HTML tag names that will be highlighted when the show blocks feature is enabled.

Default value includes most HTML elements:
```js
[
    'html', 'body', 'div', 'span', 'applet', 'object', 'iframe',
    'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'blockquote', 'pre',
    'a', 'abbr', 'acronym', 'address', 'big', 'cite', 'code',
    'del', 'dfn', 'em', 'img', 'ins', 'kbd', 'q', 's', 'samp',
    'small', 'strike', 'strong', 'sub', 'sup', 'tt', 'var',
    'b', 'u', 'i', 'center', 'dl', 'dt', 'dd', 'fieldset',
    'form', 'label', 'legend', 'caption', 'th', 'td', 'li',
    'ol', 'ul', 'article', 'aside', 'canvas', 'details',
    'embed', 'figure', 'figcaption', 'footer', 'header',
    'hgroup', 'menu', 'nav', 'output', 'ruby', 'section',
    'summary', 'time', 'mark', 'audio', 'video'
]
```

You can customize this list to highlight only specific elements:

```js
Jodit.make('#editor', {
    showBlocks: {
        tagList: ['p', 'div', 'h1', 'h2', 'h3', 'blockquote']
    }
});
```

## Commands

The plugin registers the following commands that can be executed programmatically:

### enableShowBlocks

Enables the show blocks feature.

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

### disableShowBlocks

Disables the show blocks feature.

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

### toggleShowBlocks

Toggles the show blocks feature on or off.

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

## Usage Examples

### Basic Usage

```js
const editor = Jodit.make('#editor', {
    buttons: ['showBlocks'],
    showBlocks: {
        enable: false, // Disabled by default
        color: '#ccc'
    }
});

// Toggle show blocks when needed
editor.execCommand('toggleShowBlocks');
```

### Custom Configuration

```js
const editor = Jodit.make('#editor', {
    buttons: ['bold', 'italic', '|', 'showBlocks'],
    showBlocks: {
        enable: true, // Enabled by default
        color: '#3498db', // Blue color
        tagList: ['p', 'div', 'h1', 'h2', 'h3', 'ul', 'ol', 'li'] // Only highlight these elements
    }
});
```

### Adding to a Custom Toolbar Group

```js
const editor = Jodit.make('#editor', {
    toolbar: {
        items: [
            'source', '|',
            'bold', 'italic', '|',
            'ul', 'ol', '|',
            {
                group: 'view-options',
                buttons: ['showBlocks']
            }
        ]
    },
    showBlocks: {
        enable: false,
        color: '#27ae60' // Green color
    }
});
```

## API Reference

### Configuration Interface

```typescript
interface ShowBlocksConfig {
    enable: boolean;    // Enable show blocks on initialization
    color: string;      // Color of outlines and element names
    tagList: string[];  // List of HTML tags to highlight
}
```

### Control Configuration

The show blocks control configuration:

```typescript
interface ShowBlocksControl extends IControlType {
    tooltip: string;    // Tooltip text
    icon: string;       // Icon identifier
    command: string;    // Command name ('toggleShowBlocks')
    isActive: (editor: IViewBased, button) => boolean;  // Check if active
}
```

## How It Works

1. When enabled, the plugin adds CSS rules to the editor that outline the specified HTML elements
2. Each element is given a dashed outline in the specified color
3. The element's tag name is displayed at the top-right corner using an SVG background image
4. The plugin handles RTL text direction automatically, placing the tag name at the appropriate side
5. When disabled, all added CSS rules are removed

This visual aid helps content creators understand the structure of their document and identify different HTML elements without having to view the source code.