Filament Latex Laravel Package

Getting Started

Minimal Setup

1. Installation

   composer require thethunderturner/filament-latex
   

   Publish the package assets (if needed):

   php artisan vendor:publish --provider="TheThunderTurner\FilamentLatex\FilamentLatexServiceProvider" --tag="filament-latex-assets"
   

2. First Use Case Register the editor in a Filament resource or panel:

   use TheThunderTurner\FilamentLatex\Widgets\LatexEditor;
   
   public static function getWidgets(): array
   {
       return [
           LatexEditor::make('latex_content')
               ->label('LaTeX Formula')
               ->required()
               ->columnSpanFull(),
       ];
   }
   

3. Where to Look First

   • Documentation: Check the package’s README.md for basic configuration and examples.
   • Source Code: Browse src/Widgets/LatexEditor.php for customization options.
   • Blade Views: Inspect resources/views/vendor/filament-latex for default UI tweaks.

Implementation Patterns

Core Workflows

1. Embedding in Resources Use the widget in Filament resources for inline LaTeX editing:

   public static function form(Form $form): Form
   {
       return $form
           ->schema([
               LatexEditor::make('equation')
                   ->helperText('Enter LaTeX equations here (e.g., \frac{a}{b})')
                   ->livewireOptions(['minHeight' => 400]),
           ]);
   }
   

2. Panel-Level Integration Add the editor globally to a Filament panel:

   FilamentLatex::make()
       ->registerEditor('global_editor')
       ->defaultConfig(['minHeight' => 300]);
   

3. Livewire + Filament Sync Sync the editor with a Livewire component:

   public function mount()
   {
       $this->form->fill([
           'latex_field' => $this->record->latex_content ?? '',
       ]);
   }
   
   public function save()
   {
       $this->validate();
       $this->form->save();
       // Render LaTeX output via a separate component
   }
   

Integration Tips

• MathJax/KaTeX: Ensure your Filament app includes a LaTeX renderer (e.g., laravel-mathjax or katex).
• Storage: Store LaTeX strings in a text or longtext MySQL column.
• Validation: Add rules to validate LaTeX syntax:

  ->rules(['latex_field' => 'required|string|max:10000'])
  

Gotchas and Tips

Common Pitfalls

1. Asset Loading

   • Issue: Editor UI fails to load.
   • Fix: Run npm run dev or npm run build if customizing assets. Ensure filament-latex JS/CSS is included in your Filament panel:

     FilamentLatex::make()->includeAssets();
     

2. Livewire Conflicts

   • Issue: Editor doesn’t update in real-time.
   • Fix: Explicitly bind the Livewire model:

     LatexEditor::make('latex_field')
         ->wireModel('latexContent')
         ->dehydrateStateUsing(fn ($state) => $state)
         ->hydrateStateUsing(fn ($state) => $state),
     

3. LaTeX Rendering

   • Issue: Equations don’t render on the frontend.
   • Fix: Use a package like spatie/laravel-mathjax to render LaTeX in Blade views:

     {!! mathjax($record->latex_content) !!}
     

Debugging Tips

• Logs: Enable debug mode in config/filament-latex.php:

  'debug' => env('APP_DEBUG', false),
  

• Network Tab: Check for 404s on /vendor/filament-latex/js/editor.js or similar.
• Console Errors: Look for Uncaught ReferenceError or MathJax initialization issues.

Extension Points

1. Custom Toolbar Override the toolbar buttons via config:

   FilamentLatex::make()->toolbarButtons([
       'bold', 'italic', 'frac', 'sqrt', 'custom_button' => [
           'label' => 'My Button',
           'action' => 'insertText(\\text{custom})',
       ],
   ]);
   

2. Syntax Highlighting Extend the editor’s CodeMirror instance:

   // In a custom JS file
   document.addEventListener('filament-latex-ready', (e) => {
       e.detail.editor.addMode('latex', { ... });
   });
   

3. Export/Import Add methods to serialize/deserialize LaTeX:

   public function getLatexOutputAttribute()
   {
       return $this->latex_content ? mathjax($this->latex_content, 'svg') : null;
   }