TinyMCE 7.4

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.4 was released for TinyMCE Enterprise and Tiny Cloud on Wednesday, October 9th, 2024.

These release notes provide an overview of the changes for TinyMCE 7.4, including:

Accompanying Premium plugin changes

The following premium plugin updates were released alongside TinyMCE 7.4.

AI Assistant

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

AI Assistant includes the following fix.

Insert lists will no longer unexpectedly generate indented lists.

The insertContent action previously did not handle pasting a list onto another list correctly, causing the AI Assistant Premium plugin to generate an unexpected indented list when inserting lists into existing ones.

In TinyMCE 7.4, this issue is resolved by adding a paste argument to the insertContent action, ensuring correct handling of list insertion.

As a result, the AI Assistant Premium plugin will no longer create indented lists when inserting a list on top of an existing one.

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

Document Converters (Import from Word, Export to Word, Export to PDF)

Made importword_service_url, exportword_service_url and exportpdf_service_url option more fault tolerant

Previously, If the integrator added a domain without a trailing slash /, a full URL to exportword, or just the domain to exportpdf or importword, it caused the plugins to not function.

TinyMCE 7.4 addresses this issue, by normalizing the options to accept a wider variety of input formats. As a result, the plugins now function correctly, regardless of whether a full URL, just the domain, or a domain with a trailing slash is provided.

The handler will always return the "latest" versioned URL, regardless if configuration is correct or not.

Enhanced Code Editor

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

Enhanced Code Editor includes the following fixes, and improvements.

Format button would lose focus after action while navigating through keyboard.

Previously, after using the Format code button to format code, the focus would shift to the code editor wrapper instead of remaining on the Format code button. This behavior was inconsistent for users who prefer to navigate through the keyboard.

TinyMCE 7.4 implemented a fix that explicitly refocuses the Format code button after the formatting action. As a result, when pressing the Format code button, the focus now remains on the button as intended.

Formatting indent size would be different than CodeMirror indent size.

Previously, the indent sizes between CodeMirror and the formatter were inconsistent due to the use of default options for both.

As a result, the formatted code did not match the indent settings in CodeMirror, causing discrepancies in code appearance.

TinyMCE 7.4 addresses this issue. Now, the formatter’s indent settings have been adjusted to "2" indent spaces to align with CodeMirror, ensuring consistent indent sizes and uniform code presentation.

Formatter would not remove empty lines.

In previous versions of Enhanced Code Editor, the HTML formatting function retained all line breaks, including unnecessary empty lines, resulting in more spaced-out code than desired.

With TinyMCE 7.4, the HTML formatting has been optimized to automatically remove empty lines during the formatting process. This results in cleaner, more compact HTML output.

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

Import from Word

The TinyMCE 7.4 release includes an accompanying release of the Import from Word premium plugin.

Import from Word includes the following improvement.

New importword_converter_options option that allows customizing the conversion.

TinyMCE 7.4 introduces the addition of importword_converter_options to the Import from Word plugin. This new option allows for greater customization when converting Word documents to HTML.

Key Features

  • Three Customizable Options:

    • resets: Minimize differences between Word and HTML default styles.

    • defaults: Control inclusion of default formatting.

    • styles: Manage Word style inclusion in the generated document.

Example: using importword_converter_options
tinymce.init({
  selector: 'textarea',
  plugins: 'importword',
  toolbar: 'importword',
  importword_converter_options: {
    formatting: {
      resets: 'inline',
      defaults: 'inline',
      styles: 'none'
    }
  }
});

For information on the Import from Word plugin, see Import from Word.

Spell Checker

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

Spell Checker includes the following fix.

As you type spellchecking did not update when scrolling with the autoresize plugin active.

An issue was identified that was caused by the plugin not listening to the all the expected scroll events. As a result, when users scrolled down, this action was not detected by the plugin, leading to no updates in spellchecking.

TinyMCE 7.4 addresses this issue by changing the event listener to correctly monitor scroll events.

As a result, the plugin now successfully detects when scrolling occurs, ensuring that spellcheck updates are made as intended.

Cursor would jump to the previous line after pressing shift + enter if the annotation was applied.

In the Chrome browser, a rendering glitch caused the cursor to unexpectedly jump to the previous line when applying an annotation. The optimization intended to prevent re-selection after annotations was found to be unreliable and contributed to this issue.

TinyMCE 7.4 resolves this problem by removing the problematic optimization, which led to this regression.

As a result, users will no longer encounter unexpected selection or cursor behavior after applying annotations in the editor.

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

Templates

The TinyMCE 7.4 release includes an accompanying release of the Templates premium plugin.

Templates includes the following improvement.

Categories can now be declared as locked, making them readonly.

This feature is only available for TinyMCE 7.4 and later.

The TinyMCE release introduces readonly categories for improved template management. This feature allows administrators to lock down specific template categories, preventing users from modifying the category or its templates.

Key Features

  • Readonly Templates: Templates within readonly categories are locked, preventing the user from renaming, editing, moving, or deleting them. These templates are marked with a lock lock.svg icon to indicate their status.

  • Readonly Categories: Categories can be marked as readonly by setting locked: true in the configuration. Once locked, categories cannot be renamed or deleted, and users are prevented from moving templates into or out of the category. A lock icon visually distinguishes readonly categories. Readonly categories are marked with a lock lock.svg icon to indicate their status.

  • Client-Side Restrictions: Attempts to modify readonly categories are blocked on the client side, and the UI reflects the readonly status to provide a seamless user experience.

Example: Locking a category
// Template data with locked category
{
  title: 'Locked Templates',
  locked: true, // Locks the category as readonly
  items: [
    {
      title: 'How to find model number',
      content: '<p dir="ltr">Hi {{Customer.FirstName}},</p>\n<p>...</p>'
    },
    {
      title: 'Support escalation',
      content: '<p dir="ltr">Hi {{Customer.FirstName}},</p>\n<p>...</p>'
    }
  ]
}

For information on the Templates plugin, see: Read-only Categories.

Improvements

TinyMCE 7.4 also includes the following improvements:

In read-only mode the editor now allows normal cursor movement and block element selection, including video playback.

In read-only mode, the editor now allows normal cursor movement and block element selection, including video playback. This behavior is now the default when the readonly option is set to true or when switching to read-only mode.

Prior to this improvement, the editor’s body element was set to contentEditable="false", which blocked cursor placement and all user inputs. In the new behavior, the body element is set to contentEditable="true", and input blocking is handled by the editor.

For more information, see Read-only option.

In this mode, menu buttons, read-only menu items, and read-only buttons remain enabled. To revert to the old behavior, use tinymce.activeEditor.ui.setEnabled(false).

Pasting a table now places the cursor after the table instead of into the last table cell.

Previously, when users copied and pasted a table, the cursor would remain in the last cell of the table, which differed from the behavior in popular word processing applications like Google Docs and Microsoft Word.

TinyMCE 7.4 addresses this behavior. Now, after pasting a table, the cursor is automatically placed on a new line immediately following the table inside a '<p>&nbsp;</p>' tag.

Dialog list dropdown menus now close when the browser window resizes.

In previous versions of TinyMCE any listbox with a fixed-width dropdown would remain open when resizing the browser window, creating a visual discrepancy as other UI elements adjusted to the new window size.

TinyMCE 7.4 addresses this issue. Now, dropdowns will now automatically close when a window resize event is triggered, preventing the need for resizing the dropdown list itself.

Additions

TinyMCE 7.4 also includes the following additions:

New context property for all ui components.

A new context property has been introduced for all UI components, allowing buttons and menu items to be dynamically enabled or disabled based on whether their context matches a given predicate. This feature ensures that components reflect the current editing context, improving the user interface’s adaptability.

The status of the UI components is updated on init, NodeChange, and SwitchMode events. For the mode context, updates occur only on SwitchMode and init.

To register a new context, integrators can now use:

Default Contexts:

  • editable: Checks if the current selection is editable.

  • mode: Enables components based on the current mode (e.g., mode:design, mode:!readonly).

  • any: Always enables the UI component.

  • formatting: Verifies if a specific format can be applied at the current selection.

  • insert: Determines if a specific element can be inserted at the current selection.

Syntax for context usage is key:value, and negation is possible by prefixing the value with !. For instance, mode:!readonly enables a button unless the editor is in readonly mode.

This enhancement allows for more context-sensitive UI components, improving user interaction by ensuring appropriate options are available based on the editor’s state.

For more information about the context property, see Context.

New option allow_mathml_annotation_encodings to opt-in to keep math annotations with specific encodings.

In previous versions of TinyMCE, MathML annotation elements were inadvertently stripped during content processing. This caused compatibility issues with tools like Wiris that rely on these annotations.

TinyMCE 7.4 introduces a new option, allow_mathml_annotation_encodings, to address this problem. This option accepts an array of strings, allowing users to specify which annotation encodings should be preserved. By configuring this option, users can ensure proper functionality of MathML-dependent tools while maintaining control over which annotations are retained.

Example
tinymce.init({
  selector: "textarea",
  allow_mathml_annotation_encodings: [ 'wiris', 'application/x-tex' ]
});

For more information on the allow_mathml_annotation_encodings option, see allow_mathml_annotation_encodings.

Bug fixes

TinyMCE 7.4 also includes the following bug fixes:

Mouse hover on partially visible dialog collection elements no longer scrolls

Previously, an issue caused partially visible collection elements, such as those in the Character Map or Emojis dialog, to unexpectedly scroll into view with abrupt and unintended movement when hovered over, resulting in a disruptive user experience.

TinyMCE 7.4 addresses this issue by preventing scrolling on hover. This ensures that the dialog remains in place and does not scroll when partially visible elements are hovered over.

Caret would unexpectedly shift to the non-editable table row above when pressing Enter.

Previously, an issue where pressing Enter in a table cell caused the selection to shift incorrectly when the row above was set to contenteditable="false". This problem affected table editing functionality, leading to unexpected cursor placement and content modifications.

TinyMCE 7.4 addresses this issue. Now, this fix ensures that the selection remains stable when adding new lines within editable cells, regardless of the content editable state of adjacent rows.

As a result, users can now reliably edit table contents without experiencing unintended cursor movements.

Deleting a selection in a list element would sometimes prevent the input event from being dispatched.

In TinyMCE, certain delete actions, especially the native delete action event, were suppressing the input event. This suppression caused unexpected behavior when deleting items in lists, as the input event was not being fired as intended.

TinyMCE 7.4 resolves this issue by implementing the following solution:

  1. When deleting an item in a list, the system now checks if the input event was triggered.

  2. If the input event was not triggered automatically, the system manually fires the event.

This enhancement ensures that an input event is consistently dispatched when deleting list elements, regardless of the deletion method used. As a result, list behavior during deletion operations is now more reliable.

Placing the cursor after a table, but before a BR element would misplace added newlines before the table instead of after it.

Previously, a <br> element was incorrectly counted as content when the cursor was placed before it, resulting in newlines or elements being inserted at the start of the block rather than after the table.

TinyMCE 7.4 addresses this issue by treating the <br> element as the end of the block. As a result, newlines are now correctly added after the table, ensuring proper cursor placement and content insertion.

In TinyMCE 6.8, the initialization of sidebars in the UI was moved to occur after the skin was loaded. As a consequence, an issue was identified where the sidebar could not be toggled during the init event because the skin is loaded asynchronously.

This issue has been resolved in TinyMCE 7.4 by moving the sidebar initialization back to within the PostRender event. As a result, the sidebar can now be toggled as expected during the init event.

The image dialog lost focus after closing an image upload error alert.

Previously, when an image upload error alert was closed, the image dialog lost focus, impacting keyboard accessibility.

TinyMCE 7.4 addresses this issue by making the dropzone component focusable and adding a callback to focus the dropzone button after the error alert is closed.

As a result, keyboard users now experience improved accessibility, with the ability to focus on the dropzone using the dialog API.

Copying tables to the clipboard did not correctly separate cells and rows for the "text/plain" MIME type.

Previously, when copying rows from tables, the newline character \n was not returned correctly, causing cell and row data to be improperly formatted. However, using the "Select All" function before copying preserved the newline characters.

TinyMCE 7.4 resolves this issue by enhancing the clipboard handling for text extraction from table elements, particularly for complex structures.

These improvements ensure more consistent and correctly formatted text output when copying table content within the editor.

The editor resize handle was incorrectly rendered when all components were removed from the status bar.

Previously in TinyMCE, the resize handle in the editor’s status bar was positioned relative to other elements. Consequently, if these elements were removed, the resize handle would incorrectly appear in the left corner of the editor’s status bar.

In TinyMCE 7.4, this issue has been resolved by adjusting the CSS. The resize handle is now consistently placed in the right corner of the status bar, regardless of the presence of other elements. This ensures that the resize handle is always positioned correctly where users expect it to be.

Known issues

Editor Focus after Deleting a Comment

When deleting a comment from the Comments sidebar, the focus shifts from the comments sidebar to the editor content area, rather than switching to the "Add comment…​" button in the conversation sidebar as expected.

This behavior differs from the current stable version, where the focus is correctly returned to the "Add comment…​" textbox.

Status: Currently under investigation.

Comments Not Functional with Empty tinycomments_author and tinycomments_author_name

Comment functionality becomes non-operational when tinycomments_author and tinycomments_author_name are configured as empty strings ''.

Example of affected configuration:
tinycomments_author: '',
tinycomments_author_name: '',

Previously, instead of assigning default user/author values as in 7-stable (7.3), the latest release 7.4 disables all comment features when these fields are empty.

Status: This issue has been resolved in TinyMCE 7.5.0.

Comment card not removed after deleting content

Currently, after deleting content that has related comments, the corresponding comment card still exists and becomes stale within the Comments sidebar.

This behavior is inconsistent with the expected behavior, where the comment card should be removed automatically after deleting the content.

Status: This issue has been resolved in TinyMCE 7.5.0.