How to use TinyMCE with rails esbuild and stimulusjs

My previous post How to use TinyMCE with rails webpacks and stimulusjs looked at how to integrate the full-featured text editor TinyMCE into a Rails+webpacker with copy webpack plugin feature.

What does copy-webpack-plugin do?. It was designed to copies individual files or entire directories, which already exist, to the build directory. In this context for tinyMCE we going to copy all tinyMCE assets including plugins css/js to our build directory. so we can flexible load each plugins on demand without having to bundling all plugins assets into one compiled assets

In this article I'm going to shared on how we can setup the same approach above by using esbuild as default assets bundler

Assumed you already setup rails+esbuild+stimulusjs with custom esbuild config enabled

1. Install TinyMCE and esbuild-plugin-copy

yarn add tinymce
yarn add esbuild-plugin-copy

2. Edit/create esbuild.config.mjs and configure esbuild plugin copy config

#!/usr/bin/env node

const { build } = require('esbuild')
const { copy } = require('esbuild-plugin-copy')
const path = require('path')

build({
  ....
  plugins: [
    copy({
      resolveFrom: path.join(process.cwd(), 'public/assets'),
      assets: [
        {
          from: [
            './node_modules/tinymce/**/*.js',
            './node_modules/tinymce/**/*.css'
          ],
          to: ['./tinymce'],
          keepStructure: true
        }
      ]
    })
  ]
  ...
})
  .then(() => console.log('⚡ Build complete! ⚡'))
  .catch(error => {
    console.error(error)
    process.exit(1)
  })

see sample config

3. Create a stimulus controller, tinymce_controller.js

Configure plugin definition and other tinymce option. Please refer tinyMCE documentation for more option.

import tinymce from 'tinymce/tinymce'

import { Controller } from '@hotwired/stimulus'
export default class extends Controller {
  static targets = ['input']

  initialize() {
    this.defaults = {
      base_url: '/assets/tinymce',
      plugins:
        'preview importcss autolink autosave save directionality code visualblocks visualchars fullscreen image link media table charmap pagebreak nonbreaking anchor advlist lists help charmap quickbars',
      menubar: 'file edit view insert format tools table',
      toolbar:
        'undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist preview | forecolor backcolor removeformat | pagebreak | charmap | insertfile image media link anchor | ltr rtl fullscreen',
      toolbar_sticky: true,
      images_upload_url: '/image_uploader/image',
      file_picker_types: 'file image media',
      suffix: '.min',
      relative_urls: false
      //skin: (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'oxide-dark' : 'oxide'),
      //content_css: (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'default')
    }
  }

  connect() {
    // Initialize the app
    let config = Object.assign({ target: this.inputTarget }, this.defaults)
    tinymce.init(config)
  }

  disconnect() {
    tinymce.remove()
  }
}

4. Example usage in rails form

• Standard form

<%= form_with model: @object do |form| %>
  <div data-controller='tinymce'
     <%= form.text_area :intro, data: { tinymce_target: 'input' } %>
  </div>
<% end %>

• If you using simple form

# create tinymce_input.rb in app/inputs
class TinymceInput < SimpleForm::Inputs::Base
  enable :placeholder, :maxlength, :minlength

  def input(wrapper_options = nil)
    options[:wrapper_html][:data] = { controller: :tinymce }
    input_html_options[:data] = { tinymce_target: 'input' }
    input_html_options[:class] = 'tinymce'
    input_html_options[:rows] ||= 20
    merged_input_options = merge_wrapper_options(input_html_options, wrapper_options)
    @builder.text_area(attribute_name, merged_input_options)
  end
end

<%= simple_for(@object) do |f| %>
  <%= f.input :intro,  as: :tinymce %>
<% end %>

Live Demo