Markdown Editor Laravel Package

Getting Started

Minimal Setup

1. Installation Add the package via Composer:

   composer require beeflow/markdown-editor:dev-master
   

   Ensure your composer.json includes the custom repository:

   "repositories": [
       {
           "type": "git",
           "url": "https://github.com/beeflow/markdown-editor.git"
       }
   ]
   

2. Bundle Registration In config/bundles.php, add:

   Beeflow\MarkdownEditorBundle\BeeflowMarkdownEditorBundle::class => ['all' => true],
   

3. Basic Usage Include the editor in a Twig template:

   {{ render(controller('BeeflowMarkdownEditorBundle:Default:index')) }}
   

   Or embed via JavaScript:

   const editor = new MarkdownEditor('#editor-container');
   

4. First Use Case Render a simple markdown editor in a Symfony form:

   <div id="markdown-editor"></div>
   <textarea id="markdown-input" style="display: none;"></textarea>
   

   Initialize with:

   document.addEventListener('DOMContentLoaded', () => {
       new MarkdownEditor('#markdown-editor', '#markdown-input');
   });
   

Implementation Patterns

Workflows

1. Form Integration Use with Symfony forms by binding the editor to a hidden field:

   {{ form_widget(form.markdownField) }}
   <div id="editor-{{ form.markdownField.vars.id }}"></div>
   

   Initialize via JS:

   document.querySelectorAll('[id^="editor-"]').forEach(el => {
       new MarkdownEditor(el, `#${el.id.replace('editor-', '')}`);
   });
   

2. Live Preview Fetch rendered markdown via AJAX:

   editor.on('input', (content) => {
       fetch('/api/render-markdown', {
           method: 'POST',
           body: JSON.stringify({ content }),
           headers: { 'Content-Type': 'application/json' }
       })
       .then(res => res.text())
       .then(html => document.getElementById('preview').innerHTML = html);
   });
   

3. Custom Toolbar Extend the toolbar via configuration (if supported):

   new MarkdownEditor('#editor', '#input', {
       toolbar: ['bold', 'italic', 'heading', 'custom-button']
   });
   

Integration Tips

• Symfony Controller Handle markdown rendering in a controller:

  use Symfony\Component\HttpFoundation\JsonResponse;
  use Symfony\Component\HttpFoundation\Request;
  
  public function renderMarkdown(Request $request)
  {
      $content = $request->request->get('content');
      $rendered = \Parsedown::instance()->text($content);
      return new JsonResponse(['html' => $rendered]);
  }
  

• Asset Management Ensure assets are published:

  php bin/console assets:install
  

• Twig Extensions Create a custom Twig extension for reusable editor inclusion:

  // src/Twig/MarkdownEditorExtension.php
  class MarkdownEditorExtension extends \Twig\Extension\AbstractExtension
  {
      public function getFunctions()
      {
          return [
              new \Twig\TwigFunction('markdown_editor', [$this, 'renderEditor']),
          ];
      }
  
      public function renderEditor($id, $inputId = null)
      {
          return $this->render('BeeflowMarkdownEditorBundle:Default:editor.html.twig', [
              'editorId' => $id,
              'inputId' => $inputId ?: "input-{$id}",
          ]);
      }
  }
  

  Usage in Twig:

  {{ markdown_editor('my-editor', 'my-input') }}
  

Gotchas and Tips

Pitfalls

1. Asset Loading

   • Issue: Editor assets (CSS/JS) may fail to load if not published.
   • Fix: Run php bin/console assets:install and clear cache:

     php bin/console cache:clear
     

2. JavaScript Conflicts

   • Issue: Global MarkdownEditor may conflict with other libraries.
   • Fix: Use a namespace or IIFE:

     (function() {
         window.BeeflowMarkdownEditor = MarkdownEditor;
     })();
     

3. Missing Dependencies

   • Issue: The package may rely on parsedown or similar libraries.
   • Fix: Install via Composer:

     composer require erusev/parsedown
     

4. Symfony 6+ Compatibility

   • Issue: The bundle may not support newer Symfony versions.
   • Fix: Check composer.json for Symfony constraints or fork the repo to update.

Debugging

• Console Errors Inspect browser console for missing files or JS errors. Common fixes:

  yarn install  # If assets are missing
  npm install   # Alternative
  

• Network Tab Verify assets are loaded from /build/ or /web/ (not blocked by CSP).

Tips

1. Custom Styling Override styles via CSS:

   .markdown-editor {
       --editor-bg: #f5f5f5;
       --preview-bg: white;
   }
   

2. Server-Side Rendering Use Parsedown in controllers for consistent rendering:

   $markdown = new \Parsedown();
   $html = $markdown->text($request->get('content'));
   

3. Extension Points

   • Toolbar Customization: If the editor supports it, extend via config:

     new MarkdownEditor('#editor', null, {
         toolbar: [
             ['bold', 'italic'],
             ['heading', ['h1', 'h2']],
             ['link', 'image']
         ]
     });
     

4. Performance

   • Lazy-load the editor if not immediately needed:

     if (document.getElementById('editor')) {
         new MarkdownEditor('#editor');
     }
     

5. Fallback for No-JS Provide a plain textarea fallback:

   <textarea name="markdown" id="markdown-fallback">{{ form.markdownField|default('') }}</textarea>