How do I use rails 6 ActionText fields in an ActiveAdmin form block

Question

I have built a small rails 6 app utilising the new ActionText feature. However it appears that there is no support in ActiveAdmin for the new field type (rich_text_area)

I have tried using the gem active_admin_trix, which works(if you load trix v1.2 in the active_admin, but it does not display the existing value of the field in the edit field

I have also tried just loading the trix library and using f.rich_text_area ie:

form do |f|
  f.semantic_errors *f.object.errors.keys
  f.inputs do
    f.input :name
    f.rich_text_area :description
  end
  f.actions
end

While this works OK it does not display the "label" as the field does not fit correctly in side the ActiveAdmin layout. It does however display the current content correctly

Has anyone else successfully used ActionText in ActiveAdmin

My guess is that Formtastic support is required, but I have not been able to find any information on ActionText support in Formtastic either

Answer 1

I solved it creating a custom formtastic input and a bit of CSS

I placed the following in app/admin/inputs/action_text_input.rb

 class ActionTextInput < 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)
        label_html + hidden_field + editor_tag
      end
    end
  end

Add the following to the end of /app/assets/stylesheets/active_admin.scss

.active_admin {
  form trix-editor {
    margin-left: 20%;
    width: calc(80% - 17px);
  }
}

You then call it in your ActiveAdmin form with

f.input :your_active_text_field, as: :action_text

Additionally, as suggested in the answer by @Robert, add

• :your_input_field to permit_params in your_active_admin_page.rb
• //= require trix/dist/trix to assets/javascripts/active_admin.js
• @import "trix/dist/trix"; to assets/stylesheets/active_admin.scss

Updated CSS

For more recent activeadmin releases, the width is a bit different. Consider the following CSS to handle that and the link dialog when you click the link button.

.active_admin {
  form trix-editor, form .trix-dialogs .trix-dialog--link {
    margin-left: 20%;
    width: calc(80% - 22px);
    border: 1px solid #c9d0d6;
    border-radius: 3px;
  }

  form trix-editor {
    min-height: 100px;
    margin-top: 10px;
    padding: 8px 10px 7px;
    background-color: white;

    &:focus {
      border: 1px solid #99a2aa;
      box-shadow: 0 0 4px #99a2aa;
      outline: none;
    }
  }

  form .trix-dialogs .trix-dialog--link {
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px;
    background-color: #eeeeee;

    .trix-button-group {
      margin-top: 10px;
    }
  }
}

Answer 2

Additionally, add

• :your_input_field to permit_params in your_active_admin_page.rb
• //= require trix/dist/trix to assets/javascripts/active_admin.js
• @import "trix/dist/trix"; to assets/stylesheets/active_admin.scss