Added wysiwyg editor to the activity description fields

app/assets/stylesheets/admin/activities.css

@@ -149,3 +149,12 @@
 .activity_table-cell--pseudo-hidden {
     color: transparent;
 }
+
+.quill-editor .ql-editor {
+  min-height: 200px;
+}
+
+.ql-editor p, .ql-editor ol, .ql-editor ul {
+  margin-bottom: 1rem;
+  padding-left: 0;
+}

app/assets/stylesheets/members.css

@@ -11,6 +11,7 @@
  *= require yeti
  *= require font_awesome5_webfont
  *= require lato
+ *= require quill/dist/quill.snow
  *
  *= require intl_tel_input
  *

app/assets/stylesheets/members/activities.css

@@ -259,3 +259,8 @@ div.container.col-md-9 {
 		width: 25%;
 	}
 }
+
+.ql-editor p, .ql-editor ol, .ql-editor ul {
+  margin-bottom: 1rem;
+  padding-left: 0;
+}

app/javascript/src/admin/activities.js

@@ -35,6 +35,7 @@ function bind_activities() {
   // [POST] participants
   $("#btn-add-committee").on("click", addCommitteeMembers);
 }
+
 // adds the committee members to the activity
 function addCommitteeMembers({ target }) {
   const activity_id = $(target).data("id");
@@ -46,6 +47,7 @@ function addCommitteeMembers({ target }) {
     },
   );
 }
+
 /*
  * Participant namespace containing all participant related functions
  */
@@ -411,6 +413,8 @@ $(document).on("ready page:load turbolinks:load", function () {
 
   copyPromoToClipboard();
 
+  $(".activity-description").editor();
+
   $("form#mail").mail();
 
   $("#activity_is_viewable").on("click", function () {
@@ -507,6 +511,7 @@ function addCollapseCallbackToTableHeader() {
       );
     });
 }
+
 /*
  * Contains the poster related handlers
  */

app/javascript/src/lib/editor.js

@@ -9,37 +9,42 @@ import Quill from "quill";
 
 (function ($) {
   $.fn.editor = function (options) {
-    if ($(this).length == 0) return;
+    if ($(this).length === 0) return;
 
     let modules = $.extend({}, $.fn.defaults, options);
-    let editor = $(this).find("#editor");
+    let editors = $(this).find("#editor, .quill-editor");
 
-    if ($(editor).length == 0) return;
+    editors.each(function () {
+      // form-group containing hidden input to copy inner html to
+      let input = $(this).parent().find("input:hidden");
 
-    // form-group containing hidden input to copy inner html to
-    let input = editor.parent().find("input:hidden");
+      let quill = new Quill(this, {
+        modules: modules,
+        theme: "snow",
+      });
 
-    $(".ql-toolbar").remove();
+      let store = function () {
+        $(input).first().val(quill.root.innerHTML);
+      };
 
-    let quill = new Quill($(editor)[0], {
-      modules: modules,
-      theme: "snow",
+      $(quill.editor.scroll.domNode).on("blur", store);
+      $(this).closest("form").on("submit", store);
     });
-
-    let store = function () {
-      $(input).first().val(quill.root.innerHTML);
-    };
-
-    $(quill.editor.scroll.domNode).on("blur", store);
-    $(this).closest("form").on("submit", store);
   };
 
   $.fn.defaults = {
     toolbar: [
-      [{ header: [1, 2, 3, 4, false] }],
+      ["link", "blockquote", "code-block"],
       ["bold", "italic", "underline", "strike"],
+      [{ script: "sub" }, { script: "super" }],
       [{ list: "ordered" }, { list: "bullet" }],
-      ["link", { color: [] }],
+      [{ indent: "-1" }, { indent: "+1" }],
+      [
+        { align: null },
+        { align: "center" },
+        { align: "right" },
+        { align: "justify" },
+      ],
       ["clean"],
     ],
   };

app/views/admin/activities/partials/_edit.html.haml

@@ -46,21 +46,29 @@
 
       .form-group
         .row
-          .col-md-12
+          .col-md-12.activity-description
             = label(:activity, :description_nl)
             %span.input-group-btn
               %button.btn.btn-clipboard-wapp{ :type => 'button', :"data-clipboard-text" => @activity.whatsapp_message(:nl) }
                 %i.fa.fa-copy
                 = I18n.t('admin.activities.copy_wa_msg')
-            = f.text_area :description_nl, :value => @activity.description_nl, :class => 'form-control', :rows => 8
+            .editor-container
+              = f.hidden_field :description_nl
+              .quill-editor
+                - if @activity.description_nl
+                  = sanitize @activity.description_nl, tags: %w(strong em u s a br p span ol ul li pre blockquote sup sub), attributes: %w(style class href title)
 
-          .col-md-12
+          .col-md-12.activity-description
             = label(:activity, :description_en)
             %span.input-group-btn
               %button.btn.btn-clipboard-wapp{ :type => 'button', :"data-clipboard-text" => @activity.whatsapp_message(:en) }
                 %i.fa.fa-copy
                 = I18n.t('admin.activities.copy_wa_msg')
-            = f.text_area :description_en, :value => @activity.description_en, :class => 'form-control', :rows => 8
+            .editor-container
+              = f.hidden_field :description_en
+              .quill-editor
+                - if @activity.description_en
+                  = sanitize @activity.description_en, tags: %w(strong em u s a br p span ol ul li pre blockquote sup sub), attributes: %w(style class href title)
 
       .form-group
         .row

app/views/layouts/partials/_mail.html.haml

@@ -25,14 +25,18 @@
         .col-lg-10.col-sm-12
           %input#onderwerp.form-control{ :name => 'subject', :type => 'text', :value => "#{I18n.t('association_name')} | #{subject}" }
 
-      %input#html.form-control{ type: "hidden", name: "html" }
-      #editor.form-control
-        - if mail.present?
-          = render :template => "mailings/participants/inform", :locals => { subject: subject }
+      .form-group.row
+        .col-lg-12
+          .editor-container
+            %input#html.form-control{ type: "hidden", name: "html" }
+            .quill-editor
+              - if mail.present?
+                = render :template => "mailings/participants/inform", :locals => { subject: subject }
 
-      .mail-actions
-        - if recipients.length() > 0
-          %button.btn.btn-primary#btn-send{ type: 'submit' }= I18n.t('layouts.partials.mail.send')
-        - else
-          %button.btn.btn-primary#btn-send{ type: 'submit', :disabled => 'disabled' }= I18n.t('layouts.partials.mail.send')
-        .btn.btn-default.disabled{ :disabled => 'disabled' }= I18n.t('layouts.partials.mail.draft')
+      .form-group.row.mail-actions
+        .col-lg-12
+          - if recipients.length() > 0
+            %button.btn.btn-primary#btn-send{ type: 'submit' }= I18n.t('layouts.partials.mail.send')
+          - else
+            %button.btn.btn-primary#btn-send{ type: 'submit', :disabled => 'disabled' }= I18n.t('layouts.partials.mail.send')
+          .btn.btn-default.disabled{ :disabled => 'disabled' }= I18n.t('layouts.partials.mail.draft')

app/views/members/activities/partials/_view.html.haml

@@ -79,17 +79,18 @@
   - if view =='show'
     .card-body.show-activity-topborder
       %strong= I18n.t("activerecord.attributes.activity.description")
-      <br/>
-      - if @user.language == 'nl' && !activity.description_nl.blank?
-        = simple_format(activity.description_nl)
-      - elsif @user.language == 'en' && !activity.description_en.blank?
-        = simple_format(activity.description_en)
-      - elsif !activity.description_nl.blank?
-        = simple_format(activity.description_nl)
-      - elsif !activity.description_en.blank?
-        = simple_format(activity.description_en)
-      - else
-        = I18n.t("activerecord.missing_value_placeholders.activity.description")
+      .ql-snow
+        .ql-editor{style: 'padding: 0; overflow-y: initial'}<
+          - if @user.language == 'nl' && !activity.description_nl.blank?
+            = sanitize activity.description_nl, tags: %w(strong em u s a br p span ol ul li pre blockquote sup sub), attributes: %w(style class href title)
+          - elsif @user.language == 'en' && !activity.description_en.blank?
+            = sanitize activity.description_en, tags: %w(strong em u s a br p span ol ul li pre blockquote sup sub), attributes: %w(style class href title)
+          - elsif !activity.description_nl.blank?
+            = sanitize activity.description_nl, tags: %w(strong em u s a br p span ol ul li pre blockquote sup sub), attributes: %w(style class href title)
+          - elsif !activity.description_en.blank?
+            = sanitize activity.description_en, tags: %w(strong em u s a br p span ol ul li pre blockquote sup sub), attributes: %w(style class href title)
+          - else
+            = I18n.t("activerecord.missing_value_placeholders.activity.description")
     - if !activity.notes.blank?
       .card-body.show-activity-topborder
         %strong