TinyMCE 6.7.0

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

Accessibility Checker 3.2.1 includes the following bug fix:

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

Advanced Code 3.3.1 includes the following bugfixes:

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

Advanced Templates 1.3.0 includes the following additions:

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

AI Assistant 1.1.0 includes the following addition, improvements, and bug fix:

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

Checklist 2.0.6 includes the following bug fix:

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

Comments 3.3.3 includes the following bug fix:

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

Enhanced Media Embed 3.1.3 includes the following bug fix:

The TinyMCE 6.7.0 release includes an accompanying release of the Footnotes premium plugin.

Footnotes 1.0.1 includes the following bug-fixes:

The TinyMCE 6.7.0 release includes an accompanying release of the Page Embed premium plugin.

Page Embed 2.2.1 includes the following bug-fix:

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

PowerPaste 6.2.1 includes the following bug-fixes

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

Spell Checker Pro 3.3.1 includes the following bug-fixes:

The TinyMCE 6.7.0 release includes an accompanying release of the Table of Contents premium plugin.

Table of Contents 1.2.0 includes the following improvements and bug-fixes:

The TinyMCE 6.7.0 release includes an accompanying release of the Tiny Drive premium plugin.

Tiny Drive 2.0.3 includes the following fix:

Previously, the Tiny Drive plugin’s insertfile toolbar button and menu item were not disabled when the insertion point was within a read-only (ie, non-editable) section or when the selection was within a read-only section or included a read-only portion.

Tiny Drive 2.0.3 addresses this. If the selection includes or is within a read-only section, or if the insertion point is within a read-only section, the Tiny Drive UI components now, correctly, present as disabled.

For information on the Tiny Drive plugin, see: Tiny Drive Introduction.

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.7.0 skin, Oxide.

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

Previously, when the insertion point was between a table and an element with a contenteditable="false" attribute that was, itself, wrapped in a <div>, pressing the Enter or Return key did not add a new line to the document.

TinyMCE, incorrectly, treated the insertion point’s location in this circumstance as not a valid place for adding a new line.

TinyMCE 6.7 corrects this and treats such a location as the valid place for adding a new line that it is.

As a result, new lines are added to TinyMCE documents, as expected, when the insertion point is between a table, and an <div>-wrapped element with a contenteditable="false" attribute.

Previously, the TinyMCE menu could reach the edge of the host browser’s window.

As a consequence, it was not apparent if the menu stopped at the edge of the window or continued past its bounds. This led to user confusion, since it was unclear if the TinyMCE menu was showing everything.

TinyMCE 6.7 addresses this issue, by adding a margin to the menu layout to separate it from the frame edge. This margin is placed at the top or bottom of the TinyMCE menu, depending on where the menu is displayed in a given TinyMCE instance.

As a result, in TinyMCE 6.7, the menu is now more noticeably distinct from the frame edge.

In previous versions of TinyMCE, a bug was discovered when using screen readers, but in particular the JAWS screen reader, within TinyMCE. The ellipsis icon representing the More option in the TinyMCE toolbar did not have a meaningful explanation for screen readers.

As a consequence, screen readers would announce More ellipsis instead of providing a meaningful description that can be understood.

To fix this, TinyMCE 6.7 updated the text label for the More option to Reveal or hide more toolbar items; a clear description for users who rely on this feature.

The TinyMCE editor is designed to support case-insensitive translations. It converts all translation keys to lowercase when adding them to the internal translations object, and then checks in the object for the lowercase version of whichever string is passed into the translations module.

However, when provided multiple case-sensitive variants of a translation key, only one of the key-value pairs was kept in the internal object.

As a consequence, case-sensitive translations were not supported: the two strings, test and Test could not have different translation values.

In TinyMCE 6.7, and with regards case-sensitive variants of a translation key, the following scenarios now apply:

This approach means a lowercase translation key always exists.

Consequently, this adds support for case-sensitive translations while ensuring case insensitivity is not affected.

Previously, when using a screen reader, the table grid menu item announced the currently highlighted cell grid with only the numbers. Reading out, for example, 4 x 7.

In TinyMCE 6.7 the screen reader now notes which number is the number of columns, and which is the number of rows. In the circumstance noted above, for example, the screen reader now announces, 4 columns, 7 rows.

Previously, when a link was rendered inside the body content of a TinyMCE dialog, such as the Help dialog, it was difficult for a user to identify the visual difference between the normal, hovered or focused states.

As well, when a link’s state was changed via keyboard navigation, making a distinction between the states was difficult.

TinyMCE 6.7 addresses this by

When using TinyMCE 6.7, users now get greater visual distinction between link and non-links, and immediate feedback as to a link’s change of state when using keyboard navigation.

In previous versions of TinyMCE, keyboard-centric users without screen readers had no indicator of how to access the TinyMCE Help → Help command. (Users with screen readers got and continue to get announcements on accessing the Help menu and the Help → Help command.)

By default, the Help → Help command is accessible using a keyboard chord. Alt+0 on Windows or Linux and ⌥+0 on macOS. But this chord is not presented except when the Help menu is opened and the Help → Help command is displayed.

TinyMCE 6.7 addresses this issue by introducing a new help_accessibility option, which defaults to true.

When set to true, this option displays the Help → Help command keyboard shortcut in the TinyMCE status bar.

TinyMCE 6.7 includes two new commands: InsertNewBlockBefore and InsertNewBlockAfter.

These commands address scenarios where navigation encounters spatial constraints; most specifically when the constraint is at a TinyMCE document’s edges.

For example, if a user inserts a <details> element (as part of an Accordion component) at the beginning of a TinyMCE document, the InsertNewBlockBefore command now provides a way to set the insertion point above this element.

In TinyMCE 6.3, a TypeError for type: "complete" triggered when attempting to fire a change event. The TypeError was triggered due to it not being assignable to the UndoLevelType type.

TinyMCE 6.7 has addressed this issue by updating the UndoLevelType from a enum type to a union type.

As a consequence, when the change event is fired, the TypeError is no longer triggered.

Previously, a problem was identified with the cleanEmptyNodes function. This function is responsible for removing nodes that contain white space.

An inadvertent consequence of an earlier fix to this problem was that, in some specific cases, the function would remove white space contained within tags that, themselves, only contained white space. This was white space it was not expected to remove.

TinyMCE 6.7 address this and the cleanEmptyNodes function now preserves these nodes, as expected.

If a TinyMCE configuration included a contentEditable: 'true' setting (or had no explicit global setting for contentEditable, and therefore defaulted this option to 'true') and the host browser was operating over a relatively slow connection, it was possible to add content to the editor before ContentCss finished loading.

This could lead to data loss. After ContentCSS completed its initial load, any content added to the editor before the load had completed was removed from the editor.

TinyMCE 6.7 addresses this by blocking interaction with the editor until ContentCss has completed loading, disallowing content insertion until initialization is complete.

A relatively slow network connection for this purpose is an ≅ 400 kb/sec connection with an ≅ 2000 ms latency; equivalent to a Slow 3G wireless connection. The potential UX change caused by this change will, therefore, be experienced by very few users.

Previously, when a Checklist, particularly a checklist that contained a nested checklist, was selected and converted to a bulleted list the selection was, incorrectly, converted into plain paragraphs.

TinyMCE 6.7 address this issue. With this update, nested checklists become nested bulleted lists when selected and converted, as expected.

Adding browser_spellcheck: true to a configuration tells TinyMCE to use the host browser’s native context menu for spell-checking.

When this was set at the same time as multiple custom plugins were added to the contextmenu configuration, the browser-native context menu did not present as expected when invoked.

Instead a short white line appeared.

TinyMCE 6.7 addresses this by improving the handling of multiple empty strings in its context menu logic.

Consequent to this improved handling, the browser-native context menu now presents as expected when invoked.

The Insert/Edit Link dialog uses overflow:hidden as part of its default configuration. When a sufficiently long URL is pasted in to the URL field, a preview window appears to display the entire pasted-in URL.

Previously, even when sufficiently wide viewports were available, a portion of the pasted-in URL was cut off at top-right of the preview window.

In TinyMCE 6.7, this preview window has been constrained to the width of the URL field. As well, a scroll bar will present if the pasted-in URL is too long to render in this constrained width.

As a consequence, no part of pasted-in URL is cut off when the preview window now presents.

Previously, when a TinyMCE editor instance was set to read-only mode, because a Changenode event was not fired when switching modes, the text-entry field in the fontsizeinput toolbar object did not present as disabled and the field’s value could be changed.

TinyMCE 6.7, addresses this by listening to the ChangeMode event in addition to the previous event. This ensures the missing event is now properly handled.

As a consequence, the fontsizeinput text-entry field presents as disabled when a TinyMCE editor instance is set to read-only mode, as expected.

When a TinyMCE instance includes the open source Page Break plugin, and a page break is inserted into a TinyMCE document, the break is represented in the document by a thin dotted-line rectangle image, complete with the expected <img> tag.

Previously, the logic for displaying Quickbars toolbars did not exclude page break images.

As a consequence, when a page break was encountered, an incorrect context toolbar would display.

TinyMCE 6.7 includes an added check for page breaks in the predicate logic that prevents Quickbars contextual menus from displaying for page breaks.

For information on the Quickbars plugin, see: Quickbars.

TinyMCE 6.4.1 included a fix for when creating a list in a table cell when the insertion point is in front of an anchor element did not properly include the anchor in the list. This fix included an adjustment to DOM hierarchy traversal.

In the earlier fix’s implementation, when advancing to the next leaf element in the hierarchy, the process did not take into account whether this leaf element was correctly nested under its parent. This occasionally led to it straying outside its intended parent. And, as a consequence, unexpected elements could be (and sometimes were) added to a list when a list was created.

TinyMCE 6.7 addresses this by setting the expected block parent as the boundary for DOM tree traversal, ensuring that it does not extend beyond this defined limit. As a result, any extraneous elements are now effectively excluded from the list.

TinyMCE includes a content filtering option, forced_root_block, which can change the default block element used to wrap inline elements and text nodes. The default value for this option is 'p'.

Previously, if the forced_root_block option was set to 'div':

and multiple lines of text

were selected, and a list was applied to the text (for example, the Bulleted List toolbar icon was chosen), only the first selected item became a list. (That is, the line Text line one., in the example above.)

This occurred because the first selected <div> was mistakenly treated as the list element’s root.

TinyMCE 6.7 addresses this by looking higher in the DOM tree when looking for the list element’s parent.

In TinyMCE 6.7, when selections equivalent to the above example have a list option applied to them, the entire selection becomes a list, as expected.

For more information on the forced_root_block option see forced_root_block.

The previous implementation of the iframe-based dialog component wrapped the component inside two <div> elements.

This was (and is) required for Tab key based navigation through the dialog’s UI components to remain within the dialog itself.

The intended result was for the two <div> elements, by default, to switch focus to the next UI object of the iframe component for each press of the Tab key.

As initially implemented, however, only one of the wrapping <div> elements provided this functionality.

As a consequence, an additional, and redundant, Tab key press (or Shift+Tab keyboard chord press, if navigating backwards through the dialog) was required to navigate every addressable component within an iframe-based dialog component.

TinyMCE 6.7 includes a fix that addresses this. When navigating through an iframe-based dialog component using the Tab key, TinyMCE now skips over the elements that keep Tab-key–based navigation within the dialog but which do not present as focusable UI elements.

Navigating through an iframe-based dialog with the Tab key no longer requires a redundant key-press to exit an otherwise invisible component.

In previous versions of the Accordion Plugin, when inserting an accordion component inside the body of another accordion, it was possible to delete the summary block element of the nested accordion.

TinyMCE 6.7 addresses this by blocking Delete and Backspace key presses when the insertion point is within an empty block before a nested Accordion component.

As a result, using the Delete or Backspace keys no longer allows a user to delete into the summary element of an Accordion component, and the insertion point remains in the empty block before the Accordion.

For more information on the Accordion plugin see Accordion.

In previous TinyMCE versions, "Uncaught TypeError: Cannot read property 'nextSibling' of null" errors were thrown in some specific use cases. For example, after the removal of any <li> element.

Previously, <li> elements used the same caret position as the parent of the new caret container. After removal of the <li> element, however, the editor tried to use ToggleList.mergeWithAdjacentLists which is used on the otherLi.parentNode. This triggered the TypeError, as the editor had already removed the other otherLi element.

TinyMCE 6.7 addresses this by using, for caret position, the otherLi.parentNode reference stored in a const before the removal.

Previously, dragging and dropping the contents of a <summary> element contained within the <details> parent container of an Accordion component, caused the <summary> element to be removed from the parent container.

As a consequence, the Accordion element was rendered unusable: the <details> element requires a <summary> element to act as the title or heading of a specific Accordion component.

In TinyMCE 6.7, when the user drags a <summary> element’s contents out of an Accordion component, the editor puts an empty <summary> element back in place after the deletion consequent to the dragging event. This restores the Accordion component to its required form.

In previous versions of the Accordion plugin, dragging and dropping block elements within the <summary> element of an Accordion component could break the <summary> element.

As a consequence, TinyMCE would duplicate the <summary> element.

For example, if the initial state was as follows:

After a drag-and-drop event, the Accordion component would be thus:

Note the duplicated <summary> in the post-drag Accordion component.

To address this, TinyMCE 6.7 now unwraps block elements after they are dragged from within another block element.

As a consequence, dragging and dropping content from within a block element no longer produces duplicate summary elements.

Previously, when dragging and dropping a context selection from a transparent element into another transparent block element, the source content (ie the content selected for dragging) was not properly deleted after the drop event.

For example, if the initial selection for dragging was as follows:

After the drop event, the editor state was thus:

Note the duplicated material in the post-drag editor state example.

TinyMCE 6.7 includes a fix that over-rides this unintended behavior. Now, when dragging a content selection from one transparent element into another, the drag’s source selection is moved rather than duplicated, as expected.

As part of the TinyMCE 5.10 release, the media_scripts option was deprecated. And, as of the TinyMCE 6.0 release, this option was removed.

When the setting was available, it was used to allow some script tags, with specified source URLs, to have some of their properties edited in the Media plugin’s dialog.

And, while the media_scripts option was removed, the logic that allowed the plugin to edit properties in some script tags was not.

As a consequence, a regression presented. When the Enhanced Media Embed Premium plugin was loaded, the plugin converts all script tags into placeholder images.

For the TinyMCE 6.7 release the code that handled script tags was removed, which corrects this regression.

In TinyMCE 6.7, when the Enhanced Media Embed is loaded, script tags are treated as script tags, and are no longer converted into placeholder images.

TinyMCE 6.4.2 addressed an issue in which a selection was not correctly scrolled horizontally into view.

TinyMCE 6.7 includes changes to the previously applied logic to address a further issue, in which scrolling did not reach the correct position in some circumstances.

The fix applied in TinyMCE 6.4.2 altered the scrollToMarker function, affecting not only editor content, but also the editor container itself. This, unintentionally, caused an Enter key-press to trigger scrolling of both the content and the container.

TinyMCE 6.7 makes two changes to address this. It reverts the logic applied in TinyMCE 6.4.2. And it adjusts the scroll left calculation.

These changes correct both issues. Pressing the Enter key no longer triggers scrolling and the selection is (still) correctly scrolled into horizontal view.

Previously, when applying border style changes using the TinyMCE Table Properties dialog, changes were applied as individual properties. For example:

When the content was re-loaded, however, the styles were automatically condensed into the shorthand format:

This constitutes un-announced and un-asked-for modification of the table’s underlying HTML within the TinyMCE editor.

TinyMCE 6.7 addresses this by immediately applying border style changes made using the Table Properties dialog in the shorthand format.

Table HTML is, as a consequence, unaltered when it is reloaded into the TinyMCE editor.

The Help dialog built-in to TinyMCE includes four tabs:

Previously, keyboard navigation was supported across these four tabs, and into each tab’s contents. (When a tab’s contents have focus, the content can be scrolled through using Arrow keys.)

However, keyboard-based navigation of links in the focussed content was not supported.

TinyMCE 6.7 corrects this. The data-alloy-tabstop="true" attribute, which was previously not applied to these links, has been added.

Users of TinyMCE 6.7 can navigate to and activate links in Help dialog contents entirely with keyboard navigation.

Previously, when a <details> element, such as is automatically part of an Accordion component, was either the first or last element within a TinyMCE editor instance, users were unable to move the insertion point above or below the element. This prevented them from adding new content to the editor instance.

In TinyMCE 6.7, the InsertNewBlockBefore and InsertNewBlockAfter commands have been associated with the Up Arrow and Down Arrow keys, activating when the insertion point is in the relevant position.

As a result, when the insertion point is in the relevant position and the user presses either of the Up Arrow or Down Arrow keys, the insertion point now moves either above or below the <details> element when it is at either the beginning or end of the current editor’s content.

Previously, when an empty element with a contenteditable="true" attribute was set within a read-only root (ie a root with a contenteditable="false" attribute), the empty element was deleted when the Backspace key was pressed.

When the Backspace key was pressed in this circumstance, the TinyMCE editor removed elements that contained no content.

In doing so the dom.isEmpty(body) call returned a value, true, even if the called body included an element that was empty but had a contenteditable="true" attribute set.

As of TinyMCE 6.7, elements with a contenteditable="true" attribute set are no longer treated as empty and the dom.isEmpty(body) call no longer returns the value true with regards such elements.

As a consequence, these elements are no longer deleted when they are immediately before the insertion point and the Backspace key is pressed.

Previously, when color_cols: 5 was set, the assigned value was not used.

Instead, when color_cols was set to the default number of columns displayed by a TinyMCE color selection grid (ie 5), the default method for calculating the number of displayed columns is used.

For TinyMCE 6.7, the logic for calculating the default color_cols values was re-written. As of this release, TinyMCE now uses either the color_cols option, with its default calculated on the base color map, or the value calculated by custom color maps.

This ensures a set color_cols value is always used, even when that value matches the default value.

Previously, when Safari was the host browser, and

pressing Backspace deleted the entire <details> element rather than just the character immediately before the insertion point.

TinyMCE 6.7 addresses this. With this release, the Backspace key functions as expected when Safari is the host browser: it deletes only the character immediately before when the insertion point is inside a <summary> element, as expected.

By default, TinyMCE removes <br> tags at the end of block elements.

Setting the xref:content-filtering.adoc#remove_trailing_brs[remove_trailing_brs] option to false turns this default behaviour off.

Previously, however, when remove_trailing_brs: false was set, and a table was added to a TinyMCE document, the last cell of the newly-created table did not contain a <br tag, as expected.

During serialization, this last tag was instead converted into a whitespace character.

In TinyMCE 6.7, this character conversion during serialization no longer occurs in table cells.

As a consequence, when remove_trailing_brs: false is set and tables are added to a TinyMCE document, all newly-created and otherwise empty cells contain a <br> tag, as is expected in this circumstance. TinyMCE 6.7 addresses this. With this release, the Backspace key functions as expected when Safari is the host browser: it deletes only the character immediately before when the insertion point is inside a <summary> element, as expected.