How to add emojioneArea (stand-alone) select value to text field? JQuery Rails 6.0.0

Question

I'm trying to add the emoji value from the stand alone emoji-picker to a text input (same effect as having the emojipicker on the input itself). I tried getting the value from the emojibtn_click event, but it returns undefined for the value that returns. How can I selected an emoji through the stand alone emojipicker and transfer the value to a text input field with the same result as using the normal input?

new.html.erb

<div style="overflow: hidden;">
  <%= form.text_field :content, placeholder: 'Type your message....', id: "conversation_comment_content_#{@conversation.id}", style: 'width: 100% !important; border-radius: 0 !important; height: 36px;' %>
</div>

javascript

  <script>
    $(document).ready(function() {

        $('#trigger').emojioneArea({
            standalone: true,
            autocomplete: false,
            events: {
               emojibtn_click: function (button, event) {
                   console.log('event:emojibtn.click, emoji=' + button.children().data("name"))
               },
                change: function(editor, event) {
                   console.log('event:change');
                }
            }
        })
    });

  </script>

Answer 1

I turned the emojioneArea component into a reusable object and then captured its values.

$(document).ready(function() {
      var emojiStandAlone =  $('#trigger').emojioneArea({
            standalone: true,
            autocomplete: false,
            events: {
            }
        })

        const emojionearea = emojiStandAlone[0].emojioneArea

        emojionearea.on('picker.hide', function() {
            const emoji = emojionearea.getText()
            emojionearea.setText('')
            if(emoji) {
                $("#conversation_comment_content_<%= @conversation.id %>").val(function(i, val) {
                    return val + `${emoji}`;
                });
            }
        });

    });