TinyMCE 6.6.2

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

AI Assistant 1.0.1 includes the following fixes:

The TinyMCE 6.6.2 release includes an accompanying release of the Enhanced Image Editing premium plugin.

Enhanced Image Editing 1.1.1 includes the following fix:

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

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

When iframe dialog components have streamContent: true set, content is updated using the document.write() method rather than by setting the srcdoc attribute to prevent the iframe from reloading.

This setting stops the iframe from flickering as it updates its contents when the host browser is Google Chrome or Mozilla Firefox.

The flickering still occurred when the host browser was Apple Safari, however.

In TinyMCE 6.6.2, content updates for iframe dialog components with streamContent: true set are throttled to 500ms intervals when Safari is the host browser. This significantly reduces the apparent flickering.

TinyMCE 6.6.2 restores a further content filtering option, pad_empty_with_br.

Content filtering options change the way TinyMCE manages input and output.

The pad_empty_with_br option, when set to true, places a <br> tag within empty block elements rather than the default non-breaking space entity,  .

That is, when a TinyMCE instance includes the following setting

empty block elements within said instance

are automatically stored and rendered as

A markup typo in /tinymce/modules/tinymce/src/core/main/ts/api/WindowManager.ts resulted in an extraneous html markup tag displaying in the tinymce.WindowManager() documentation.

As well, two run-on sentences in the same file were corrected.

On each content update for iframe dialog components with streamContent: true set, the iframe is expected to automatically scroll to the bottom if the pre-update scrolled position is already at the end of the scrollable area. It is also expected, however, that the end-user can freely scroll through the iframe as content updates occur.

When Chrome is the host browser, scroll positions are natively maintained after content updates via document.write(), but this is not the case when either Safari or Firefox are the host browsers. Both these browsers reset the scroll positions to the top.

As a consequence, once the user scrolls up in the iframe as content updates occur and the programmatic scrolling to the bottom no longer occurs, the native behavior takes over. On Safari and Firefox, this results in the scroll being kept at the top even as the user attempts to scroll, which is both against expected behavior and poor UX.

As of TinyMCE 6.6.2, after a content update to a streamContent: true iframe dialog component, if the host browser is Firefox or Safari and the previous scroll position was not at the end of the scrollable area, TinyMCE now programmatically restores the previous scroll position.

TinyMCE 6.6.0 added support for a streamContent setting for iframe dialog components. One of the features of this setting allows the iframe to automatically scroll to the end of the scrollable area on each content update if the scrolled position is already at the end of this area before content updates begin.

However, when Safari was the host browser, when attempting to scroll an iframe component with streamContent: true set before its load event has fired, the scroll unexpectedly jumped back to the top after the iframe loaded.

This made the autoscrolling feature inconsistent on Safari, as it depended on how quickly the iframe loaded after the content update.

In TinyMCE 6.6.2, when Safari is the host browser, the autoscrolling behavior is attached to a one-time event listener that responds to the iframe’s load event on each content update.

This allows iframe dialog components with streamContent: true set to consistently autoscroll to the end of the scrollable area when Safari is the host browser.

When an iframe dialog has streamContent: true set and the scrolled position is already at the end of the scrollable area, the expected behavior is to maintain this end-of-scrollable-area position by automatically scrolling to the end of the area as content in the scrollable area updates

However, it was found that, when setting content without an HTML document type declaration using document.write(), the scrolling element used to determine scrolling conditions is the iframe’s body, not its document element. And, previously, only the latter was handled. As a consequence, updating the iframe with content without an HTML doctype declaration did not always maintain scroll positions as expected.

TinyMCE 6.6.2 now checks whether the content contains an HTML doctype declaration and, if so, it chooses the iframe’s body as the scrolling element to determine scrolling conditions. This allows content updates for streamContent: true iframe dialog components to behave as expected for both content with and without an HTML doctype declaration.

In some circumstances, when a dialog that contained an iframe component was closed, the console warning message, the component must be in a context to execute, was generated.

This happened because, while the dialog was closed, the currently focussed element was not within the TinyMCE instance. This caused the onAction() callback function to set the focus back to the (now closed) dialog element.

In TinyMCE 6.6.2, a check has been implemented:

As a consequence, the console warning is no longer generated when dialogs with iframe components are closed.

TinyMCE 6.5 introduced a check to establish if the current node was within a non-editable context.

As a consequence of this check, if an editable element was nested in a non-editable element, adding a list within the editable element did not work as expected.

Other expected edits — such as changing the selected material’s block element type from paragraph to a heading — worked as expected. It was only adding a list, or making existing material into a list, that did not work as expected.

In TinyMCE 6.6.2, this check has been removed. Adding or making lists within editable elements now works in all expected contexts, including when the editable element is within a non-editable element.

TinyMCE 6.6, introduced a new dialog configuration property, border.

When set to true, this property adds a border around iframe dialog components that highlights when the component takes focus. By default, TinyMCE renders this as a blue border around the component.

When either Safari or Firefox were the host browsers, however, the border did not render as expected when this component had focus.

TinyMCE 6.6.2 corrects this. When either Safari or Firefox are the host browsers, iframe dialog components now highlight when taking focus, as expected.

When a TinyMCE instance is setup with editable_root: false set, the entire instance is, by default, a read-only instance.

To allow editing of any portion, that portion must be specifically set as writable (for example, by being within an element that has a contenteditable="true" attribute set).

Previously, however, if an image was in a TinyMCE instance with both an editable_root: false set and the Image open source plugin loaded, bringing up a TinyMCE context menu (eg by right-clicking on the image in a desktop setting or by long-pressing on the image in a mobile setting) allowed the Image plugin’s context menu to present, which allowed for image manipulation.

TinyMCE 6.6.2 addresses this. With this update, invoking a context menu in non-editable area no longer brings up any TinyMCE-related context menus.

As a consequence, images presented within a TinyMCE instance setup with a editable_root: false set are properly read-only, as expected.

The color_cols option allows for specifying the number of columns for text color selection grids.

If color_cols is not set, the number of columns displayed by a custom color swatch is, by default, the greater of the square root of the number of colors in the swatch and five (5).

The square root is rounded up and five is the default number of columns a TinyMCE color swatch displays with the default color_map.

For example, for a custom color_map containing 30 colors:

√30 ≅ 5.4772 ≈ 6.

And, since 6 > 5, this custom color selection grid displays six columns.

Setting a color_cols value over-rides this default behavior.

Previously, however, the color_cols option was not respected when a custom color_map was specified. In this circumstance the default method above still specified the number of columns displayed.

TinyMCE 6.6.2 addresses this. As of this update, setting a color_cols value over-rides the default method of calculating the number of displayed columns, as expected.

Previously, if color_cols was set to a value which included a decimal, the resultant text color selection grid displayed incorrectly.

TinyMCE 6.6.2 addresses this. As of this update, if color_cols is set to a decimal value, TinyMCE rounds the set value to the nearest integer and displays the color selection grid with that many columns.

In this case, TinyMCE rounds using the rounding half up method.

Values x.1–x.4 are rounded to x.

Values x.5–x.9 are rounded to x+1.

During rapid, intermittent, content updates in an iframe dialog component with streamContent: true set, an error — "Uncaught TypeError: Cannot read properties of null" — would sometimes be thrown when trying to maintain scroll at the bottom of the iframe component.

This was due to the iframe body being inconsistently null, depending on whether it had loaded when the programmatic scrolling occured, which, in turn relied on the iframe body’s scrollHeight as the scroll value.

TinyMCE 6.6.2 uses a numerical y-coord value for Window.scrollTo rather than the iframe body’s scrollHeight.

As a consequence, the "Uncaught TypeError: Cannot read properties of null" error is no longer thrown, and maintaining scroll at the bottom of a streamContent: true iframe component works as expected.