In this codelab, we walk you through to create a new custom block tool that shows nice timeline in the editorjs. 

This is an advanced tutorial on how you can write a sample plugin in editorjs using react.&nbsp;

Editorjs is a modern block style and open source editor that you can embed in your web application. The definition of a block can be extended by simple javascript plugins (Editorjs refers to them as tools).

However, editorjs is developed with vanilla javascript and writing tools that way can be a little time consuming. On the other hand, react has plenty of ready to use components that are optimized for all sorts of use cases. That is why, I explored using React to speed up editorjs tools development and this tutorial is focussed on that.&nbsp;

We will create a new custom block in editorjs. It will show an option to create a timeline block when you open the toolbox

Once you click on it, you will be able to create a timeline

Then you can edit time and description and add more events. 

Final output will looks something like this -

In this walkthrough, we will be extending for the code that we developed in previous tutorial.

To setup the code and install dependencies use below instructions -&nbsp;

For this tutorial, we will be using the Timeline component from the Material UI React components. This component and some icons are is in a separate package. 

There are 2 types of tools in editorjs.&nbsp;

In this walkthrough, we will focus on block tool.&nbsp;

While there are quite a few operations, the most important/commonly used ones for writing a block tool are -&nbsp;

1.&nbsp;<code class="inline-code">toolbox</code>

This function is expected to return the name and icon for your tool.

2.&nbsp;<code class="inline-code">isReadOnlySupported</code>

Editorjs recently added support for readonly mode. In this mode, users can only view the content. Your tool should tell if it supports read only mode.

3.&nbsp;<code class="inline-code">constructor</code>

When editorJS decides to instantiate an instance, it calls the constructor.&nbsp;

data field provides the data for your block.

config field provides config that you provided while attaching this tool with the editor.

api field exposes a few API from editor

readOnly field tells whether you should render data in readOnly mode.

4.&nbsp;<code class="inline-code">render</code>

This function is expected to return a DOM element for the block created by this tool.&nbsp;

5.&nbsp;<code class="inline-code">save</code>

This function is expected to return the clean JSON data that your tool generated. Editorjs will take is and hand it over to your application for persistence.

More information on these things is available in official docs -

Lets create a <code class="inline-code">tool.js </code>file under <code class="inline-code">/src/tools/timeline</code> directory. The content are -

The important parts of above code are&nbsp;

We retrieve the important piece of information like - data, config and readOnly from the input parameter. Additionally,&nbsp;

The render function is expected take the data and showcase UI for the block.&nbsp;

Since we decided to use react, here we will use <code class="inline-code">ReactDOM.render</code> to embed our react component -&nbsp;<code class="inline-code">EventTimeline</code>. The entire ReactDOM is embedded under our&nbsp;<code class="inline-code">rootNode</code>.&nbsp;

<code class="inline-code">onDataChange</code>&nbsp;When data changes inside our react component, we need to pass that data to the editorjs tool. The callback does exactly that.

We also pass the <code class="inline-code">data</code> and the <code class="inline-code">readOnly</code> flags to our React component to render UI correctly.

We simply return the data that we have stored to the editor.

Now lets write our simple React component that needs to&nbsp;

Lets create a file -&nbsp;<code class="inline-code">eventTimeline.js</code>&nbsp;with below contents -&nbsp;

1. Defining component state and propagating state changes

We will initialize the state with data passed in props or with default data. The&nbsp;<code class="inline-code">updateTimelineData</code> is responsible for setting state of component and then propagating the updates through the <code class="inline-code">onDataChange</code> callback.

2. Rendering UI and handling readOnly mode

The code for the component is quite straightforward if you understand React. It adds timeline events using material UI <code class="inline-code">Timeline</code> components.&nbsp;

We use contentEditable to allow editing time and description of each event and whenever content is changed, we trigger a state update and propagate content change back to editor.

Once we create a tool, we need to initialize editor and pass our tool in list of tools that it should show.

So in our&nbsp;<code class="inline-code">Editor</code> react component, we pass this configuration -&nbsp;

Start our server and check http://localhost:3000

Now, when we open the toolbox in the editor, we can see timeline as an option for component&nbsp;

Once we click on it, we will be able to create a timeline

With support for custom blocks, you can make the content very rich and engaging. Using React speeds up the development of these blocks.

Thank you for checking out this tutorial. If you are using EditorJS in your application, consider supporting them&nbsp;

For more learning, you can look into below resources