open-index/open-npm huggingface dataset:
npm package: @szh-editor/checklist
Description: Checklist Tool for Editor.js
Author: CodeX
Latest version: 1.0.0

![](https://badgen.net/badge/Editor.js/v2.0/blue)

# Checklist Tool for Editor.js

This Tool for the [Editor.js](https://editorjs.io) allows you to add  checklists to your texts.

![](https://capella.pics/f099dd9b-1321-47f6-b9e1-97fc1ef40b6a.jpg)

## Installation

### Install via NPM

Get the package

```shell
npm i --save-dev @editorjs/checklist
```

Include module at your application

```javascript
const Checklist = require('@editorjs/checklist');
```

### Download to your project's source dir

1. Upload folder `dist` from repository
2. Add `dist/bundle.js` file to your page.

### Load from CDN

You can load specific version of package from [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@editorjs/checklist).

`https://cdn.jsdelivr.net/npm/@editorjs/checklist@1.0.0`

Then require this script on page with Editor.js.

```html
<script src="..."></script>
```

## Usage

Add a new Tool to the `tools` property of the Editor.js initial config.

```javascript
var editor = EditorJS({
  ...
  
  tools: {
    ...
    checklist: {
      class: Checklist,
      inlineToolbar: true,
    },
  }
  
  ...
});
```

## Config Params

This Tool has no config params


## Output data

| Field | Type       | Description                            |
| ----- | ---------- | -------------------------------------- |
| items | `object[]` | array of checklist's items             |


```json
{
    "type" : "checklist",
    "data" : {
        "items" : [
            {
              "text" : "This is a block-styled editor",
              "checked" : true
            },
            {
              "text" : "Clean output data",
              "checked" : false
            },
            {
              "text" : "Simple and powerful API",
              "checked" : true
            }
        ]
    }
}
```
npm package: @szh-editor/delimiter
Description: Delimiter Tool for Editor.js
Author: CodeX Team
Latest version: 1.0.0

![](https://badgen.net/badge/Editor.js/v2.0/blue)

# Delimiter Tool for Editor.js

Delimiter Tool for the [Editor.js](https://editorjs.io).

![](https://capella.pics/de70e7f8-56cd-4779-848f-52c3f68deb47.jpg)

## Installation

### Install via NPM

Get the package

```shell
npm i --save-dev @editorjs/delimiter
```

Include module at your application

```javascript
const Delimiter = require('@editorjs/delimiter');
```

### Download to your project's source dir

1. Upload folder `dist` from repository
2. Add `dist/bundle.js` file to your page.

### Load from CDN

You can load specific version of package from [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@editorjs/delimiter).

`https://cdn.jsdelivr.net/npm/@editorjs/delimiter@1.0.1`

Require this script on a page with Editor.js.

```html
<script src="..."></script>
```

## Usage

Add a new Tool to the `tools` property of the Editor.js initial config.

```javascript
var editor = EditorJS({
  ...
  
  tools: {
    ...
    delimiter: Delimiter,
  }
  
  ...
});
```

## Config Params

This Tool has no config params

## Output data

This Tool returns empty object.

```json
{
    "type" : "delimiter",
    "data" : {}
}
```
npm package: @szh-editor/header
Description: Header Tool for Editor.js
Author: CodeX
Latest version: 1.0.0

# Heading Tool

![Version of EditorJS that the plugin is compatible with](https://badgen.net/badge/Editor.js/v2.0/blue)

Provides Headings Blocks for the [Editor.js](https://ifmo.su/editor).

## Installation

### Install via NPM

Get the package

```shell
npm i --save @editorjs/header
```

Include module at your application

```javascript
const Header = require('@editorjs/header');
```

### Download to your project's source dir

1. Upload folder `dist` from repository
2. Add `dist/bundle.js` file to your page.

### Load from CDN

You can load specific version of package from [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@editorjs/header).

`https://cdn.jsdelivr.net/npm/@editorjs/header@latest`

Then require this script on page with Editor.js.

```html
<script src="..."></script>
```

## Usage

Add a new Tool to the `tools` property of the Editor.js initial config.

```javascript
var editor = EditorJS({
  ...

  tools: {
    ...
    header: Header,
  },

  ...
});
```

## Shortcut

You can insert this Block by a useful shortcut. Set it up with the `tools[].shortcut` property of the Editor's initial config.

```javascript
var editor = EditorJS({
  ...

  tools: {
    ...
    header: {
      class: Header,
      shortcut: 'CMD+SHIFT+H',
    },
  },

  ...
});
```

## Config Params

All properties are optional.

| Field        | Type       | Description                 |
| ------------ | ---------- | --------------------------- |
| placeholder  | `string`   | header's placeholder string |
| levels       | `number[]` | enabled heading levels      |
| defaultLevel | `number`   | default heading level       |

```javascript
var editor = EditorJS({
  ...

  tools: {
    ...
    header: {
      class: Header,
      config: {
        placeholder: 'Enter a header',
        levels: [2, 3, 4],
        defaultLevel: 3
      }
    }
  }

  ...
});
```

## Tool's settings

![An image showing the header block tool](https://capella.pics/634ad545-08d7-4cb7-8409-f01289e0e5e1.jpg)

You can select one of six levels for heading.

## Output data

| Field | Type     | Description                                      |
| ----- | -------- | ------------------------------------------------ |
| text  | `string` | header's text                                    |
| level | `number` | level of header: 1 for H1, 2 for H2 ... 6 for H6 |

```json
{
  "type": "header",
  "data": {
    "text": "Why Telegram is the best messenger",
    "level": 2
  }
}
```
npm package: @szh-editor/inline-code
Description: InlineCode Tool for Editor.js
Author: CodeX Team
Latest version: 1.0.0

![](https://badgen.net/badge/Editor.js/v2.0/blue)

# InlineCode Tool

Inline Tool for marking code-fragments for the [Editor.js](https://ifmo.su/editor).

![](assets/example.gif)

## Installation

### Install via NPM

Get the package

```shell
npm i --save-dev @editorjs/inline-code
```

Include module at your application

```javascript
const InlineCode = require('@editorjs/inline-code');
```

### Download to your project's source dir

1. Upload folder `dist` from repository
2. Add `dist/bundle.js` file to your page.

### Load from CDN

You can load specific version of package from [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@editorjs/inline-code).

`https://cdn.jsdelivr.net/npm/@editorjs/inline-code@1.0.1`

Require this script on a page with Editor.js.

```html
<script src="..."></script>
```

## Usage

Add a new Tool to the `tools` property of the Editor.js initial config.

```javascript
var editor = EditorJS({
  ...
  
  tools: {
    ...
    inlineCode: {
      class: InlineCode,
      shortcut: 'CMD+SHIFT+M',
    },
  },
  
  ...
});
```

## Config Params

This Tool has no config params

## Output data

Marked text will be wrapped with a `span` tag with an `inline-code` class.

```json
{
    "type" : "text",
    "data" : {
        "text" : "Create a directory for your module, enter it and run <span class=\"inline-code\">npm init</span> command."
    }
}
```
npm package: @szh-editor/marker
Description: Marker Tool for Editor.js
Author: CodeX
Latest version: 1.0.0

![](https://badgen.net/badge/Editor.js/v2.0/blue)

# Marker Tool

Marker Tool for highlighting text-fragments for the [Editor.js](https://editorjs.io).

![](assets/example.gif)

## Installation

### Install via NPM

Get the package

```shell
npm i --save-dev @editorjs/marker
```

Include module at your application

```javascript
const Marker = require('@editorjs/marker');
```

### Download to your project's source dir

1. Upload folder `dist` from repository
2. Add `dist/bundle.js` file to your page.

### Load from CDN

You can load specific version of package from [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@editorjs/marker).

`https://cdn.jsdelivr.net/npm/@editorjs/marker@latest`

Require this script on a page with Editor.js.

```html
<script src="..."></script>
```

## Usage

Add a new Tool to the `tools` property of the Editor.js initial config.

```javascript
var editor = EditorJS({
  ...
  
  tools: {
    ...
    Marker: {
      class: Marker,
      shortcut: 'CMD+SHIFT+M',
    }
  },
  
  ...
});
```

## Config Params

This Tool has no config params

## Output data

Marked text will be wrapped with a `mark` tag with an `cdx-marker` class.

```json
{
    "type" : "text",
    "data" : {
        "text" : "Create a directory for your module, enter it and run <mark class=\"cdx-marker\">npm init</mark> command."
    }
}
```
npm package: @szh-editor/quote
Description: Quote Tool for Editor.js
Author: CodeX
Latest version: 1.0.0

![](https://badgen.net/badge/Editor.js/v2.0/blue)

# Quote Tool

Provides Quote Blocks for the [Editor.js](https://editorjs.io).

![](https://capella.pics/017dca46-6869-40cb-93a0-994416576e33.jpg)

## Installation

### Install via NPM

Get the package

```shell
npm i --save-dev @editorjs/quote
```

Include module at your application

```javascript
const Quote = require('@editorjs/quote');
```

### Download to your project's source dir

1. Upload folder `dist` from repository
2. Add `dist/bundle.js` file to your page.

### Load from CDN

You can load specific version of package from [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@editorjs/quote).

`https://cdn.jsdelivr.net/npm/@editorjs/quote@2.0.0`

Then require this script on page with Editor.js.

```html
<script src="..."></script>
```

## Usage

Add a new Tool to the `tools` property of the Editor.js initial config.

```javascript
var editor = EditorJS({
  ...
  
  tools: {
    ...
    quote: Quote,
  },
  
  ...
});
```

Or init Quote Tool with additional settings

```javascript
var editor = EditorJS({
  ...
  
  tools: {
    ...
    quote: {
      class: Quote,
      inlineToolbar: true,
      shortcut: 'CMD+SHIFT+O',
      config: {
        quotePlaceholder: 'Enter a quote',
        captionPlaceholder: 'Quote\'s author',
      },
    },
  },
  
  ...
});
```

## Config Params

| Field              | Type     | Description                 |
| ------------------ | -------- | ----------------------------|
| quotePlaceholder   | `string` | quote's placeholder string  |
| captionPlaceholder | `string` | caption's placeholder string|

## Tool's settings

![](https://capella.pics/0db5d4de-c431-4cc2-90bf-bb1f4feec5df.jpg)

You can choose alignment for the quote. It takes no effect while editing, but saved the «alignment» param.

## Output data

| Field     | Type     | Description          |
| --------- | -------- | -------------------- |
| text      | `string` | quote's text         |
| caption   | `string` | caption or an author |
| alignment | `string` | `left` or `center`   |


```json
{
    "type" : "quote",
    "data" : {
        "text" : "The unexamined life is not worth living.",
        "caption" : "Socrates",
        "alignment" : "left"
    }
}
```
npm package: @szh-editor/raw
Description: Raw HTML Tool for Editor.js
Author: CodeX
Latest version: 1.0.0

![](https://badgen.net/badge/CodeX%20Editor/v2.0/blue)

# Raw HTML Tool for Editor.js

Raw Tool for the [Editor.js](https://codex.so/editor) allows to include raw HTML code in your articles.

![](https://capella.pics/5195d944-966d-40cf-8f86-78c6349d94cb.jpg)

## Installation

### Install via NPM

Get the package

```shell
npm i --save-dev @editorjs/raw
```

Include module at your application

```javascript
const RawTool = require('@editorjs/raw');
```

### Download to your project's source dir

1. Upload folder `dist` from repository
2. Add `dist/bundle.js` file to your page.

### Load from CDN

You can load specific version of package from [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@editorjs/raw).

`https://cdn.jsdelivr.net/npm/@editorjs/raw`

Require this script on a page with CodeX Editor.

```html
<script src="..."></script>
```

## Usage

Add a new Tool to the `tools` property of the CodeX Editor initial config.

```javascript
var editor = CodexEditor({
  ...
  
  tools: {
    ...
    raw: RawTool,
  }
  
  ...
});
```

## Config Params

| Field       | Type     | Description                   |
| ----------- | -------- | ------------------------------|
| placeholder | `string` | Raw Tool's placeholder string |

## Output data

This Tool returns raw HTML code.

```json
{
    "type" : "raw",
    "data" : {
        "html": "<div style=\"background: #000; color: #fff; font-size: 30px; padding: 50px;\">Any HTML code</div>",
    }
}
```
npm package: @szh-editor/warning
Description: Warning Tool for Editor.js
Author: CodeX Team
Latest version: 1.0.0

![](https://badgen.net/badge/CodeX%20Editor/v2.0/blue)

# Warning Tool

Provides Warning Block for the [CodeX Editor](https://ifmo.su/editor). Block has title and message. It can be used, for example, for editorials notifications or appeals.

![](https://capella.pics/2d7b7bc1-ac46-4020-89c9-390d1a7297e2.jpg)

## Installation

### Install via NPM

Get the package

```shell
npm i --save-dev @editorjs/warning
```

Include module at your application

```javascript
const Warning = require('@editorjs/warning');
```

### Download to your project's source dir

1. Upload folder `dist` from repository
2. Add `dist/bundle.js` file to your page.

### Load from CDN

You can load specific version of package from [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@editorjs/warning).

`https://cdn.jsdelivr.net/npm/@editorjs/warning@latest`

Then require this script on page with CodeX Editor.

```html
<script src="..."></script>
```

## Usage

Add a new Tool to the `tools` property of the CodeX Editor initial config.

```javascript
var editor = CodexEditor({
  ...
  
  tools: {
    ...
    warning: Warning,
  },
  
  ...
});
```

Or init Warning Tool with additional settings

```javascript
var editor = CodexEditor({
  ...
  
  tools: {
    ...
    warning: {
      class: Warning,
      inlineToolbar: true,
      shortcut: 'CMD+SHIFT+W',
      config: {
        titlePlaceholder: 'Title',
        messagePlaceholder: 'Message',
      },
    },
  },
  
  ...
});
```

## Config Params

| Field              | Type     | Description                       |
| ------------------ | -------- | ----------------------------------|
| titlePlaceholder   | `string` | Warning Tool's title placeholder  |
| messagePlaceholder | `string` | Warning Tool's message placeholder|

## Output data

| Field     | Type     | Description      |
| --------- | -------- | -----------------|
| title     | `string` | warning's title  |
| message   | `string` | warning's message|

```json
{
    "type" : "warning",
    "data" : {
        "title" : "Note:",
        "message" : "Avoid using this method just for lulz. It can be very dangerous opposite your daily fun stuff."
    }
}
```