TinyMCE 7.2

These are the Tiny Cloud and TinyMCE Enterprise release notes. For information on the latest community version of TinyMCE, see the TinyMCE Changelog.

Overview

TinyMCE 7.2 was released for TinyMCE Enterprise and Tiny Cloud on Wednesday, June 19th, 2024. These release notes provide an overview of the changes for TinyMCE 7.2, including:

Accompanying Premium self-hosted server-side component changes

The TinyMCE 7.2 release includes accompanying changes affecting the TinyMCE self-hosted services for the following plugin:

  • Spell Checker plugin tinymcespellchecker.

For information on:

The Java server-side component has been updated to the following version:

  • ephox-spelling.war: 2.119.6

Updating the self-hosted server-side components

The new versions of the server-side services provide updates for the Java-based server-side components. To deploy the updated version of the server-side components:

  1. Update your Java Application Server to the minimum required version:

    • Eclipse Jetty:

      • 9.4+

    • WebSphere Application Server (WAS) 8 or later

    • Apache Tomcat:

      • 10 (See note below)

      • 9+

      • 8.5.12+

      • 8.0.42+

      • 7.0.76+

      Tomcat 10 will require WAR files to be placed in the webapp-javaee directory rather than the webapps directory due to the change to Jakarta servlets. Jetty 11 is not currently supported due to this change.

  2. Replace the existing server-side .war files with the .war files bundled with TinyMCE 7.2 or later.

For information on:

There are no functionality changes in these updated server-side components.

Accompanying Premium plugin changes

The following premium plugin updates were released alongside TinyMCE 7.2.

Accessibility Checker

The TinyMCE 7.2 release includes an accompanying release of the Accessibility Checker premium plugin.

Accessibility Checker includes the following fix.

Temporary elements such as incorrect spelling highlights were interfering with accessibility checking.

Previously, elements with certain attributes, such as highlights from the Spell Checker plugin, were not being ignored by some checks in the Accessibility Checker plugin.

As a consequence, these checks were not functioning correctly and were missing accessibility failures that should have been detected by the Accessibility Checker plugin.

TinyMCE 7.2 addresses this issue. Now, the checks have been modified to ignore all elements that should be excluded, such as those with specific attributes added by the Spell Checker plugin.

As a result, the Accessibility Checker now accurately identifies the accessibility issues in the content, even when temporary elements are present.

For information on the Accessibility Checker premium plugin, see: Accessibility Checker.

Image Editing

The TinyMCE 7.2 release includes an accompanying release of the Image Editing premium plugin.

Image Editing includes the following improvement.

Dialog slider components now emit an onChange event when using arrow keys.

Previously in the Edit Image dialog, when using the left/right arrow keys to adjust settings with sliders, the slider component did not properly update the image preview. As a consequence, users were unable to use the keyboard to update image properties controlled by sliders such as Brightness, Contrast, Color Levels, and Gamma settings.

In TinyMCE 7.2, this issue has been resolved. Now, the slider component emits an onChange event when the slider value is adjusted using the left/right arrow keys. As a result, users can now update the Edit Image dialog sliders using the keyboard.

For information on the Image Editing premium plugin, see: Image Editing.

Math

The TinyMCE 7.2 release includes an accompanying release of the Math premium plugin.

Math includes the following fix.

Math preview was not rendered with the colors from the current skin.

Previously, the Math preview did not follow the editor skin UI colors. As a consequence, the equation preview dialog was always rendered with black text on white background even if the UI skin was a dark skin.

This has been addressed in TinyMCE 7.2. Now, the editor renders the equation preview inline with the Math dialog, and not using an iframe, so that the preview container’s colors are inherited from the dialog. As a result, the text color and background color of the equation preview container now follows the editor skin UI colors.

For information on the Math premium plugin, see: Math.

PowerPaste

The TinyMCE 7.2 release includes an accompanying release of the PowerPaste premium plugin.

PowerPaste includes the following addition.

New option to disable the auto-linking feature in PowerPaste.

Previously in TinyMCE, it was not possible to configure PowerPaste to exclude converting text that resembles a URL into a hyperlink. As a consequence, all text that resembled a URL was automatically converted into a hyperlink when pasting plain text or rich text from HTML.

In TinyMCE 7.2, the powerpaste_autolink_urls option has been introduced. This option allows users to customize the auto-linking behavior on paste. As a result, users can now disable the auto-linking feature in PowerPaste.

This option is enabled by default and does not exhibit any change in behavior when upgrading to TinyMCE 7.2.

For more information on the powerpaste_autolink_urls option, refer to: PowerPaste - powerpaste_autolink_urls.

For information on the PowerPaste premium plugin, see: PowerPaste.

Revision History

The TinyMCE 7.2 release includes an accompanying release of the Revision History premium plugin.

Revision History includes the following addition.

New revisionhistory_fetch_revision option to support updating a revision.

In TinyMCE 7.2, a new revisionhistory_fetch_revision option has been added to enable updating a revision after the initial fetch. If configured, when a revision is selected, the plugin uses this option to update the selected or closest revision that has no content.

As part of this addition, the content property is now optional. For the fetched revisions, an empty string is considered as valid content.
The revisionhistory_fetch option must be configured when using the new revisionhistory_fetch_revision option, as it is required to provide the initial revisions.

For more information on the revisionhistory_fetch_revision option, see: Revision History - revisionhistory_fetch_revision.

This option is useful for handling revisions with large content or for loading content only when needed.

For information on the Revision History premium plugin, see: Revision History.

Spell Checker

The TinyMCE 7.2 includes an accompanying release of the Spell Checker premium plugin.

Spell Checker includes the following improvement.

Enhanced spelling service to support spellchecking for additional languages using customer-provided Hunspell dictionaries.

TinyMCE 7.2 introduces the following improvements for specified languages:

  • Medical English (US) was updated from "en_US-medical" to include "en-medical" as an additional code.

  • Dutch was updated from "nl" to "nl, nl_NL".

  • German was updated from "de" to "de, de_DE".

  • Italian was updated from "it" to "it, it_IT".

  • Norwegian Bokmål was updated from "nb" to "nb, nb_NO".

  • Portuguese (Brazil) was updated from "pt" to "pt, pt_BR".

  • Swedish was updated from "sv" to "sv, sv_SE".

For information on the Spell Checker premium plugin, see: Spell Checker plugin or for an complete list of supported languages, see: Supported languages.

Improvements

TinyMCE 7.2 also includes the following improvements:

Accessibility for element path buttons, added tooltip to describe the button and removed incorrect aria-level attribute.

In previous versions of TinyMCE, Axe-DevTools (web accessibility testing extension) identified that the element path buttons contained an invalid aria-level attribute that is not permitted on role="button" elements. As a consequence, screen readers were unable to describe the purpose of these buttons to visually impaired users.

TinyMCE 7.2 addresses this issue by adding tooltips to the buttons in the element path which now provides a description of the button’s functionality. In addition, the aria-describedby attribute has been added when the tooltip is focused, allowing screen readers to announce and describe the purpose of the button when in-focus. Now, a tooltip appears when hovering over an element path button with the mouse or focusing on it using the keyboard.

With this change TinyMCE also removed of the incorrect aria-level attribute that was added to these buttons previously. This change ensures that the editor complies with the "Elements must only use supported ARIA attributes" rule.

Improve merging of inserted inline elements by removing nodes with redundant inheritable styles.

In previous versions of TinyMCE, when inserting inline elements into existing inline elements, the editor would attempt to merge the contents of identical inline elements. Inserted inline elements would only be removed if they were identical to inline parents of the element being inserted into, and this check would only occur until it found a non-inheritable style or a conflict.

In TinyMCE 7.2, this behavior has been improved. Now, inserted inline elements are removed when they contain no non-inheritable styles, have only one child element, and either:

  • Contain no styles which are inherited in a child element, or

  • Are identical to any inline parent of the selected element and don’t contain any styles which conflict with another inserted parent’s styles.

As a result, many redundant inline elements are automatically stripped when inserted into the editor, while maintaining their appearance and overall element structure.

Improved Search & Replace dialog accessibility by changing placeholders to labels.

In previous versions of TinyMCE, the Search & Replace dialog inputs were initially implemented with placeholders.

As a consequence, the dialog was less accessible because the input placeholders were hidden once the user started typing. This posed difficulties for users who rely on consistent visual cues for context.

TinyMCE 7.2 addresses this issue. Now, placeholders have been replaced by input labels located above the input fields.

As a result, the Search & Replace dialog is now more accessible and there are input labels that remain visible at all times.

Additions

TinyMCE 7.2 also includes the following additions:

Added options.debug API that logs the initial raw editor options to console.

This release introduces a new options.debug API that logs the initial raw editor options passed to tinymce.init to the console. This API is useful for debugging and troubleshooting issues with the editor, especially when dynamically composing many editor options from different sources.

Usage:

tinymce.activeEditor.options.debug();

The following data types are logged exactly as they are passed to tinymce.init:

  • string

  • number

  • boolean

  • object

  • array

  • null

All other data types not mentioned above are logged as [object X] where "X" is the type of the object, such as:

  • Function

  • Undefined

  • RegExp

  • Promise

  • and more

Example: using the options.debug API:

tinymce.init({
  selector: 'textarea',
  height: 500,
  paste_as_text: true,
  context_menu: [ 'image', 'lists' ],
  menu: { insert: { title: 'Insert', items: 'table | image | accordion' }},
  inline: null,
  myUndefined: undefined,
  init_instance_callback: (editor) => editor.options.debug(),
});

The above code will log the following to the console:

{
  selector: 'textarea',
  height: 500,
  paste_as_text: true,
  context_menu: [ 'image', 'lists' ],
  menu: { insert: { title: 'Insert', items: 'table | image | accordion' }},
  inline: null,
  myUndefined: [object Undefined],
  init_instance_callback: [object Function],
}

Added referrerpolicy as a valid attribute for an iframe element.

Previously in TinyMCE, the referrerpolicy attribute was not considered as valid for iframe elements. In TinyMCE 7.2, this attribute has been added to the schema, allowing users to include the referrerpolicy attribute in iframes.

Added support for querying the state of the mceTogglePlainTextPaste command.

In TinyMCE 7.2, the mceTogglePlainTextPaste command has been updated to support querying its state. This allows users to determine whether the paste-as-text mode is currently active.

The mceTogglePlainTextPaste command can be queried using the following API:

tinymce.activeEditor.queryCommandState('mceTogglePlainTextPaste');

Changes

TinyMCE 7.2 also includes the following change:

Previously, the branding logo in the TinyMCE status bar was set to the Tiny logo.

Now, the branding logo in the TinyMCE status bar is set to Build with and the TinyMCE logo.

Bug fixes

TinyMCE 7.2 also includes the following bug fixes:

Deleting in a div with preceding br elements would sometimes throw errors.

Previously, when deleting the last character in a <div> element with preceding <br> elements, an error (Uncaught DOMException: Failed to execute 'setStart' on 'Range': There is no child at offset) was thrown to the console, and the <div> element was incorrectly converted to a <p> element.

TinyMCE 7.2 addresses this issue. The delete logic has been modified to properly handle this situation. After the fix, the <div> element remains a <div>, and no error is thrown to the console when deleting the last character.

autoresize_bottom_margin was not reliably applied in some situations.

In TinyMCE 6.4.1, a fix addressed an issue where the editor’s height would increase indefinitely when using the Autoresize plugin with content_css set to document. This fix inadvertently caused a regression, resulting in the editor occasionally failing to apply bottom padding correctly.

As a result, the autoresize_bottom_margin was not consistently applied in certain scenarios.

In TinyMCE 7.2, this issue has been resolved, and the autoresize_bottom_margin is now reliably applied.

Fixed cases where adding a newline around a br, table or img would not move the cursor to a new line.

In previous versions of TinyMCE, an issue affecting cursor positioning was identified when adding new lines around specific HTML elements such as <br>, <table>, and <img> tags.

As a consequence, the cursor failed to move to a new line when adding a newline around these elements, resulting in unexpected behavior while editing content within the editor.

With the release of TinyMCE 7.2, this issue has been addressed. The editor now accurately interprets the presence of spaces or newlines after certain HTML elements. As a result, cursor movement behaves as expected when adding new lines around <br>, <table>, and <img> tags.

Focusing on contenteditable="true" element when using editable_root: false and inline mode caused selection to be shifted.

Previously in TinyMCE, there was an issue where focusing on contenteditable="true" elements, such as media elements, while using editable_root: false and inline mode would cause the selection to be shifted. When saving the media dialog, the focus would first shift to the editor to ensure the changes are inserted into the editor. However, this caused the selection to change, leading to a duplicated element being inserted into the editor.

This issue has been resolved in TinyMCE 7.2. Now, after focusing on the contenteditable="true" root, the editor bookmark is restored, ensuring that the selection remains at the correct location when saving the media.

As a result, when focusing on contenteditable="true" elements in inline mode with editable_root: false, the selection will remain correct after saving the media dialog. This prevents the duplication of elements and ensures that the changes are inserted at the intended location within the editor.

Corrected the role attribute on listbox dialog components to combobox when there are no nested menu items.

Previously in TinyMCE, the role attribute on listbox dialog components was set to menu when there were no nested menu items. This caused confusion for users, as screen readers would announce non-hierarchical listboxes as menu buttons.

In TinyMCE 7.2, this issue has been addressed by setting the role attribute to combobox when there are no nested menu items.

As a result, screen readers now announce the listbox as a combobox and the menu it opens as a listbox. This improvement ensures that the currently selected value is announced when tabbing to the select box, and the selected items are announced as a listbox.

Security fixes

TinyMCE 7.2 includes two fixes for the following security issues:

HTML entities that were double decoded in noscript elements caused an XSS vulnerability.

A cross-site scripting (XSS) vulnerability was discovered in TinyMCE’s content parsing code. This allowed specially crafted noscript elements containing malicious code to be executed when that content was loaded into the editor.

This vulnerability has been patched in TinyMCE 7.2, TinyMCE 6.8.4 and TinyMCE 5.11.0 LTS by ensuring that content within noscript elements are properly parsed.

GHSA: GitHub Advisory.

CVE: CVE-2024-38357.

Tiny Technologies would like to thank Malav Khatri (devilbugbounty) and another reporter for discovering this vulnerability.

It was possible to inject XSS HTML that was not matching the regexp when using the noneditable_regexp option.

A cross-site scripting (XSS) vulnerability was discovered in TinyMCE’s content extraction code. When using the noneditable_regexp option, specially crafted HTML attributes containing malicious code were able to be executed when content was extracted from the editor.

This vulnerability has been patched in TinyMCE 7.2, TinyMCE 6.8.4 and TinyMCE 5.11.0 LTS by ensuring that, when using the noneditable_regexp option, any content within an attribute is properly verified to match the configured regular expression before being added.

GHSA: GitHub Advisory.

CVE: CVE-2024-38356.