This is a small codelab that introduces you to editorjs - an open source block style editor and shows how to integrate it in a react app.

Introduction to <a href="https://editorjs.io/">editorjs</a>

If you have ever done front end development, you would know how difficult building and customizing text editor to your needs can be. Text Editors are not a new thing. But as applications are getting more integrated and rich with content, editors are evolving too. 

While searching for a editor for my own project, I ran into Editor.js. It is an open source project and is quite popular on <a href="https://github.com/codex-team/editor.js">Github</a> (&gt;10K stars). This editor is quite different compared to your most modern editors. Here are some of the highlights of editor.js.

So I wanted to give it a try. In this tutorial, I plan to use EditorJS in a react application.

<a href="https://reactjs.org/">ReactJS</a> needs not introduction. It is one of the most widely used front-end development framework. React community has developed thousands of open source projects around react. But integrating EditorJS into React app is not straight forward as editorjs is not a react component. Also, if you are using Server Side Rendering or static generation, you may run into issues. This tutorial will help you do this setup correctly.

The final output page will look like this -&nbsp;

As mentioned earlier, we will use react to render our editor. Open your terminal and run below commands&nbsp;

To ensure everything is setup correctly, lets start our application&nbsp;

If you now visit&nbsp;<a href="http://localhost:3000/">http://localhost:3000/</a>, you can see the default react application page&nbsp;

For this exercise, I plan to use <a href="http://material-ui.com/">Material UI</a> React components library. It offers a wide variety of components that simplifies taking inputs and styling components.&nbsp;

Let's first add Editor.js as an dependency into our app.&nbsp;

Editor.js is is not a react component. So we can create a wrapper component that takes care of managing the life cycle of editor.js instance in the component.

Let's create a react component to that instantiates an editor inside our page.&nbsp;

1. The most important part of the above code is -

EditorJS gets initialized once our component is rendered. So we use the <code class="inline-code">useEffects</code> and <code class="inline-code">useRef</code> React Hooks to initialize this editor just once and destroy it once our component is destroyed.

2. We need a create a placeholder where editor will get initialized. So we create a <code class="inline-code">div</code> with a unique ID -&nbsp;<code class="inline-code">EDITTOR_HOLDER_ID</code>

3. The editor is initialized by a call to&nbsp;<code class="inline-code">initEditor()</code>. We need to share the reference to the <code class="inline-code">div</code> element i.e.&nbsp;<code class="inline-code">EDITTOR_HOLDER_ID</code> under which the editor instance is attached.&nbsp;

The&nbsp;<code class="inline-code">data</code>&nbsp;configuration is to provide some initial data in the editor.

The <code class="inline-code">onReady</code> function is a callback provided by editorjs to notify when editor is completely initialized.&nbsp;<br><br>The <code class="inline-code">onChange</code> function is a callback provided by editorjs to notify whenever the content in the editor changes.

The <code class="inline-code">tools</code> configuration is where you can provide list of plugins you want to support in the editor.

In previous step, we just created a component wrapping the editorjs instance. Now, lets change our <code class="inline-code">App.js</code> file to show a simple page with Editor and add some basic styling for the page.

Now, restart your web server ('<code class="inline-code">yarn start</code>') and your current page at <a href="http://localhost:3000">http://localhost:3000</a> should look like -

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