TinyMCE 6.4.1

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.

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.

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.

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:

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.

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.

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.

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.

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

Checklist 2.0.4 includes the following fix.

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 TinyMCE 6.4.1 release includes an accompanying release of the PowerPaste premium plugin.

PowerPaste 6.1.4 includes the following fixes.

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

Comments 3.3.1 includes the following fix.

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.

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

Mentions 3.0.4 includes the following fix:

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.

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

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.

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,

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.

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:

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.

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.

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.

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.

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.

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.

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.

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.

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:

In previous versions of TinyMCE, the ToggleToolbarDrawer command contained an incorrect focus call. As a consequence, this meant that when the ToggleToolbarDrawer command option skip_focus: 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 skip_focus.

As a result of the fix, when using the ToggleToolbarDrawer command, the toolbar now avoids stealing focus when skip_focus: true is set.

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

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.

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.

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.

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.

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.

Read more about Sanitizing HTML input to protect against XSS attacks

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.

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

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:

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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:

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.

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.

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.

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.

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.

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.

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.

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.

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.

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:

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:

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:

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.

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.

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:

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.

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.

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.

Read more on editor commands

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.

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 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.

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:

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.

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.

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:

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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.

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.

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 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.

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.

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.

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.

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.

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.

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.