Fix rendering of HTML in RTE fields [SCI-3111]

app/assets/javascripts/my_modules/protocols.js.erb

@@ -22,13 +22,13 @@ function init() {
 }
 
 function initEditMyModuleDescription() {
-  $('#my_module_description_textarea').on('click', function(){
+  $('#my_module_description_view').on('click', function(){
     TinyMCE.init('#my_module_description_textarea');
   });
 }
 
 function initEditProtocolDescription() {
-  $('#protocol_description_textarea').on('click', function(){
+  $('#protocol_description_view').on('click', function(){
     TinyMCE.init('#protocol_description_textarea');
   });
 }

app/assets/javascripts/sitewide/tiny_mce.js

@@ -19,6 +19,9 @@ var TinyMCE = (function() {
   return Object.freeze({
     init: function(selector) {
       if (typeof tinyMCE !== 'undefined') {
+        // Hide element containing HTML view of RTE field
+        $(selector).closest('form').find('.tinymce-view').addClass('hidden');
+
         tinyMCE.init({
           cache_suffix: '?v=4.9.3', // This suffix should be changed any time library is updated
           selector: selector,
@@ -140,6 +143,7 @@ var TinyMCE = (function() {
                 if (editor.isDirty()) {
                   editor.setContent($(selector).val());
                 }
+                editorForm.find('.tinymce-status-badge').addClass('hidden');
                 editor.remove();
               })
               .removeClass('hidden');
@@ -172,9 +176,11 @@ var TinyMCE = (function() {
             });
 
             editor.on('remove', function() {
+              var editorForm = $(editor.getContainer()).closest('form');
               var menuBar = $(editor.getContainer()).find('.mce-menubar.mce-toolbar.mce-first .mce-flow-layout');
               menuBar.find('.tinymce-save-button').remove();
               menuBar.find('.tinymce-cancel-button').remove();
+              editorForm.find('.tinymce-view').html(editor.getContent()).removeClass('hidden');
             });
           },
           codesample_content_css: $(selector).data('highlightjs-path')

app/assets/stylesheets/my_modules.scss

@@ -4,15 +4,6 @@
 
 @import "constants";
 
-.tinymce-textarea {
-  border-color: $color-white;
-
-  &:hover {
-    border-color: $color-alto;
-    cursor: pointer;
-  }
-}
-
 .protocol-description-content {
   margin-top: 20px;
 }

app/assets/stylesheets/tiny_mce.scss

@@ -1,5 +1,23 @@
 @import "constants";
 
+.tinymce-view {
+  border: solid 1px;
+  border-color: $color-white;
+  box-shadow: 1px 0 2px $color-alto;
+  min-height: 200px;
+  padding: 3px;
+
+  &:hover {
+    border-color: $color-alto;
+    cursor: pointer;
+  }
+
+  &:empty::before {
+    color: $color-silver-chalice;
+    content: attr(data-placeholder);
+  }
+}
+
 .tinymce-save-button,
 .tinymce-cancel-button {
   cursor: pointer;

app/helpers/bootstrap_form_helper.rb

@@ -270,7 +270,7 @@ module BootstrapFormHelper
 
     # Returns <textarea> helper tag for tinyMCE editor
     def tiny_mce_editor(name, options = {})
-      options.merge!(class: 'tinymce-textarea', cols: 120, rows: 10)
+      options.merge!(cols: 120, rows: 10)
       text_area(name, options)
     end
   end

app/views/my_modules/_description_form.html.erb

@@ -1,10 +1,24 @@
 <%= bootstrap_form_for @my_module, url: my_module_path(@my_module, format: :json), remote: :true do |f| %>
   <%= render partial: 'shared/tiny_mce_extra_buttons.html.erb' %>
+  <% if @my_module.description.present? %>
+    <div id="my_module_description_view"
+         class="ql-editor tinymce-view"
+         data-placeholder="<%= t('my_modules.module_header.empty_description_edit_label') %>">
+        <%= custom_auto_link(generate_image_tag_from_token(@my_module.description, @my_module),
+                             simple_format: false,
+                             tags: %w(img),
+                             team: current_team) %>
+    </div>
+  <% else %>
+    <div id="my_module_description_view"
+         class="ql-editor tinymce-view"
+         data-placeholder="<%= t('my_modules.module_header.empty_description_edit_label') %>"></div>
+  <% end %>
   <%= f.tiny_mce_editor(:description,
                         id: :my_module_description_textarea,
+                        class: 'hidden',
                         hide_label: true,
                         value: sanitize_input(@my_module.description),
-                        placeholder: t('my_modules.module_header.empty_description_edit_label'),
                         data: {
                           object_type: 'my_module',
                           object_id: @my_module.id,

app/views/my_modules/_module_header.html.erb

@@ -88,7 +88,10 @@
       <% if can_manage_module?(@my_module) %>
         <%= render partial: "description_form" %>
       <% elsif @my_module.description.present? %>
-        <%= sanitize_input(@my_module.description) %>
+        <%= custom_auto_link(generate_image_tag_from_token(@my_module.description, @my_module),
+                             simple_format: false,
+                             tags: %w(img),
+                             team: current_team) %>
       <% else %>
         <%= t('my_modules.module_header.no_description') %>
       <% end %>

app/views/my_modules/protocols.html.erb

@@ -2,7 +2,7 @@
 
 <%= render partial: 'shared/drag_n_drop_overlay' %>
 <%= render partial: "shared/sidebar", locals: { current_task: @my_module, page: 'task' } %>
-<%= render partial: "shared/secondary_navigation", locals: { 
+<%= render partial: "shared/secondary_navigation", locals: {
   editable: {
     name: 'title',
     active: true,
@@ -34,7 +34,10 @@
         <% if can_manage_module?(@my_module) %>
           <%= render partial: "my_modules/protocols/protocol_description_form" %>
         <% elsif @my_module.protocol.description.present? %>
-          <%= sanitize_input(@my_module.protocol.description) %>
+          <%= custom_auto_link(generate_image_tag_from_token(@my_module.protocol.description, @my_module.protocol),
+                               simple_format: false,
+                               tags: %w(img),
+                               team: current_team) %>
         <% else %>
           <%= t('my_modules.protocols.protocol_status_bar.no_description') %>
         <% end %>

app/views/my_modules/protocols/_protocol_description_form.html.erb

@@ -1,10 +1,24 @@
 <%= bootstrap_form_for @my_module.protocol, url: update_protocol_description_my_module_path(@my_module, format: :json), remote: :true do |f| %>
   <%= render partial: 'shared/tiny_mce_extra_buttons.html.erb' %>
+  <% if @my_module.protocol.description.present? %>
+    <div id="protocol_description_view"
+         class="ql-editor tinymce-view"
+         data-placeholder="<%= t('my_modules.protocols.protocol_status_bar.empty_description_edit_label') %>">
+      <%= custom_auto_link(generate_image_tag_from_token(@my_module.protocol.description, @my_module.protocol),
+                           simple_format: false,
+                           tags: %w(img),
+                           team: current_team) %>
+    </div>
+  <% else %>
+    <div id="protocol_description_view"
+         class="ql-editor tinymce-view"
+         data-placeholder="<%= t('my_modules.protocols.protocol_status_bar.empty_description_edit_label') %>"></div>
+  <% end %>
   <%= f.tiny_mce_editor(:description,
                         id: :protocol_description_textarea,
+                        class: 'hidden',
                         hide_label: true,
                         value: sanitize_input(@my_module.protocol.description),
-                        placeholder: t('my_modules.protocols.protocol_status_bar.empty_description_edit_label'),
                         data: {
                           object_type: 'protocol',
                           object_id: @my_module.protocol.id,