useEditorJS

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

• List tool
• Add Storybook
• 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.