TinyMCE 6.5.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.5.1 was released for TinyMCE Enterprise and Tiny Cloud on Wednesday, June 21st, 2023. These release notes provide an overview of the changes for TinyMCE 6.5.1:

New Open Source Plugin

The following new Open Source Plugin was released alongside TinyMCE 6.5.1.

Accordion 1.0.0

The new Open Source plugin, Accordion allows for the creation of sections in a document that can be expanded or collapsed to show or hide additional content.

The Accordion plugin also provides integrators with four commands:

  • InsertAccordion;

  • ToggleAccordion;

  • ToggleAllAccordions;

  • RemoveAccordion;

and two initialization options

  • details_initial_state;

  • details_serialized_state.

For information on the Accordion plugin see Accordion.

Accompanying Premium Plugin changes

The following premium plugin updates were released alongside TinyMCE 6.5.1.

Enhanced Media Embed 3.1.2

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

Enhanced Media Embed 3.1.2 includes the following fix.

Allow a media embed element to be correctly resized when using the Media plugin dialog by converting the responsive media embed to a standalone iframe.

Previously, the Enhanced Media Embed plugin and the Media plugin encountered issues when used together.

The Enhanced Media Embed plugin wraps iframe in a responsive wrapper that relies on large padding for the height.

The Media plugin dialog, however, targets the "ephox-embed-iri" div, and the width and height are mapped to the wrapper’s max-width and max-height properties.

When content created with the Enhanced Media Embed plugin is inserted using the Media plugin dialog, the height is primarily determined by padding, rendering the max-height property ineffective.

(For additional detail, see benmarshall.me/responsive-iframes.)

As well, when inserting embedded content via the Enhanced Media Embed plugin, the element may be dis-proportionally sized. This occurred because height was not explicitly set, leaving it to be determined by the content within the iframe.

In Enhanced Media Embed 3.1.2 the responsive embedded content is wrapped in a div with the wrapper’s max-width set. This ensures that the embedded content maintains proportional sizing when resizing the viewport.

As well, when opening the Media plugin dialog for content created using the Enhanced Media Embed plugin and identified with the "ephox-embed-iri" attribute, the width and height are now calculated and displayed in the editor. If any changes to the height or width are made within the dialog, the responsive media embed is converted into a standalone iframe with a fixed width and height to reflect the modifications.

For information on the Enhanced Media Embed plugin, see: Introduction to Enhanced Media Embed.

Case Change 2.0.2

The TinyMCE 6.5.1 release includes an accompanying release of the Case Change premium plugin.

Case Change 2.0.2 includes the following change.

It was possible to apply case change to elements with a contenteditable="false" attribute set.

Previously, the Case Change plugin could change the case of a selection inside an element with a contenteditable="false" attribute set.

In Case Change 2.0.2, the Case Change toolbar button and menu items are disabled when the selection is in an element with a contenteditable="false" attribute set.

For information on the Case Change plugin, see: Case Change.

Checklist 2.0.5

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

Checklist 2.0.5 includes one fix:

Checklist toggling was possible on elements with a contenteditable="false" attribute set

In previous versions of TinyMCE, the Checklist plugin could toggle elements with a contenteditable="false" attribute set.

As a consequence, lists nested within an element with a contenteditable="false" attribute set could be converted into checklists.

To address this, as of TinyMCE 6.5.1, the Checklist button is disabled when the selection is within an element with a contenteditable="false" attribute set.

It is no longer possible to apply Checklist functionality to elements with a contenteditable="false" attribute set.

For information on the Checklist plugin, see: Checklist.

The TinyMCE 6.5.1 release includes an accompanying release of the Link Checker Premium plugin.

Link Checker 3.0.3 includes one fix:

Previously the Link Checker plugin performed checks on links contained in elements with the contenteditable="false" attribute set.

As a consequence, these links were marked as invalid, even though the end-user is unable to alter them.

As of Link Checker 3.0.3, the plugin no longer checks links contained within elements with the contenteditable="false" attribute set.

No such links, consequently, return invalid notices the end-user can do nothing about.

For information on the Link Checker plugin, see: Link Checker.

Accessibility Checker 3.2.0

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

Accessibility Checker 3.2.0 includes the following fix, and improvement.

Elements with contenteditable="false" attributes set were not properly ignored by the Accessibility Checker.

Previously, elements with contenteditable="false" attributes set were not properly ignored by the Accessibility Checker Premium plugin.

As a consequence, the Accessibility Checker would, incorrectly, find and report accessibility errors concerning content within such elements.

Accessibility Checker 3.2.0 correctly ignores elements with contenteditable="false" attributes set.

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

No longer allow attempting to fix a table’s lack of headers if the table has no cells.

Previously, the Accessibility Checker plugin assumed a table had at least one row. As a consequence it would, consequent to attempting to produce a user-visible error regarding a table having no header rows, throw an internal error when it checked a table that had no cells at all.

This error was sent to the Console but no errors or alerts were presented to end-users.

As of Accessibility Checker 3.2.0, the plugin no longer attempts to fix errors in tables with no rows. The user experience is unchanged, but Console errors are no longer generated in this circumstance.

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

Advanced Code Editor 3.3.0

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

Advanced Code Editor 3.3.0 includes the following three changes, and one fix:

When switching to full-screen mode when the editor was set to inline view, focus was not returned to the code editor on iOS.

In previous versions of TinyMCE, the default behavior of editor.execCommand in inline mode on iOS was to hide the editor when the view is open. Although it should not be possible to focus on it, iOS allowed it.

As a consequence, when pressing the fullscreen button the editor used editor.execCommand('mceFullScreen'), which caused the insertion point to be positioned incorrectly on iOS.

To resolve this issue, TinyMCE 6.5.1, includes skip_focus: true as a parameter for the mceFullScreen command. Consequently, the Full Screen button no longer attempts to focus back on the editor.

Advanced Code Editor did not preserve changes to font size or dark/light mode state.

In previous versions of the Advanced Code Editor, the font size and dark/light mode states were not preserved after closing the dialog.

When the Advanced Code Editor was closed, these states reverted to their default values.

In Advanced Code Editor 3.3.0, font size and dark/light mode states are preserved when the editor is closed.

This issue only affected the Advanced Coded Editor when it was opened in a dialog.

The Copy code button was incorrectly styled within the Advanced Code Editor.

In previous versions of Advanced Code Editor, the Copy code button, was styled incorrectly. Specifically, it was missing the grey background used in other, equivalent, buttons.

This was caused by an incorrect CSS setting. The setting, borderless: true, should not have been applied. As a consequence, the button wasn’t correctly styled.

In Advanced Code Editor 3.3.0, the borderless: true setting has been removed and the button is now correctly styled.

The Advanced Code Editor now preserves selected font size.

Previously, font size changes in the Advanced Code Editor were not preserved when the user exited the editor in inline mode.

In Advanced Code Editor 3.3.0 a fix has been implemented to address this. Now, when users change the font size in the Advanced Code Editor and the user closes the Code Editor, the font size changes are preserved.

The changed font size setting presents when the Advanced Code Editor is opened again.

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

Spell Checker Pro 3.3.0

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

Spell Checker Pro 3.3.0 includes three additions and one change:

New mceSpellcheckUpdate command

The new mceSpellcheckUpdate command allows users to trigger a check for misspelled words in the editor content, and includes any spelling suggestions for the misspelt words.

This allows users to verify their spelling all at once without the use of the Spell Checker Pro dialog, with any suggestions available from a context menu.

New SpellcheckerUpdated event

The new SpellcheckerUpdated event is triggered each time the editor content is updated to display new misspelt words once suggestions are provided for those misspelt words.

This event is currently supported when using the mceSpellcheckUpdate command or when opening the dialog.

This event is not currently supported in As-you-type mode.

New getSpellingErrors() API

The new getSpellingErrors() API allows users to retrieve a list of each misspelling in the editor content.

Words containing non-Latin characters were not sent in spelling requests.

As of Spell Checker Pro 3.2.1, only languages using a Latin-based alphabet — for example; English, French, and German — had supported dictionaries.

As a consequence, Spell Checker Pro’s client-side only sent strings containing Latin characters in spelling requests to the server, omitting words containing non-Latin characters from languages such as Greek, Arabic, and Korean.

This interfered with some use-cases in which Spell Checker Pro client-side was paired with a custom spellchecking service which supports languages with non-Latin alphabets: words containing non-Latin characters were not sent to the server.

In Spell Checker Pro 3.3.0, the word identification logic for the plugin’s client-side has been changed to the one used by the Word Count plugin. This allows words containing non-Latin characters to be captured and sent in requests to the spelling service.

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

Advanced Templates 1.2.0

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

Advanced Templates 1.2.0 includes one improvement, one addition, and four fixes:

The Advanced Template UI now provides controls for a preconfigured operations set.

This Advanced Templates plugin update introduces a user interface that offers controls tailored for a predefined range of operations. This simplifies the user experience by only presenting the options relevant to the tasks at hand.

New advtemplate_templates configuration option to define an immutable list of predefined templates.

Advanced Templates 1.2.0 adds the new advtemplate_templates configuration option.

This option can set up an unchangeable list of predefined templates. It is designed for situations where the template list should remain static.

Instead of setting up a persistent template store and the consequent complex plugin configuration, the advtemplate_templates option specifies a static templates list that can be inserted using the Templates dialog.

A selected item within its parent directory in tree components, did not remain selected after closing the directory

In previous versions of the Advanced Templates plugin, selecting a component in a leaf within its parent directory and then closing the directory caused the selection to be lost.

This new release of the Advanced Templates plugin corrects this. It now tracks the selected leaf’s active state before and after collapsing or expanding the leaf’s parent directory.

Expanded category trees collapsed after any element in the tree was renamed in the Templates dialog’s tree component.

In the previous version of TinyMCE, when users renamed a template or category in the Insert → template… dialog, the template list refreshed and expanded categories collapsed.

Although cosmetic, this state loss hid the renamed template or category; a likely cause of user confusion.

This update addresses this using a new configuration property, defaultExpandedIds. The defaultExpandedIDs property allows the category tree’s state to be saved before executing the rename operation and then passed back for re-rendering the tree after the re-naming.

With this update, after a template or category is re-named, the template list is re-rendered in the same state as it was prior to the re-naming. Consequently, if an object was in an expanded tree prior to being re-named, it will remain visible as a re-named object when the tree refreshes.

A selected tree component template item did not stay highlighted when the Templates dialog re-rendered.

In previous versions of TinyMCE, a selected tree component template item would lose its highlight when the Advanced Template dialog was re-rendered after the template list updated.

This occurred when a user renamed a selected template item in the tree component. As a consequence, the user could not identify the currently selected item in the tree.

In TinyMCE 6.5.1, the problem was addressed by utilizing the new defaultSelectedId configuration property from the tree component API.

As a result, the currently previewed template is now correctly highlighted in the tree component, as expected.

The Insert → Template… menu item and equivalent toolbar button was not disabled when the selection was inside an element with a contenteditable="false" attribute set

In previous versions of TinyMCE, the Insert → Template… menu item, and equivalent toolbar button remained active when the user’s selection or insertion point was inside an element with a contenteditable="false" attribute set.

As a consequence, the Advanced Template toolbar button and menu item appeared enabled, but clicking on them had no effect.

A fix was implemented in TinyMCE 6.5.1. TinyMCE now checks if the user’s current selection is within an element with a contenteditable="false" attribute set. If it is, the Advanced Template toolbar button and menu item are disabled, as expected.

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

Merge Tags 1.3.0

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

Merge Tags 1.3.0 includes three fixes:

The plugin now correctly manages prefixes and suffixes when they are the same.

In previous versions of Merge Tags the plugin mishandled a merge tags’ prefix and suffix when the user placed multiple merge tags within either an inline or block element. This resulted in incorrect management of these prefixes and suffixes during the setContent operation.

This mis-management resulted in an unintended repetition of the prefix or suffix occurred, which lead to undesired output.

For example, if the input was:

<div>%Tag1% this is a bug %Tag1%</div>

the output, after the setContent operation was:

%Tag1%%% this is a bug %%%Tag1%

As of this Merge Tags update, the plugin now splits the array of any matching merge tags that are identified as odd prefixes or suffixes. As a consequence, merge tag prefixes and suffixes that are the same are output as expected.

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

Right clicking on a merge tag instance presented different highlighting depending on the host browser.

In previous versions of TinyMCE, when users right-clicked on a merge tag, the highlighting within the merge tag selection varied, depending on the host browser.

This resulted in an inconsistent end-user experience.

TinyMCE 6.5.1 no longer uses a browser’s default highlighting of the merge tag. Instead, TinyMCE 6.5.1 introduces TinyMCE-specific styles. These styles highlight the merge tag consistently across different browsers.

TinyMCE now presents end-users with uniform merge tag highlighting across all supported browsers.

Insert → Merge tag menu item, and equivalent toolbar button was not disabled when selection was inside an element with a contenteditable="false" attribute set

In previous versions of TinyMCE, the Insert → Merge tag menu item, and equivalent toolbar button remained active when the user’s selection or insertion point was inside an element with a contenteditable="false" attribute set.

As a consequence the Merge tags toolbar button and menu item appeared enabled, but clicking on them had no effect.

A fix was implemented in TinyMCE 6.5.1. TinyMCE now checks if the user’s current selection is within an element with a contenteditable="false" attribute set. If it is, the Merge tags toolbar button and menu item are disabled, as expected.

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

Advanced Typography 1.1.2

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

Advanced Typography 1.1.2 includes three fixes:

Advanced Typography buttons are disabled in elements with a contenteditable="false" attribute set.

Previously, the Typography toolbar button was still enabled when the user selected an element with a contenteditable="false" attribute set within the TinyMCE editor.

With this release, the Advanced Typography plugin now correctly disables its toolbar button and its function when the selection is in an element with a contenteditable="false" attribute set.

The Advanced Typography command, mceTypography, no longer applies fixes if the selection is an element with a contenteditable="false" attribute set.

Previously, applying the mceTypography command when the selection was in an element with a contenteditable="false" attribute set still applied changes to the selection.

With this release, the Advanced Typography plugin now correctly disables the mceTypography command when the selection is in an element with a contenteditable="false" attribute set

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

Fixed adding unnecessary space after a comma and before a quote in several scenarios.

In previous versions of TinyMCE, the issue of adding an unnecessary space after a comma and before a quote in several scenarios was caused by an incorrectly written Regular Expression rule in the Typograf library used by the Advanced Typography plugin. This led to the appearance of spaces between commas and quotes.

To fix this, TinyMCE updated the Regular Expression rule in the Typograf library. As a result, spaces between commas and quotes no longer appear.

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

PowerPaste 6.2.0

The TinyMCE 6.5.1 release includes an accompanying release of the Power Paste premium plugin.

PowerPaste 6.2.0 includes two fixes:

Existing tables were not filled out when pasting tables from Microsoft Word or Microsoft Excel.

Previously, when the PowerPaste plugin was active and a table was copied from Microsoft Word or Microsoft Excel into a TinyMCE editor, the copied table pasted as a whole table into a single cell, rather than merging the content of the copied table into the cells of the existing table.

PowerPaste 6.2.0 addresses this.

With this release, when a table is copied and pasted from Microsoft Word or Microsoft Excel into an existing TinyMCE table, it correctly fills the cells of the existing table.

For information on the PowerPaste plugin, see: Introduction to PowerPaste.

Text within anchor tags, <a>, presented with the Times New Roman font-family, ignoring the font family used in the original document.

In previous versions of TinyMCE, an issue related to the a:link selector in the CSS received from Microsoft Word was identified.

When content containing links was pasted from a Microsoft Word file into a TinyMCE instance running the PowerPaste plugin, the pasted-in link text rendered using the Times New Roman font family. And it presented thus no matter the typeface set for this text in the original Microsoft Word document.

To work around this, TinyMCE 6.5.1 removes the default CSS styling applied by Microsoft Word during the paste operation.

With this change, link text copied from Microsoft Word using the PowerPaste plugin now uses the font-family matching that used in the source document.

For information on the PowerPaste plugin, see: Introduction to PowerPaste.

Format Painter 2.0.2

The TinyMCE 6.5.1 release includes an accompanying release of the Format Painter Premium plugin.

Format Painter 2.0.2 includes one fix:

It was possible to modify text elements with the contenteditable="false" attribute set using formatpainter

Users could use previous versions of the Format Painter plugin to modify text elements with the contenteditable="false" attribute set.

That is, users could, contrary to the attribute setting, make formatting changes to text marked as Read Only using this plugin.

With this update, the Format Painter plugin marks the contenteditable="false" attribute setting properly: text elements with this setting are no longer changed if this plugin is applied to them.

For information on the Format Painter plugin, see: Format Painter.

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 deactivated on December 31, 2023, and is no longer available for purchase.

Accompanying Premium Skins and Icon Packs changes

The TinyMCE 6.5.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.5.1 skin, Oxide.

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

Improvements

TinyMCE 6.5.1 also includes the following improvements:

DialogFooterToggleButton icon prop is now optional

Previously it was mandatory for the DialogFooterToggleButton to have an icon prop.

Toggle buttons in dialog footers did not function without a displayed icon.

As of TinyMCE 6.5.1 the icon prop is now optional and toggle buttons in dialog footers work with and without a displayed icon.

Translations added for Help text displayed at Help > Help > Keyboard Navigation.

In previous versions of TinyMCE, translations for the text on the “Keyboard Navigation” tab in the Help dialog were not available due to a flaw with the way translations were delivered.

Conventionally, translations were parsed into JavaScript files containing objects which were keyed by the English string, with the value being the translated equivalent in a different language. This was unsuitable for very long strings such as the text on the Keyboard Navigation tab.

In TinyMCE 6.5.1, a new pipeline has been implemented for delivering translations of long strings. Professional translations of text within the Keyboard Navigation tab inside the Help dialog have also been procured.

As a result, the text in the Help dialog’s Keyboard Navigation tab is now shown in the language specified by the current editor’s language option.

Due to the large differences between this new pipeline and conventional methods of delivering translations, the professional translations for the text on the Keyboard Navigation tab have been made open source for community users. These translations are in the i18n subdirectory of the Help plugin.

Screen readers now announce instructions for using arrow keys to resize the editor when the resize handle is focused

When using voice assistant software in previous versions of TinyMCE, focusing on the editor resize handle would not announce any instruction.

In TinyMCE 6.5.1, instructions for using arrow keys to adjust the editor viewport’s size are now announced upon focusing the editor resize handle, while using voice assistant software.

In TinyMCE 6.5.1, this announcement is only available in English. Additional translations will be added in a future release.

If the selection contains multiple table cells, Quickbar toolbars now present at the middle or beginning of the selection, horizontally.

When multiple table cell elements are selected, by default, a blue background indicates their selection.

In previous TinyMCE versions, however, once a cell selection was made, the Quickbar toolbar presented as pointing at the contents of the last cell in the selection. This gave the (incorrect) visual impression that formatting changes would only affect the contents of cell.

In TinyMCE 6.5.1, when multiple table cells are selected, the Quickbar plugin calculates the bounding box of the selected cells. Using this information, the Quickbar now presents with the toolbar’s pointer directed at either the middle or the beginning of the selection, considered horizontally.

This presentation makes it clearer that any Quickbar buttons will be applied to the entire selection.

Additions

TinyMCE 6.5.1 also includes the following additions:

New init_content_sync option that initializes the editor iframe using document.write instead of srcdoc.

In previous versions of TinyMCE, a toolbar flicker was identified when editor instances are re-initialized.

As an option to reduce this, TinyMCE 6.5.1 includes a new setting, init_content_sync.

This option allows the editor iframe to be initialized using document.write instead of srcdoc, resulting in a synchronous initialization process that reduces toolbar flicker.

This new option only reduces toolbar flicker. Content flicker may still occur.

New table_merge_content_on_paste option which can disable the merging behavior when pasting a table inside an existing table.

In previous versions of TinyMCE, when a table was copied and pasted inside an existing table, the content of the copied table would fill the existing table instead of being pasted as a whole inside the table cell where the paste was performed.

TinyMCE 6.5.1 includes the new option, table_merge_content_on_paste, that allows for this behavior to be turned off.

When this option is set to false table merging is disabled and the pasted-in table is inserted into the desired table cell during the paste operation instead.

Exposed dataTransfer property of drag and drop events for elements with a contenteditable="false" attribute.

Dragging and dropping elements with a contenteditable="false" attribute within TinyMCE emits dragstart, drop, and dragend events as expected.

However, in previous versions of TinyMCE, these drag events had their dataTransfer property set to null. According to web standards it should be set to a DataTransfer object holding the drag operation’s data.

As a consequence, integrators were unable to view and manipulate the HTML drag data in these drag events.

In TinyMCE 6.5.1, dragstart, drop, and dragend events now have their dataTransfer property populated with a DataTransfer object whose text/html data holds the outerHTML of the contenteditable="false" element being dragged.

Additionally, a custom mode module has been implemented to ensure that the DataTransfer object is in read-write mode in dragstart events, read-only mode in drop events, and protected mode in dragend events, as per standard.

Integrators who wish to manipulate the HTML drag data should do so in the dragstart event using the DataTransfer.setData method.

Toolbar and menu items were not disabled correctly when selecting elements with a contenteditable="false" attribute inside an editor root with a contenteditable="false" attribute set.

In previous versions of TinyMCE, an issue was identified where toolbar and menu items were not presenting as disabled when the contents of elements with a contenteditable="false" attribute were selected from inside a editor root with a contenteditable="false" attribute set.

In this circumstance, toolbar buttons and menu items appeared as enabled even though the buttons and menu items were in a disabled state based on the user’s current selection.

TinyMCE 6.5.1 now explicitly disables toolbar buttons and menu items based on the user’s selection.

In addition, if the contents of elements with a contenteditable="true" attribute are selected in the same circumstance, the toolbars and menu items are re-enabled.

tabpanel labels in TinyMCE dialogs can now word wrap for better readability with long labels.

For TinyMCE 6.5.1, improvements were made to the tabpanel dialogs: labels on the tabs can now wrap to multiple lines. This improves the readability of the tab labels, particularly when longer labels are displayed.

In particular, the keyboard navigation text in the help dialog is now readable in all languages, without compromising the width of the dialog tab buttons.

Support for the h hash parameter in Vimeo video url in the Media plugin.

In previous versions of TinyMCE, an issue was identified that prevented unlisted Vimeo videos from been added to the editor when using the Media plugin.

The Media plugin failed to correctly insert the video into the content due to TinyMCE ignoring the h parameter when parsing the source URL.

In TinyMCE 6.5.1, the h parameter is now parsed and included in the source URL by TinyMCE.

As a result, embedding unlisted Vimeo videos into a TinyMCE editor using the Media plugin now works as expected.

Changes

TinyMCE 6.5.1 also incorporates the following changes:

Updated the font and font size dropdown styles to match the default TinyMCE styles

During the TinyMCE 5.x lifetime, browser-native select form elements were replaced by a TinyMCE native dropdown component. However, some browser-native select form elements were not replaced by the custom dropdown component.

This caused inconsistent user interface as certain parts of the application continued to use the browser-native selectbox. Affected components include the Advanced Code, Template, Accessibility Checker, Page embed, Permanent Pen, and Advanced Table plugins.

With the release of TinyMCE 6.5.1, all form select elements now use the TinyMCE native select component, listbox, instead of the browser-native selectbox. This change ensures a consistent user interface throughout TinyMCE.

The TinyMCE Help dialog was restored to medium width for better readability.

A change was made in TinyMCE 6.4 that caused the help dialog to become narrower.

As a result, users experienced difficulty in reading the content, especially in languages other than English.

To address this issue, the width of the help dialog has been restored to its previous size, ensuring better readability for all users.

List items in a combo box were not announced by screen readers.

For example, the URL text-entry field in the Link dialog is a combobox. When this element is focused with a screen reader, it is announced as a combobox and pressing the down arrow shows the available list items.

In previous versions of TinyMCE, however, none of these items were announced by the screen reader as they were selected, making these items effectively invisible to screen reader users.

With this update, listed items in a combobox can be announced by screen readers, as expected.

When dragging and dropping image elements within the editor the dragend event would sometimes not fire when Firefox was the host browser.

Previously, when dragging and dropping image elements within the editor, the dragend event would, in some circumstances, not trigger when the host browser was Mozilla Firefox.

With this update, a fix for this was implemented. TinyMCE 6.5.1 now ensures that the dragend event consistently fires when an image is dropped in the editor, even when the host browser is Firefox.

The anchor element (a) could contain block child elements when the editor schema was set to HTML 4.

In previous versions of TinyMCE, the anchor element — <a> — could have block elements added as children when the schema was set to HTML 4.

Consequently, applying a heading element (for example, an <h1> element) to a link within a table caption would affect the editor view, even though the table caption tag was not included in the serialized content.

To address this issue, an update was made to the editor’s HTML4 schema: block child elements are now not allowed in anchor tags.

As a result, applying block formatting to link content in TinyMCE 6.5.1, should no longer have any impact.

The caption, address and dt elements could contain block child elements when the editor schema was set to HTML 4.

In previous versions of TinyMCE, the <caption>, <dt> and <address> elements could have block elements added as children when the schema was set to HTML 4.

The HTML 4 schema does not support this and, as a consequence, TinyMCE documents containing such child elements did not validate against HTML 4-specific parsers and validators.

In TinyMCE 6.5.1, the editor’s HTML 4 schema has been corrected. Block elements are now, correctly, considered invalid inside such elements and are automatically unwrapped out of the elements noted above.

Bug fixes

TinyMCE 6.5.1 also includes the following bug fixes:

Whitespace between transparent elements could, incorrectly, be converted into empty paragraphs.

Previously, when a file containing adjacent anchor element around block element structures was added to the root of a TinyMCE editor instance, the whitespace between each anchor-block structure was, incorrectly, turned into an empty paragraph.

This update corrects this. When such structures are inserted into a TinyMCE 6.5.1 instance, the extra paragraph is no longer inserted between the block elements.

Previously, if the TinyMCE root element had a contenteditable="false" attribute set and the unlink editor command was used while a link was selected, the link was, incorrectly, removed.

For this update, the unlink command was updated. If the current selection is within an element with a contenteditable="false" attribute set, issuing an unlink command has no effect: the link remains in place as expected.

Some toolbar items did not render the ‘unavailable’ mouse pointer when the toolbar item was unavailable.

In previous versions of TinyMCE, certain toolbar items did not render the ‘unavailable’ mouse pointer when the toolbar item was unavailable. This occurred when the text color and fontsizeinput controls were rendered in a disabled toolbar.

As a result, the disabled state of these toolbar items was not correctly shown.

In TinyMCE 6.5.1, the CSS was modified to provide clearer visual indications for disabled toolbar items. As a result, the toolbar items are now properly disabled, appearing greyed out and displaying an unavailable mouse pointer.

Formatting issues with elements with a contenteditable="false" attribute set and the formatter API resolved

If the selection is in an element with a contenteditable="false" attribute set, and spot-formatting is applied to the selection, the spot formatting is not applied to the selected content, as expected.

However, In previous versions of TinyMCE, in such a circumstance, the spot formatting was erroneously applied to the nearest writeable element, if such an element existed.

This incorrect application of spot-formatting also presented when the formatter API was used, because the API’s canApply function did not return false when the selection was in an element with a contenteditable="false" attribute set.

In TinyMCE 6.5.1, the issue has been resolved. Spot formatting is no longer misapplied to not-selected elements.

Text directionality could be set on elements with a contenteditable="false" attribute set when within a root with a contenteditable="false" attribute set

Previously, text directionality commands, which set the dir attribute, could be applied to elements with a contenteditable="false" attribute set when those elements were within a root with a contenteditable="false" attribute set.

As of this release, TinyMCE now checks if a selected element has a contenteditable="false" attribute set. And, on elements with this attribute set, text directionality commands are not applied to the selection, as expected.

The insertion point moved in the wrong direction when traversing an inline element with a contenteditable="false" attribute set within a block element with a right-to-left text direction set

Previously, when a TinyMCE document had an inline element with a contenteditable="false" attribute set inside a block element that had a text direction of right-to-left, the insertion point would move in the wrong direction when traversing the inline element using arrow keys.

As of this release, when such an inline element, inside a block element with a right-to-left text direction, is traversed, TinyMCE moves the insertion point in reverse logical order.

This ensures the insertion point traverses the inline element as expected, moving over the element in the direction expected by the arrow-key being pressed.

Quickbar toolbars was shown for elements with a contenteditable="false" attribute set which were, in turn, in a root with a contenteditable="false" attribute set.

Previously, when the document root had a contenteditable="false" attribute set, the Quickbar toolbar appeared when an element with its own contenteditable="false" attribute was selected.

A fix was applied to the Quickbar toolbar in TinyMCE 6.5.1. The toolbar now sets itself to hidden if the current selection is within an element with a contenteditable="false" attribute set.

The Table toolbar was visible even if the table was within an element with a contenteditable="false" attribute.

In previous versions of TinyMCE, the table toolbar remained visible even if the table was within a host element that had the contenteditable="false" attribute set, making the Table read-only, and making the visible Table toolbar unhelpful, at best.

In TinyMCE 6.5.1, this issue has been resolved. The editor no longer shows the Table toolbar when the selection is within a host element that has the contenteditable="false" attribute set.

The content of TinyMCE dialogs could not be scrolled in some circumstances.

Previously, the dialog’s body content was setup with a maximum height of 650px (max-height: 650px;).

As a consequence, scrolling was only enabled in dialog’s when the dialog’s content exceeded this height. As a further consequence, when dialogs were less than 650px high, the dialog’s footer could extend below the dialog’s bounds, putting the controls in the footer out of view. This particularly presented in dialogs that do not have tabs.

In TinyMCE 6.5.1, the dialog body’s max-height is set to a calculated value: the minimum value between 650px and the viewport height (vh) minus 110px. 110px, here, is the combined height of a TinyMCE dialog’s header and footer.

TinyMCE dialogs now display consistently and correctly. And footer controls appear in view.

Direction did not visually change when Directionality was applied to an element which had the CSS property, direction, set.

When determining an element’s directionality, the direction style takes precedence over the dir attribute in many cases.

However, in previous versions of TinyMCE, the Directionality plugin only affected the dir attribute and did not consider any direction style, whether inline or from a stylesheet. Consequently, the Directionality plugin did not visually affect elements with a CSS direction style applied.

As of TinyMCE 6.5.1, the Directionality plugin takes into account the direction CSS style while still giving priority to the dir attribute.

In TinyMCE 6.5.1, when Directionality is applied to an element:

  1. any inline direction style is removed if present; then

  2. the standard dir attribute logic is applied; and, finally;

  3. the plugin determines if an inline direction CSS style is necessary for the desired visual change in direction.

The final step above — the addition of an inline direction CSS style — most often occurs if the element derives a different direction style from a stylesheet.

As a consequence of these changes, the Directionality plugin now functions as expected for elements with a direction CSS style applied.

In Safari running on iOS, Hangul characters merged into the previous line upon typing after pressing Enter.

Previously, in Safari running on iOS, when a newline was inserted (by pressing the Enter key) and the user continued typing without moving the insertion point, the characters typed on the newline merged onto the previous line and the newline was removed.

This occurred because Safari on iOS composes Hangul syllabic blocks by deleting the individual jaso glyphs and inserting the expected block glyph, continuing until a browser-native Enter keypress event is fired.

However, TinyMCE has its own Enter key handler on keydown. In this circumstance, therefore, the native keypress event was suppressed. This caused Safari on iOS to continue composing the syllabic block across the newline by firing a deleteContentBackward input event to delete the newline and then inserting the block on the previous line.

For TinyMCE 6.5.1, when the user is in Safari on iOS and the insertion point is detected as positioned after a Korean character, on Enter key keydown;

  1. a bookmark is saved;

  2. an undo level is added; and

  3. preventDefault is not executed to still allow the browser-native Enter key keypress event to fire.

This prompts Safari on iOS to end the syllabic block creation session for the previous character.

Then, on the Enter key keyup event;

  1. the effects of the native Enter key keypress (usually the creation of a newline) is undone;

  2. the original selection is restored via the saved bookmark; and

  3. the TinyMCE-native Enter key handler is called.

This ensures that, when running in Safari on iOS, Safari no longer attempts to compose syllabic blocks across newlines, preventing the unwanted behavior from occurring.

Word count was inaccurate for documents with specific characters.

Previously, Word Count treated some characters as separate words rather than as part of the word they were connected to. The following characters specifically:

  • ^

  • ~

  • +

  • |

  • $

  • `

This resulted in inaccurate word counts.

In TinyMCE 6.5.1, Word Count’s Unicode punctuation string has been updated to include these characters as exceptions. By doing so, the updated function more accurately count words, including the previously mishandled characters, providing a more reliable word count.

Pressing Command+Delete did not add an undo level on systems running macOS.

On systems running macOS, the Command+Delete (⌘+Delete) keyboard shortcut deletes the material from the insertion point to the beginning of the line. Previously, however, when this shortcut was used in a TinyMCE instance, the expected undo level was not registered.

A workaround did exist. If a further action was taken (eg text was entered or the Delete key was pressed to remove another character) the new action and the ⌘+Delete action were both added to the undo stack.

With this update, the TinyMCE editor now registers an undo level when the ⌘+Delete shortcut is used, allowing end-users to undo the action immediately (by, for example, pressing ⌘+Z) and without having to add a further action.

Ctrl+backspace and Ctrl+delete did not restore the insertion point position correctly on Windows after an undo or redo operation.

On systems running Windows, the Ctrl+Delete keyboard shortcut deletes all characters to the left of the insertion point, up to the next word boundary and the Ctrl+Backspace keyboard shortcut deletes all characters to the right of the insertion point, up to the next word boundary.

In previous versions of TinyMCE, however, if either the ctrl+delete or ctrl+backspace keyboard shortcut was used and immediately followed by an undo or redo operation, the insertion point was re-set incorrectly (often, but not always, at the beginning of the line affected by the operations).

This issue was resolved for this release: using either the ctrl+delete or ctrl+backspace keyboard shortcut and an undo or redo operation in turn now sees the insertion point placed correctly, as expected.

Pressing the Backspace key would, in some situations, delete the image after the insertion point instead of before it.

In previous versions of TinyMCE, if the insertion point was set between two image elements and the backspace key was pressed, the trailing image was mistakenly treated as an inline formatting element that should be deleted

Consequently, the image after the insertion point was deleted, not the image before the insertion point.

With this update, TinyMCE now determines the element structure properly and no longer treats the trailing image incorrectly.

Pressing the Backspace key in this circumstance now deletes the image before the insertion point, as expected.

In some circumstances, the selected element would, when it was reused or otherwise reset, not have an initial selected value when it was expected to.

Previously, issues between the host browser and the editor switching between an element’s children, lead to the element presenting an erroneous empty state when displayed.

To resolve this, such elements can no longer be empty unless the user explicitly sets them as such.

In TinyMCE 6.5.1, these elements will now have a populated value unless the user specifically chooses an empty selection.

Initializing the editor with a pre-inserted table displayed resize handles even when the editor was not focused

Previously, resize handles presented on tables in a newly-initialized editor even though the table did not have focus. This happened because the insertion point is automatically placed in the first valid element (in this case, a table cell) during editor initialization.

In TinyMCE 6.5.1, the resize handles have been adjusted to prevent their display when the insertion point is inside a table element without the editor being focused.

Enabling or disabling checkboxes did not set the correct classes and attributes

In the previous version of TinyMCE, the checkbox element’s disabled state was not correctly applied to all elements. As a result, the state was neither properly removed nor added as intended.

This error also left checkboxes potentially presenting as in a state that was not true (for example, presenting as enabled when they were not enabled).

To rectify this issue, the control was adjusted and relocated to ensure that it functions as expected.

With this update, enabling or disabling checkboxes sets the correct classes and attributes and presents the current state correctly to the end-user.

Inline alert in the "Search and Replace" dialog persisted when it was not necessary.

Previously, the Find and Replace dialog was not updated following a modification to the “Find in selection” option. Consequently, the “not found” alert would persist and not disappear as intended.

To resolve this issue, necessary UI updates were implemented after the change to the “Find in selection” option. As a result, the “not found” alert is now reset every time the “Find in selection” option is altered.

Removing an image that failed to upload from an empty paragraph would leave the paragraph without a padding <br> tag.

Previously, when an image upload into an otherwise empty paragraph failed, the upload failure resulted in the empty paragraph not having the expected <br> tag to serve as padding.

When the upload failure was noted by a TinyMCE editor instance, and the placeholder material for the expected image was removed by the editor, the expected padding was not set.

The empty paragraph element was, in this circumstance, rendered inaccessible. And it presented to the end-user as the empty paragraph element being removed or improperly formatted.

In TinyMCE 6.5.1, when the images_upload_handler gets a remove: true callback, the parent element is checked and, if required padding is not present, it is added.

In some specific circumstances, if Google Chrome was the host browser, when the insertion point was placed after a table, adding a newline did not generate the expected newline.

Previously, when Google Chrome was the host browser, there were circumstances where adding a newline character after a table did not produce the expected outcome (that is, a new line).

When the insertion point was positioned after a table, it was placed in the <body> at offset 1 instead of within any of its children.

As a result, when an element with a contenteditable="false" attribute came after it, it was deemed invalid to insert a newline at that position. Consequently, no newline was added.

As of this release, TinyMCE now recognizes this position as valid, and the expected root blocks are inserted.

In some cases, exiting a blockquote element could fail when the insertion point was positioned at the end of the blockquote element.

There was an issue with exiting a blockquote element when the insertion point was positioned at the end of the element. This issue arose because, when inserting a new block, the check to determine if the block is empty treated nodes containing a zero-width space (ZWSP) as non-empty.

As part of this update, TinyMCE 6.5.1 now correctly recognizes elements containing a ZWSP as empty blocks.

As a consequence, exiting blockquote elements now happens even when the insertion point is at the end of the element, as expected.

Context toolbars would display the incorrect status for the Advanced List plugin buttons.

In previous versions of TinyMCE, a presentation issue was caused by a discrepancy between the setup handler for the Advanced List — advlist — Quickbar button in the advlist Premium plugin and the setup handler for the List — list — Open Source plugin.

Consequently, the status of the advlist Quickbar button was not updated correctly during setup.

To resolve this, the setup handler for the advlist plugin was aligned with the one used in the list plugin. The status of the buttons is now accurately rendered, as expected.

Inserting two tables consecutively without focus in the editor resulted in the second table being inserted at the wrong position.

In previous versions of TinyMCE, an issue was identified that resulted in the incorrect execution of the remove_trailing_br function by DomParser. This resulted in the insertion point focusing on the <tr> element instead of the <td> element.

As a consequence, when inserting a table with the focus on <tr>, the table would be placed in the wrong location.

To fix this, the remove_trailing_br function was extracted, with the default behavior now set to execute within the serializer. Although the function remains in the parser, its default setting has been modified to not execute by default, as removing it entirely could cause compatibility issues.

The configuration related to this issue will be deprecated in DomParserSetting in a future TinyMCE release.

The destination category list would include the template’s own category in the Move to… dialog.

When users seek to move a template to another category, a Move to… dialog is presented, with a dropdown list of available categories.

In previous versions of TinyMCE, this list included a redundant category: the current category of the template being moved. If the selected destination category in the Move to… dialog matched this original template category, the operation had no effect.

In TinyMCE 6.5.1, the destination category list now filters out the category of the template being moved.

Consequently, users no longer see the parent category of the template in the Move to… dialog’s category list.

Closing a dialog would scroll down the document in Safari on macOS.

In Safari running on macOS, when a dialog was closed by clicking outside the dialog, a bug caused the browser to select the active element and scroll down.

This caused the browser to scroll the viewport to the bottom of the dialog after the dialog closed.

This scrolling did not occur if the dialog was closed by pressing the dialog close control or by typing the Esc key.

To fix this issue, TinyMCE now forces the active element to blur when Safari is the host browser. By doing so, no element is selected after closing the dialog, preventing the unintended scrolling behavior.

Invalid markup in Notification and Dialog close buttons.

In previous versions of TinyMCE, an issue was identified in the close buttons: invalid markup was present. Specifically, a div element was being used within the buttons. This violates HTML standards and caused problems when running TinyMCE HTML through markup checkers: the checker, correctly, threw errors.

In TinyMCE 6.5.1, the markup was fixed by replacing the div element with a <span> element, aligning it with HTML guidelines. As a result, the updated close buttons now pass HTML markup checkers without throwing errors.

In dialogs, the aria-describedby element would be the body of the dialog.

When using voice assistance software in previous versions of TinyMCE, whenever an interactive dialog was opened, the voice assistant would announce each label consecutively in the dialog.

In TinyMCE 6.5.1, voice assistant software no longer announces the entire content of the dialog body, meaning only the focused interactive element will be announced when first opened.

Fixed the constrained bounds calculation for toolbar dismissal when using toolbar_location: 'bottom'.

In previous versions of TinyMCE, a bug was identified that affected the constrained bound calculations for toolbar dismissals, when the toolbar_location: 'bottom' option was set.

As a consequence, when this configuration was used within a scrollable container, scrolling downwards would result in the premature dismissal of the toolbar, before reaching the bottom of the editor.

In TinyMCE 6.5.1, updates were made to the bounds calculation so the dismissal of the toolbar only occurs after the user scrolls past the bottom of the editor.

Saving the Table Properties dialog after changing properties unrelated to cells would overwrite cell properties set by the Cell Properties dialog.

Previously, when the user modified a field within the Table Properties dialog, upon saving, the modified change set in the Cell Properties dialog would be replaced by the corresponding properties from the Table Properties dialog, even if the latter properties were not actually changed.

For example, if the user

  • adjusted the border width and border color of a cell using the Cell Properties dialog; then

  • made a modification in the Table Properties dialog unrelated to those properties, such as changing a row alignment;

the modified border width and color of the cell reverted to the corresponding values from the Table Properties dialog upon saving.

This undid the initial modifications in the Cell Properties dialog.

In TinyMCE 6.5.1, the Table Properties dialog will continue to be the source of truth and have the ability to overwrite cell and row properties like border width and color. However, the Table Properties dialog will only overwrite those properties if they were modified in the Table Properties dialog.

Applying lists did not work if the selection included a block element with a contenteditable="false" attribute set.

Previously, if there was a non-editable element in the text-selection, inserting or applying a bullet or numbered list to the selection failed. As a consequence, when the user pressed the insert list button while a non-editable element was included in the selection, nothing happened.

For TinyMCE 6.5.1 the logic for inserting lists was updated. With this update everything within the selection — except for the block element with a contenteditable="false" attribute set — is turned into a list.

Pasting content into the editor did not fire beforeinput and input events.

In previous versions of TinyMCE, pasting content into the editor would not fire an input event.

This is contrary to web standards, which states that an input event should be fired when the value of a <textarea> element is changed.

In TinyMCE 6.5.1, a beforeinput event and an input event, both with an insertFromPaste inputType property, are now fired in order when content is pasted into TinyMCE.

In addition, the beforeinput event will also hold a DataTransfer object which contains the text/html data being pasted.

Context menus and menu items were not constrained within the scrollable container if the parent node was a Shadow root

In previous versions of TinyMCE, context menus and menu items could overflow beyond the editor’s bounds when the parent node was a Shadow root.

Prior to this update, TinyMCE only supported the Shadow DOM API if its container node was a child of the Shadow root.

To address this overflowing menu issue, TinyMCE 6.5.1 added support for the Shadow Dom API when the editor’s container node is a parent of the Shadow host node.

Context menus and menu items are now constrained within the scrollable container if the editor’s root node is a parent of the Shadow host node.

Known issues

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

There is one known issue in TinyMCE 6.5.1.

Untranslated instructions for editor resize handle when using screen readers

In TinyMCE 6.5.1, instructions for using the editor resize handle were introduced, however these instructions are only provided in English.

Translations for these instructions will be added in a future enterprise release.