Emojisbundle Laravel Package

Getting Started

Minimal Setup

1. Installation Add the package via Composer:

   composer require xlabs/emojisbundle
   

   Publish the assets (if needed):

   php artisan vendor:publish --provider="Xlabs\EmojiBundle\EmojiServiceProvider" --tag=public
   

2. Basic Integration Include the CSS/JS in your resources/views/layouts/app.blade.php:

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

3. First Use Case Initialize the plugin on a <textarea>:

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

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

Implementation Patterns

Common Workflows

1. Dynamic Form Integration Use Laravel Blade directives to conditionally load the plugin:

   @if($showEmojis)
       <textarea name="message" class="emoji-enabled"></textarea>
       <script>
           $(document).ready(function() {
               $('.emoji-enabled').emojis();
           });
       </script>
   @endif
   

2. AJAX Form Handling Reinitialize the plugin after AJAX updates:

   $('.emoji-trigger').on('click', function() {
       $.ajax({
           url: '/update-comment',
           success: function(response) {
               $('#comment').html(response.comment);
               $('#comment').emojis(); // Reinitialize
           }
       });
   });
   

3. Custom Emoji Sets Override the default emoji set via config:

   // config/emojis.php
   'emoji_set' => 'custom_path/to/emojis.json',
   

   Publish the config first:

   php artisan vendor:publish --provider="Xlabs\EmojiBundle\EmojiServiceProvider" --tag=config
   

4. Laravel Validation Sanitize emoji input before storage:

   $validated = $request->validate([
       'message' => 'required|string|max:1000',
   ]);
   // Strip HTML/JS from emoji markup if needed
   $cleanMessage = strip_tags($validated['message']);
   

Gotchas and Tips

Pitfalls

1. Asset Paths

   • If using Laravel Mix/Vite, ensure the plugin’s JS/CSS paths are correctly aliased in webpack.mix.js or vite.config.js.
   • Example for Mix:

     mix.copy('vendor/xlabs/emojisbundle/public/js/emojis.js', 'public/js/');
     

2. jQuery Dependency

   • The plugin requires jQuery. Include it before the emoji script:

     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <script src="{{ asset('vendor/emojisbundle/js/emojis.js') }}"></script>
     

3. Conflict with Other Plugins

   • If using TinyMCE/CKEditor, initialize the emoji plugin after the editor:

     ClassicEditor.create(document.querySelector('#editor'))
         .then(editor => {
             $('#editor').emojis(); // Initialize emojis on top of TinyMCE
         })
         .catch(error => {
             console.error(error);
         });
     

4. Emoji Shortcode Parsing

   • The plugin uses shortcodes like :smile:. If storing raw input, escape shortcodes in the database:

     $message = str_replace([':(', ':)', ':|'], ['(sad)', '(happy)', '(neutral)'], $request->message);
     

Debugging Tips

1. Check Console for Errors

   • Look for Uncaught ReferenceError: $ is not defined (missing jQuery) or emojis is not a function (incorrect path).

2. Verify Emoji JSON

   • Ensure the emoji set file (emojis.json) is valid JSON and accessible at the configured path.

3. Disable Cache

   • Clear Laravel cache and browser cache if emojis fail to load:

     php artisan cache:clear
     php artisan view:clear
     

Extension Points

1. Custom Shortcodes Extend the emoji set by modifying the JSON file or overriding the emojis.js file:

   // Override the default emoji set
   $.fn.emojis.defaults.emoji_set = '/custom/emojis.json';
   

2. Laravel Blade Directives Create a custom Blade directive for reusable emoji fields:

   // AppServiceProvider.php
   Blade::directive('emojiField', function ($expression) {
       return "<textarea name=\"{$expression}\" class=\"emoji-enabled\"></textarea>
               <script>$(document).ready(function(){$('.emoji-enabled').emojis();});</script>";
   });
   

   Usage:

   @emojiField('comment')
   

3. Server-Side Emoji Rendering For non-JS environments, render emojis server-side using a helper:

   // app/Helpers/EmojiHelper.php
   function renderEmojis($text) {
       $emojiMap = [
           ':smile:' => '😊',
           ':heart:' => '❤️',
       ];
       return str_replace(array_keys($emojiMap), array_values($emojiMap), $text);
   }