editorjs-inline-tool


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-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).
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:
'',
}),
},
// or use a pre-defined tool instead
italic: ItalicInlineTool,
underline: UnderlineInlineTool,
}

const App = () => {
return
}
`

$3

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. |
| shortcut | false | string | undefined | Shortcut to apply Tool's render and inserting behaviour |
| tagName | true | string | undefined | text formatting tag (eg. bold) |
| toolboxIcon | true | string | undefined | Icon for the tools inline toolbar |

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

Licence

MIT

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

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Stefan Natter 💻 📖 💡

This project follows the all-contributors specification. Contributions of any kind welcome!

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