How to Block Editor for Mecha

[taufik-nurrohman]

This Editor.js thing just became popular thanks to the block editor feature introduced by WordPress. Many other content management systems are starting to implement it.

The output of this editor is a JSON, it even has some adapter/sanitizer for PHP so we are free to convert that JSON data into any HTML markup as we like.

Assume that Editor.js will set the page content value every time the editor form is submitted:

const source = document.querySelector('textarea[name="page[content]"]');
const view = document.querySelector('#editor-view');

const editor = new EditorJS({
    data: JSON.parse(source.value || '{}'),
    holderId: view.id,
    tools: { … }
});

source.form.addEventListener('submit', e => {
    editor.save().then(data => {
        source.value = JSON.stringify(data);
    });
}, false);

So the page content will contain a JSON data like this:

---
title: Page Title
description: Page description.
...

{
  "time": 1633931047975,
  "blocks": [
    {
      "id": "xlhZc8cjEj",
      "type": "header",
      "data": {
        "text": "Editor.js",
        "level": 3
      }
    },
    {
      "id": "2WI-gEue2D",
      "type": "paragraph",
      "data": {
        "text": "Hey. Meet the new Editor. On this page you can see it in action — try to edit this text."
      }
    }
  ],
  "version": "2.22.2"
}

We can utilize page type property to filter the Editor.js content parsing from others content types:

Hook::set('page.content', function($content) {
    if ('Blocks' === $this->type) {
        $e = new EditorJS\EditorJS($content, [ … ]);
        $parser = new CodexToHtml([ … ]);
        return $parser->render($e->getBlocks());
    }
    return $content;
});

Then, in the page header, just add a type property with value Blocks:

---
title: Page Title
description: Page description.
type: Blocks
...