Use text_area instead of cktext_area

We're going to change CKEditor to an inline editor, and the "ckeditor"
gem doesn't provide an option to do so.

Since using `cktext_area` would automatically generate a "classic"
iframe CKEditor, we need to use `text_area` and load the editor using
JavaScript. Personally I prefer this option anyway.

Note in the jQuery selector we need to use `textarea.html-area`; using
just `.html-area` would fail if there's an error message associated to
the textarea, since Rails will add the `.html-area` class to the error
message.

app/assets/javascripts/application.js

@@ -55,6 +55,7 @@
 //= require checkbox_toggle
 //= require markdown-it
 //= require markdown_editor
+//= require html_editor
 //= require cocoon
 //= require answers
 //= require questions
@@ -114,6 +115,7 @@ var initialize_modules = function() {
   App.SocialShare.initialize();
   App.CheckboxToggle.initialize();
   App.MarkdownEditor.initialize();
+  App.HTMLEditor.initialize();
   App.LegislationAdmin.initialize();
   App.LegislationAllegations.initialize();
   App.Legislation.initialize();

app/assets/javascripts/html_editor.js

@@ -0,0 +1,14 @@
+(function() {
+  "use strict";
+  App.HTMLEditor = {
+    initialize: function() {
+      $("textarea.html-area").each(function() {
+        if ($(this).hasClass("admin")) {
+          CKEDITOR.replace(this.name, { language: $("html").attr("lang"), toolbar: "admin", height: 500 });
+        } else {
+          CKEDITOR.replace(this.name, { language: $("html").attr("lang") });
+        }
+      });
+    }
+  };
+}).call(this);

app/views/admin/budget_investments/edit.html.erb

@@ -22,9 +22,9 @@
         </div>
 
         <div class="ckeditor small-12 column">
-          <%= translations_form.cktext_area :description,
+          <%= translations_form.text_area :description,
                 maxlength: Budget::Investment.description_max_length,
-                ckeditor: { language: I18n.locale } %>
+                class: "html-area" %>
         </div>
       <% end %>
 

app/views/admin/budget_phases/_form.html.erb

@@ -23,17 +23,19 @@
     <%= f.translatable_fields do |translations_form| %>
       <div class="small-12 column">
         <div class="ckeditor">
-          <%= translations_form.cktext_area :description,
+          <%= translations_form.text_area :description,
-                                             maxlength: Budget::Phase::DESCRIPTION_MAX_LENGTH,
+                                           maxlength: Budget::Phase::DESCRIPTION_MAX_LENGTH,
-                                             hint: t("admin.budget_phases.edit.description_help_text") %>
+                                           class: "html-area",
+                                           hint: t("admin.budget_phases.edit.description_help_text") %>
         </div>
       </div>
 
       <div class="small-12 column">
         <div class="ckeditor">
-          <%= translations_form.cktext_area :summary,
+          <%= translations_form.text_area :summary,
-                                             maxlength: Budget::Phase::SUMMARY_MAX_LENGTH,
+                                           maxlength: Budget::Phase::SUMMARY_MAX_LENGTH,
-                                             hint: t("admin.budget_phases.edit.summary_help_text") %>
+                                           class: "html-area",
+                                           hint: t("admin.budget_phases.edit.summary_help_text") %>
         </div>
       </div>
     <% end %>

app/views/admin/dashboard/actions/_form.html.erb

@@ -32,7 +32,7 @@
     </div>
 
     <div class="ckeditor">
-      <%= f.cktext_area :description, ckeditor: { language: I18n.locale } %>
+      <%= f.text_area :description, class: "html-area" %>
     </div>
   </div>
 </div>

app/views/admin/legislation/homepages/_form.html.erb

@@ -16,10 +16,10 @@
     <%= f.translatable_fields do |translations_form| %>
       <div class="small-12 column">
         <div class="ckeditor">
-          <%= translations_form.cktext_area :homepage,
+          <%= translations_form.text_area :homepage,
-                                            language: I18n.locale,
+                                          language: I18n.locale,
-                                            ckeditor: { height: 500, toolbar: "admin" },
+                                          class: "html-area admin",
-                                            hint: t("admin.legislation.processes.form.homepage_description") %>
+                                          hint: t("admin.legislation.processes.form.homepage_description") %>
         </div>
       </div>
     <% end %>

app/views/admin/legislation/milestones/_summary_form.html.erb

@@ -7,7 +7,7 @@
   <div class="row">
     <%= f.translatable_fields do |translations_form| %>
       <div class="ckeditor column">
-        <%= translations_form.cktext_area :milestones_summary, ckeditor: { language: I18n.locale } %>
+        <%= translations_form.text_area :milestones_summary, class: "html-area" %>
       </div>
     <% end %>
   </div>

app/views/admin/newsletters/_form.html.erb

@@ -5,7 +5,7 @@
                                                       @newsletter[:segment_recipient]) %>
   <%= f.text_field :subject %>
   <%= f.text_field :from %>
-  <%= f.cktext_area :body, ckeditor: { language: I18n.locale } %>
+  <%= f.text_area :body, class: "html-area" %>
 
   <div class="margin-top">
     <%= f.submit class: "button success" %>

app/views/admin/poll/active_polls/_form.html.erb

@@ -8,7 +8,7 @@
     <%= f.translatable_fields do |translations_form| %>
       <div class="ckeditor column">
         <span class="help-text"><%= t("admin.active_polls.form.description.help_text") %></span>
-        <%= translations_form.cktext_area :description,
+        <%= translations_form.text_area :description, class: "html-area",
           maxlength: ActivePoll.description_max_length %>
       </div>
     <% end %>

app/views/admin/poll/questions/answers/_form.html.erb

@@ -15,7 +15,7 @@
         <%= translations_form.text_field :title %>
       </div>
       <div class="ckeditor column">
-        <%= translations_form.cktext_area :description, maxlength: Poll::Question.description_max_length %>
+        <%= translations_form.text_area :description, maxlength: Poll::Question.description_max_length, class: "html-area" %>
       </div>
     <% end %>
   </div>

app/views/admin/site_customization/pages/_form.html.erb

@@ -47,8 +47,7 @@
           <%= translations_form.text_field :subtitle %>
         </div>
         <div class="ckeditor column">
-          <%= translations_form.cktext_area :content,
+          <%= translations_form.text_area :content, class: "html-area admin" %>
-                                            ckeditor: { language: I18n.locale, toolbar: "admin" } %>
         </div>
       <% end %>
     </div>

app/views/budgets/investments/_form.html.erb

@@ -23,9 +23,9 @@
       <div class="js-suggest" data-locale="<%= translations_form.locale %>"></div>
 
       <div class="ckeditor small-12 column">
-        <%= translations_form.cktext_area :description,
+        <%= translations_form.text_area :description,
               maxlength: Budget::Investment.description_max_length,
-              ckeditor: { language: I18n.locale } %>
+              class: "html-area" %>
       </div>
     <% end %>
 

app/views/dashboard/polls/_question_answer_fields.html.erb

@@ -15,9 +15,9 @@
     <div class="row expanded">
       <div class="small-12 column">
         <div class="ckeditor">
-          <%= f.cktext_area :description,
+          <%= f.text_area :description,
-                            maxlength: Poll::Question.description_max_length,
+                          maxlength: Poll::Question.description_max_length,
-                            ckeditor: { language: I18n.locale } %>
+                          class: "html-area" %>
         </div>
       </div>
     </div>

app/views/debates/_form.html.erb

@@ -17,9 +17,9 @@
       <div class="js-suggest" data-locale="<%= translations_form.locale %>"></div>
 
       <div class="ckeditor small-12 column">
-        <%= translations_form.cktext_area :description,
+        <%= translations_form.text_area :description,
               maxlength: Debate.description_max_length,
-              ckeditor: { language: I18n.locale } %>
+              class: "html-area" %>
       </div>
     <% end %>
 

app/views/legislation/proposals/_form.html.erb

@@ -16,9 +16,9 @@
     </div>
 
     <div class="ckeditor small-12 column">
-      <%= f.cktext_area :description,
+      <%= f.text_area :description,
         maxlength: Legislation::Proposal.description_max_length,
-        ckeditor: { language: I18n.locale } %>
+        class: "html-area" %>
     </div>
 
     <div class="small-12 column">

app/views/proposals/_form.html.erb

@@ -22,9 +22,9 @@
       </div>
 
       <div class="ckeditor small-12 column">
-        <%= translations_form.cktext_area :description,
+        <%= translations_form.text_area :description,
-                                          maxlength: Proposal.description_max_length,
+                                        maxlength: Proposal.description_max_length,
-                                          ckeditor: { language: I18n.locale } %>
+                                        class: "html-area" %>
       </div>
     <% end %>
 

lib/consul_form_builder.rb

@@ -9,7 +9,7 @@ class ConsulFormBuilder < FoundationRailsHelper::FormBuilder
     select attribute, choices, options, html_options
   end
 
-  %i[text_field text_area cktext_area number_field password_field email_field].each do |field|
+  %i[text_field text_area number_field password_field email_field].each do |field|
     define_method field do |attribute, options = {}|
       label_with_hint(attribute, options.merge(label_options: label_options_for(options))) +
         super(attribute, options.merge(