Emojisbundle Laravel Package

Getting Started

Minimal Setup

1. Installation Add the package via Composer:

   composer require atm/emojisbundle
   

   Publish the assets (if needed):

   php artisan vendor:publish --provider="Atm\EmojisBundle\EmojisBundleServiceProvider" --tag=public
   

2. Basic Usage Include the JS/CSS in your layout (check resources/views/layouts/app.blade.php or similar):

   <link href="{{ asset('vendor/emojis/css/emojis.css') }}" rel="stylesheet">
   <script src="{{ asset('vendor/emojis/js/jquery.emojis.js') }}"></script>
   

3. First Use Case Convert a <textarea> into an emoji picker:

   <textarea id="comment" name="comment"></textarea>
   

   Initialize with jQuery:

   $(document).ready(function() {
       $('#comment').emojis();
   });
   

Implementation Patterns

Common Workflows

1. Dynamic Initialization Use event delegation for AJAX-loaded forms:

   $(document).on('emojis:init', 'textarea.emoji-enabled', function() {
       $(this).emojis();
   });
   

2. Customizing Emoji Sets Override the default emoji set via config (publish config first):

   // config/emojis.php
   'emoji_set' => 'custom-set',
   

   Then include your custom set in the JS:

   $.emojis.options.emoji_set = 'custom-set';
   

3. Integration with Laravel Forms Use Blade directives for consistency:

   // In a Blade component
   <textarea class="form-control emoji-enabled" name="content"></textarea>
   

   Initialize in a global JS file:

   $(function() {
       $('.emoji-enabled').emojis();
   });
   

4. Server-Side Handling Sanitize emojis in Laravel validation rules:

   $request->validate([
       'content' => 'required|string|emoji_safe', // Custom rule
   ]);
   

Pro Tips

• Lazy Loading: Initialize emojis only when the textarea is focused:

  $('textarea').on('focus', function() {
      if (!$(this).data('emojis-inited')) {
          $(this).emojis();
          $(this).data('emojis-inited', true);
      }
  });
  

• Theme Integration: Extend the CSS to match your app’s design system by overriding .emojis-wrapper and .emojis-picker.

Gotchas and Tips

Pitfalls

1. jQuery Dependency

   • The package requires jQuery. Ensure it’s loaded before jquery.emojis.js.
   • Debugging: Check browser console for jQuery is not defined errors.

2. Asset Paths

   • If using Laravel Mix/Vite, manually copy the vendor assets to public/vendor/emojis/ or configure your build tool to include them.
   • Fix: Use mix.copy() in webpack.mix.js:

     mix.copy('node_modules/atm-emojisbundle/dist', 'public/vendor/emojis');
     

3. Emoji Shortcode Conflicts

   • Default shortcodes (e.g., :smile:) may conflict with Laravel Blade syntax.
   • Workaround: Use the shortcodes config option to customize or disable them:

     'shortcodes' => false,
     

4. Caching Issues

   • Emoji picker may not update after dynamic content changes (e.g., AJAX).
   • Solution: Reinitialize the plugin after content updates:

     $('#dynamic-textarea').html(newContent).emojis();
     

Debugging Tips

• Console Logs: Enable debug mode in the plugin:

  $.emojis.options.debug = true;
  

• Network Tab: Verify CSS/JS files are loading correctly (404s often indicate asset path issues).
• Laravel Logs: Check for FileNotFoundException if assets aren’t published.

Extension Points

1. Custom Emoji Categories Extend the default categories by overriding the emoji_categories config array:

   'emoji_categories' => [
       'custom' => [
           'name' => 'Custom',
           'emojis' => ['custom1', 'custom2'],
       ],
   ],
   

2. Event Listeners Hook into emoji selection events:

   $('#textarea').emojis({
       onSelect: function(emoji) {
           console.log('Selected:', emoji);
           // Trigger Laravel event via JS
           window.Laravel.echo('emoji.selected', { emoji });
       }
   });
   

3. Server-Side Emoji Processing Use Laravel middleware to process emojis before saving:

   // app/Http/Middleware/ProcessEmojis.php
   public function handle($request, Closure $next) {
       if ($request->has('content')) {
           $request->merge([
               'content' => $this->convertEmojiShortcodes($request->content),
           ]);
       }
       return $next($request);
   }