TinyMCE 7.3

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.3 was released for TinyMCE Enterprise and Tiny Cloud on Wednesday, August 7th, 2024. These release notes provide an overview of the changes for TinyMCE 7.3, including:

Accompanying Premium plugin changes

The following premium plugin updates were released alongside TinyMCE 7.3.

AI Assistant

The TinyMCE 7.3 release includes an accompanying release of the AI Assistant premium plugin.

AI Assistant includes the following addition.

Add "Translate" options to AI Assistant default shortcuts.

The AI Assistant required an enhancement to support in-editor translation capabilities.

TinyMCE 7.3 introduces a new translate dropdown, that has been added to the AI Assistant’s default shortcuts. The dropdown includes language options: English, Spanish, Portuguese, German, French, Norwegian, Ukrainian, Japanese, Korean, Simplified Chinese, Hebrew, Hindi, and Arabic.

As a result, users can seamlessly translate content within the editor into multiple languages with a single "click".

For information on the AI Assistant premium plugin, see: AI Assistant.

Enhanced Code Editor

The TinyMCE 7.3 release includes an accompanying release of the Enhanced Code Editor premium plugin.

Enhanced Code Editor includes the following improvements.

Added new option advcode_prettify_getcontent to Enhanced Code Editor.

Previously, formatting HTML content within the Enhanced Code Editor view or retrieving formatted HTML from the editor.getContent API as not possible.

To resolve this issue, TinyMCE 7.3 introduces a new advcode_prettify_getcontent option. When enabled (default: false), editor.getContent will return formatted HTML. Additionally, invoking editor.getContent({ prettify: true }) will retrieve formatted HTML content regardless of the option’s status.

As a result, It is now possible to obtain formatted content through the editor API.

By default, code is now formatted automatically when the Enhanced Code Editor view is opened.

Previously, the Enhanced Code Editor plugin did not automatically format code with indentation, resulting in less readable source code for users.

With TinyMCE 7.3, the new advcode_prettify_editor option has been introduced. By default, this option is set to true, ensuring that HTML content is automatically formatted upon opening the Enhanced Code Editor view.

Additionally, users can now format either all content within the Enhanced Code Editor or a specific context selection when clicking on the "Format Code" button.

As a result, code within the Enhanced Code Editor is now more readable.

For more information on the Enhanced Code Editor premium plugin, see: Enhanced Code Editor.

Markdown

The TinyMCE 7.3 release includes an accompanying release of the Markdown premium plugin.

This Markdown premium plugin release includes the following improvement:

Markdown will now respect the 'Paste as Text' menu option.

In previous versions of the Markdown plugin, pasting text would always modify the content, even if the "Paste as Text" option was active. This caused HTML documents to be altered during paste operations, affecting elements like newlines.

TinyMCE 7.3 resolves this issue. Now, pasting Markdown does not trigger conversion when the "Paste as Text" button is active.

For information on the Markdown plugin, see Markdown.

Math Plugin

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

This Math premium plugin release includes the following improvement:

Double-clicking on a math element now opens the Edit Math dialog.

In earlier versions of the Math plugin, the double-click handler was not implemented, preventing users from opening the Math dialog by double-clicking on a math element within the editor. This behavior was inconsistent with other plugins, such as the code sample dialog.

To address this inconsistency, TinyMCE 7.3 introduced a double-click handler for the Math dialog.

Now, users can open the Math dialog by double-clicking on a math element, aligning with the functionality of other plugins.

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

Revision History

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

Revision History includes the following additions, changes, and improvements.

An author is now shown for revisions. Revisions created without an author will show as "Anonymous".

In TinyMCE 7.3, the Revision History premium plugin now displays the author for each revision in the Revision History sidebar. Revisions without an author will be marked as "Anonymous" and accompanied by an auto-generated avatar.

This feature enhancement aims to improve traceability and accountability for content revisions.

New option revisionhistory_author for setting the current author.

In TinyMCE 7.3, the Revision History premium plugin includes a new option revisionhistory_author for setting the author for the initial and draft revisions. This option expects an Author object as its value.

The revisionhistory_display_author option must be set to true to display the authors.
Example
tinymce.init({
  selector: 'textarea',  // Change this value according to your HTML
  plugins: 'revisionhistory',
  toolbar: 'revisionhistory',
  revisionhistory_fetch: () => Promise.resolve([]), // Required option for the plugin - replace with actual API request
  revisionhistory_display_author: true,
  revisionhistory_author: {
    id: 'john.doe',
    name: 'John Doe',
    avatar: 'https://example.com/avatar.jpg'
  }
});

For more information on the revisionhistory_author option, see: revisionhistory_author option.

New revisionhistory_display_author option that determines whether the author is displayed.

In TinyMCE 7.3, the Revision History premium plugin includes a new option revisionhistory_display_author that expects a boolean value. When set to true, the author is displayed on each revision in the Revision History sidebar.

Example
tinymce.init({
  selector: 'textarea',  // Change this value according to your HTML
  plugins: 'revisionhistory',
  toolbar: 'revisionhistory',
  revisionhistory_fetch: () => Promise.resolve([]), // Required option for the plugin - replace with actual API request
  revisionhistory_display_author: true
});

For more information on the revisionhistory_display_author option, see: revisionhistory_display_author option.

Enhance the appearance of the Revision History sidebar.

In TinyMCE 7.3, the Revision History premium plugin features an enhanced design for the Revision History sidebar. The sidebar has been updated to align better with the new author information and the TinyMCE oxide-dark skin.

Add a label to the initial and draft revisions.

In TinyMCE 7.3, the Revision History premium plugin now includes labels for the initial and draft revisions. These labels are displayed in the Revision History sidebar, providing users with a clear identification of the initial and draft revisions when present.

It is easier to identify the selected revision.

In TinyMCE 7.3, the Revision History premium plugin now includes a check icon to improve identification of the selected revision. Additionally, improvements have been made to the layout of the selected revision for enhanced visibility and clarity.

"Restore this version" button is now disabled when a draft or initial revision is selected.

Previously in TinyMCE, the Revision History premium plugin allowed users to restore any revision. In TinyMCE 7.3, the Revision History now disables the "Restore this version" button when a draft or initial revision is selected.

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

Spell Checker

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

Spell Checker includes the following improvement.

Added success notification when all misspellings are resolved.

Previously, when all misspelled words within the spelling dialog were resolved, the editor displayed a misleading notification: "No misspellings found." This message did not accurately reflect the user’s actions.

To address this issue, TinyMCE 7.3 introduces a new success notification. Now, when all misspelled words are resolved, the editor displays a success notification with the text "Spell check complete."

As a result, users are now correctly informed when all misspellings have been resolved within the spelling dialog.

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

Accompanying Enhanced Skins & Icon Packs changes

The TinyMCE 7.3 release includes an accompanying release of the Enhanced Skins & Icon Packs.

Enhanced Skins & Icon Packs

The Enhanced Skins & Icon Packs release includes the following updates:

The Enhanced Skins & Icon Packs were rebuilt to pull in the changes also incorporated into the default TinyMCE 7.3 skin, Oxide.

For information on using Enhanced Skins & Icon Packs, see: Enhanced Skins & Icon Packs.

Improvements

TinyMCE 7.3 also includes the following improvements:

When a full document was loaded as editor content the head elements were added to the body.

When loading a full document as editor content, HTML, head, and body tags were wrapped within a body tag before parsing. Since these tags are not meant to be inside a body tag, they were unwrapped.

As a consequence, this resulted in the unintended inclusion of head tag content within the editor. For example, <html><head><HeadContent /></head><body><BodyContent /></body> was treated as if it were just <HeadContent /><BodyContent /> during parsing.

TinyMCE 7.3 addresses this issue by implementing detection for HTML, head, and body elements. This fix ensures that head content is appropriately wrapped in HTML tags instead of body tags, preventing it from appearing in the editor.

As a result, the editor now correctly handles full document content without misplacing head elements into the body, ensuring cleaner and more accurate content loading.

Additions

TinyMCE 7.3 also includes the following addition:

Colorpicker number input fields now show an error tooltip and error icon when invalid text has been entered.

Previously, the color picker HEX value input field only displayed a red outline and an aria label reading "invalid data" when users entered invalid values. This lacked sufficient detail to help users correct their input.

As a consequence, users experienced confusion due to the vague error indication and insufficient guidance, potentially leading to repeated input errors.

In TinyMCE 7.3, improvements were made to the color picker input field to enhance user feedback and accessibility. The input field now includes:

  • A red outline to indicate errors.

  • An error icon for visual clarity.

  • On hover and focus, tooltips provide clear instructions such as "Numbers only, 0 to 255" or "Hexadecimal only, 000000 to FFFFFF."

  • Voice over reads aloud as example: "Number 256. Contents selected. Range from 0 to 255. Invalid data. Edit text."

Although there may be slight variations in pronunciation and phrasing across different operating systems or specific screen readers, most screen readers will convey similar messages, emphasizing numerical values and the status of the content.

These enhancements improve user understanding and facilitate error correction.

color picker error rbg
color picker error message hex

Bug fixes

TinyMCE 7.3 also includes the following bug fixes:

Unnecessary nbsp entities were inserted when typing at the edges of inline elements.

Previously, the replacement mechanism for &nbsp; did not account for nearby elements when converting non-breaking spaces to regular spaces.

As a consequence, when typing a sequence like "a space b," the output was correct. However, if the "b" was wrapped in an inline element (such as bold), the &nbsp; remained instead of being replaced.

TinyMCE 7.3 addresses this issue. Now, the normalization process triggers when an inline format is applied, affecting the previous sibling element to ensure spaces are properly converted.

As a result, non-breaking spaces between different inline elements are now normalized, preventing unnecessary &nbsp; entities.

Fixed JavaScript error when inserting a table using the context menu by adjusting the event order in renderInsertTableMenuItem.

Previously in TinyMCE, a JavaScript warning would appear when attempting to insert a table from the context menu while using both the table and autoresize plugins. This warning was caused by the onAction event hiding the context menu, followed by an attempt to close the already hidden context menu, resulting in the warning message:

"Uncaught Error: The component must be in a context to send: triggerEvent is not in context."
This warning did not impact the functionality of table insertion, but it could be confusing for users.

In TinyMCE 7.3, this issue has been resolved by adjusting the order of function calls in the code. Now, the context menu is closed before the onAction event is triggered when inserting a table from the context menu. As a result, the table is now inserted as expected without any JavaScript warnings.

Notifications didn’t position and resize properly when resizing the editor or toggling views.

Previously, the function responsible for recalculating the width of notifications only added a width if the notification’s width exceeded the boundaries.

As a consequence, when notifications were constrained by boundaries, an additional width was added. However, if the boundaries were later increased, the added width was not adjusted accordingly.

TinyMCE 7.3 addresses this issue. Now, the function adds width when the notification’s width exceeds the boundaries but also removes this width when necessary.

As a result, notifications now resize correctly when the boundaries increase, ensuring their width adjusts as expected.

The pattern commands would execute even if the command was not enabled.

Previously in TinyMCE, the text_patterns commands would attempt to execute even if the functionality were not supported in the current editor context. As a consequence, the command would fail and the editor would display unexpected behavior. For example, typing "1. " without the lists plugin enabled would delete the text instead of converting it to a list.

This issue has been resolved in TinyMCE 7.3. The editor now filters text_patterns to only the supported commands. For example, typing "1. " without the lists plugin enabled will no longer fire a text pattern and instead retain the text as plain text.

Split button popups were incorrectly positioned when switching to fullscreen mode if the editor was inside a scrollable container.

Previously in TinyMCE, there was an issue where split button popups would be positioned incorrectly when opened within a scrollable container and the editor was in fullscreen mode. The behavior occurred because the box constraints for the split button popup did not take the fullscreen mode into account when calculating the position, resulting in an incorrect placement of the popup.

In TinyMCE 7.3, this issue has been fixed. The box constraints for the split button popup are now correctly calculated when the editor is in a scrollable container and in fullscreen mode. As a result, the split button popup is now positioned correctly.

Sequential html comments would in some cases generate unwanted elements.

Previously in TinyMCE, consecutive HTML comments would generate unwanted elements in the editor. For example, when inserting the following HTML into the editor:

<div>a</div>
<!-- comment -->
<!-- comment -->
<div>b</div>

The editor would generate a &nbsp; paragraph between the comments, resulting in extra paragraphs being generated.

<div>a</div>
<!-- comment -->
<p>&nbsp;</p>
<!-- comment -->
<div>b</div>

In TinyMCE 7.3, this issue has been resolved. The editor now correctly handles consecutive HTML comments by removing the whitespace before parsing.

<div>a</div>
<!-- comment --><!-- comment -->
<div>b</div>

As a result, no extra paragraphs are generated.

The listbox component had a fixed width and was not a responsive ui element.

Previously, the listbox component was not responsive as a UI element, due to a fixed width being applied in the CommonDropdown component during dialog initialization.

This issue has been resolved in TinyMCE 7.3 by removing the fixed width setting, allowing the listbox component to function as a responsive UI element.

Prevent default mousedown on toolbar buttons was causing misplaced focus bugs.

In previous versions of TinyMCE, the preventDefault on mousedown in the toolbar button component caused focus issues. As a consequence, when clicking on different toolbar buttons, the focus was not updated, leaving the initial button highlighted.

TinyMCE 7.3 addresses this issue by removing the preventDefault, allowing the focus to change as expected when users click on the image controls (ie. zoom in and out).

Attempting to use focus commands on an editor where the cursor had last been in certain contentEditable="true" elements would fail.

Previously, when contentEditable="true" (CET) fields where not wrapped in contentEditable="false" (CEF) elements, the elements did not respond properly to focus commands. As a consequence, the focus was not given to the editor as expected, leading to disruptions in user interactions.

TinyMCE 7.3 addresses this issue. Now, when (CET) fields are not wrapped in (CEF) elements, the editor directs the focus to the body of the editor first.

As a result, the editor now correctly returns focus as expected, ensuring seamless user interactions.