Trix editor

Please follow the guidelines for creating a bug report.

The issue tracker is only for bugs and feature requests. If you need general help please post to StackOverflow.

Expected behavior

I like to use the Trix editor (part of Rails 6), but the Active Admin forms don't recognize the f.trix_editor input, nor f.input :something, as: :trix_editor. Is that a Formtastic thing or a AA thing?

Actual behavior

f.input :thing, as: :trix_editor throws an Formtastic::UnknownInput Error.
f.trix_editor :thing throws an ArgumentError (wrong number of arguments, given 1 expected 0)

How to reproduce

Your best chance of getting this bug looked at quickly is to provide an executable test case demonstrating the expected behavior that is not occurring. Please follow the guidelines for creating a bug report.

f.rich_text_area :something is working for me.

@ch000 This is working for you in Active admin or in a regular .html.erb file?

Is there any news on this? I'd like to enable rich_text_area in admin inputs as well

@victorbstan Hey bro, i am using active admin and and the way i got it to work was by using rich_text_area :something

OK cool, that seems pretty standard.

I think I've moved the stylesheets and JS for active admin in the vendors folders because it was clashing with the rest of the app styling, and I have to figure out how to get the trix styling and JS files to be available for active admin again.

On Oct 31, 2019, at 12:36 PM, Michael Gitim [email protected] wrote:

@victorbstan Hey bro, i am using active admin and and the way i got it to work was by using rich_text_area :something

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

@victorbstan hmmmm, if you are using active admin, you wouldn't have to move anything in to 'vendors'. Your stylesheet would go in to app/assets/stylesheets/active_admin.scss and your js would go under app/assets/javascript/active_admin.js. Unless you import those files into your application.js or application.scss, you shouldn't have any clashing. To get trix styling in your active admin css file import it as such. @import "trix/dist/trix"; Hope it helps.

By default rails seems to load the all the assets from the asset folder together. I did not change the default Rails 6 behaviour.

This is default rails application.css

 *= require_tree .
 *= require_self

If active admin stylesheet was in the stylesheets folder, would it not interfere with the other styles?

Cheers, Victor Stan

On Oct 31, 2019, at 2:47 PM, Michael Gitim [email protected] wrote:

@victorbstan hmmmm, if you are using active admin, you wouldn't have to move anything in to 'vendors'. Your stylesheet would go in to app/assets/stylesheets/active_admin.scss and your js would go under app/assets/javascript/active_admin.js. Unless you import those files into your application.js or application.scss, you shouldn't have any clashing. To get trix styling in your active admin css file import it as such. @import "trix/dist/trix"; Hope it helps.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

Rails (6) fails with:

undefined method `rich_text_area_tag' for #<#<Class:0x00007fb14894fda8>:0x00007fb14895e470>
Did you mean?  rich_text_area

  form do |f|
    f.semantic_errors

    f.rich_text_area :text

    f.inputs 'Text' do
      input :link_href
      input :link_text
    end

    f.actions
  end

Any thoughts?

@rosendi what was an error?

@dmitry

undefined method `rich_text_area_tag' for #<#<Class:0x00007fb14894fda8>:0x00007fb14895e470>
Did you mean?  rich_text_area

Looks like the rich_text_area method uses rich_text_area_tag internally, but it's undefined in the ActiveAdmin scope. However in my Rails app (not admin scope) everything works fine.

No idea?

@rosendi I suggest you to use debugger to find out where it is trying to be called. Check if rich_text_area is called from the https://github.com/rails/rails/blob/530f7805ed5790af1d472a041bc74089dc183f47/actiontext/app/helpers/action_text/tag_helper.rb#L21.

I think the issue is with Zeitwerk. Still investigating. The temporary fix is to include actiontext's helpers in ApplicationController:

class ApplicationController < ActionController::Base
  helper ActionText::Engine.helpers

Technically it should be automatically included through application.rb:

require_relative 'boot'

require "rails"
require "active_model/railtie"
require "active_job/railtie"
require "active_record/railtie"
require "active_storage/engine"
require "action_controller/railtie"
require "action_mailer/railtie"
require "action_mailbox/engine"
require "action_text/engine" <-----------------
require "action_view/railtie"
require "action_cable/engine"
require "rails/test_unit/railtie"
require "sprockets/railtie"

Thanks, if it’s supposed to work I’ll figure out why it doesn’t, it might be a few weeks before I get back on that project. I just wanted to know if it’s supported at least.

Cheers, Victor Stan

On Dec 7, 2019, at 6:42 AM, Dimitri Rosenberg [email protected] wrote:

 I think the issue is with Zeitwerk. Still investigating. The temporary fix is to include actiontext's helpers in ApplicationController:

class ApplicationController < ActionController::Base helper ActionText::Engine.helpers Technically it should be automatically included through application.rb:

require_relative 'boot'

require "rails" require "active_model/railtie" require "active_job/railtie" require "active_record/railtie" require "active_storage/engine" require "action_controller/railtie" require "action_mailer/railtie" require "action_mailbox/engine" require "action_text/engine" <----------------- require "action_view/railtie" require "action_cable/engine" require "rails/test_unit/railtie" require "sprockets/railtie" — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

Means this initializer is not running?

https://github.com/rails/rails/blob/530f7805ed5790af1d472a041bc74089dc183f47/actiontext/lib/action_text/engine.rb#L35

adding this gem: https://rubygems.org/gems/active_admin_trix and following its documentation: https://www.rubydoc.info/gems/active_admin_trix/0.0.3 solved the issue (= "using the Trix-editor with active admin") for me.

My stack:

• rails 6.0.1.2
• ruby 2.6.5

The steps are:

• routes.rb: gem 'active_admin_trix', '~> 0.0.3'
• initializers/active_admin.rb:

  # @NOTE: see: https://www.rubydoc.info/gems/active_admin_trix/0.0.3
  # config.register_stylesheet 'https://cdn.bootcss.com/trix/1.0.0/trix.css'
  # config.register_javascript 'https://cdn.bootcss.com/trix/1.0.0/trix.js'
  # more up-to-date libraries: https://cdnjs.com/libraries/trix
  config.register_stylesheet 'https://cdnjs.cloudflare.com/ajax/libs/trix/1.2.1/trix.css'
  config.register_javascript 'https://cdnjs.cloudflare.com/ajax/libs/trix/1.2.1/trix.js'

• in your app/admin/my_models.rb:

form do |f|
  f.inputs do
    # @NOTE: the docs suggest `f.input :content, as: :trix` which did render
    #        the trix-editor, but it did not fill in the text if there was already
    #        some available from the database
    f.rich_text_area :content
  end
end

I could not find the gem's source code on Github (nor bitbucket). The gem does actually not much, I was curious and unpacked it:

class TrixInput < Formtastic::Inputs::StringInput
  def to_html
    input_wrapping do
      editor_tag_params = {
        input: input_html_options[:id],
        class: 'trix-content'
      }
      editor_tag = template.content_tag('trix-editor', '', editor_tag_params)
      hidden_field = builder.hidden_field(method, input_html_options)
      editor = template.content_tag('div', editor_tag + hidden_field, class: 'trix-editor-wrapper')
      label_html + editor
    end
  end
end

.trix-editor-wrapper {
  width: calc(80% - 22px);
  display: inline-block;
  font-size: 0.95em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  outline: none;
}
trix-toolbar {}
trix-editor { background: #FFF; }

.trix-content {
  ul { list-style: disc; }
  ol { list-style: decimal; }
  ul, ol {
    li { margin-left: 1.25em; margin-bottom: 0.25em; }
  }
}

The README states the following MIT license:

The gem is available as open source under the terms of the MIT License. Copyright 2017 Tim Glen

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

@swiknaba you don't need an additional gem. Trix works with ActiveAdmin out of the box.

There is still a weird issue with Zeitwerk, but it affects only a certain environments with specific conditions.

Means this initializer is not running?

https://github.com/rails/rails/blob/530f7805ed5790af1d472a041bc74089dc183f47/actiontext/lib/action_text/engine.rb#L35

Yep, looks so. However require "action_text/engine" is on its place in application.rb.

Thanks for the reply @rosendi . At least locally, it did not work out of the box for me, I haven't tested it in production environment yet just development. I tried to include that mentioned helper via

# app/admin/my_models.rb
ActiveAdmin.register MyModel do
  controller do
    helper ActionText::Engine.helpers
  end
end

without success. Of course, possibly, I have other errors in my codebase causing the trouble.

Did anyone successfully implemented action_text with active_admin in Rails 6? @rosendi Can you help us to do that?

Yep. I will create a demo repo.

Yep. I will create a demo repo.

Have you created it?

Recently I was making the same experiment. Here it is a gist to make Trix works with ActiveAdmin (without extra gems): https://gist.github.com/blocknotes/74baceccc74c12c60a60a42d112787a3

It worked for me, as @blocknotes sad in his gist.

https://gist.github.com/blocknotes/74baceccc74c12c60a60a42d112787a3

But I have a problem when trying to use this in a has_many nested form

forms do |f|
  f.inputs 'General' do
    f.input :name
    f.rich_text_area :description # this one works like a charm
  end

  f.inputs 'Steps' do 
    f.has_many :steps do |step|
      s.input :name
      s.rich_text_area :details # this one not even renders the component
    end
  end
end

My step.details input doesn't render anything, not even its <li />

But I have a problem when trying to use this in a has_many nested form ... f.has_many :steps do |step| s.input :name s.rich_text_area :details # this one not even renders the component end

I think that has_many still doesn't support Arbre elements. Reference comment here.

Does anyone has figured out how to support active storage image upload ?

Edit: I switched to https://github.com/blocknotes/activeadmin_quill_editor which does support active storage image and works well.

Rails 7 seems not working showing "Uncaught SyntaxError: Unexpected token 'export'" when require trix in active_admin.js //=require trix

Closing in favor of #6106