--- title: "TinyMCE 6.6" description: "Release notes for TinyMCE 6.6" canonical_url: "https://www.tiny.cloud/docs/tinymce/6/6.6-release-notes/" md_url: "https://www.tiny.cloud/docs/tinymce/6/6.6-release-notes/index.md" version: "6" last_updated: "2024-04-16T02:53:31Z" tokens: 2940 --- Important This page documents TinyMCE 6. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/). # TinyMCE 6.6 > **Note:** These are the Tiny Cloud and TinyMCE Enterprise release notes. For information on the latest community version of TinyMCE, see the [TinyMCE Changelog](../changelog/). ## Overview TinyMCE 6.6 was released for TinyMCE Enterprise and Tiny Cloud on Wednesday, July 19 th, 2023. These release notes provide an overview of the changes for TinyMCE 6.6, including: - [New Premium plugin](#new-premium-plugin) - [Accompanying Premium Skins and Icon Packs changes](#accompanying-premium-skins-and-icon-packs-changes) - [Improvements](#improvements) - [Additions](#additions) - [Changes](#changes) - [Bug fixes](#bug-fixes) - [Known issue](#known-issue) New Premium plugin The following new Premium plugin was released alongside TinyMCE 6.6. ### AI Assistant 1.0.0 The new Premium plugin, **AI Assistant**, allows a TinyMCE document to send queries to registered AI APIs and either: 1. insert it into the editor at the current selection; 2. create another query to further refine the response generated by the AI; or 3. close the dialog and discard the returned response. For information on **AI Assistant**, see [AI Assistant](../ai/). ## Accompanying Premium Skins and Icon Packs changes The TinyMCE 6.6 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.6 skin, Oxide. For information on using premium skins and icon packs, see: [Premium Skins and Icon Packs](../enhanced-skins-and-icon-packs/). ## Additions TinyMCE 6.6 also includes the following additions: ### Added a new property value — `bottom` — for inline dialog configurations that anchors the dialog to the bottom of the editor A new property value — `bottom` — is available for inline dialog configuration. By default, TinyMCE dialogs present as modal and in the center of the editor viewport. Previously, adding a second argument — `{ inline: 'toolbar' }` to `editor.windowManager.open`, set the dialog to appear adjacent to the TinyMCE toolbar. With this update, a new value can be passed with this second argument: `{ inline: 'bottom' }`. This new inline dialog option sets the inline dialog to appear at the bottom of the editor viewport. For details, see the [Dialog position section](../dialog-configuration/#dialog-position) of the Dialog configuration documentation. ### Added a new property — `persistent` — for inline dialog configurations that will stop the dialog closing when clicking away from it A new, and optional, property, — `persistent` — is available for inline dialog configuration. When this property is set to `true`, an inline dialog will stay open when focus is switched away from the dialog and towards other parts of the TinyMCE editor (for example, the document editor, or a menu). If the property is not explicitly set, it is set to `false`, matching inline dialog behavior prior to this property being added to TinyMCE. Also, setting the property to `true` does not over-ride normal mechanisms for closing a dialog, such as clicking the *Close* button or pressing the **Esc** key. For details, see the [Configuration parameters section](../dialog-configuration/#configuration-parameters) of the Dialog configuration documentation. ### Added a new property — `streamContent` — for the `iframe` dialog component A new, and optional, property, — `streamContent` — is available for `iframe` dialog components. When this property is set to `true`, `setData()` updates content within the `iframe` component using `document.write()` rather than `srcdoc`. As a consequence, the component’s contents update without reloading the frame and without flickering. As well, if the `iframe` component is currently scrolled to the end of the extant content, this position is maintained as new content is added. For details, see the [Configuration parameters section](../dialog-configuration/#configuration-parameters) of the Dialog configuration documentation. ### Added a new property — `border` — for the `iframe` dialog component that allows a border to be added Previously, TinyMCE provided no option to set a border around the `iframe` dialog component. This caused UX and accessibility issues since the `iframe` bounds were not visible and the iframe showed no highlight when it was made the current focus. With TinyMCE 6.6, a new, and optional, property — `border` — is now available for the dialog component, `iframe`. When this property is set to `true`, a border displays around the `iframe` component. As well, when the `border` property is set to `true`, the iframe component is highlighted when it is given focus. If the property is not explicitly set, it is set to `false`, matching the presentation norm prior to it being added to TinyMCE. For details, see the [Configuration parameters section](../dialog-configuration/#configuration-parameters) of the Dialog configuration documentation. ### Added a new property — `align` — for the label dialog component that controls text alignment A new, and optional, property — `align` — is available for the dialog component, `label`. This property allows text in this component be set left-, centre-, or right-aligned. If the property is not explicitly set, it uses a default value which sets label text to present as it has always been presented: left-aligned for LTR languages; and right-aligned for RTL languages. For details, see the [Configuration parameters section](../dialog-configuration/#configuration-parameters) of the Dialog configuration documentation. ### New `ai`, `ai-prompt` and `send` icons With the release of the new [AI Assistant Premium plugin](#new-premium-plugin), TinyMCE’s default available icon set has been updated. This update includes three new icons. | Identifier | Preview | Filename | | --- | --- | --- | | `ai` | ![ai.svg](../_images/icons/ai.svg) | `ai.svg` | | `ai-prompt` | ![ai-prompt.svg](../_images/icons/ai-prompt.svg) | `ai-prompt.svg` | | `send` | ![send.svg](../_images/icons/send.svg) | `send.svg` | For the full list of icons available with TinyMCE by default, see [Icons available for TinyMCE](../editor-icon-identifiers/). For more information on **AI Assistant**, see [AI Assistant](../ai/). ### AI Assistant plugin toolbar items added to the default toolbar and AI Assistant plugin menu items added to the default menu bar With the release of the new [AI Assistant Premium plugin](#new-premium-plugin), TinyMCE’s default menus and toolbars have been updated. If the AI Assistant plugin is added to a TinyMCE configuration, by default: 1. the *AI dialog* and *AI shortcuts* menu items will appear in the TinyMCE **Tools** menu; and 2. the *AI dialog* and *AI shortcuts* toolbar items will appear in the TinyMCE toolbar. > **Note:** further **AI Assistant** -specific menu items are generated based on the setting of the *quick prompts* option. These will appear as sub-menus items of the *AI shortcuts* menu and toolbar items. For more information on **AI Assistant**, see [AI Assistant](../ai/). ## Improvements TinyMCE 6.6 also includes the following improvement: ### When defining a modal or inline dialog, if the buttons property is an empty array, or is not defined at all, the footer will now no longer be rendered A TinyMCE dialog’s UI consists of three main sections: the title, body, and footer. Previously, it was a requirement that any TinyMCE dialog — built-in or custom — displayed all three parts. As of TinyMCE 6.6, it is possible to configure a custom dialog to not render the footer section. When defining a modal or inline dialog, set the `buttons` property to `[]` (an empty array) or do not define the property at all. The result is a dialog that displays without rendering the footer section. For details, see the [Configuration parameters section](../dialog-configuration/#configuration-parameters) of the Dialog configuration documentation. ### The `iframe` dialog component now has a minimum height of 200px The `iframe` dialog component takes in html as a string and displays it within the dialog. And, previously, the component’s height adjusted dynamically to take up the space remaining in a dialog once other components were rendered. Large dialogs have a purposefully large fixed height, creating substantial empty space for the `iframe` component to dynamically fill. Examples of large dialogs include the dialogs presented by choosing **View → Preview** or **View → Source code** from a default TinyMCE instance menu bar. Medium dialogs, however, do not have a static height. Instead, they render with the height needed to fit its components. As a consequence, `iframe` dialog components placed within medium dialogs acquired their height value from the host browser, taking said host browser’s minimum iframe height. In many circumstances, this produced a display area to small to usefully display the content added to the `iframe` component. As of the TinyMCE 6.6 update, the component has a minimum height of 200px, improving its out-of-the-box utility as a display component, particularly in medium dialogs. For more information about this component, see the [`iframe` section](../dialog-components/#iframe) of the Dialog components documentation. For more information about dialogs, see the [Dialog configuration](../dialog-configuration/) documentation. ### Improved detection of scrollable containers when the `ui_mode: 'split'` option is set When a TinyMCE instance has it’s [UI mode](../ui-mode-configuration-options/) set to `split`, support for setting the editor inside a scrollable container is enabled and TinyMCE editor elements — such as pop-ups, menus, and inline dialogs — are rendered in separate containers and inserted as sibling elements to the editor. Previously, however, identifying all scrollable parent elements in such a setup was done with only a naive check. As a consequence, when other overflow properties — such as `overflow-x` — were introduced, the TinyMCE editor and the TinyMCE toolbar could behave unexpectedly in some circumstance. In TinyMCE 6.6.1, the naive check has been replaced with specific edge case coverage and a related test. As a consequence, the TinyMCE editor and the TinyMCE toolbar now behave as expected when overflow properties are introduced. ## Changes TinyMCE 6.6 also includes the following change: ### The icon in an `alertbanner` dialog component is no longer clickable if the *URL* field is not specified The `url` argument in an `alertbanner` dialog component is optional. When it is specified, the value of the argument is passed to the `onAction` function when the dialog’s icon is activated by clicking or pressing. Previously, however, when the `url` argument was not specified, the dialog icon remained clickable or pressable, even though nothing happened on this user action. With this update, this has been changed. The icon in an `alertbanner` dialog remains visible, but it is no longer clickable if the `url` argument is not specified. For more information on `alertbanner` dialog components, see the [Alert banner section](../dialog-components/#alertbanner) of the Dialog components documentation. ## Bug fixes TinyMCE 6.6 also includes the following bug fixes: ### Fixed an issue that caused the inline dialog `size` setting to have no effect Previously, although the inline dialog specification included a `size` option, the function was not implemented. As a consequence, no matter what value `size` was set to, an inline dialog’s size defaulted to `normal`. For this update the missing functionality, which applies the necessary CSS when a `size` value is set for an inline dialog, was added. Setting an inline dialog to any of the supported sizes — ```js size: 'normal', // or size: 'medium', // or ``` — now changes the dialog’s width, as expected. For more information see the [Options](../dialog-configuration/#options) table in the [Dialog configuration documentation](../dialog-configuration/). > **Note:** `inline` dialogs do not support `size: 'large'`. ### Fixed an issue that prevented the close button from being clicked when the dialog was blocked Previously, when a dialog was blocking, the close button — **X** — became inactive. Pressing the **Esc** key still closed the dialog, but the close button was not available to a mouse pointer and could not be navigated to using keyboard navigation. As of TinyMCE 6.6 this has been corrected. A dialog’s close button now remains active and available as a tool for closing a dialog, even when the dialog is blocking. ## Known issue When Safari is the host browser for a TinyMCE 6.6 instance running with the [**AI Assistant**](../ai/) plugin loaded, flickering of the returned text preview in the AI Assistant dialog may occasionally occur. This is a visual affect only. It does not effect **AI Assistant** functionality, nor the material being returned from the API query.