Aceeditor Bundle Laravel Package

Getting Started

Minimal Setup

1. Install via Composer

   composer require norzechowicz/aceeditor-bundle
   

2. Enable the Bundle Add to config/bundles.php:

   Norzechowicz\AceEditorBundle\NorzechowiczAceEditorBundle::class => ['all' => true],
   

3. Configure in config/packages/ace_editor.yaml

   norzechowicz_ace_editor:
       theme: 'monokai'
       mode: 'php' # or 'javascript', 'html', etc.
   

4. Use in a Form Type

   use Norzechowicz\AceEditorBundle\Form\Type\AceEditorType;
   
   $builder->add('code', AceEditorType::class, [
       'theme' => 'monokai',
       'mode' => 'php',
       'options' => ['attr' => ['class' => 'my-custom-class']],
   ]);
   

First Use Case: Basic Code Editor

• Replace a standard textarea with an Ace Editor for syntax-highlighted code input.
• Ideal for admin panels, CMS content, or developer tools where code editing is needed.

Implementation Patterns

1. Dynamic Configuration

• Override default settings per field:

  $builder->add('javascript', AceEditorType::class, [
      'theme' => 'github',
      'mode' => 'javascript',
      'height' => 400,
      'width' => 'auto',
  ]);
  

• Use options to pass Ace Editor configuration:

  'options' => [
      'fontSize' => '14px',
      'showLineNumbers' => true,
      'tabSize' => 4,
  ]
  

2. Integration with Form Events

• Validate or transform input using Symfony’s form events:

  $builder->addEventListener(FormEvents::PRE_SET_DATA, function (FormEvent $event) {
      $data = $event->getData();
      if ($data && !empty($data->getCode())) {
          $event->getForm()->add('code', AceEditorType::class, [
              'value' => $data->getCode(),
          ]);
      }
  });
  

3. Twig Integration

• Access the rendered editor in Twig:

  {{ form_widget(form.code) }}
  

• Customize with CSS:

  .ace_editor {
      border: 1px solid #ddd;
      border-radius: 4px;
  }
  

4. Advanced Features

• Read-only mode:

  'read_only' => true,
  

• Custom themes/modes: Load via assets or CDN:

  norzechowicz_ace_editor:
      assets:
          themes: ['github', 'monokai']
          modes: ['php', 'javascript']
  

Gotchas and Tips

Pitfalls

1. Asset Loading Issues

   • Ensure ace.js and theme/mode files are accessible.
   • Debug with browser dev tools (404 errors for missing JS/CSS).
   • Fix: Verify assets config in ace_editor.yaml or manually include assets in your base template.

2. Form Theme Conflicts

   • If using Symfony UX Turbo or Stimulus, Ace Editor may not render properly.
   • Fix: Wrap the editor in a data-turbo-frame or use {{ form_row(form.code) }} instead of {{ form_widget(form.code) }}.

3. Initial Value Not Persisting

   • If value is set but ignored, check for:
     • Missing PRE_SET_DATA event handling.
     • Form type inheritance overriding the field.
   • Fix: Debug with dump($form->getData()) in a PRE_SUBMIT event.

Debugging Tips

• Check Console for Errors Ace Editor logs errors to the browser console. Look for:

  Uncaught TypeError: ace.edit is not a function
  

  → Likely due to missing ace.js or incorrect initialization order.

• Inspect Rendered HTML Ensure the editor container has the correct data-ace-editor attributes:

  <textarea data-ace-editor="true" data-ace-theme="monokai" data-ace-mode="php"></textarea>
  

Extension Points

1. Custom Themes/Modes Add via assets config or manually include in your layout:

   <script src="{{ asset('vendor/ace-builds/src-min-noconflict/ext-language_tools.js') }}"></script>
   

2. Override JavaScript Initialization Extend the bundle’s JS via a custom asset:

   // public/js/ace_editor_extensions.js
   document.addEventListener('DOMContentLoaded', function() {
       ace.config.set('basePath', '/vendor/ace-builds/src-min-noconflict/');
       // Custom logic (e.g., auto-indent on save)
   });
   

   Include it after the bundle’s JS in your base template.

3. Server-Side Validation Validate code syntax using a library like php-parser:

   $builder->add('code', AceEditorType::class)
       ->addModelTransformer(new CallbackTransformer(
           function ($code) { return $code; },
           function ($code) {
               // Validate here (e.g., check for syntax errors)
               return $code;
           }
       ));