Editorjs Laravel Package

Getting Started

Minimal Setup

1. Installation

   composer require aequation/editorjs
   

   Ensure your project uses Symfony 5.4+ (or Laravel with Symfony components).

2. Bundle Registration Add to config/bundles.php:

   Aequation\EditorJsBundle\AequationEditorJsBundle::class => ['all' => true],
   

3. Basic Usage in Twig

   {{ aequation_editorjs({
       'config': {
           'tools': {
               'header': Header,
               'paragraph': Paragraph,
               'list': List,
           }
       }
   }) }}
   

4. First Integration

   • Use the EditorJsType form field for Symfony forms:

     use Aequation\EditorJsBundle\Form\Type\EditorJsType;
     
     $builder->add('content', EditorJsType::class, [
         'config' => [
             'tools' => ['header', 'list', 'embed'],
         ],
     ]);
     

Implementation Patterns

Workflow: EditorJs in Forms

1. Form Submission EditorJs data is submitted as JSON. Decode it in your controller:

   $rawData = $request->request->get('content');
   $data = json_decode($rawData, true);
   

2. Saving to Database Store the raw JSON or process it into a structured format:

   $entity->setContent(json_encode($data));
   

3. Rendering Output Use Twig to render the saved content:

   {{ aequation_editorjs_render(content) }}
   

Integration with Laravel (Symfony Components)

• Service Provider Setup Register the bundle in AppServiceProvider:

  public function register()
  {
      $this->app->register(Aequation\EditorJsBundle\AequationEditorJsBundle::class);
  }
  

• Form Builder Integration Use EditorJsType in Laravel Collective forms:

  use Aequation\EditorJsBundle\Form\Type\EditorJsType;
  
  $form->add('content', EditorJsType::class, [
      'config' => [
          'tools' => ['paragraph', 'image', 'delimiter'],
      ],
  ]);
  

Custom Tools

Extend with custom tools by overriding the default config:

{{ aequation_editorjs({
    'config': {
        'tools': {
            'customTool': {
                'class': 'CustomTool',
                'config': { /* custom config */ }
            }
        }
    }
}) }}

Gotchas and Tips

Pitfalls

1. CSRF Token Mismatch Ensure your form includes {{ form_rest() }} or manually add CSRF token:

   <input type="hidden" name="_token" value="{{ csrf_token() }}">
   

2. JSON Validation EditorJs data must be valid JSON. Sanitize input:

   $data = json_decode($request->get('content'), true);
   if (json_last_error() !== JSON_ERROR_NONE) {
       throw new \RuntimeException('Invalid EditorJs data');
   }
   

3. Tool Dependencies Some tools (e.g., image, embed) require additional libraries (e.g., editorjs-image, editorjs-embed). Install via npm:

   npm install @editorjs/image @editorjs/embed
   

Debugging

• Check Browser Console EditorJs errors often appear in the browser console. Look for 404 errors on tool scripts.

• Log Raw Data Debug submitted JSON:

  \Log::debug('EditorJs Data:', ['data' => $rawData]);
  

Configuration Quirks

1. Tool Initialization Order Tools must be loaded in the correct order. Use onReady callback:

   {{ aequation_editorjs({
       'config': {
           'onReady': function() {
               console.log('Editor ready!');
           }
       }
   }) }}
   

2. Asset Paths Ensure assets (CSS/JS) are published:

   php bin/console assets:install
   

Extension Points

1. Custom Renderer Override the Twig renderer in config/packages/aequation_editorjs.yaml:

   aequation_editorjs:
       renderer: 'App\Twig\CustomEditorJsRenderer'
   

2. Event Listeners Subscribe to editorjs.init and editorjs.save events via JavaScript:

   document.addEventListener('editorjs.init', (e) => {
       console.log('Editor initialized', e.detail);
   });