A fully customized ReactJS hook for EditorJS. Add it quickly to your apps and use your own React components to render it beautifully for each block.

Installation

// with npm
npm install use-editor-js

// with yarn
yarn add use-editor-js

Usage

import { useEditor } from 'use-editor-js'

const App = () => {
  useEditor({
    holder: 'editor'
  })

  return <div id='editor'/>
}

ReactDOM.render(<App />, document.querySelector('#app'));

API

| Name | Type | Default | Description | | ------------- | --------- | ------- | ----------------------------------------------------------------------------------------- | | holder | string | empty | Required. Id of Element that should contain the Editor. | | placeholder | string | empty | Text to be rendered if you want a custom placehodler. | | autoFocus | boolean | false | Option to focus the first block automatically after initialization. | | readOnly | boolean | false | Disable edition and display editor on read mode. | | data | object | null | To initialize the editor with saved data, pass it through the data property. | | tools | object | empty | Object with settings for each tool you want to use. See Tools section for more details. |

Tools

Available tools:

• List;
• Paragraph;
• Image.

Inline toolbar:

• Bold;
• Italic;
• Link;
• Superscript;
• Subscript.

Too add tools to the editor, you must inform it inside the tools property:

 useEditor({
    // other configurations...
    tools: {
      image: {
        config: {
          element: ImageComponent,
          initialValues: {
            url: ''
          },
          icon: ImageIcon
        }
      }
    }
  })

By now, only Image tool must receive an element and initialValues property, the other tools have an optional icon property.

Also, there is a onChange method that is passed to the element, with the following signature:

onChange(name: string, value: string): void

This is used to bind the internal plugin value with the React component. Again, the only exception is the Paragraph tool.

Tool configuration

| Name | Type | Default | Description | | --------------- | ---------- | -------------------- | ---------------------------------------------------------------------------------- | | element | React.FC | empty | Required, only Image tool. Component that will be rendered inside the block. | | initialValues | object | {} | The initial values when the block is created. | | icon | React.FC | Plugin default icon. | The custom icon to render inside the toolbar. |

Notes

The injected React components override EditorJS default behavior, which means that every logic found on its plugins will not work with this solution. You MUST handle everything inside your React components, otherwise, it will not work as expected.

Roadmap

• [X] List tool
• [X] Add Storybook
• [X] Superscript and subscript inline tool
• [ ] Fix ThemeProvider issue
• [ ] Custom data parser
• [ ] Heading tool
• [ ] Link tool
• [ ] Quote tool
• [ ] Delimiter tool
• [ ] Customized inline toolbox
• [ ] Customized block settings
• [ ] 100% test coverage

License

This project is licensed under the terms of the MIT license.