TinyMCE Related Console Warnings

[aaronskiba]

Please complete the following fields as applicable:

What version of the DMPRoadmap code are you running? (e.g. v2.2.0)
v4.2.0 ("tinymce": "^6.4.1")

Description

• The following console warnings are visible with this version

• 1. URL: http://127.0.0.1:3000/super_admin/notifications/9/edit
  • 

• Related code

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

$(() => {
  Tinymce.init({ selector: '#notification_body', forced_root_block: '' });

• 2. URL: http://127.0.0.1:3000/plans/:id (on any plan that has "Research outputs may have ethical concerns" checked)
  • 

• Related code

  • app/javascript/src/utils/conditionalFields.js

      // Resize any TinyMCE editors
      container.find('.toggleable-field').find('.tinymce').each((_idx, el) => {
        const tinymceEditor = Tinymce.findEditorById($(el).attr('id'));
        if (tinymceEditor) {
          $(tinymceEditor.iframeElement).height(tinymceEditor.settings.autoresize_min_height);
        }
      });

[aaronskiba]

Testing forced_root_block:

forced_root_block: '' seems to default to forced_root_block: 'p', which is the same behaviour as not explicitly stating the forced_root_block: arg at all.

rails assets:clobber && rails assets:precompile was executed between code changes:

forced_root_block: ''

// app/javascript/src/superAdmin/notifications/edit.js
$(() => {
  Tinymce.init({ selector: '#notification_body', forced_root_block: '' });

3.0.5 :001 > Notification.last.body
  Notification Load (0.7ms)  SELECT "notifications".* FROM "notifications" ORDER BY "notifications"."id" DESC LIMIT $1  [["LIMIT", 1]]
 => "<p>Test 1</p>" 
3.0.5 :002 > 

forced_root_block: 'div'

// app/javascript/src/superAdmin/notifications/edit.js
$(() => {
  Tinymce.init({ selector: '#notification_body', forced_root_block: 'div' });

3.0.5 :002 > Notification.last.body
  Notification Load (1.9ms)  SELECT "notifications".* FROM "notifications" ORDER BY "notifications"."id" DESC LIMIT $1  [["LIMIT", 1]]
 => "<div>Test 2</div>" 
3.0.5 :003 > 

forced_root_block: 'p'

$(() => {
  Tinymce.init({ selector: '#notification_body', forced_root_block: 'p' });

3.0.5 :003 > Notification.last.body
  Notification Load (1.6ms)  SELECT "notifications".* FROM "notifications" ORDER BY "notifications"."id" DESC LIMIT $1  [["LIMIT", 1]]
 => "<p>Test 3</p>" 
3.0.5 :004 > 

Without forced_root_block: arg

$(() => {
  Tinymce.init({ selector: '#notification_body' });

3.0.5 :004 > Notification.last.body
  Notification Load (2.0ms)  SELECT "notifications".* FROM "notifications" ORDER BY "notifications"."id" DESC LIMIT $1  [["LIMIT", 1]]
 => "<p>Test 4</p>" 
3.0.5 :005 > 

[aaronskiba]

Testing autoresize_min_height:

tinymceEditor.settings is undefined

      container.find('.toggleable-field').find('.tinymce').each((_idx, el) => {
        const tinymceEditor = Tinymce.findEditorById($(el).attr('id'));
        if (tinymceEditor) {
          console.log('tinymceEditor: ', tinymceEditor);
          console.log('tinymceEditor.settings: ', tinymceEditor.settings);
          $(tinymceEditor.iframeElement).height(tinymceEditor.settings.autoresize_min_height);
        }
      });

Console Output:

tinymceEditor:  GD {plugins: {…}, contentCSS: Array(0), contentStyles: Array(0), loadedCSS: {…}, isNotDirty: true, …}
application.source.js:2 tinymceEditor.settings:  undefined

[aaronskiba]

After removing TinyMCE editor resize code from app/javascript/src/utils/conditionalFields.js:

and experimenting with defaultOptions.min_height within app/javascript/src/utils/tinymce.js:

(The same behaviour is observed even when we don't edit the code within app/javascript/src/utils/conditionalFields.js.)

[aaronskiba]

After removing TinyMCE editor resize code from app/javascript/src/utils/conditionalFields.js: and experimenting with defaultOptions.min_height within app/javascript/src/utils/tinymce.js:

(The same behaviour is observed even when we don't edit the code within app/javascript/src/utils/conditionalFields.js.)

The following describes the observed behaviour:

https://www.tiny.cloud/docs/tinymce/latest/autoresize/#min_height

//app/javascript/src/utils/tinymce.js
export const defaultOptions = {
  selector: '.tinymce',
  statusbar: true,
  menubar: false,
  toolbar: 'bold italic | bullist numlist | link | table',
  plugins: 'table autoresize link advlist lists autolink',
  browser_spellcheck: true,
  advlist_bullet_styles: 'circle,disc,square', // Only disc bullets display on htmltoword
  target_list: false,
  elementpath: false,
  resize: true,
  min_height: 230,

Our codebase has 'autoresize' included within plugins: and min_height: 230. Thus, 230 is the minimum height that the editor can be shrunk down to.

Also, autoresize_min_height was replaced with min_height in tinymce v5:

https://www.tiny.cloud/blog/how-to-migrate-from-tinymce-4-to-tinymce-5/