editorjs-inline-formatter/README.md

Inline formatter tool for editorjs

# editorjs-inline-formatter

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

## Getting started

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

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

## 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-formatter'

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.ts)).


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