# editorjs-inline-tool

> Create an inline tool for editorjs with text formatting tags easily.

Latest version **0.4.0** (published 2020-09-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install editorjs-inline-tool
pnpm add editorjs-inline-tool
yarn add editorjs-inline-tool
bun add editorjs-inline-tool
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.0 |
| Published | 2020-09-01 |
| First published | 2019-11-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 80.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 18 |
| Author | Stefan Natter |
| Maintainers | natterstefan |
| Keywords | editor, editor.js, editorjs, @editorjs, editorjs-tool, editor-js-tool, editorjs-inlinetool, editor-js-inline-tool, wysiwyg |

## Links

- npm: https://www.npmjs.com/package/editorjs-inline-tool
- Repository: https://github.com/natterstefan/editorjs-inline-tool
- Homepage: https://github.com/natterstefan/editorjs-inline-tool#readme
- Issues: https://github.com/natterstefan/editorjs-inline-tool/issues
- npm.io page: https://npm.io/package/editorjs-inline-tool

## Alternatives

- [ext-list](https://npm.io/package/ext-list.md) — 6.3M weekly downloads
- [@lexical/selection](https://npm.io/package/@lexical/selection.md) — 3.8M weekly downloads
- [@lexical/text](https://npm.io/package/@lexical/text.md) — 3.6M weekly downloads
- [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) — 3.0M weekly downloads
- [@tiptap/extension-mention](https://npm.io/package/@tiptap/extension-mention.md) — 3.0M weekly downloads

## Recent versions

- 0.4.0 (latest) — 2020-09-01
- 0.3.0 — 2020-03-22
- 0.2.0 — 2019-11-29
- 0.1.1 — 2019-11-26
- 0.1.0 — 2019-11-26

## README

# editorjs-inline-tool

[![npm version](https://badge.fury.io/js/editorjs-inline-tool.svg)](https://badge.fury.io/js/editorjs-inline-tool)
[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)

Create an inline tool for ([https://editorjs.io/][1]) with [text formatting tags](https://www.w3schools.com/html/html_formatting.asp)
(eg. `bold`, `strong`, `em`, `u`, ...).

## Getting started

```sh
npm i editorjs-inline-tool --save

# or
yarn add editorjs-inline-tool
```

## PeerDependencies

You have to install the required peerDependencies, which are listed by the
following command:

```sh
npm info "editorjs-inline-tool" peerDependencies
```

If using npm 5+, use this shortcut:

```sh
npx install-peerdeps --dev editorjs-inline-tool

# or
yarn add editorjs-inline-tool -D --peer
```

## Usage

This is an example where `GenericInlineTool` is used in a React app (using
[@natterstefan/react-editor-js](https://www.npmjs.com/package/@natterstefan/react-editor-js)).
But this should work for any other framework as well.

```jsx
// index.js
import EditorJs from '@natterstefan/react-editor-js'
import Header from '@editorjs/header'
import Paragraph from '@editorjs/paragraph'

import createGenericInlineTool, {
  ItalicInlineTool,
  UnderlineInlineTool,
} from 'editorjs-inline-tool'

const TOOLS = {
  header: Header,
  paragraph: {
    class: Paragraph,
    inlineToolbar: true,
  },
  // add custom tags or overwrite default tools of editorjs by using the same
  // name (eg. `bold` or `italic`)
  bold: {
    class: createGenericInlineTool({
      sanitize: {
        strong: {},
      },
      shortcut: 'CMD+B',
      tagName: 'STRONG',
      toolboxIcon:
        '<svg class="icon icon--bold" width="12px" height="14px"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#bold"></use></svg>',
    }),
  },
  // or use a pre-defined tool instead
  italic: ItalicInlineTool,
  underline: UnderlineInlineTool,
}

const App = () => {
  return <EditorJs tools={TOOLS} data={data} />
}
```

### Configuration

`createGenericInlineTool` returns an `InlineTool` for `EditorJS`. The following
options are available:

| Name        | Required |   Type   | Default     | Description                                                                                                                                        |
| :---------- | :------: | :------: | :---------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| sanitize    | `false`  | `object` | `undefined` | Object that defines rules for [automatic sanitizing](https://editorjs.io/tools-api#sanitize).                                                      |
| shortcut    | `false`  | `string` | `undefined` | [Shortcut](https://github.com/codex-team/codex.shortcuts) to apply [Tool's render and inserting behaviour](https://editorjs.io/tools-api#shortcut) |
| tagName     |  `true`  | `string` | `undefined` | text [formatting tag](https://www.w3schools.com/html/html_formatting.asp) (eg. `bold`)                                                             |
| toolboxIcon |  `true`  | `string` | `undefined` | Icon for the tools [inline toolbar](https://editorjs.io/inline-tools-api-1#render)                                                                 |

Additionally, there are pre-defined inline tools available: `ItalicInlineTool`,
`StrongInlineTool` and `UnderlineInlineTool` (they can be found
[here](src/inline-tools.tsx)).

## Licence

[MIT](LICENCE)

This project is not affiliated, associated, authorized, endorsed by or in any
way officially connected to EditorJS ([editorjs.io](https://editorjs.io/)).

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
  <tr>
    <td align="center"><a href="http://twitter.com/natterstefan"><img src="https://avatars2.githubusercontent.com/u/1043668?v=4" width="100px;" alt="Stefan Natter"/><br /><sub><b>Stefan Natter</b></sub></a><br /><a href="https://github.com/natterstefan/editorjs-inline-tool/commits?author=natterstefan" title="Code">💻</a> <a href="https://github.com/natterstefan/editorjs-inline-tool/commits?author=natterstefan" title="Documentation">📖</a> <a href="#example-natterstefan" title="Examples">💡</a></td>
  </tr>
</table>

<!-- markdownlint-enable -->
<!-- prettier-ignore-end -->

<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

[1]: https://editorjs.io/

---
_Source: https://npm.io/package/editorjs-inline-tool · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._