Tinymce v6

CHANGELOG.md

@@ -16,6 +16,15 @@
 - Froze `lib/deprecators/*.rb` constants that were Strings
 - Updated places that were incorrectly using keyword args. See [this article](https://makandracards.com/makandra/496481-changes-to-positional-and-keyword-args-in-ruby-3-0) for an overview
 
+#### Upgraded TinyMCE to v6
+
+- Upgraded TinyMCE to v6 (v5 EOL is April 20 2023)
+- Adjusted JS code to conform to new TinyMCE version
+- Adjusted views to work with the new version
+- Updated variables.scss file to fix issue with button text/background color contrast
+- Updated blocks/_tables.scss to fix issue with dropdown menu overlap against table
+- updated config/initializers/assets.rb to copy over the tinymce skins and bootstrap glyphicons to the public directory so that they are accessible by TinyMCE and Bootstrap code
+
 #### Removed webpacker gem
 
 As Webpacker is no longer maintained by the Rails community, we have replaced it by `jsbundling-rails` and `cssbundling-rails` for the Javascript & CSS compilation.

app/assets/stylesheets/blocks/_buttons.scss

@@ -15,6 +15,7 @@
 .btn-primary.active:hover {
   background-color: $color-primary-background;
   border-color: $color-border-default;
+  color: $color-primary-text;
   outline: none;
   margin-top: 5px;
   margin-bottom: 10px;
@@ -30,6 +31,7 @@
 .btn-default.active:hover {
   background-color: $color-primary-background;
   border-color: $color-border-default;
+  color: $color-primary-text;
   outline: none;
   margin-top: 5px;
   margin-bottom: 10px;

app/javascript/src/guidances/newEdit.js

@@ -1,4 +1,4 @@
-import { Tinymce } from '../utils/tinymce.js.erb';
+import { Tinymce } from '../utils/tinymce.js';
 
 $(() => {
   Tinymce.init({ selector: '#guidance_text' });

app/javascript/src/notes/index.js

@@ -1,4 +1,4 @@
-import { Tinymce } from '../utils/tinymce.js.erb';
+import { Tinymce } from '../utils/tinymce.js';
 import { isObject, isString } from '../utils/isType';
 import TimeagoFactory from '../utils/timeagoFactory.js.erb';
 
@@ -160,7 +160,9 @@ $(() => {
     $('.archive_note button[type="button"]')[attachment]('click', noteCancelHandler);
   };
   const initOrReload = () => {
-    Tinymce.init({ selector: '.note' });
+    $('.note').each((_idx, el) => {
+      Tinymce.init({ selector: `#${$(el).attr('id')}` });
+    });
     eventHandlers({ attachment: 'on' });
     TimeagoFactory.render($('time.timeago'));
   };

app/javascript/src/orgAdmin/phases/newEdit.js

@@ -1,5 +1,5 @@
 // import 'bootstrap-sass/assets/javascripts/bootstrap/collapse';
-import { Tinymce } from '../../utils/tinymce.js.erb';
+import { Tinymce } from '../../utils/tinymce.js';
 import { isObject, isString } from '../../utils/isType';
 import getConstant from '../../utils/constants';
 import { addAsterisks } from '../../utils/requiredField';
@@ -9,7 +9,7 @@ import initQuestionOption from '../questionOptions/index';
 import updateConditions from '../conditions/updateConditions';
 
 $(() => {
-  Tinymce.init({ selector: '.phase' });
+  Tinymce.init({ selector: '#phase_description' });
   const parentSelector = '.section-group';
 
   const initQuestion = (context) => {
@@ -61,36 +61,29 @@ $(() => {
       // For some reason the toolbar options are retained after the call to Tinymce.init() on
       // the views/notifications/edit.js file. Tried 'Object.assign' instead of '$.extend' but it
       // made no difference
+      const prefix = 'collapseSection'
+      let sectionId = selector;
+      if (sectionId.startsWith(prefix)) {
+        sectionId = `sc_${sectionId.replace(prefix, '')}_section_description`
+      }
+
       Tinymce.init({
-        selector: `${selector} .section`,
-        init_instance_callback(editor) {
+        selector: `#${sectionId}`,
+        init_instance_callback: (editor) => {
           // When the text editor changes to blank, set the corresponding destroy
           // field to true (if present).
-          editor.on('Change', () => {
-            const $texteditor = $(editor.targetElm);
+          editor.on('Change', (ed) => {
+            const $texteditor = $(ed.getContentAreaContainer());
             const $fieldset = $texteditor.parents('fieldset');
             const $hiddenField = $fieldset.find('input[type=hidden][id$="_destroy"]');
-            $hiddenField.val(editor.getContent() === '');
+            $hiddenField.val(ed.getContent() === '');
           });
         },
       });
+
       const questionForm = $(selector).find('.question_form');
       if (questionForm.length > 0) {
-        // Load Tinymce when the 'show' form has a question form.
-        // ONLY applicable for template customizations
-        Tinymce.init({
-          selector: `${selector} .question_form .question`,
-          init_instance_callback(editor) {
-            // When the text editor changes to blank, set the corresponding destroy
-            // field to true (if present).
-            editor.on('Change', () => {
-              const $texteditor = $(editor.targetElm);
-              const $fieldset = $texteditor.parents('fieldset');
-              const $hiddenField = $fieldset.find('input[type=hidden][id$="_destroy"]');
-              $hiddenField.val(editor.getContent() === '');
-            });
-          },
-        });
+        initQuestion(selector);
       }
     }
   };
@@ -108,8 +101,9 @@ $(() => {
       // Display the section's html
       panelBody.attr('data-loaded', 'true');
       panelBody.html(e.detail[0].html);
+
       // Wire up the section
-      initSection(`#${panel.attr('id')}`);
+      initSection(`${panel.attr('id')}`);
     }
   });
 
@@ -158,8 +152,9 @@ $(() => {
   // Handle the section that has focus on initial page load
   const currentSection = $('.section-group .in');
   if (currentSection.length > 0) {
-    initSection(`#${currentSection.attr('id')}`);
+    initSection(`${currentSection.attr('id')}`);
   }
   // Handle the new section
-  initSection('#new_section_new_section');
+  // initSection('#new_section_section_description');
+  Tinymce.init({ selector: '#new_section_section_description' });
 });

app/javascript/src/orgAdmin/templates/edit.js

@@ -1,12 +1,12 @@
-import { Tinymce } from '../../utils/tinymce.js.erb';
+import { Tinymce } from '../../utils/tinymce.js';
 import { eachLinks } from '../../utils/links';
 import { isObject, isString } from '../../utils/isType';
 import { renderNotice, renderAlert } from '../../utils/notificationHelper';
 import { scrollTo } from '../../utils/scrollTo';
 
 $(() => {
   Tinymce.init({
-    selector: '.template',
+    selector: '#template_description',
     init_instance_callback(editor) {
       // When the text editor changes to blank, set the corresponding destroy
       // field to true (if present).

app/javascript/src/orgAdmin/templates/new.js

@@ -1,9 +1,9 @@
-import { Tinymce } from '../../utils/tinymce.js.erb';
+import { Tinymce } from '../../utils/tinymce.js';
 import { eachLinks } from '../../utils/links';
 
 $(() => {
   Tinymce.init({
-    selector: '.template',
+    selector: '#template_description',
     init_instance_callback(editor) {
       // When the text editor changes to blank, set the corresponding destroy
       // field to true (if present).

app/javascript/src/orgs/adminEdit.js

@@ -1,7 +1,7 @@
 // TODO: we need to be able to swap in the appropriate locale here
 import 'number-to-text/converters/en-us';
 import { isObject } from '../utils/isType';
-import { Tinymce } from '../utils/tinymce.js.erb';
+import { Tinymce } from '../utils/tinymce.js';
 import { eachLinks } from '../utils/links';
 import { initAutocomplete, scrubOrgSelectionParamsOnSubmit } from '../utils/autoComplete';
 

app/javascript/src/plans/editDetails.js

@@ -1,5 +1,5 @@
 import { initAutocomplete, scrubOrgSelectionParamsOnSubmit } from '../utils/autoComplete';
-import { Tinymce } from '../utils/tinymce.js.erb';
+import { Tinymce } from '../utils/tinymce.js';
 import toggleConditionalFields from '../utils/conditionalFields';
 import getConstant from '../utils/constants';
 
@@ -10,8 +10,8 @@ $(() => {
   const form = $('form.edit_plan');
 
   if (form.length > 0) {
-    Tinymce.init({ selector: '#plan_description' });
-    Tinymce.init({ selector: '#plan_ethical_issues_description' });
+    Tinymce.init({ selector: 'textarea#plan_description' });
+    Tinymce.init({ selector: 'textarea#plan_ethical_issues_description' });
 
     $('#is_test').click((e) => {
       $('#plan_visibility').val($(e.target).is(':checked') ? 'is_test' : 'privately_visible');

app/javascript/src/researchOutputs/form.js

@@ -1,6 +1,6 @@
 import getConstant from '../utils/constants';
 import { isUndefined, isObject } from '../utils/isType';
-import { Tinymce } from '../utils/tinymce.js.erb';
+import { Tinymce } from '../utils/tinymce.js';
 
 $(() => {
   const form = $('.research_output_form');

app/javascript/src/superAdmin/notifications/edit.js

@@ -1,11 +1,11 @@
-import { Tinymce } from '../../utils/tinymce.js.erb';
+import { Tinymce } from '../../utils/tinymce.js';
 
 // add the info on selecting the check from notification suitable
 import { paginableSelector } from '../../utils/paginable';
 import * as notifier from '../../utils/notificationHelper';
 
 $(() => {
-  Tinymce.init({ selector: '.notification-text', forced_root_block: '' });
+  Tinymce.init({ selector: '#notification_body', forced_root_block: '' });
 
   $(paginableSelector).on('click, change', '.enable_notification input[type="checkbox"]', (e) => {
     const form = $(e.target).closest('form');

app/javascript/src/superAdmin/themes/newEdit.js

@@ -1,4 +1,4 @@
-import { Tinymce } from '../../utils/tinymce.js.erb';
+import { Tinymce } from '../../utils/tinymce.js';
 
 $(() => {
   Tinymce.init({ selector: '#theme_description' });

app/javascript/src/utils/conditionalFields.js

@@ -6,7 +6,7 @@
 // For example see: app/views/plans/_edit_details.html.erb
 //                  app/javascript/src/plans/editDetails.js
 //
-import { Tinymce } from './tinymce.js.erb';
+import { Tinymce } from './tinymce.js';
 
 // Expecting `context` to be the field that triggers the hide/show of the corresponding fields
 export default function toggleConditionalFields(context, showThem) {