Skip to content

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

License

Notifications You must be signed in to change notification settings

natterstefan/editorjs-inline-tool

Repository files navigation

editorjs-inline-tool

npm version Commitizen friendly

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

Stefan Natter
Stefan Natter

💻 📖 💡

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