Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/natterstefan/editorjs-inline-tool

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

editorjs editorjs-component editorjs-inline-tool editorjs-inlinetool

Last synced: 9 days ago
JSON representation

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

Awesome Lists containing this project

README

        

# editorjs-inline-tool

[![npm version](https://badge.fury.io/js/editorjs-inline-tool.svg)](https://badge.fury.io/js/editorjs-inline-tool)
[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)

Create an inline tool for ([https://editorjs.io/][1]) with [text formatting tags](https://www.w3schools.com/html/html_formatting.asp)
(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](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-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
}
```

### 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.tsx)).

## Licence

[MIT](LICENCE)

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

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):


Stefan Natter
Stefan Natter

💻 📖 💡

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

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