_form.html.erb

<%= form_with(model: post, data: {controller: "actiontext"}) do |form| %>
  <% if post.errors.any? %>
    <div style="color: red">
      <h2><%= pluralize(post.errors.count, "error") %> prohibited this post from being saved:</h2>

      <ul>
        <% post.errors.each do |error| %>
          <li><%= error.full_message %></li>
        <% end %>
      </ul>
    </div>
  <% end %>

  <div>
    <%= form.label :title, style: "display: block" %>
    <%= form.text_field :title %>
  </div>

  <div>
    <%= form.label :body, style: "display: block" %>
    <%= form.text_area :body %>
  </div>
  <div id="root"></div>

  <div class="pickerContainer"></div>
  <div>
    <%= form.rich_text_area :content %>
  </div>

  <div>
    <%= form.submit %>
  </div>
<% end %>

actiontext_controller.js

import { Controller } from "@hotwired/stimulus"
import ReactDOM from 'react-dom';
import React from 'react';
import EmojiPicker from  "../components/EmojiPicker.js"



// Connects to data-controller="actiontext"
export default class extends Controller {
  connect() {
    /**
     * Shortform for ReactDOM.render(<App />, document.getElementById('root'));
     * 
     * https://reactjs.org/docs/react-without-jsx.html
     */
    const e = React.createElement;

    /**
     * Get a reference to the root element of the application.
     */
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(e(EmojiPicker), root);
    
  }
}

EmojiPicker.js

import { useState, useEffect } from 'react';
import { createPicker  } from 'picmo';

function EmojiPicker() {
  const [chosenEmoji, setChosenEmoji] = useState('');
  let emojiPicker;

  useEffect(() => {
    emojiPicker = document.querySelector('.pickerContainer');
    if (emojiPicker === null) {
        return;
    }
    const picker = createPicker({ rootElement: emojiPicker })
    picker.addEventListener('emoji:select', event => {
      console.log('Emoji selected:', event.emoji);
      setChosenEmoji(event.emoji);
      console.log(chosenEmoji)
    });
  }, []);
}
export default EmojiPicker