TinyMCE 6.4.1

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 6.4.1 was released for TinyMCE Enterprise and Tiny Cloud on Tuesday, April 4th, 2023. It includes TinyMCE 6.4.1, additional changes to Premium plugins, and a new Premium plugin, Advanced Template. These release notes provide an overview of the changes for TinyMCE 6.4.1:

Although there was a Community release of TinyMCE 6.4, it was not released as a TinyMCE Enterprise or Tiny Cloud release. The first commercially supported release of TinyMCE post version 6.3.2 is TinyMCE 6.4.1.

New Premium Plugin

Advanced Template 1.1.0

The TinyMCE 6.4.1 release includes the release of a new premium plugin: Advanced Template.

The Advanced Template Premium plugin enables the creation of complex, interactive templates using TinyMCE.

The end-users can select content in a TinyMCE document and save the selection as a template via the TinyMCE user-interface.

For information on the Advanced Template plugin, see: Advanced Template.

Accompanying Premium Plugin changes

The following premium plugin updates were released alongside TinyMCE 6.4.1.

Advanced Code Editor 3.2.1

The TinyMCE 6.4.1 release includes an accompanying release of the Advanced Code Editor premium plugin.

Advanced Code Editor 3.2.1 includes the following improvements and additions.

New button to copy the current Advanced Code Editor content.

This update adds a new Copy code button to the Advanced Code Editor for editors. This new Copy code button allows users to copy the entire contents of the Advanced Code Editor.

New buttons to increase and decrease the font size in the Advanced Code Editor.

This update adds two new buttons for increasing and decreasing the font size of code displayed in the Advanced Code Editor.

New button to toggle dark mode.

This update adds a new Dark/light mode button to toggle between either dark or light display modes for the Advanced Code Editor.

New button to toggle fullscreen.

This update adds a new Fullscreen button to toggle between fullscreen and dialog modes.

For the Advanced Code Editor to offer a full-screen mode, it requires the Full screen plugin and to be running in inline mode.
For the Advanced Code Editor to offer a Copy button, it requires a secure contexts.

Advanced Typography 1.1.1

The TinyMCE 6.4.1 release includes an accompanying release of the Advanced Typography premium plugin.

Advanced Typography 1.1.1 includes the following fixes, additions, and improvements.

Fixed adding redundant space between a comma and a quote by switching the sequence of executing safe and unsafe rules

After TinyMCE introduced the Advanced Typography plugin, a bug was discovered that was causing a space to be introduced between a comma and a closing double-quote mark, as shown in the example below:

Example

“They went that way,[space introduced here]” he said as he pointed.

As demonstrated in the example above, an unintentional or redundant space was inserted into a separate node position.

TinyMCE fixed the issue by changing the sequence of executing safe and unsafe rules surrounding Typography.

In TinyMCE 6.4.1, the Smart Typography plugin no longer creates a space between a comma and a closing double-quote mark.

Added functionality to remove spaces between exclamation marks

An issue was discovered that affected the typography plugin in previous versions of TinyMCE when inserting content into the editor. Specifically, the issue involved exclamation marks and the spaces between them, such as in the example "Hello! !". This issue prevented the editor from removing the spaces between the double exclamation marks ! ! after executing the typography plugin toolbar or menubar button.

In TinyMCE 6.4.1, spaces are now removed between exclamation marks !! for formatted HTML documents when the typography plugin is used. To learn more about Advanced Typography and how to add this new premium plugin to your project, please refer Advanced Typography.

Added Advanced Typography to the default menubar

In the previous version of TinyMCE, the typography menu item was not available in the Tools menu from the menubar by default.

In TinyMCE 6.4.1, the typography menu item will display in the Tools menu by default, given that the typography_default_lang option is set.

Typography button and menu item will be disabled if editor has no content

In the previous version of TinyMCE, the typography toolbar button would be enabled when the editor contained no content.

As a consequence of this, when users clicked the button while the editor was empty, the notification 'Document Typography has been enhanced' would display unexpectedly.

In TinyMCE, the typography toolbar button is now disabled when the editor is empty.

For information on the Advanced Typography plugin, see: Advanced Typography.

Checklist 2.0.4

The TinyMCE 6.4.1 release includes an accompanying release of the Checklist premium plugin.

Checklist 2.0.4 includes the following fix.

Formatting Issue with Checklist on Formatted Lists and Non-Lists

In previous versions of TinyMCE, a formatting issue was found while working with checklists on formatted lists and unordered lists. This issue resulted in incorrect formatting of certain elements when a selection contained a mix of list elements.

In TinyMCE 6.4.1, this issue has been addressed.

Applying checklists on a selection that includes lists now converts the selected items into checklists, as expected.

For information on the Checklist plugin, see: Checklist.

Merge Tags 1.2.1

The TinyMCE 6.4.1 release includes an accompanying release of the Merge Tags premium plugin.

Merge Tags 1.2.1 includes the following change.

The mceMergeTag command now preserves the selected content as a plain text and wraps it in a merge tag prefix and suffix if the content length exceeds the limit.

In previous versions of TinyMCE, the prefix and suffix were removed when merge tag content exceeded the character limit for the merge tag.

In TinyMCE 6.4.1 this content is retained, as well as the prefix and suffix, though it is not converted into a Merge Tag.

Any content exceeding the character limit for Merge Tags will not be converted into a Merge Tag.

For information on the Merge Tags plugin, see: Merge Tags.

PowerPaste 6.1.4

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

PowerPaste 6.1.4 includes the following fixes.

White-space style property stripped from copied Excel content by word import

The white-space style property, which determines how white space characters are handled in HTML including word wrap, was causing issues when content with word wrap set was copied from Excel and pasted into the TinyMCE editor. The problem occurred in Chrome and Firefox, but was not visible in Safari. Upon import, the white-space style property was being stripped from the content, resulting in a loss of word wrap.

With this release, the issue has been fixed. Copied content containing a valid white-space property now retains its original formatting when pasted in TinyMCE.

Lists separated by empty paragraphs resulted in incorrect numbering when pasted from Microsoft Word

Previously, when an ordered list, with nested elements, that also included blank lines between list items was copied from Microsoft Word and pasted into a TinyMCE editor instance, the numbering of the pasted-in list was incorrect.

In pasting, the PowerPaste plugin made two errors:

  1. it incorrectly incremented outer list items where these increments should have only applied to nested items; and

  2. it incorrectly joined the nested list item numbering.

This update corrects both these errors. Pasting lists from Microsoft Word into a TinyMCE editor now shows the correct numbering in the pasted list, even when the list includes non-list paragraphs between list items.

For information on the PowerPaste plugin, see: PowerPaste.

Comments 3.3.1

The TinyMCE 6.4.1 release includes an accompanying release of the Comments premium plugin.

Comments 3.3.1 includes the following fix.

The comment input box now has a max height to prevent long comments from expanding the box indefinitely

In previous versions of TinyMCE, if the comment string is larger than the initial height of the comment box, the comment input box would automatically expand its height to fit the comment string. However, when given long enough comment strings, the comment input box would grow beyond the viewable bounds of TinyMCE. This caused UX issues as:

  • the out-of-bounds parts of the comment was not viewable or editable; and

  • the user was unable to submit the comment as the Add Comment button was also forced out of bounds.

To address this issue, the Comments 3.3.1 in TinyMCE 6.4.1 set a maximum height for the comment input box, defined as half the height of the conversations area in the sidebar. At this maximum height, the height of the comment input box will be the same height as the viewing area for existing comments above, providing visual symmetry. The comment input box will not grow beyond the maximum height, and if the comment string is larger than this maximum height, the comment input box can be scrolled for the user to view and edit the entire comment string.

For information on the Comments plugin, see: Introduction to Tiny Comments.

Enhanced Media Embed 3.1.1

The TinyMCE 6.4.1 release includes an accompanying release of the Enhanced Media Embed premium plugin.

Enhanced Media Embed 3.1.1 includes the following addition.

Mentions 3.0.4

The TinyMCE 6.4.1 release includes an accompanyin release of the Mentions premium plugin.

Mentions 3.0.4 includes the following fix:

It wasn’t possible to create a new line immediately after a pasted Mention.

Previously, if a Mention was added to a TinyMCE editor; and the Mention was selected; copied or cut; and then pasted on to a new line, attempting to then create a new line by pressing the Return key failed.

As well, and depending on the host browser, the insertion point would not present in the editor until it was moved, by clicking elsewhere in the editor.

This could be worked-around by moving the insertion point and then moving it back to immediately after the Mention or by typing any character and then deleting that character.

With this update, pressing Return immediately following the pasting of a Mention string in a TinyMCE editor creates a new line, as expected.

Also, the insertion point displays in all browsers immediately following a pasted Mention string, also as expected.

For information on the Mentions plugin, see Mentions.

Spell Checker Pro 3.2.1

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

Spell Checker Pro 3.2.1 includes the following fix.

Spell Checker Pro plugin over-loaded the spell checking service

Previously, the Spell Checker Pro plugin would request each word in the content, and repeatedly request these words every time the spellchecker was activated. This resulted in duplicate words being requested during regular use of the plugin.

With this update, Spell Checker Pro now only sends requests to the spelling service for each unique word and caches these results for later retrieval. This greatly reduces the amount and size of requests sent by the plugin during regular use, improving the reliability of the service and the plugin.

For information on the Spell Checker Pro plugin, see: Introduction to Spell Checker Pro.

Accompanying Premium Plugin end-of-life announcement

The following premium plugin has been announced as reaching its end-of-life:

Real-Time Collaboration

TinyMCE’s Real-time Collaboration (RTC) plugin will be retired and deactivated on December 31, 2023, and is no longer available for purchase.

Accompanying Premium Skins and Icon Packs changes

The TinyMCE 6.4.1 release includes an accompanying release of the Premium Skins and Icon Packs.

Premium Skins and Icon Packs

The Premium Skins and Icon Packs release includes the following updates:

The Premium Skins and Icon Packs were rebuilt to pull in the changes also incorporated into the default TinyMCE 6.4.1 skin, Oxide.

For information on using premium skins and icon packs, see: Premium Skins and Icon Packs.

Improvements

TinyMCE 6.4.1 also includes the following improvements:

Direct invalid child text nodes of list elements will be wrapped in list item elements.

In previous versions of TinyMCE, pressing Tab while the caret is in a <ul> or <ol> list containing direct child text nodes would unexpectedly cause an Uncaught TypeError console error to be thrown.

In the following example,

<ul>
  item1
  <li>item2</li>
</ul>

if the caret is placed anywhere on either item1 or item2, pressing Tab would throw an Uncaught TypeError to the console.

In TinyMCE 6.4.1, a content filter for <ul> and <ol> lists was added to wrap any direct child text nodes within an <li>. This transforms them into standard <li> child elements, preventing the Uncaught TypeError from being thrown.

Templates will be parsed before preview and insertion to make preview consistent with inserted template content and prevent XSS

In previous versions of TinyMCE, the Template plugin does not parse templates before they are previewed, or before editor.dom.create is run on it during insertion. Not parsing the template HTMLs means they are not validated or sanitized, which has two consequences:

  1. Previewing pre-parsed templates may show a visually different result to after the template is parsed and inserted into the editor; and

  2. Reading unsanitized HTML when previewing templates and when editor.dom.create is run during insertion may allow room for cross-site scripting (XSS), which can be a security issue.

To address this, the Template plugin in TinyMCE 6.4.1 now parses and serializes template HTMLs before it is previewed and before editor.dom.create is run on it during template insertion. By doing this, all template previews will now visually match the post-insertion result, and the possibility of XSS issues arising is minimized.

Pressing backspace in an empty line now preserves formatting in a previous empty line

In previous versions of TinyMCE, when pressing backspace in an empty line with another empty line containing inline formats above it, the deletion handler was found to be first removing both lines and then inserting a newline. As a consequence, the existing inline formats of the previous empty line was not preserved.

In TinyMCE 6.4.1, pressing backspace in an empty line now preserves the inline formats of the previous empty line.

Additions

TinyMCE 6.4.1 also includes the following additions:

New tree component that can be used in dialog body panel

A new tree component has been added to TinyMCE, that can be used in custom plugins and models.

The new tree component is designed to create a visual representation of the hierarchical structure of items such as, showcasing folders and the files within these folders, similar to how a directory works which allows users to easily identify various structure levels within set categories, such as how the new Advanced Template plugin works.

This new tree component is an important addition to TinyMCE which will be used in several features with up and coming releases in the future.

renderUI property in the Theme type can now return a Promise <RenderResult> instead of RenderResult

In earlier versions of TinyMCE the renderUI function which initiates theme rendering did not wait for the CSS to load. This could cause race conditions with other parts of the editor or customer integrations. As a result TinyMCE 6.4.1 now waits for a CSS load event before returning from the renderUI function. This process necessitates changing the return type of the renderUI function; it now returns a Promise<RenderResult>. The type is Promise<RenderResult> | RenderResult for compatibility, but the silver theme always returns a promise.

This change should have no impact on customer integrations, even those implementing custom themes.

New editor.selection.isEditable API method that returns whether the current selection is editable

TinyMCE 6.4.1 includes a new isEditable method on the editor.selection that will check if the selection is editable by finding the closest ascendant element for each selection endpoint with either a true or false value for it’s contenteditable attribute. If both endpoints of the selection has it’s closest ancestor contenteditable attribute value of true then the selection is editable.

New editor.dom.isEditable API method that returns whether the specified node is editable

TinyMCE 6.4.1 includes a new isEditable method on the editor.dom that will check if the specified node is editable by finding the closest ascendant with either a true or false value for it’s contenteditable attribute. If that value is true then the node is editable, if that value if false then it’s not editable.

New setText and setIcon methods added to menu button and toolbar button APIs

In previous versions of TinyMCE, it was not possible to change the text or icon of a toolbar or menu button dynamically.

In TinyMCE 6.4.1, two new methods setText and setIcon were added to the menu and toolbar button APIs, to enable updating the text and icon of the buttons after the editor initialization.

New highlight_on_focus option which enables highlighting the content area on focus

In previous versions of TinyMCE, the highlighted border around the editor content window did not render when the editor was in focus.

As a consequence, this issue, whilst creating no impending impacts on the functionality of the editor, created issues for users that rely on accessibility features such as this.

To fix this issue, TinyMCE 6.4.1, when the editor content window is in focus, the editor will render a visible highlighted border around the content window when the option is added to the tinymce.init() config as below.

Setting highlight_on_focus: true option to tinymce.init().
tinymce.init({
    selector: "textarea",
    highlight_on_focus: true
});

New fontsizeinput toolbar item which allows the user to set the size via input and also increase and decrease it with + and - buttons

In previous versions of TinyMCE, users did not have the ability to set their font size by either direct input into a component field or by using plus + or minus - buttons.

As a consequence, TinyMCE introduced a new UI component that gives users an option to set the font sizes via the fontsizeinput toolbar button. For example:

tinymce.init({
    selector: "textarea",  // change this value according to your HTML
    toolbar: "fontsizeinput",
    font_size_input_default_unit: "pt"
});
More details about this component and the possible values that can be used within the new fontsizeinput input field can be found in fontsizeinput.

Added skipFocus check to the ToggleToolbarDrawer command

In previous versions of TinyMCE, the ToggleToolbarDrawer command contained an incorrect focus call. As a consequence, when the ToggleToolbarDrawer command option skipFocus: true was set, the toolbar drawer would take focus when it was not meant to.

In TinyMCE 6.4.1, an improvement was made to the focusing code which now checks for skipFocus.

As a result of the fix, when using the ToggleToolbarDrawer command, the toolbar is now not focused when skipFocus: true is set.

New font_size_input_default_unit option allows to use of numbers without a unit in fontsizeinput and have them parsed with the default unit, if it is not defined the default is pt

In early development before the release of the 'new toolbar component' ("fontsizeinput"), users had to define the unit of measurement (UOM), when setting their font size by direct input into the 'new toolbar component' input field.

The new toolbar: "font_size_input_default_unit": "<UOM>", option now allows users to use (values) ie, (numbers) without having to manually input the unit of measurement (UOM) after they define the value.

This means that users can now specify the UOM in the tinymce.init config by configuring the UOM value by changing the default value:* pt to one of the below possible values:* px, em, cm, mm

tinymce.init({
    selector: "textarea",
    toolbar: "fontsizeinput",
    font_size_input_default_unit: "em"
});

As a result of this addition, this new option makes it easier and faster for users using the 'new toolbar component' to customize their font size within TinyMCE, as they no longer need to worry about selecting the correct UOM.

New group and toggle button in view

The release of TinyMCE 6.4.1 provides users with new features, such as the improvements to the Advanced Code plugin dialog, which have introduced a group of new buttons to the view bar. A new togglable button has also been added, allowing users to change its icon and active status with the click of a button, and is available in both the modal footer and view header.

Furthermore, this button can differentiate between text and icon, making it much more user friendly as it can show both instead of just the icon like a normal button.

In TinyMCE 6.4.1, these new buttons are now available for the Advanced Code plugin dialog.

The TinyMCE modal footer and view header dialog have recently added a new improvement by introducing a new togglebutton. This togglebutton allows users to quickly and easily toggle between the footer buttons withing the dialog. This makes navigation easier and more efficient than having to manually search through menus and dropdowns.

The togglebutton is present in TinyMCE 6.4.1 and it helps users to simplify their navigation of the footer buttons dialog. With the introduction of this togglebutton, users are now able to access footer buttons in a more efficient manner. The new togglebutton is a great addition to the TinyMCE modal footer and view header dialog, as it greatly simplifies the navigation of the footer buttons dialog and increases the overall usability of the feature.

Added toggleFullscreen to dialog API

TinyMCE recently added a new "fullscreen" toggle button to the Advanced Code Editor Premium plugin, that gives users the ability to expand the Advanced Code Editor dialog toolbar in order to make better use of the available space on their screen, while providing them with a more comfortable working environment.

The toggle button is easily accessible for users that have the Advanced Code Editor Premium plugin by integrating it into their editor by using the plugins: [ "fullscreen" ] in pair with the below options.

Example of fullscreen mode integration within TinyMCE.
tinymce.init({
  selector: "textarea",
  advcode_inline: true,
  plugins: [
    "code", "fullscreen", 'advcode',
  ],
  toolbar: "code"
});

As a result, the toggle button can be found in the top left corner of the Advanced Code Editor Premium toolbar. Once clicked, it will expand the dialog toolbar to fill the entire window, providing a more comprehensive view of the available options. A second click of the toggle button will return the dialog toolbar to its original size.

This option is now available in TinyMCE 6.4.1, as part of the core/ui API.

New xss_sanitization option to allow for XSS sanitization to be disabled

Currently, we use the DOMPurify library to sanitize HTML content when it is inserted into the editor in order to remove unsafe tags & attributes in order to prevent XSS (cross-site scripting). However, customers in some situations have found that the HTML sanitization from the DOMPurify library is changing their content in undesired ways.

To address this issue, we have added a new xss_sanitization: boolean editor option. This option is enabled by default which enables sanitization and can be set to false to disable sanitization. If a customer wishes to prevent their content from being modified by the sanitization, they can now set this option to false.

Example: using xss_sanitization to turn DOMPurify off and no longer sanitize HTML against XSS attacks
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  xss_sanitization: false
});
It is important to note that disabling sanitization introduces potential security issues, especially if the server-side XSS sanitization is weak or non-existent. Using this option therefore not recommended.

Added top right close 'x' button of the modal dialogs to keyboard navigation

In previous versions of TinyMCE, the top right close 'x' button within the modal dialogs were not keyboard-navigable by the Tab key.

With the latest release of TinyMCE 6.4.1, users can now navigate through all dialogs that have a x close button. With these updates, users can now use the Tab key to move through the elements within the modal dialogue, making it more accessible and user-friendly.

This change is applied to all dialogs that have a x close button within TinyMCE.

  • Search and Replace

  • Accessibility Checker

  • Table Properties

  • Help

  • Source Code

  • URL

  • Image

  • Url Modal Dialog toolbar buttons.

Its worth nothing that the expected result for the Alert and Confirm dialogs is that the initial focus is set on the most appropriate button when the dialog is opened; for example, the “OK” button for Alert dialogs, and the “Yes” button for Confirm dialogs.

In TinyMCE 6.4.1, these new additions/improvements are now available.

New ui_mode option for editor in scrollable containers support

A new ui_mode: 'split' option for scrollable containers has been introduced with the release of TinyMCE 6.4.1.

This new option configures the UI of the editor to allow scrolling popup menus. This prevents unexpected non-scrolling behaviour when within a scrolling context. When the editor is within a scrollable element add the ui_mode: 'split' option to the tinymce.init() within the <script> tags as below:

Basic integration for new ui_mode option using split
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  ui_mode: 'split',
  min_height: 1400,
});
The new ui_mode: 'split' option alters the behaviour of editors within scrollable containers, where the min_height of the editor is greater than the height of the container element which has the overflow="scroll" style attribute.

The docking behavior of UI elements is usually only triggered when the page is scrolled. This means that the UI element will stay in the same place relative to the page, no matter how much you scroll. However, with the introduction of the 'split' UI mode, it is now possible to dock the UI element on both page and container scroll. This means that the UI element will stay in the same place relative to the container, regardless of how much you scroll the page or the container itself.

  • If you’re using classic mode and sticky toolbars, the toolbar will dock, but it won’t be entirely visible in either the window or the scrollable element. This applies to both viewports.

  • In inline mode, the toolbar will also dock, but it won’t be entirely visible in either the window or the scrollable element.

  • ShadowDom is partially supported in this case, where the scrollable container is inside the shadow Root. But in cases when the scrollable container is outside the shadow Root (or an ancestor of it) it is not currently supported within versions of TinyMCE 6.4.1 or prior.

Changes

TinyMCE 6.4.1 also incorporates the following changes:

In previous versions of TinyMCE, the context menu for contenteditable="false" anchor links would display items from the Link plugin, including "Link" and "Remove Link". This implies that editing or removing contenteditable="false" links are possible, which is not true. An example of an affected contenteditable="false" link is the Table of Contents links.

To resolve this undesired behavior, TinyMCE 6.4.1 introduced a new check that blocks the Link plugin from displaying its context menu items if the selection is on a contenteditable="false" anchor link.

The formatting of contenteditable="false" elements are no longer cloned to new cells while creating new table rows

In previous versions of TinyMCE, contenteditable="false" elements such as a merge tags could clone the styling to a new table row. In some situations, this cloning would happen during the creation of new table row, where the merge tag prefix would unexpectedly clone the formatting from the previous cell to the new cell.

To correct this issue, TinyMCE added changes to the clone logic, to not copy the format for contenteditable="false" elements.

In TinyMCE 6.4.1, the formatting of contenteditable="false" elements are no longer cloned to new cells while creating new table rows.

Changed the color of @dialog-table-border-color, and added right padding to the first cell of dialog table

An area for improvement was identified during an accessibility audit for the help menu within TinyMCE, which focuses on users that rely on zoom orient to help with visibility.

The consequence of the previous UX, meant that adjustments needed to be made to the horizontal lines within the help menu table, that seperate each row. In previous versions of TinyMCE, contenteditable="false" elements such as a merge tag could clone the styling to a new table row. In some situations, this cloning would happen during the creation of new table row, where the merge tag prefix would unexpectedly clone the formatting from the previous cell to the new cell. To fix this accessibility issue, TinyMCE 6.4.1, increased the contrast ratio to 3:1 for each line divider for better visibility

As a result, the help menu is now styled to support a wider range of users, by these new changes implemented.

The sidebar element now has accessibility role region when visible and presentation when hidden

In previous versions of TinyMCE, Axe-DevTools (web accessibility testing extension) identified that the sidebar element within TinyMCE was set to role="complementary" even when the element was hidden. This created issues with screen readers, as the general rule is that landmarks should not be contained within another landmark.

As a consequence by having the sidebar set to role="complementary", tools such as screen readers in some situations would disable their functionality.

To fix this issue, changes were made to the role attribute of the sidebar element, which is now set to role="region" when it’s active state is visible, otherwise it defaults to role="presentation" when hidden.

This is important as the role of region ensures the sidebar and its contents are accessible to screen readers and other accessibility tools. When the sidebar element is hidden, it has a role of presentation, which is used to inform accessibility tools that the element can be safely ignored.

In TinyMCE 6.4.1, when the sidebar is either visible or hidden it now passes all the identified accessibility requirements.

Updated the Code Sample and Template plugin dropdown menu styles to match the default TinyMCE styles

Previously, the Code Sample and Template open source plugins used browser-native elements for some dropdown menus.

With this update, these menus are now created using the equivalent TinyMCE custom element, making these dropdown menus present with the same styling as other TinyMCE UI elements.

Bug fixes

TinyMCE 6.4.1 also includes the following bug fixes:

The search-replace modal would close incorrectly when clicking outside of the alert that pops up when no match is found

In previous versions of TinyMCE, the searchreplace modal would close incorrectly when clicking outside of the alert dialog. The expected behavior in previous versions was that an error dialog would open when no <string> match was found within the TinyMCE editor viewport. The identifying issue found was when the user would click outside of the error dialog, resulting in the Find and Replace modal to closes incorrectly.

In TinyMCE 6.4.1, when a no <string> match occurs within the TinyMCE editor viewport, an error banner will render in the Find and Replace modal beneath the (Replace with) field.

As a result the when the instance occurs where no <string> match is triggered, the user will be prompted with the following warning: Could not find the specified string.

Color picker on toolbar would not update when changing forecolor or backcolor from menu

In TinyMCE 6.3, when the new color map was introduced, a regression was found that affected the UI for Color Swatch.

The issue occurred when a user would select a forecolor or backcolor via the Formats drop down menu, the color displayed on the color swatch toolbar buttons would not reflect the selected forecolor or backcolor respectively.

In TinyMCE 6.4.1, the color in the relevant toolbar button is updated when changing either the forecolor or backcolor via a menu item.

The onSetup api function would not run when defining custom group toolbar button

A bug was discovered that affected the custom group toolbar button in TinyMCE, due to missing some event handlers. As a consequence, the onSetup api function would not run as intended when defining a custom group toolbar button.

In TinyMCE 6.4.1, this bug was fixed by adding a handler to the toolbar group button that now calls the api as intended.

As a result, the onSetup function for custom group toolbar buttons now runs correctly in TinyMCE 6.4.1.

An element could be dropped onto the descendants of an element with a contenteditable="false" attribute

In TinyMCE 6.0 and later, elements could be dropped onto descendants of an element with a contenteditable=false attribute.

In TinyMCE 6.4.1, changes were made to prevent descendants of an element with a contenteditable="false" attribute from being a valid drop target. As of this release, elements cannot be dropped onto such descendant elements across all supported browsers.

Checkmark did not show in menu color swatches

Previous versions of TinyMCE the known issue, checkmark over the current background color is not displayed when inline formatting is applied in a certain order was identified. As a consequence, when text was formatted in the following order, the checkmark over the currently active background color would not display in the Background color swatch menu:

  1. When the user applied inline formatting, such as bold or Italic.

  2. After applying a foreground(text) color.

  3. After applying a background color.

To fix this bug, TinyMCE introduced a new variable to store the node selection and color format value, which then renders a checkmark to appear in both the toolbar and menubar for both the forecolor and background color.

As a result, in TinyMCE 6.4.1, checkmarks now work as expected when using the color swatch in both the toolbar and menubar.

The foreground and background menu icons would not properly update to display the last used color

In previous versions of TinyMCE, while the foreground and background icons were updating in the toolbar dropdown, the menu icons in the menubar dropdown would not update the colour option in the format menu after the user applied colors to the selected text, despite the fact that this was the expected behavior. While workarounds where available, this deviation from the expected functionality caused confusion for some users until the fix was applied.

To correct this, TinyMCE added a new set icon fill function to ensure that the icon is filled when a color is selected from the format menu.

In TinyMCE 6.4.1, this issue has be rectified, which now ensures that the foreground and background menu icons now accurately reflects the previously selected color within the menu dropdown swatch.

Added new setIconFill function to editor.ui.addNestedMenuItem

In previous versions of TinyMCE up until the changes and improvements made with the release of 6.4.1, the foreground and background menu icons would not properly update to display the last used color, as outlined in the above.

To facilitate this change, TinyMCE has added a new setIconFill function to the editor.ui.addNestedMenuItem, which allows users to set the fill color of an icon when the user selects an option from the format menu. This ensures that the menu icon changes to accurately reflect the user’s selection.

In TinyMCE 6.4.1, this new function allows the foreground and background menu icons to function as expected.

In previous versions of TinyMCE, pasting links to text selections in Safari would sometimes not generate the correct undo stack.

This is due to Safari not supporting the ability to track changes to a page within the editor, which can create issues for users when pasting links to text selections, as the undo stack would not be able to recognise the link as a separate element, resulting in the undo action when called, to not remove the hyperlink.

To fix this issue, a workaround was implemented in TinyMCE 6.4.1, that now bypasses the default paste functionality for this undo function.

In TinyMCE 6.4.1, pasting links to text selections now generates the correct undo stack on Safari.

Toolbar split buttons in Advanced List plugin to show the correct state when the cursor is in a checklist

In previous versions of TinyMCE, when a cursor was placed within a checklist item, the icon for both the checklist and the bullet list would show as active. This created UX issues, as having both buttons showing an active state was confusing for the user, specifically for navigation purposes when using Advanced List plugin and checklists from the Checklist plugin.

To fix this issue, TinyMCE updates the logic to prevent setting the bullet list to active when the cursor is in a checklist.

As a result, in TinyMCE 6.4.1, only the checklist icon will appear as active when the cursor is in a checklist.

Dragging transparent elements into transparent blocks elements could produce invalid nesting of transparents

In previous versions of TinyMCE, dragging and dropping inline anchor links into block anchor links was producing invalid nesting of anchors in Chrome. Anchors, like all other transparent elements, must not be nested within each other.

Changes were implemented in TinyMCE 6.4.1 such that when an inline transparent element such as an anchor is dragged and dropped into a transparent block element of the same type (e.g. also an anchor), the dropped inline transparent element is unwrapped to prevent the nesting behavior. This ensures that the HTML output after the drag operation is valid and consistent across browsers.

The editor.insertContent API would insert contents inside noneditable elements if the selection was inside the element

In previous versions of TinyMCE, if setting the contentEditable attribute of the editor root to false. A user could insert content using api commands to edit the contents of the contenteditable="false" root element even when that content wasn’t editable.

To fix this bug, in TinyMCE 6.4.1, a blocker was added to the editor.insertContent API and mceInsertContent command, which stops contenteditable="false" root elements from being edited.

In TinyMCE 6.4.1, inserting contents inside a contenteditable="false" element while the selection is inside another element, is no longer possible.

Closing a dialog would scroll down the document in Safari

While using previous versions of TinyMCE, clicking away to dismiss the Search and Replace dialog within Safari would scroll the page to the bottom of the editor. As a result the user would have to manually scroll back to the original focus area each time the steps above were executed.

To correct this issue, the dialog will be blurred upon closing.

In TinyMCE 6.4.1, when the user clicks away to dismiss the Search and Replace dialog within Safari, the focus now returns to the editor and the scroll does not change position within the editor.

Inline headers would not work in some situations when the editor was moved too far right horizontally

In previous versions of TinyMCE It was discovered that the inline mode toolbar did not have a fixed width set, causing it to wrap when its x position exceeded the window width. But as the user scrolled horizontally, and the toolbar width space reduced, the editor became unusable after it surpassed its original width.

To fix this issue, TinyMCE now explicitly sets the width on the toolbar to ensure that the editor is usable when the viewport width is reduced.

Quick toolbars were incorrectly rendered during the dragging of contenteditable="false" elements

The quickbar was displaying incorrectly during a drag and drop action for contenteditable="false" elements. As a consequence, during the movement of a contenteditable="false" element, the selection was updated, which triggered a NodeChange event. This selection update would cause an absence of the caret location during a dragging or dropping event.

To fix this bug, TinyMCE 6.4.1 added a new check to identify when the user is dragging a contenteditable="false" element, which blocks the quickbar from rendering.

As a result, the quickbar no longer opens in TinyMCE 6.4.1, when the user is dragging a contenteditable="false" elements.

Selection of images, hr, tables or noneditable elements was possible if they were within a noneditable element

In previous versions of TinyMCE, contenteditable="false" elements that were nested within another such as a element set with the contenteditable="false" attribute, would avoid the contenteditable="false" guidelines set. As a consequence, selection of images, hrs, tables or contenteditable="false" elements was possible if they were nested within a contenteditable="false" element.

Improvements were made to check if the DOM parent node is a contenteditable="false" element.

In TinyMCE 6.4.1, elements with contenteditable="false" attributes can no longer be selected when they are children of another contenteditable="false" attribute, such as:

Example of contenteditable="false" elements inside contenteditable="false" root.
<div> Parent div element
  <div contenteditable="false">First child noneditable div element</div>
  <div contenteditable="true">Second child editable div element</div>
</div>

The native contenteditable behavior on Blink & Webkit browsers (Chrome & Safari) does not retain the original format(s) at the caret after all content within an inline format tag has been deleted. Upon typing again, the browser will attempt to recreate the formats, if one of the following methods is used to delete all content in the format tag:

  1. When the selection is collapsed and the last character or element of the content of a format tag is deleted by pressing Backspace or Delete (e.g. <p><span style="text-decoration: underline;">a</span></p> with the caret positioned after a);

  2. When a ranged selection has been made from the start of the content of a format tag to at or after the end of the content (to include the content’s entirety), and the ranged selection is deleted by pressing Backspace or Delete (e.g. <p><span style="text-decoration: underline;">ab</span>c</p> with the selection made to include ab); or

  3. When the selection is collapsed and a keyboard shortcut, namely Ctrl+Backspace (Windows/Linux), Ctrl+Delete (Windows/Linux), Opt+Delete (macOS), Opt+Fn+Delete (macOS), or ⌘+Delete (macOS), is used to delete all content within a format tag and the post-deletion caret is placed at where the start of the content used to be (e.g. <p>word1 <span style="text-decoration: underline;">word2</span></p> with the caret positioned after 2, and Ctrl+Backspace (Windows/Linux) or Opt+Delete (macOS) is performed to delete word2).

The recreated formats are not consistent with the original formats. For example, a <span style="text-decoration: underline;"> tag will be recreated as a <u> tag. This can consequently impact the HTML document’s semantics and visuals, causing a bug.

A key override on the Backspace and Delete keys already exists to address the first method. However, the bug persists for the second and third methods.

In TinyMCE 6.4.1, two new key overrides have been added to address the second and third methods:

  • For Method 2: When Backspace or Delete is detected on keydown on a ranged selection, the override checks if the conditions for Method 2 is satisfied. If so, the override will read the current formats, delete the selection, and then create a caret containing the original formats.

  • For Method 3: When one of the keyboard shortcuts from Method 3 is detected on keyup, the override creates an unformatted caret at the current selection. Performing the override on keyup allows the native behavior of the deletion shortcuts to occur. Then, applying an unformatted caret at the selection after deletion will prevent the browser from recreating any formats.

Visual characters were rendered inside noneditable elements

In previous versions of TinyMCE, a bug was found that affected the visual characters plugin. The visual characters would be rendered within an contenteditable="false" element.

In order to address this problem, improvements were made to better detect noneditable context, when an element is identified as a contenteditable="false" element, either by itself or through its descendants.

As a result, in TinyMCE 6.4.1, visual characters no longer render inside contenteditable="false" elements.

Lists in a noneditable root were incorrectly editable using list API commands, toolbar buttons and menu items

In previous versions of TinyMCE, a bug was found that affected the lists and Advanced List plugins when the TinyMCE editor body was set to contenteditable = "false". The consequence meant that the lists, that were even set as contenteditable="false", elements could be modified by using list API commands, toolbar buttons and menu items.

The fix involved implementing a new process to check the element conditions. The check now looks to identify if the list or Advanced List is a contenteditable = "false" element.

As a result, in TinyMCE 6.4.1, list or Advanced List plugins that are set as contenteditable = "false" elements can no longer be modified by using list API commands, toolbar buttons and menu items.

Color picker dialog would not update the preview color if the hex input value was prefixed with # symbol

In previous versions of TinyMCE, the preview sample box within the color picker dialog would not render. This issue could be replicated when a hex value was prefixed with a # symbol.

Example of a incorrect vs correct value input:

  • #BDE123: Incorrect hex value input.

  • BDE123: Correct hex value input.

In order to fix this bug, TinyMCE 6.4.1 now detects if the user inserts a # symbol before the hex value, and removes the leading # prefix before rendering to the color picker component.

In TinyMCE 6.4.1, the color picker works as expected when using hex values with the # prefix.

Table cell selection was possible even if the element was in a noneditable root element

In previous versions of TinyMCE, table cells set within a contenteditable="false" root element could still be selected and modified. This meant that any table UI actions, commands or selections could affect tables that were nested within the contenteditable="false" root element.

In TinyMCE 6.4.1, table is no longer selectable or editable by table UI and commands, when either the table or the editor body have been set as contenteditable="false" elements.

Table commands were modifying tables in a noneditable root element

In previous TinyMCE versions, tables within a root element with a contenteditable="false" attribute could be unexpectedly modified using commands.

TinyMCE 6.4.1 now blocks all table commands when the selection is in a table which is, itself, within an element with a contenteditable="false" attribute set, preventing unwanted modifications.

Fake carets were rendered for noneditable elements and tables in a noneditable root element

In previous versions of TinyMCE, fake carets would be rendered before or after tables or contenteditable="false" elements that was nested within another contenteditable="false" element.

To fix this TinyMCE 6.4.1, added a blocker for rendering fake carets for contenteditable="false" and table elements that are contained within other contenteditable="false" elements.

As a result, any contenteditable="false" or table elements that are nested within another contenteditable="false" element root will no longer have fake carets in TinyMCE 6.4.1.

Textareas with scrollbars in dialogs would not render rounded corners correctly on some browsers

In previous versions of TinyMCE, textareas with scrollbars in dialogs would not render rounded corners correctly on some browsers, as the rounded corner would be overlaid by the right-angled corner of the scrollbar track. An example of a dialog affected by this issue was the source code dialog.

TinyMCE 6.4.1 added to the form textarea element a wrapper class containing border properties and an overflow: hidden property. This correctly clips the scrollbars to the border-radius on all browsers, resolving the bug.

While setting the editor root to contenteditable="false", it was discovered that links could still be opened.

As a result, TinyMCE now blocks links from being selected while inside a contenteditable="false" root.

Inline boundary was rendered for noneditable inline boundary elements

Inline boundaries were rendered for inline elements within a contenteditable="false" editor root. The expected behavior is that contenteditable="false" elements should not highlight inline boundaries when a selection is inside an contenteditable="false" element.

Added a check for inline boundaries within contenteditable="false" elements that blocks the highlight.

In TinyMCE 6.4.1, it is now not possible to highlight inline boundary elements that are contained inside a contenteditable="false" element.

Clicking on a disabled split button would call the onAction callback

A bug was found in versions of TinyMCE prior to the 6.4.1 release, that would call the onAction callback for split buttons regardless of the action being disabled. This meant it was possible for the user to call onAction unintentionally

As a fix to the issue, TinyMCE 6.4.1 introduced a new conditional check to identify if the button is disabled before calling the onAction callback.

In TinyMCE 6.4.1, clicking on a disabled split button won’t call the onAction callback anymore.

A bug was found within the context menu and dialog when inserting links in previous versions of TinyMCE. The issue resulted in the open link being deactivated within the context menu and dialog when the user would execute a specific chain of clicks. Such as:

Example 1. Example
  1. Opening the editor

  2. Type “test1 test2 test3” into the editor

  3. Double click to select “test2”

  4. Use the context menu to insert a new link over the text “test2”

  5. Add a valid URL

  6. Press Enter

  7. Without taking any other action, right click on “test2”

In this example the bug would deactivate the open link button within the context menu and dialog, which removes the users ability to reopen the “open link” dialog.

The fix now allows all three link-plugins (Link, Remove link and Open link) to work within the context menu items.

In TinyMCE 6.4.1, when the user executes right mouse click on the link selection immediately after attaching a link to a <string>, the link-plugins now work as expected.

Content could be deleted inside contenteditable="false" elements

When content was deleted (either through the ForwardDelete/Delete commands, or the user pressing Backspace/Delete keys) in earlier versions of TinyMCE, the contents of a contenteditable="false" nested element would be deleted.

As a consequence, if a contenteditable="false" element was nested within a contenteditable="false" root element, the contents of the nested element would be deleted from the root element when the specified command or keys were executed.

To resolve this issue, TinyMCE 6.4.1 includes several enhancements to prevent all commands and keyboard functions from affecting contenteditable="false" content which includes the ForwardDelete/Delete commands and both the Backspace and Delete keys.

Inserting newlines inside an editable element inside a noneditable root would sometimes try to split the editable element

In previous versions of TinyMCE, inserting newlines inside an contenteditable="true" element while it was inside a contenteditable="false" root would sometimes try to split the contenteditable="true" element.

As a consequence, when child block elements set to contenteditable="true" such as a <p> tag were nested within the contenteditable="false" element root, the editor would try to split the child block element when the user hit the enter key.

As the paragraph tag is intended to be a block for text, it is classified as semantically incorrect to contain other block elements. In this particular instance, child elements in TinyMCE such as the <p> tag would split the block element resulting in a new block (such as a new paragraph) to be created inside the paragraph when a user attempted to edit it inside a contenteditable="false" root element.

Fixes were introduced with the release of TinyMCE 6.4.1, that:

  • Prevents editing host elements like <p contenteditable="true">paragraph text</p> in a contenteditable="false" root to be split.

  • Prevents editing hosts elements inside a contenteditable="false" root to be split.

As a result, when a root element is set to contenteditable="false", any contenteditable="true" elements inside that root element such as <p> tag will no longer try to split the contenteditable="true" element.

Creating a list in a table cell when the caret is in front of an anchor element would not properly include the anchor in the list

In previous versions of TinyMCE, when the caret is to the left of an anchor element at the start of a line in a table cell, creating a <ul> or <ol> list would not include the anchor element. Instead, the line with the anchor element would be unexpectedly pushed below and an empty list would be created above.

To resolve this bug, in TinyMCE 6.4.1, when toggling a list in a table cell, inline nodes such as anchors to the left and right of the caret are traversed to ensure that they are included in the list as expected.

Dragging and dropping noneditable elements on table borders would remove the element on drop

In previous versions of TinyMCE, dragging a contenteditable="false" element and dropping it on a table border would cause the contenteditable="false" element to be deleted. The user often intends to drop the element into a table cell, but may accidentally drop it on a table border, undesirably causing the element’s deletion.

TinyMCE 6.4.1 introduced a new behavior if an element is dropped onto a table border, it will now be inserted into the left or right adjacent cell instead of being deleted.

Noneditable elements would be removed when dragged and dropped within a noneditable root

In previous version of TinyMCE, dragging `contenteditable="false" elements into a contenteditable="false" root would remove the elements contenteditable="false" attributes.

As this is not the expected behavior for a contenteditable="false" element or root, this bug in particular, created issues in situations such as: (a) when the editor body was set to contenteditable="false", and (b) when a contenteditable="false" element is dragged and dropped into a table element that is within a contenteditable="false" root, which would result in the contenteditable="false" attributes blocks being deleted from the element that was dropped.

To fix this issue, improvements were made to the drag and drop function that checks if the source and target elements are within editable sections. This ensures the correct logic runs during a drop event and avoids the attribute removal.

In TinyMCE 6.4.1, contenteditable="false" elements now preserve their contenteditable="false" attributes if they are dragged and dropped within a contenteditable="false" root.

Formatting could be applied or removed on noneditable list items inside a noneditable root

In a contenteditable="false" root, when selecting multiple lines from lists, it was possible to add formatting to the selection such as bold and italic. As a consequence, this would allow contents that are considered contenteditable="false" to be modified which is not the expected behavior for contenteditable="false" elements within the root.

To fix this bug, TinyMCE, disabled list formatting, if the list is in within a contenteditable="false" root

In TinyMCE 6.4.1, a selection of multiple lines from lists can no longer be formatted when inside a contenteditable="false" root.

Annotation would not be removed if the annotation was immediately deleted after being created

In previous versions of TinyMCE, the annotations behavior was not working as expected when using comments.

As a consequence, the annotation (highlighted-text-selection) would not be removed from the text selection, if the annotation was immediately deleted after being created.

While applying a fix for this issue, it was identified that this was a regression created when TinyMCE fixed issue: `Change the annotation api to avoid dom mutation in plugins using it`, which adjusts the selection in the way that it is impossible, to retain the selected word.

However, with the release of TinyMCE 6.4.1, after immediately deleting annotations after they are created, they will no longer will be retained on the text selection.

In previous versions of TinyMCE, inserting a link for a text selection from quickbars did not preserve formatting.

As a consequence, when formatting the selection such as with bold or italic, then inserting the link via the quickbars plugin, the link would result in the applied formatting been removed from the text selection.

To fix this issue, improvements were made to a conditional check that is responsible for locating anchors in text selection.

As a result, formatting after pasting a link from quickbars is now preserved to the selection TinyMCE 6.4.1.

Inline dialog position was not correct when the editor wasn’t inline and was contained in a fixed or absolute positioned element

In previous versions of TinyMCE, inline dialogs, such as the Search and Replace and Accessibility Checker dialogs, would be positioned incorrectly to overlap with the toolbar when the editor was in classic iframe mode and was contained in an parent element with a fixed or absolute position. Inline dialogs would be rendered out of the bounds of the editor’s content area to overlap with the toolbar, causing a bug.

In TinyMCE 6.4.1, the container of the editor is used as the positioning bounds of inline dialogs when the editor is in classic mode. This ensures that the inline dialogs are positioned correctly when a classic-mode editor is in a container with a fixed or absolute position.

Sticky toolbars would not have fade transition when undocking in classic iframe mode

In previous versions of TinyMCE, a css selector which was overriding the transition property for the sticky toolbar in iframe mode was causing visual issues with the user interface.

As a consequence, the sticky toolbar would immediately render off-screen rather than fading out using a css transition animation.

In TinyMCE 6.4.1, the selector configuration was updated when the editor is docked, resulting in the sticky toolbar in classic iframe mode now fading out correctly when the editor is out of view, similar to how it transitions in inline mode.

Inserting elements that was not valid within the closest editing host would incorrectly split the editing host

In previous versions of TinyMCE, inserting invalid child blocks into a parent block element would create issues with the editing host element.

As a consequence, the editing host element would incorrectly split itself into multiple elements.

To fix this issue, with the release of TinyMCE 6.4.1, pasted elements are now instead unwrapped inside the target element rather than being wrapped.

In TinyMCE 6.4.1, pasting blocks that are invalid children of a contenteditable="true" blocks will no longer split that block, but instead unwrap the blocks to fit within the specific contenteditable="true" block.

color_cols option was not respected in the forecolor or backcolor color swatches

In previous versions of TinyMCE, the logic for specifying the number of columns in the forecolor and backcolor swatches was updated with the release of TinyMCE 6.3.

As a consequence, this logic didn’t use the color_cols option in TinyMCE v6.3

tinymce.init({
    selector: "textarea",
    plugins: "table code",
    toolbar: "forecolor backcolor tableprops",
    color_cols: 7, // <-- option was not respected
});

In TinyMCE 6.4.1, the color swatches opened by the forecolor and backcolor toolbar buttons have the amount of columns set by the color_cols option, if it is set.

Drag and dropping the last noneditable element out of its parent block would not properly pad the parent block element

In previous versions of TinyMCE, dragging the last child element with a contentedtiable="false" attribute out of a block element would prevent the user from placing the caret back into that source block.

As a fix, TinyMCE 6.4.1, added a new condition which validates if the source element is empty when the drop operation occurs. If it is empty then it will be padded with a BR element so that it’s possible to place the caret inside the block.

In TinyMCE 6.4.1, dragging and dropping elements that are contenteditable="false" out of they’re parent blocks now correctly pad the parent block element.

Non breaking spaces were not highlighted within a nested editable section

In previous versions of TinyMCE, when using the "show invisible characters" feature of the visualchars plugin, non breaking spaces were not highlighting within an editable section that was nested inside a noneditable section.

To resolve this issue, TinyMCE 6.4.1 introduced a fix to ensure that all invisible characters, including nonbreaking spaces, are accurately displayed when the plugin is enabled.

Non breaking space is added after backspace below text pattern heading

A recently discovered issue was identified in previous versions of TinyMCE, that affected the text formatting feature for Text Pattern. When a user would apply a text pattern heading such as # Title, followed by pressing "enter", the issue would the occur when the backspace key was pressed. As a result, a non-breaking space was being inserted to the beginning of the line instead. This unintended addition of a Non-breaking space caused formatting inconsistencies and errors.

In TinyMCE 6.4.1, pressing backspace after adding a Text Pattern, now formats the content as expected.

Incorrect event target for dragend and drop events when dragging and dropping noneditable elements within editor

In previous versions of TinyMCE, when dragging and dropping contenteditable="false" elements within the editor, the target of the dragstart, dragend, and drop events would be the editor instance itself, rather than the expected DOM target.

In TinyMCE 6.4.1, the events are now simulated based on the mouse event that produced them, meaning that the target and other properties, such as mouse coordinates, are now properly produced for the simulated dragstart, dragend, and drop events.

Dialog getting cut offscreen when opened from toolbar button in Inline Mode

In previous versions of TinyMCE, inline dialogs would always open to the South West of the button used to open it from the toolbar, or South East with RTL (Right-to-Left) directionality. However, an issue was found where, when the toolbar was shorter than the inline dialog, inline dialogs would appear partially off screen when opened.

To address this issue, inline dialogs now determine a more appropriate direction to open, that is, any direction which will not cause the dialog to appear offscreen.

Checkmark icons are added to every color in color swatch

In previous versions of TinyMCE, when using certain configurations, the color swatch feature could add a checkmark icon to every color, when the checkmark should only be displayed on a color when one is enabled.

In TinyMCE 6.4.1, the selector for applying the checkmark is updated so the checkmark will only be added and displayed for enabled colors.

The colour picker reset to default when formatting pre element with additional format options

In previous versions of TinyMCE, formatting elements with a pre-formatted tag, and applying a background color from the color swatch would cause formatting issues when additional formatting options such as bold and italics were applied to the pre-formatted element. When these formatting conditions were combined, the color picker would reset the users defined color value, which would trigger the color picker to reset this value to default "000000".

In TinyMCE 6.4.1, this issue has been resolved. Any pre-formatted elements what have additional formatting such as a color from the color picker no longer reset to its default color.

Editor increases the height indefinitely when using autoresize with content_css document

The document skin’s CSS aligns the bottom of the content area to the bottom of the editor, but does not set anything for autoresize_bottom_margin. As a consequence the TinyMCE editor takes the default value for this attribute: 50. Simultaneously, every time the resize function calculated the editor size it added this autoresize_bottom_margin value.

Since, the aligning CSS sets the bottom of the content area to a value incrementally less than the autoresize_bottom_margin value, the resize function went into a loop.

Consequently, and as per the example below, if a TinyMCE instance was setup with the Autoresize plugin active and content_css set to document, the editor increased its height indefinitely.

tinymce.init({
  selector: 'textarea',
  plugins: 'autoresize',
  content_css: 'document',
});

TinyMCE 6.4.1 fixed this issue by addressing the conflict between the document skin’s CSS and the autoresize_bottom_margin setting. With this update, TinyMCE now checks for the resize function going into a loop. And, if it does so, the function treats the margin bottom as always 0 instead of the autoresize_bottom_margin value. This changes the min-height of the editor and prevents the infinite resizing.

Plugin - Search and Replace - Throws a JS console error if you search for a string that doesn’t exist and try to click on the preferences button.

In previous versions of TinyMCE, the 'Search and Replace' plugin had a known issue that caused a console error when searching for a string that wasn’t in the editor content, and then attempting to click on the preferences button.

As a result, an "incorrect type" error would prevent users from opening the preferences section.

In TinyMCE 6.4.1, this issue has been resolved.

Toolbar doesn’t hide when editor is out of view in scrollable container

In previous versions of TinyMCE, when the editor is within a scrollable container, the toolbar would remain visible when the editor is scrolled out of view.

Editor increases the height indefinitely when using autoresize with content_css: 'document'

In previous versions of TinyMCE, it was discovered that the editor had some issues with the autoresize plugin when using content_css: 'document', which caused the editor height to expand indefinitely.

To fix this issue, TinyMCE addressed the conflict between the document skin’s CSS and the autoresize bottom margin setting. After this fix, the resize function now checks for loops and considers the margin bottom as always set to 0 instead of autoresize bottom margin, which ensutes that the editor’s height is calculated correctly.

Known issues

This section describes issues that users of TinyMCE 6.4.1 may encounter and possible workarounds for these issues.

There are several known issues in TinyMCE 6.4.1.

Accessibility check dropdown not populated when switching between issues

In previous versions of TinyMCE, a bug was discovered that encountered an issue with the Accessibility Checker dropdown. When switching between different issues, the dropdown would not re-populate on existing viewed issues.

this issue is addressed in TinyMCE 6.4.2.

Bug with Table Icon in more drawer

Recently an issue was discovered which affects keyboard navigation of the toolbar. The issue occurs when the "More" toolbar is opened and contains a "Menu Toolbar Button", such as the table or language toolbar buttons, when a user attempts to use the "tab" key to navigate between toolbar groups, any Menu Buttons not at the beginning of a toolbar group will incorrectly be navigable. The correct behavior would involve these buttons only being navigable via the arrow keys.

This cannot be prevented, however the user may require extra presses of the "tab" key to navigate to the desired toolbar group.

Fix height overflow issues on "some" dialogs

After conducting a thorough investigation into the new Advanced Template plugin, we have discovered a known issue with certain dialogs. Specifically, we found that dialogs without tabs do not handle viewport height gracefully. As a result, these dialogs can push out the button area and disrupt the expected layout. The header and footer area of the dialog should always remain visible, while scrolling should only apply to the internal content, not the header or footer.

We have identified that the "Insert link" dialog is an example of a dialog that does not work correctly in this regard, while the "Insert image" dialog functions as expected. These issues were discovered while examining mobile performance within the new Advanced Template plugin, and we are working to address them in order to provide a smoother and more user-friendly experience.

Unfortunately, at this time there is no known workaround for the issue with dialogs.

The ToggleToolbarDrawer command does not toggle the toolbar drawer in some situations

It has been identified that as of TinyMCE 6.8.3, when using skipFocus: true, the ToggleToolbarDrawer command does not toggle the toolbar drawer when the toolbar_mode option is set to 'sliding'.

Unfortunately, at this time there is no known workaround for the issue.