editorjs-inline-tool

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

Getting started

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:

npm info "editorjs-inline-tool" peerDependencies

If using npm 5+, use this shortcut:

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.

// 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. | | 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):

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