Editor.js

Workspace in classic editors is made of a single contenteditable element, used to create different HTML markups. Editor.js workspace consists of separate Blocks: paragraphs, headings, images, lists, quotes, etc. Each of them is an independent contenteditable element (or more complex structure) provided by Plugin and united by Editor's Core.

Editor.js is fully integrated in Murph as form types.

Classic form

// src/Form/ExampleType.php
namespace App\Form\ExampleType;

use App\Core\Form\Type\EditorJsTextareaType;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;

class ExampleType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder->add(
            'myField',
            EditorJsTextareaType::class
        );

        // ...
    }

    // ...
}

Modified data should return stringified JSON array if empty:

public function getMyField(): string
{
    if (empty($this->myField)) {
        $this->myField = '[]';
    }

    return $this->myField;
}

Page form

// src/Entity/Page/YourPage.php
namespace App\Entity\Page;

use App\Core\Entity\Site\Page\Block;
use App\Core\Form\Site\Page\EditorJsTextareaBlockType;

#[@ORM\Entity]
class YourPage extends Page
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder->add(
            'myBlock',
            EditorJsTextareaBlockType::class,
            [
                'label' => 'My block',
                'row_attr' => [
                ],
                'options' => [
                    // options given to the sub form
                ],
            ]
        );

        // ...
    }

    public function setMyBlock(Block $block)
    {
        return $this->setBlock($block);
    }

    public function getMyBlock(): Block
    {
        return $this->getBlock('myBlock');
    }

    // ...
}

Rendering

Editor.js will generate a JSON which contains blocks.

Supported blocks:

• paragraph
• header
• quote
• delimiter
• warning
• list
• nestedList
• checkList
• table
• code
• raw
• image
• link

To render HTML, the basic way is: {{ value|editorjs_to_html }}
If you want to render specific blocks: {{ value|editorjs_to_html(['paragraph', 'header', ...])) }}

Block have default templates stored in vendor/murph/murph-core/src/core/Resources/views/editorjs.
They can be simply overridden in config/packages/app.yaml:

core:
    editor_js:
        blocks:
            paragraph: 'path/to/paragraph.html.twig'
            header: 'path/to/header.html.twig'