murph-doc/docs/utils/editors/editorjs.md

# 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.

![](/_static/img/editors/editorjs.png)

## Classic form

```php-inline
// 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:

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

    return $this->myField;
}
```

## Page form

```php-inline
// 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`:

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