add support for rich text textarea

Author: ryanwoldatwork

app/assets/javascripts/quill.js

@@ -149,6 +149,8 @@ def question_type_javascript_params(question)
       "form.querySelector(\"##{question.ui_selector}\") && form.querySelector(\"##{question.ui_selector}\").dataset.rawValue"
     elsif question.question_type == 'textarea'
       "form.querySelector(\"##{question.ui_selector}\") && form.querySelector(\"##{question.ui_selector}\").value"
+    elsif question.question_type == 'rich_textarea'
+      "form.querySelector(\"##{question.ui_selector}\") && form.querySelector(\"##{question.ui_selector}\").value"
     elsif question.question_type == 'radio_buttons'
       "form.querySelector(\"input[name=#{question.ui_selector}]:checked\") && form.querySelector(\"input[name=#{question.ui_selector}]:checked\").value"
     elsif question.question_type == 'star_radio_buttons'

app/assets/stylesheets/quill-snow.css

@@ -264,6 +264,10 @@ def check_expired
     end
   end
 
+  def has_rich_text_questions?
+    questions.where(question_type: "rich_textarea").exists?
+  end
+
   def self.archive_expired!
     Form.where("expiration_date is not null and expiration_date < NOW() and aasm_state <> 'archived'").find_each do |form|
       @event = Event.log_event(Event.names[:form_archived], 'Form', form.uuid, "Form #{form.name} archived at #{DateTime.now}", 1)

app/helpers/application_helper.rb

@@ -25,6 +25,7 @@ class Question < ApplicationRecord
     'dropdown',
     'combobox',
     # Custom elements
+    'rich_textarea',
     'text_display',
     'custom_text_display',
     'states_dropdown',

app/models/form.rb

@@ -92,6 +92,10 @@
     <!--- End demo content -->
     <script src="<%= touchpoint_url(@form.short_uuid, format: :js) %>" async></script>
     <script>
+      document.addEventListener('onTouchpointsFormLoaded', function() {
+        console.log("fired onTouchpointsFormLoaded")
+      });
+
       document.addEventListener('onTouchpointsModalClose', function() {
         console.log("fired onTouchpointsModalClose")
       });

app/models/question.rb

@@ -29,6 +29,8 @@
 <% @form_component_path = 'components/forms/edit/question_types/combobox' %>
 <% elsif question.question_type == "textarea" %>
 <% @form_component_path = 'components/forms/edit/question_types/text_area' %>
+<% elsif question.question_type == "rich_textarea" %>
+<% @form_component_path = 'components/forms/edit/question_types/rich_textarea' %>
 <% elsif question.question_type == "hidden_field" %>
 <% @form_component_path = 'components/forms/edit/question_types/hidden_field' %>
 <% elsif question.question_type == "custom_text_display" %>

app/views/admin/forms/example.html.erb

@@ -73,6 +73,8 @@
               <%= render 'components/forms/question_types/combobox', form: form, question: question, question_number: multi_section_question_number %>
             <% elsif question.question_type == "textarea" %>
               <%= render 'components/forms/question_types/text_area', form: form, question: question, question_number: multi_section_question_number %>
+            <% elsif question.question_type == "rich_textarea" %>
+              <%= render 'components/forms/question_types/rich_textarea', form: form, question: question, question_number: multi_section_question_number %>
             <% elsif question.question_type == "text_display" %>
               <%= render 'components/forms/question_types/text_display', form: form, question: question, question_number: multi_section_question_number %>
             <% elsif question.question_type == "date_select" %>

app/views/admin/questions/_question.html.erb

@@ -1,6 +1,7 @@
 <% @instruction_text_limit = 1500 %>
 <% @disclaimer_text_limit = 1000 %>
-
+<%= javascript_include_tag "quill.js" %>
+<%= stylesheet_link_tag "quill-snow.css" %>
 <%= render 'admin/forms/logo_display', { form: form } %>
 <hr
   class="margin-top-3 margin-bottom-3"
@@ -376,4 +377,24 @@ function textCounter(field,maxlimit) {
     countfield.innerText = "" + (maxlimit - field.value.length) + " <%= t :characters_left %>";
    }
 }
+
+document.addEventListener("DOMContentLoaded", function () {
+  document.querySelectorAll(".quill").forEach((wrapper) => {
+    const editorContainer = wrapper.querySelector(".editor");
+    const hiddenInput = wrapper.querySelector("input[type=hidden]");
+
+    if (editorContainer && hiddenInput) {
+      const quill = new Quill(editorContainer, {
+        theme: 'snow',
+        placeholder: 'Write something...',
+        modules: {
+          toolbar: [
+            ['bold', 'italic', 'underline'],
+            [{ 'list': 'ordered'}, { 'list': 'bullet' }]
+          ]
+        }
+      });
+    }
+  });
+});
 </script>

app/views/components/forms/_custom.html.erb

@@ -0,0 +1,25 @@
+<%
+  form_options = {
+    class: "usa-textarea",
+    required: question.is_required,
+    maxlength: question.max_length,
+  }
+
+  if question.help_text.present?
+    form_options.merge!({
+      "aria-describedby" => "question-id-#{question.id}-help-text"
+    })
+  end
+%>
+
+<div class="usa-form-group quill">
+  <%= render 'components/question_title_label', question: question %>
+  <input
+    type="hidden"
+    name="my_model[rich_text]"
+    id="<%= question.ui_selector %>">
+  <div
+    id="quill-editor-<%= question.ui_selector %>"
+    class="editor"
+    style="min-height: 100px;"></div>
+</div>