editorjs-inline-tool

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

Stefan Natter 💻 📖 💡

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

Changelog

0.4.0 (2020-09-01)

Features

• tsc generate proper declaration (typing updated) (#4) (1e79f7d)