Ace Sonata Bundle Laravel Package

Getting Started

This is a Symfony bundle (not Laravel) that wires the Ace editor into Sonata Admin so you can render a real code editor inside admin forms instead of a plain textarea. Given the score (0.005) and 1 dependent, treat it as a reference implementation you'll likely need to fork or vendor rather than a drop-in dependency.

Minimal steps:

1. Install via Composer:

   composer require ns/ace-sonata-bundle
   

2. Register the bundle in config/bundles.php (Symfony Flex) or AppKernel.php:

   return [
       // ...
       Ns\AceSonataBundle\NsAceSonataBundle::class => ['all' => true],
   ];
   

3. Ensure Sonata Admin and its assets are installed and published (sonata:admin:setup, assets:install --symlink).
4. Look first at the bundle's Resources/views directory — that's where the Sonata template overrides live, and it tells you exactly which field type is being decorated.
5. First use case: add an Ace-backed field to a Sonata Admin class:

   protected function configureFormFields(FormMapper $form): void
   {
       $form
           ->add('body', null, ['label' => 'Template Body'])
           ->add('css', null, ['label' => 'CSS']);
   }
   

   If the bundle ships a custom form type (check Form/Type), swap null for that type and pass Ace options (mode, theme, height) via the attr array.

Implementation Patterns

• Form-type extension over template hacks. If the bundle exposes a dedicated form type, extend the underlying Sonata type and add the Ace JavaScript through block_name / attr rather than overriding templates. Template overrides are brittle across Sonata versions.
• Per-field Ace configuration. Pass mode/theme via form options so different fields (HTML, CSS, JS, YAML) get the correct syntax highlighting:

  ->add('html', null, [
      'attr' => ['data-ace-mode' => 'html', 'data-ace-theme' => 'monokai', 'rows' => 20],
  ])
  

  Then initialize Ace in a small JS file that reads those data attributes.
• Admin subclassing. Keep a reusable CodeEditorAdmin base class that applies the Ace field type to a configurable list of properties, then extend it for each entity — avoids copy-pasting FormMapper boilerplate.
• Twig block override. The common integration is to override SonataAdminBundle:Form:form_admin_fields.html.twig and conditionally render a <div id="ace-..."> when a data-ace attribute is present. This is where you attach ace.edit(...) and sync the editor value back to the hidden textarea on submit.
• Sync on submit. Always wire form.addEventListener('submit', () => textarea.value = editor.getValue()); otherwise the value silently reverts.
• Asset inclusion. Use Sonata's sonata_admin assets config or a Twig block javascripts override to pull ace.js plus the required mode-*.js / theme-*.js files. Prefer loading from a CDN or a locally installed ace-builds package over the bundle's bundled copy (which will be stale).
• Workflow integration. Combine with a preview pane by rendering the saved value in a read-only Ace instance on the show action, giving editors a consistent look between edit and view.

Gotchas and Tips

• Abandonware risk. One star, no dependents, and an integration surface (Sonata + Ace) that has moved on significantly. Expect PHP 8 / Symfony 5+ incompatibilities. Plan to fork into src/ or use repositories + vcs to pin a patched fork.
• No Laravel support. Despite the prompt's framing, this is Symfony-only. Do not attempt composer require in a Laravel app — the service provider does not exist. Use laravel-ace-style packages or a plain <script> include instead.
• Ace asset versions. Ace splits mode-* and theme-* into separate files; forgetting to load the mode results in a plain-text editor with no highlighting and no error message. Load ace.js, mode-html.js, theme-monokai.js, ext-language_tools.js explicitly.
• Hidden textarea sync. Ace hides the original <textarea> and edits a sibling <div>. If you only initialize on DOMContentLoaded, dynamically added Sonata collection rows (sonata_collection) won't get editors — hook into sonata.admin.event / collection.add callbacks or use MutationObserver.
• CSP and inline scripts. Sonata's admin layout may block inline ace.edit() calls. Move initialization to an external JS file or add a nonce; otherwise the editor silently fails to render.
• Debugging tip. console.log(typeof ace) — if undefined, the asset didn't load; if defined but no editor appears, the container ID selector is wrong (Sonata prefixes field IDs, e.g. sonata_my_entity_body).
• Configuration quirks. The bundle likely reads ns_ace_sonata: config keys for default mode/theme; check DependencyInjection/Configuration.php to know the exact keys before guessing.
• Extension points. Override the bundle's Twig templates in templates/bundles/NsAceSonataBundle/ (Symfony's bundle override path) rather than editing vendor/; this survives composer update — assuming the package is even maintained enough to be updated.
• Migration path. If (when) the bundle breaks, the whole integration is ~50 lines: a form type, a Twig block, and ace.edit(). Budget for inlining it rather than fighting upstream.