Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TinyMCE Related Console Warnings #3424

Open
aaronskiba opened this issue Jun 13, 2024 · 4 comments
Open

TinyMCE Related Console Warnings #3424

aaronskiba opened this issue Jun 13, 2024 · 4 comments
Assignees

Comments

@aaronskiba
Copy link
Contributor

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
    • Screenshot from 2024-06-13 11-04-37
  • Related code

    • app/javascript/src/superAdmin/notifications/edit.js
$(() => {
  Tinymce.init({ selector: '#notification_body', forced_root_block: '' });
    1. URL: http://127.0.0.1:3000/plans/:id (on any plan that has "Research outputs may have ethical concerns" checked)
    • Screenshot from 2024-06-13 11-06-34
  • 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
Copy link
Contributor Author

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: '' });

Screenshot from 2024-06-12 15-40-28

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' });

Screenshot from 2024-06-12 15-44-21

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' });

Screenshot from 2024-06-12 15-46-38

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' });

Screenshot from 2024-06-12 15-50-02

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
Copy link
Contributor Author

aaronskiba commented Jun 13, 2024

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
Copy link
Contributor Author

After removing TinyMCE editor resize code from app/javascript/src/utils/conditionalFields.js:
Screenshot from 2024-06-13 12-38-17
and experimenting with defaultOptions.min_height within app/javascript/src/utils/tinymce.js:
Screenshot from 2024-06-13 12-40-22
Screenshot from 2024-06-13 12-41-50

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

@aaronskiba
Copy link
Contributor Author

aaronskiba commented Jun 13, 2024

After removing TinyMCE editor resize code from app/javascript/src/utils/conditionalFields.js: Screenshot from 2024-06-13 12-38-17 and experimenting with defaultOptions.min_height within app/javascript/src/utils/tinymce.js: Screenshot from 2024-06-13 12-40-22 Screenshot from 2024-06-13 12-41-50

(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

Screenshot from 2024-06-13 12-47-23

//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/
Screenshot from 2024-06-13 13-18-16

aaronskiba added a commit that referenced this issue Jun 13, 2024
Prior to this change, `Invalid value passed for the forced_root_block option. Must be a non-empty string.` would be rendered as a console warning.

- This commit removes the console warning, but it shouldn't have an effect on the app's behaviour. Even when `forced_root_block: ''` existed, the entries would be saved with <p></p> tags surrounding them. (Documented here: #3424 (comment) )
aaronskiba added a commit that referenced this issue Jun 13, 2024
Prior to this change,`tinymceEditor.settings` was evaluating to `undefined`. Also, TinyMCE replaced `autoresize_min_height` replaced with `min_height` with the release of v5.
We have `min_height` included in our defaultOptions object within `app/javascript/src/utils/tinymce.js`. The value of `min_height` appears to be performing the functionality that this removed code was attempting to.

This change is more comprehensively documented here: #3424 (comment)
@aaronskiba aaronskiba self-assigned this Jun 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant