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)
4.1.1+portage-4.1.0-uat-3
4.1.1+portage-4.1.0-alpha-2

Actual behaviour:

• This version of the code is using "tinymce": "^7.0.0", https://github.com/portagenetwork/roadmap/blob/deployment-portage/package.json#L63
• 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/10523
  • 
• 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]

The current production instance, 4.0.2+portage-4.0.4, is using "tinymce": "^5.10.9",. The following deprecation warning is visible there:

(There is no autoresize_min_height warning/error there.)

[aaronskiba]

DMPRoadmap v4.1.0 included the upgrade to TinyMCE v6 https://github.com/DMPRoadmap/roadmap/releases/tag/v4.1.0.
Our codebase upgraded to TinyMCE v7 via the following Dependabot security PR: #704

The following TinyMCE console warnings are rendered for DMPRoadmap v4.2.0 (using "tinymce": "^6.4.1"):

So even if Portage Network were to revert from TinyMCE v7 back to TinyMCE v6, the same console warnings would still render.

[aaronskiba]

Resources:

https://www.tiny.cloud/docs/tinymce/6/migration-from-5x/

forced_root_block: ''
Option
forced_root_block must be a non-empty string and cannot take a value of false.

https://www.tiny.cloud/docs/tinymce/latest/migration-from-6x/

https://www.tiny.cloud/docs/tinymce/5/6.0-upcoming-changes/#disablingthedeprecationwarning

tinymce/tinymce#7342

[aaronskiba]

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 >