Mdeditorbundle Laravel Package

Getting Started

Minimal Setup

1. Installation

   composer require bnine/mdeditorbundle
   php bin/console assets:install
   

   Verify assets are copied to public/bundles/bninemdeditor/.

2. Include JS in Base Layout Add this to your base.html.twig (or equivalent):

   <script src="{{ asset('bundles/bninemdeditor/bninemdeditor.js') }}"></script>
   

3. First Use Case: Basic Form Integration

   use Bnine\MdEditorBundle\Form\Type\MarkdownType;
   
   $builder->add('content', MarkdownType::class, [
       'label' => 'Markdown Content',
       'required' => false,
   ]);
   

   Render the form in Twig:

   {{ form_row(form.content) }}
   

Implementation Patterns

Common Workflows

1. Form Integration

   • Use MarkdownType for any text area needing Markdown editing.
   • Customize via options:

     $builder->add('description', MarkdownType::class, [
         'config' => ['spellChecker' => false], // Pass EasyMDE config
         'attr' => ['class' => 'custom-editor'], // Add custom classes
     ]);
     

2. Asset Management

   • Bundle includes easymde.min.css and easymde.min.js (v2.10.0).
   • Override assets by copying files to public/bundles/bninemdeditor/ and updating config/packages/bninemdeditor.yaml:

     bninemdeditor:
         assets:
             js: 'custom-path/easymde.min.js'
             css: 'custom-path/easymde.min.css'
     

3. Dynamic Initialization

   • Initialize editors programmatically via JS helper:

     // Initialize all editors on page
     document.addEventListener('DOMContentLoaded', function() {
         BnineMdEditor.init();
     });
     

   • Target specific editors:

     BnineMdEditor.init('#custom-editor-id');
     

4. Symfony UX Integration

   • Combine with Symfony UX Turbo for live updates:

     $builder->add('notes', MarkdownType::class, [
         'attr' => ['data-turbo-frame' => '_self'],
     ]);
     

Gotchas and Tips

Pitfalls

1. Asset Loading Order

   • Ensure bninemdeditor.js is loaded after jQuery (EasyMDE dependency).
   • Debug missing editors with:

     console.log(jQuery.fn.easymde); // Should return EasyMDE constructor
     

2. Configuration Merging

   • Custom config options in MarkdownType override defaults, not merge.
   • Example: Setting toolbar: false will disable all toolbars.

3. Twig Autoescape

   • Markdown content is escaped by default. Use |raw in Twig if rendering raw:

     {{ form.content.vars.data|raw }}
     

4. Symfony 7+ Compatibility

   • Tested with Symfony 7, but may require adjustments for older versions (e.g., assets:install behavior).

Debugging Tips

• Check for JS Errors: Open browser console to verify BnineMdEditor is available.
• Inspect Form Data: Use {{ dump(form.content.vars.data) }} to debug submitted Markdown.
• EasyMDE Console: Access EasyMDE instance via:

  const editor = document.querySelector('.editor').easymde;
  console.log(editor);
  

Extension Points

1. Custom EasyMDE Plugins

   • Extend bninemdeditor.js to include plugins:

     // In your custom JS file
     BnineMdEditor.extendConfig = function(config) {
         config.plugins = ['spellChecker', 'table'];
         return config;
     };
     

2. Override Form Theme

   • Extend the MarkdownType theme in config/packages/twig.yaml:

     twig:
         form_themes: ['@BnineMdEditor/form/markdown.html.twig']
     

   • Copy the template from vendor/bnine/mdeditorbundle/resources/views/form/markdown.html.twig.

3. Server-Side Processing

   • Use Markdown DTO (from Bnine\MdEditorBundle\Dto) for type safety:

     use Bnine\MdEditorBundle\Dto\Markdown;
     
     $builder->add('content', MarkdownType::class, [
         'data_class' => Markdown::class,
     ]);