---
title: "TinyMCE 7.0"
description: "Release notes for TinyMCE 7.0"
canonical_url: "https://www.tiny.cloud/docs/tinymce/7/7.0-release-notes/"
md_url: "https://www.tiny.cloud/docs/tinymce/7/7.0-release-notes/index.md"
version: "7"
last_updated: "2024-06-27T05:25:50Z"
tokens: 11815
---
Important This page documents TinyMCE 7. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/).
# TinyMCE 7.0

> **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/).

> **Note:** TinyMCE 7.0 is *licensed under GPL Version 2 or later*. This version introduces a new [license_key](../license-key/) configuration setting that gives self-hosted users the ability to select a usage under the GPL or to authenticate their paid license with Tiny.

## Overview

TinyMCE 7.0 was released for TinyMCE Enterprise and Tiny Cloud on Wednesday, March 20 th, 2024.

The release brings new features essential for content producers and managers in the modern workplace. These features improve efficiency through simplified sharing of content and providing improved tools for the asynchronous collaboration needs of remote teams.

- **Revision History**: View changes from one content version to another.
- **Document Converters**: Effortlessly import content from Microsoft Word and export it to either Microsoft Word or PDF documents.
- **Markdown**: Paste markdown from other platforms into the editor for instant rich-text conversion.

These release notes provide an overview of the changes for TinyMCE 7.0, including the following:

- [New Premium plugins](#new-premium-plugins)
- [Accompanying Premium plugin changes](#accompanying-premium-plugin-changes)
- [Accompanying open source plugin end-of-life-announcement](#accompanying-open-source-plugin-end-of-life-announcement)
- [Accompanying Enhanced Skins & Icon Packs changes](#accompanying-enhanced-skins-and-icon-packs-changes)
- [Improvements](#improvements)
- [Additions](#additions)
- [Changes](#changes)
- [Removed](#removed)
- [Bug fixes](#bug-fixes)
- [Security fixes](#security-fixes)
- [Known issues](#known-issues)

> **Note:** For additional details on TinyMCE 7.0 breaking changes when considering upgrading, see [Migrating from TinyMCE 6 to TinyMCE 7](../migration-from-6x/).

## New Premium plugins

The following new Premium plugins was released alongside TinyMCE 7.0.

### Revision History

The new Premium plugin, **Revision History**, allows you to track changes made to content in the TinyMCE editor and restore previous versions of the content.

For information on the **Revision History** plugin, see [Revision History](../revisionhistory/).

### Import from Word

The new Premium plugin, **Import from Word**, provides a way to import `.docx` (Word documents) or `.dotx` (Word templates) files into the editor.

For information on the **Import from Word** plugin, see [Import from Word](../importword/).

### Export to Word

The new Premium plugin, **Export to Word**, provides a way to generate a `.docx` file directly from the editor.

For information on the **Export to Word** plugin, see [Export to Word](../exportword/).

### Export to PDF

The new Premium plugin, **Export to PDF**, provides a way to generate a `.pdf` file directly from the editor.

For information on the **Export to PDF** plugin, see [Export to PDF](../exportpdf/).

### Markdown

The new Premium plugin, **Markdown**, detects pure markdown from a paste event within a TinyMCE editor instance and converts it to HTML.

For information on the **Markdown** plugin, see [Markdown](../markdown/).

## Accompanying Premium plugin changes

The following premium plugin updates were released alongside TinyMCE 7.0.

### TinyMCE 7.0 plugin naming unification

With the release of TinyMCE 7.0, the below plugins are adopting the following name changes.

| Old Name | New Name |
| --- | --- |
| Advanced Code Editor | Enhanced Code Editor |
| Advanced Lists | List Styles |
| Advanced Tables | Enhanced Tables |
| Advanced Templates | Templates |
| Enhanced Image Editing | Image Editing |
| Skins & Icons Packs | Enhanced Skins & Icons Packs |
| Spell Checker Pro | Spell Checker |

> **Note:** That while these changes are to update the plugin names used in documentation and communication materials, this does not alter the plugin identifiers themselves at this time. This means that existing integrations and configurations will remain unaffected by this change.

### Templates

The TinyMCE 7.0 release includes an accompanying release of the **Templates** premium plugin.

**Templates** includes the following improvement.

#### Missing tooltip for category and template three dots menu button in the **Templates** dialog.

Previously, the three dots menu button for category and template in the **Templates** dialog were missing a tooltip, making them inaccessible.

In TinyMCE 7.0, the three dot menu buttons for categories and templates in the Templates dialog now have informative tooltips. This clarifies their purpose for all users, enhancing discoverability and improving the overall experience, especially for those relying on assistive technologies.

> **Note:** The **Templates** plugin mentioned here refers to the premium plugin that has been renamed, not the open-source plugin. See [TinyMCE 7.0 plugin naming unification](#tinymce-7-0-plugin-naming-unification) for more information.

### Enhanced Code Editor

The TinyMCE 7.0 release includes an accompanying release of the **Enhanced Code Editor** premium plugin.

**Enhanced Code Editor** includes the following fixes, additions, and improvements.

#### Updated CodeMirror to version 6.

TinyMCE 7.0 introduces CodeMirror 6.

With this update, users have gained access to improved features "to be expanded on in future releases" and a more responsive editing experience.

During the integration process, TinyMCE made necessary adjustments to ensure compatibility between TinyMCE 7.0 and CodeMirror 6. Specifically, our CSS reset rules were refined to accommodate the dynamically generated styles of CodeMirror 6 and as a result the `codemirror.css` file was removed from the plugin deployment.

This update from CodeMirror 5 to 6 should have no impact on customers utilizing the Enhanced Code Editor feature. More information about CodeMirror 6 will be included in future patch releases.

#### Updated keyboard shortcuts for Enhanced Code Editor.

With the update to CodeMirror 6 with TinyMCE 7.0, brings the below updated keyboard shortcuts for Enhanced Code Editor.

### Enhanced Code Editor search and replace keyboard shortcuts

Enhanced Code Editor provides the following shortcuts within the code dialog.

| Action | Windows Shortcut | macOS Shortcut |
| --- | --- | --- |
| Find | Ctrl+F | Command+F |
| Find Next | F3 | F3 |
| Find Previous | Shift+F3 | Shift+F3 |
| Go to Line | Ctrl+G | Command+G |
| Close Search Panel | Esc | Esc |
| Indent Code | Ctrl+] | Command+] |
| Outdent Code | Ctrl+[ | Command+[ |
| Fold Code | Ctrl-Shift-[ | Command-Option-[ |
| Unfold Code | Ctrl-Shift-] | Command-Option-] |
| Fold All | Ctrl-Alt-[ | Ctrl-Option-[ |
| Unfold All | Ctrl-Alt-] | Ctrl-Option-] |
| Accept Completion | Enter | Enter |

For information on the Enhanced Code Editor plugin, see: [Enhanced Code Editor](../advcode/).

#### Tab and shift + tab didn’t not navigate to the next tab stop inside the code dialog.

Previous versions of the Enhanced Code Editor (formally known as Advanced Code Editor), in the code dialog, the `tab` and `shift + tab` functionalities failed to navigate to the next tab stop.

As the Enhanced Code Editor serves as the container for `Codemirror`, this absence resulted in ineffective tab navigation.

TinyMCE 7.0 addresses this issue, by implementing the new tab behavior for the Enhanced Code Editor, thereby resolving the problem.

As a result, both the Enhanced Code Editor and `Codemirror` now exhibit managed tabbing behavior’s, ensuring smoother navigation within the code dialog.

#### Add `Cmd+g` / `Ctrl+g` shortcut for `gotoLine` command.

Enhanced Code Editor introduces a new shortcut: `ctrl+g` for Linux and Windows, and `cmd+g` for Mac users with TinyMCE 7.0.

The shortcut allows the user to:

- quickly jump to any line in your code.
- specify line numbers
- use relative offsets like + or -
- document percentages with %, and;
- even add a column position with a colon and a number after the line.

Find more details in the documentation here: [gotoLine](https://codemirror.net/docs/ref/#search.gotoLine)

#### Add `aria-label` to Enhanced Code Editor.

During an internal audit, it was discoverd that the `<textarea>` element within the "Source Code" dialog, which allows users to input code, was missing an accessible name.

This meant that screen reader users could not read the proper information about the purpose of the input field when navigating it.

TinyMCE 7.0 addresses this issue, by adding an `aria-label` attribute to the `<textarea>` element with the value "Source code".

As a result, screen readers now announce the input field as "Source code" when users navigate into it.

## Accompanying open source plugin end-of-life announcement

The following open source plugin has been announced as reaching its end-of-life:

### The open-source `template` plugin has been removed.

The open-source `template` plugin and associated config options have been removed in TinyMCE 7.0.

Customers using the `template` plugin will need to migrate to the premium ['advtemplate'](../advanced-templates/) plugin in TinyMCE 7.0, which contains all the functionality except some esoteric options.

For more information, see [Migrating from TinyMCE 6 to TinyMCE 7](../migration-from-6x/#removed-plugins-template-plugin).

## Accompanying Enhanced Skins & Icon Packs changes

The TinyMCE 7.0 release includes an accompanying release of the **Enhanced Skins & Icon Packs**.

### Enhanced Skins & Icon Packs

The **Enhanced Skins & Icon Packs** release includes the following updates:

The **Enhanced Skins & Icon Packs** were rebuilt to pull in the changes also incorporated into the default TinyMCE 7.0 skin, Oxide.

#### Fixed some focus issues related to TinyMCE 5 skin and Enhanced skins.

The current colors for various UI buttons didn’t provide suitable contrast against the background/neighboring components.

As a consequence, users with accessibility requirements had difficulty determining the current `active/focused/hovered/enabled` component in the UI.

TinyMCE 7.0 addresses this issue, now, the colors for many of these UI components have been updated for each of these states.

As a result, these components now have appropriate levels of contrast for ease of use by users with accessibility requirements.

For information on using Enhanced Skins & Icon Packs, see: [Enhanced Skins & Icon Packs](../enhanced-skins-and-icon-packs/).

## Improvements

TinyMCE 7.0 also includes the following improvements:

### Shortcut included in tooltips for basic and toggle toolbar buttons.

Previously, basic and toggle toolbar buttons lacked keyboard shortcut information in the native browser tooltip. This could leave users unaware of available shortcuts and, therefore unable to use them.

To address this, TinyMCE 7.0, introduces custom tooltips for these buttons. These tooltips now clearly display the keyboard shortcut alongside the button’s description as follows:

- Default buttons: This includes commonly used functions like `bold`, `italic`, `underline`, `selectall`, `redo`, `undo`, heading levels (`h1-h6`), `help`, `link`, `save`, `searchreplace`, and `fullscreen`.
- Custom buttons: Any custom toolbar button registered with a keyboard shortcut will also display the shortcut in its tooltip.

See the [Basic toolbar button](../custom-basic-toolbar-button/), [Toggle toolbar button](../custom-toggle-toolbar-button/) and [Keyboard Shortcuts](../shortcuts/) documentation for more information.

### Added custom tooltip for dialog collection items, now visible on both mouse hover and keyboard focus.

Previously, collection items set in a [collection dialog component](../dialog-components/#collection) would not display a tooltip on keyboard focus.

This means that keyboard-only users were not able to see the tooltip, as it was only shown on mouse hover.

In TinyMCE 7.0, dialog collection items with `data-mce-tooltip` attribute, such as those used in [Emoticons](../emoticons/) and [Charmap](../charmap/) plugins, now display relevant tooltips on both mouse hover and keyboard focus. This ensures all users, including those relying solely on keyboard navigation, can access helpful information about these items.

### Make table ghost element better reflect height changes when resizing.

Previously, the table ghost element did not accurately reflect changes in table height when resized using the corner resize handles.

In TinyMCE 7.0, this problem has been addressed.

As a result, the table ghost element now accurately mirrors adjustments in table height when resized using the corner resize handles.

### Autocompleter did not work when attempting to insert a `mention` or `emoji` when using an `IME`.

Previously when attempting to insert a **mention** or **emoji** using an `IME` on Android and using Korean, users encountered an obstacle where it wasn’t possible to complete the insertion.

TinyMCE 7.0 addresses this issue, by rewriting the handler for `autocompleter`, ensuring that it no longer interferes with the DOM during composition with an IME.

As a result, users can now insert **mentions** and **emojis** using the `autocompleter`.

For information on the **Autocompleter** plugin, see: [Autocompleter](../autocompleter/).

### Improved accessibility for interactive elements with custom tooltips.

In previous versions of TinyMCE, buttons without visible labels displayed browser native tooltips which only shows on mouse hover, not keyboard focus. This meant keyboard-only users couldn’t access these tooltips, hindering their understanding of button functionality.

To address this, TinyMCE 7.0 introduces custom tooltips for various elements:

- Toolbar buttons
- Resize handle
- Buttons in a dialog
- Buttons in a view container

These custom tooltips appear on both mouse hover and keyboard focus, ensuring all users, including those relying solely on keyboard navigation, can access essential information about interactive elements.

> **Note:** Interactive elements with visible labels do not display custom tooltips, and the browser native tooltips have been removed, as the visible label provides sufficient information.

> **Tip:** The `max-width` of the tooltips is set to `15em`, to overwrite the default `max-width` of the tooltips, update the `@tooltip-max-width` variable in your custom skin.

### Added tooltips to `Click for more info` button in the accessibility checker dialog.

The absence of a tooltip on the "Click for more info" button within the `accessibility` dialog rendered it inaccessible for keyboard-only users, affecting their ability to fully engage with the functionality.

TinyMCE 7.0 addresses this issue, by adding the tooltip to the button, ensuring its visibility both on mouse hover and keyboard focus.

### Improved Custom Elements.

TinyMCE 7.0 introduces enhancements to the existing [custom_elements](../content-filtering/#custom_elements) option and [addCustomElements](../apis/tinymce.html.schema/#addCustomElements) API. This update allows the structure of custom elements to be refined, offering users more flexibility and customization options.

Key Improvements:

- **New Custom Element Structure:** The custom_elements option and `addCustomElements` API now support a more complex structure. Each element is defined by a key-value pair, allowing for detailed specifications.
- **Attributes and Inheritance:** Elements can inherit attributes and children from other specified elements using the extends property in the Custom Element Spec.
- **Attribute and Children Specifications:** The Custom Element Spec includes properties such as attributes and children, enabling precise customization of element behavior.

For more information and details for `addCustomElements` see [custom_elements](../content-filtering/#custom_elements).

### Improved support of `data` elements.

Previously, when inserting a `data` element within the editor, the `data` element would be removed.

In TinyMCE 7.0, this problem has been addressed.

As a result, the `data` elements are recognized as valid elements within the editor, ensuring they are properly retained along with their value attributes.

## Additions

TinyMCE 7.0 also includes the following addition:

### A new `trigger` property for block text pattern configurations, allowing pattern activation with either Space or Enter keys.

This release introduces a new `trigger` property for block text pattern configurations, allowing pattern activation with either `Space` or `Enter` keys.

In TinyMCE 7.0 the default preconfigured text patterns **was changed from**:

Example preconfigured text_patterns prior to TinyMCE 7.0
```js
[
  { start: '*', end: '*', format: 'italic' },
  { start: '**', end: '**', format: 'bold' },
  { start: '#', format: 'h1' },
  { start: '##', format: 'h2' },
  { start: '###', format: 'h3' },
  { start: '####', format: 'h4' },
  { start: '#####', format: 'h5' },
  { start: '######', format: 'h6' },
  // The following text patterns require the `lists` plugin
  { start: '1. ', cmd: 'InsertOrderedList' },
  { start: '* ', cmd: 'InsertUnorderedList' },
  { start: '- ', cmd: 'InsertUnorderedList' }
]
```
to the following new preconfigured defaults:

Example preconfigured text_patterns for TinyMCE 7.0+
```js
[
  { start: '*', end: '*', format: 'italic' },
  { start: '**', end: '**', format: 'bold' },
  { start: '#', format: 'h1', trigger: 'space' },
  { start: '##', format: 'h2', trigger: 'space' },
  { start: '###', format: 'h3', trigger: 'space' },
  { start: '####', format: 'h4', trigger: 'space' },
  { start: '#####', format: 'h5', trigger: 'space' },
  { start: '######', format: 'h6', trigger: 'space' },
  { start: '1.', cmd: 'InsertOrderedList', trigger: 'space' },
  { start: '*', cmd: 'InsertUnorderedList', trigger: 'space' },
  { start: '-', cmd: 'InsertUnorderedList', trigger: 'space' },
  { start: '>', cmd: 'mceBlockQuote', trigger: 'space' },
  { start: '---', cmd: 'InsertHorizontalRule', trigger: 'space' },
]
```

> **Important:** Customers that wish to revert back to the previous default block `text_patterns` execution on `Enter` key pressing will be required to replace the preconfigured `text_patterns` with following array:

```js
[
  { start: '*', end: '*', format: 'italic' },
  { start: '**', end: '**', format: 'bold' },
  { start: '#', format: 'h1', trigger: 'enter' },
  { start: '##', format: 'h2', trigger: 'enter' },
  { start: '###', format: 'h3', trigger: 'enter' },
  { start: '####', format: 'h4', trigger: 'enter' },
  { start: '#####', format: 'h5', trigger: 'enter' },
  { start: '######', format: 'h6', trigger: 'enter' },
  { start: '1. ', cmd: 'InsertOrderedList', trigger: 'enter' },
  { start: '* ', cmd: 'InsertUnorderedList', trigger: 'enter' },
  { start: '- ', cmd: 'InsertUnorderedList', trigger: 'enter' },
]
```

> **Tip:** The `trigger` property is exclusively applicable to the configuration of block text patterns. It is not recognized in the configurations for inline and replacement text patterns.
For information on the **text_patterns**, see [Text Patterns](../content-behavior-options/#text_patterns)

### Added custom tooltip for `autocompleter`, now visible on both mouse hover and keyboard focus, except single column cases.

Previously when using [Autocompleter](../autocompleter/), the native browser tooltip was only shown on mouse hover, but not on keyboard focus.

This means that keyboard-only users were not able to see the tooltip, as it was only shown on mouse hover.

To address this in TinyMCE 7.0, custom tooltips have been implemented for `autocompleter` items.

Now, tooltips are now shown on `autocompleter` items both on mouse over and keyboard focus, providing visual indication for keyboard-only users.

> **Note:** The tooltip will only be displayed when the `autocompleter` columns are set to a value greater than `1`. This is because when there is a visible label, the tooltip functionality is not needed and therefore omitted.

### Element preset support for the `valid_children` option and `Schema.addValidChildren` API.

TinyMCE 7.0 updates the [`valid_elements`](../content-filtering/#valid_elements) option and `schema.addValidChildren` function, which now support preset names such as `@blocks`, `@phrasing`, and `@flow`. These presets will be automatically expanded into corresponding lists of valid elements, simplifying the definition process.

For instance, specifying valid_children: `'custom-elm[@flow]'` will configure the `custom-elm` element to accept any child element classified as a flow element. This streamlines the process of defining valid elements and eliminates the need to manually list all elements from the schema spec.

Example
```js
tinymce.init({
  selector: "textarea",
	custom_elements: 'block-container,phrasing-container,flow-container',
	valid_children: 'block-container[@blocks],phrasing-container[@phrasing],flow-container[@flow]'
});
```
For more information on content filtering for custom elements, see [custom_elements](../content-filtering/#custom_elements.adoc).

## Changes

TinyMCE 7.0 also includes the following changes:

### `convert_unsafe_embeds` editor option is now defaulted to `true`.

In TinyMCE 6.8.1, [convert_unsafe_embeds](../content-filtering/#convert-unsafe-embeds) editor option was introduced to allow `object` and `embed` elements to be converted by default to the correct element, respective of the MIME type, automatically when inserted into the editor.

In TinyMCE 7.0, the default value for `convert_unsafe_embeds` will change from `false` to `true`, meaning that all `object` and `embed` tags will automatically be converted to different elements when inserted to the editor. If this behaviour is undesirable, set `convert_unsafe_embeds` to `false` in your editor configuration.

For further details on the `convert_unsafe_embeds` option, see the [content filtering options](../content-filtering/#convert-unsafe-embeds), or refer to the [security guide](../security/#convert-unsafe-embeds), or the [TinyMCE 6.8.1 release notes](/docs/tinymce/6/6.8.1-release-notes/#new-convert_unsafe_embeds-option-that-controls-whether-object-and-embed-elements-will-be-converted-to-more-restrictive-alternatives-namely-img-for-image-mime-types-video-for-video-mime-types-audio-audio-mime-types-or-iframe-for-other-or-unspecified-mime-types).

### `sandbox_iframes` editor option is now defaulted to `true`.

In TinyMCE 6.8.1, the [sandbox iframes](../content-filtering/#sandbox-iframes) editor option was introduced to allow iframes to be sandboxed by default when inserted into the editor.

In TinyMCE 7.0, the default for `sandbox_iframes` will change from `false` to `true`, meaning that all `iframe` elements inserted into the editor will be given the `sandbox=""` attribute by default, preventing most actions, including scripting and same-origin access, which may break existing editor content or produce undesirable effects.

To prevent any expected iframes from being sandboxed, we recommend adding the source domains of such iframes to the new [`sandbox_iframes_exclusions`](../content-filtering/#sandbox-iframes-exclusions) option list, and including the domains in the default list where necessary. To prevent all iframes from being sandboxed, set the option `sandbox_iframes` to `false` in your editor configuration.

For further details on the `sandbox_iframes` option, see the [the content filtering options](../content-filtering/#sandbox-iframes), or refer to the [security guide](../security/#sandbox-iframes), or the [TinyMCE 6.8.1 release notes](/docs/tinymce/6/6.8.1-release-notes/#new-sandbox_iframes-option-that-controls-whether-iframe-elements-will-be-added-a-sandbox-attribute-to-mitigate-malicious-intent).

### The `DOMUtils.isEmpty` API function has been modified to consider nodes containing only comments as empty.

In previous versions of TinyMCE (prior to version 7.0), the function `DomUtils.isEmpty` behaved inconsistently, considering elements with only comment nodes as non-empty.

As a consequence, elements visually appearing empty due to containing only comment nodes could lead to inconsistent behavior in caret placement and selection handling.

TinyMCE 7.0 addresses this issue, now, when using `DomUtils.isEmpty`, elements containing only comment nodes are correctly recognized as empty.

As a result, caret placement and selection handling within elements containing only comment nodes now behave consistently.

> **Note:** Users who relied on `DOMUtils.isEmpty` returning `false` for elements with only comments should update their implementation. Elements with only comment nodes are now recognized as empty in TinyMCE 7.0.

### The `highlight_on_focus` option now defaults to true, adding a focus outline to every editor.

In TinyMCE 6.4, the option `highlight_on_focus` was introduced, that provides a blue outline to an instantiated TinyMCE editor when the editor is in `focus`.

As of TinyMCE 7.0, the `default` value of this has now been set to `true`.

For more information about `highlight_on_focus` see the [highlight_on_focus](../accessibility/#highlight_on_focus) option.

> **Note:** Any editors using this `highlight_on_focus: true` option, can remove this option from their TinyMCE init configuration when upgrading to TinyMCE 7.0.

### Remove the height field from the `table` plugin cell dialog. The `table` plugin row dialog now controls the row height by setting the height on the `tr` element, not the `td` elements.

The height field within the table plugin cell dialog has been removed, thereby restricting the ability to adjust individual cell heights `td/th`.

However, this modification directs users to utilize the table plugin row dialog to alter the height of entire rows along with all enclosed cells.

> **Note:** When adjusting row height through the row dialog, any height styles previously applied to `td/th` elements will be automatically removed.

### Change table height resizing handling to remove heights from `td` / `th` elements and only apply to `tr` elements.

When resizing a table using either the row resize bars or corner resize handles, any existing `height` styles are removed from the `td` / `th` elements and only apply to `tr` elements and `table` element. Additionally, the heights calculated and applied for the `tr` elements and `table` element more accurately represent the actual visual height in the editor.

As part of the changes to table height resizing handling, resizing via the corner resize handles is more consistent. If the table **does not** have any height styles and the table is resized using one of the corner resize handles, each row has its height increased evenly. If the table **does have** existing height styles, corner resizes will only change the height of the first row (if using top corner handles) or last row (if using bottom corner handles) equivalent to `table_column_resizing: 'resizetable'` option for columns [Table options: table_column_resizing](../table-options/#table_column_resizing)

### Removed incorrect `aria-placeholder` attribute from editor body when `placeholder` option is set.

Previously, when the `placeholder` option was set, the editor would automatically append an `aria-placeholder` attribute to the editor body.

However, the `aria-placeholder` attribute is not a valid attribute for the body element according to accessibility guidelines. As a result, certain screen readers and assistive technologies encountered difficulties in correctly interpreting the content.

In TinyMCE 7.0 addresses this, by removing the `aria-placeholder` attribute from the editor body. This solution ensures that the editor is accessible to all users.

### Optional Tooltip for Dialog Footer Toggle Buttons.

Previously, the `DialogFooterToggleButton` component required a tooltip property. This meant including a tooltip for all toggle buttons displayed in dialog footers, even if the information wasn’t necessary.

As of TinyMCE 7.0, the tooltip property is now optional for `DialogFooterToggleButton`. This flexibility allows developers to omit the tooltip for buttons where it’s not required, providing a cleaner and more focused user experience.

### Changed the `media_url_resolver` option to use promises.

In TinyMCE 6, the `media_url_resolver` option used a callback rather than a promise, which lead to unforeseen consequences.

To rectify this, all instances of `media_url_resolver` were refactored to utilize promises.

As a result, this fix not only standardized the codebase but also significantly enhanced error handling.

For more information on using `media_url_resolver`, see [media_url_resolver](../media/#media_url_resolver)

### Accurate default options in the `styles` bespoke select toolbar button.

Previously, the bespoke `styles` select toolbar button in TinyMCE defaulted to "Paragraph" as the selected option even when there was no actual "Paragraph" style configured.

TinyMCE 7.0 addresses this, the fallback option for the bespoke `styles` toolbar button has been reverted to "Formats" in situations where the "Paragraph" style is not defined in the `style_formats` option. This ensures a more accurate reflection of available styles.

## Removed

TinyMCE 7.0 also includes the following removals:

### Removed `force_hex_color` option, with the default now being all colors are forced to HEX format and as lower case.

Previously in TinyMCE 6, all colors in the content HTML were set to use `rgb` values by default. As the common practice is using `hex` values, this change has been **reverted**.

As a result, in TinyMCE 7, only RGB values in absolute value like `rgb(255, 255, 255)` are converted to HEX values. Other RGB formats such as those with non-absolute values, and color options such as RGBA and HSL remain unchanged. The `forced_hex_color` option has been removed.

For more information, see [Migrating from TinyMCE 6 to TinyMCE 7](../migration-from-6x/#force-hex-color).

### Removed `InsertOrderedList` and `InsertUnorderedList` commands from core.

Previously, native list commands could be executed by various text patterns.

This resulted in undefined browser behavior due to the inherent list code within it.

TinyMCE 7.0 addresses this, by removing the core list commands, effectively eliminating the insertion of lists into the content.

As a result, users no longer experience unexpected list insertions.

### The autocompleter `ch` configuration property has been removed. Use the `trigger` property instead.

Previously, the `ch` configuration property was used to specify the character that would trigger the autocompleter.

This property was deprecated in [TinyMCE 6.2](/docs/tinymce/6/6.2-release-notes/#deprecated) and has been removed in TinyMCE 7.0. Instead, use the `trigger` property to specify the `string` that will trigger the autocompleter.

If `editor.ui.registry.addAutocompleter(name, options)` was used in your configuration, updating your configuration from `ch: '<string>',` to `trigger: '<string>',` is required.

> **Note:** The new `trigger` option can handle multiple character strings as the trigger.
For more information, visit the updated [Autocompleter](../autocompleter/) documentation.

### Removed `closeButton` from `NotificationSpec`, close button in notification is now rendered by default.

To improve keyboard navigation and accessibility in TinyMCE 7.0, notifications have been standardized by removing the ability to customize the presence of a close button. This change ensures a consistent tabbing order across different notifications.

As a result, the close button is now a standard feature in all notifications. Any customizations or configurations related to the `closeButton` setting will no longer affect the functionality of notifications.

## Bug fixes

TinyMCE 7.0 also includes the following bug fixes:

### `mceTableDeleteRow` did not calculate the correct row index for colgroup tables.

Previously, when deleting a row or column in a table within TinyMCE, the caret or cursor position would relocate to the first cell of the table.

As a consequence, users expected it to be repositioned much closer, such as to an adjacent cell in the previous row or column.

In TinyMCE 7.0, this issue is addressed, now, when a user deletes a row or column in a table, the caret/cursor position is now relocated to the adjacent cell in the previous row or column.

### Heading formatting would be partially applied to the content within the `summary` element when the caret was positioned between words.

With the release of TinyMCE 6.8, applying heading formatting to the content within the `<summary>` element was introduced. However, an issue was identified: if the caret was positioned between words, the editor’s selection expand range functionality would not expand the selection to include the entire content within the `<summary>` element.

As a consequence, the heading formatting was partially applied to some of the content within the `<summary>` element.

TinyMCE 7.0 addresses this issue, now, updates were made to the editor’s selection expand range functionality.

As a result, the heading format is applied to the entire content within the `<summary>` element, regardless of the carets location.

### Moving focus to the outside of the editor after having clicked a menu would not dispatch a `blur` event as expected.

In TinyMCE, an issue was identified where clicking outside the editor while a menu was in either the opened or closed state resulted in the blur event not being triggered as expected.

Consequently, the `blur` event was not dispatched when switching focus outside the editor, as the UI was still considered part of the editor.

TinyMCE 7.0 addresses this by now considering UI events as part of the normal editor events.

As a result, the `blur` event is now properly dispatched when switching focus outside the editor.

### Autocomplete would sometimes cause corrupt data when starting during text composition.

Previously in TinyMCE, the autocomplete feature did not properly interrupt or consider composing mode for keyboards when typing in `Korean`.

For example, when typing 'neko' with `Korean` keyboard the following states will be passed through:

- `ㅜ`
- `ㅜㄷ`
- `ㅜ다`
- `ㅜ다ㅐ`

As a consequence, the autocomplete feature triggers as the composition mode changes from `ㅜ` to `ㅜㄷ`, with `ㄷ` being in composing mode. While it copies the text into a new element, it disrupts the composing mode. As a result, when typing `k`, nothing appeared to happen, although in the background, the composing mode actually changes to `다`. Then, when `o` is pressed, the content of the composing mode is added, and the new character is put into composing mode instead, resulting in the text `ㅜㄷ다ㅐ`.

TinyMCE 7.0 addresses this issue by, now avoiding `DOM` mutation during IME composition, ensuring uninterrupted composition sessions without introducing new elements to the DOM.

### Inline mode with persisted toolbar would show regardless of the skin being loaded, causing css issues.

Previously when `toolbar_persist` and `inline` mode was set to `true`, the toolbar could be shown before the skin was loaded. Whereas now it will always wait for the skin to load first.

### Table classes couldn’t be removed via setting an empty value in `table_class_list`.

Previously, it was not possible to remove all classes on a table when setting an empty value in the `table_class_list` option and using the "Class" listbox field in the "Table Properties" dialog.

TinyMCE 7.0 introduces improvements for handling and removing classes on table, row and cell elements, including:

- An empty value in the `table_class_list` option, `table_row_class_list` option, and `table_cell_class_list` option will allow all classes to be removed on the selected table for the "Table Properties" dialog, selected rows for the "Row Properties" dialog, or selected cells for the "Cell Properties" dialog respectively.
- For a table with a class that does not match any of the values set in the `table_class_list` option, a "Select…​" item becomes the default choice in the "Class" listbox field in the "Table Properties" dialog. (This selection maintains the existing class upon saving). Conversely, if the table has a class that does match one of the values set in the `table_class_list` option, it is automatically selected.
- For selected rows with classes that do not match any of the values set in the `table_row_class_list`, a "Select…​" item becomes the default choice in the "Class" listbox field in the "Row Properties" dialog. (This selection maintains the existing classes upon saving). Conversely, if the selected row classes do match one of the values set in the `table_row_class_list`, it is automatically selected.
- For selected cells with classes that do not match any of the values set in the `table_cell_class_list`, a "Select…​" item becomes the default choice in the "Class" listbox field in the "Cell Properties" dialog. (This selection maintains the existing classes upon saving). Conversely, if the selected cell classes do match one of the values set in the `table_cell_class_list`, it is automatically selected.

### Directly right clicking on a `<ol>` / `<li>` in FireFox didn’t enable the button `List Properties…​` in the context menu.

In previous versions of TinyMCE, two issues where identified that affected `list properties` for `<ol><li>` tags:

1. in old versions of Firefox (prior to version 121), the caret was not moved to the target position when using the right click, and;
2. as TinyMCE creates a bookmark when there is no selection for Firefox, when a user opened a context menu the editor would jump back to the newly created bookmark.

As a consequence, since the selection is still on the first element, the `List Properties…​` context menu item was `disabled`.

TinyMCE 7.0 addresses this issue, now when the user opens a context menu, TinyMCE creates a new bookmark to avoid the jump back.

As a result, the selection is in the correct place and the `List Properties…​` context menu item is `enabled`.

### The `link_default_target` option wasn’t considered when inserting a link via `quicklink` toolbar.

Previously when using `quicklink`, the `link_default_target` value was not being considered.

As a consequence, the `target` attribute would not be applied to links created using `quicklink`.

TinyMCE 7.0 addresses this issue, now, the `quicklink` has been enhanced to consider the `link_default_target` value.

As a result, if a `link_default_target` is specified, `quicklink` will appropriately incorporate it when creating a link.

### When inline editor toolbar wrapped to multiple lines the top wasn’t always calculated.

Previously when shrinking the inline editor, the top position of the toolbar was calculated before wrapping the toolbar into multiple rows.

As a consequence, the additional rows in the wrapped toolbar would cover the editor content.

TinyMCE 7.0 addresses this issue, now, the editor shrinking is applied before calculating the top position of the toolbar.

As a result, the truncated toolbar is correctly displayed above the editor content.

#### Removed manually dispatching `dragend` event on drop in Firefox.

Dragging and dropping an image between two cells in a table with the **PowerPaste** plugin enabled triggered the manual dispatching of the `dragend` event when the host browser was Firefox.

As a consequence, the image was duplicated into the new cell instead of being moved from the old cell to the new one.

In TinyMCE 7.0, this manual dispatching of the `dragend` event in Firefox has been removed.

As a result, when an image is `dragged` and `dropped` from one cell to another, it now correctly moves without duplicating itself.

### Pressing Backspace at the start of an empty `summary` element within a `details` element nested in a list item no longer removes the `summary` element.

Previously in TinyMCE, when a details element was placed inside a list item and contained an empty summary, pressing the Backspace key (with the cursor at the beginning of the summary) resulted in the summary being deleted.

This caused the unexpected behavior of replacing the summary contents with the default summary placeholder.

To address this, the summary element has been included in the list of non-empty elements within the editor’s schema.

With this adjustment, the summary element will no longer be deleted under the previously mentioned conditions.

### The toolbar width was miscalculated for the inline editor positioned inside a scrollable container.

Previously in TinyMCE, the inline editor’s toolbar width was calculated using the `outerContainer` width.

Consequently, the toolbar was given a width of `0`, resulting in the toolbar collapsing to the minimum width.

TinyMCE 7.0 addresses this issue, now, a check has been introduced to prevent the adjustment of the toolbar’s width if the calculated value is `0`.

As a result, the inline editor now correctly displays the toolbar’s width when positioned inside a scrollable container.

example setup
```js
tinymce.init({
  selector: "div",
  inline: true,
  toolbar_persist: true
});
```
As a consequence, this would result in the menubar and/or the toolbar to be squashed when the host browser was operating over a relatively slow connection.

TinyMCE 7.0 addresses this issue, now, the toolbar is no longer squashed in `inline` mode with `toolbar_persist` enabled, when the page takes longer to load the skin.

### Fixed incorrect object processor for `event_root` option.

Previously in TinyMCE, the `inline` mode `event_root` option incorrectly used an `object` processor.

This caused the option to be unregistered when passing a `string` value, resulting in the option being unusable.

TinyMCE 7.0 addresses this, now, the `event_root` option uses the correctly uses the `string` processor.

As the result, the `event_root` option can now be correctly used to specify a CSS selector for an element.

### Adding newline after using `selection.setContent` to insert a block element would throw an unhandled exception.

Previously in TinyMCE, there was an issue with `selection.setContent` when using certain tags (such as `pre`) as the parent element. The selection would not recognize that it was at the end of the line, resulting in an error when trying to insert a new line afterwards.

TinyMCE 7.0 addresses this issue. The selection now correctly recognizes that it is at the end of the line when using `selection.setContent`. As a result, the insertion of a new line behaves as expected.

### Floating toolbar buttons in inline editor incorrectly wrapped into multiple rows on window resizing or zooming.

An issue was identified where the floating toolbar’s functionality, specifically regarding the incorrect rendering of the overflow button on a second row when the window was resized or the browser was zoomed.

Previously, when the toolbar contained more buttons than could be displayed within the available space, an overflow button (depicted by three dots) `…​` would appear at the toolbar’s end, enabling users to access the remaining buttons. However, due to a bug, this overflow button would occasionally shift to a second row, disrupting the layout, especially during window resizing.

TinyMCE 7.0 addresses this issue, by adding improvements to the resizing behavior of the toolbar to ensure it consistently fits within one row.

As a result, the toolbar now adjusts its size appropriately and maintains a single-row layout, effectively preventing the overflow button from erroneously moving to a second row under any circumstances.

### When setting table border width to 0 and `table_style_by_css` is `true`, only the border attribute is set to 0 and border-width styling is no longer used.

Previously in TinyMCE 6, when the `table_style_by_css` option was `true` and the table border width was set to `0px` within the "Table Properties" dialog, the table’s border attribute would be set to 1 and `border-width: 0px` would be applied to all cells in the table. This behaviour was unintentional and differed from setting the `table_style_by_css` option to `true` in TinyMCE 5.

In TinyMCE 7.0 addressed this issue. Now, setting the border width to 0 consistently sets the table border attribute to 0, removing `border-width` styles from all table cells, and aligning the behavior of the "Border width" property with TinyMCE 5.

### Clicking to the left or right of a non-editable `div` in Firefox would show two cursors.

Previously in Firefox, when the `FakeCaret` was rendered, in some cases the real caret was incorrectly rendered too.

As a consequence, the `FakeCaret` was visible at the same time as the real caret which should have been `hidden`.

TinyMCE 7.0 addresses this issue, now, the container containing the real caret, when we render the `FakeCaret`, is styled with `'caret-color': 'transparent'`.

As a result, the real caret is now hidden when TinyMCE renders the `FakeCaret`.

### The `mceTablePasteRowAfter` command, `mceTablePasteColAfter` command, `"Paste row after"` menu item and `"Paste column after"` menu item now place the cursor in the newly pasted row/column to be consistent with the other pasting operations.

Previously, the cursor position was incorrectly calculated after pasting a new row or column when using the `mceTablePasteRowAfter` command, `mceTablePasteColAfter` command, or `"Paste row after"` and `"Paste column after"` UI menu items.

As a consequence, after pasting, the cursor remained in the same position instead of moving to the newly pasted row or column.

TinyMCE 7.0 addresses this, fixing the cursor calculation.

Now, when using the `mceTablePasteRowAfter` command, `mceTablePasteColAfter` command, or `"Paste row after"` and `"Paste column after"` UI menu items, the cursor is correctly positioned in the newly pasted row or column as expected.

## Security fixes

TinyMCE 7.0.0 includes two fixes for the following security issues:

### TinyMCE Cross-Site Scripting (XSS) vulnerability in handling iframes

A cross-site scripting (XSS) vulnerability was discovered in TinyMCE’s content insertion code. This allowed `iframe` elements containing malicious code to execute when inserted into the editor. These `iframe` elements are restricted in their permissions by same-origin browser protections, but could still trigger operations such as downloading of malicious assets.

TinyMCE 6.8.1 introduced a new [sandbox iframes](../content-filtering/#sandbox-iframes) boolean option which adds the `sandbox=""` attribute to every `iframe` element by default when enabled. This will prevent cross-origin, and in special cases same-origin, XSS by embedded resources in `iframe` elements. From TinyMCE 7.0.0 onwards the default value of this option is `true`.

In TinyMCE 7.0.0 a new [`sandbox_iframes_exclusions`](../content-filtering/#sandbox-iframes-exclusions) option was also added, allowing a list of domains to be specified that should be excluded from having the `sandbox=""` attribute applied when the `sandbox_iframes` option is enabled. By default, this option is set to an array of domains that are provided in embed code by popular websites. To sandbox iframe elements from every domain, set this option to [].

CVE: [CVE-2024-29203](https://nvd.nist.gov/vuln/detail/CVE-2024-29203)

GHSA: [GitHub Advisory](https://github.com/tinymce/tinymce/security/advisories/GHSA-438c-3975-5x3f).

> **Note:** The HTTP Content-Security-Policy (CSP) `frame-src` or `object-src` can be configured to restrict or block the loading of unauthorized URLS. Refer to the [TinyMCE Content Security Policy Guide](../tinymce-and-csp/).

### TinyMCE Cross-Site Scripting (XSS) vulnerability in handling external SVG files through Object or Embed elements

A [cross-site scripting (XSS)](https://owasp.org/www-community/attacks/xss/) vulnerability was discovered in TinyMCE’s content loading and content inserting code. A SVG image could be loaded though an `object` or `embed` element and that image could potentially contain a XSS payload.

TinyMCE 6.8.1 introduced a new [convert_unsafe_embeds](../content-filtering/#convert-unsafe-embeds) option to automatically convert `object` and `embed` elements respective of their type attribute. From TinyMCE 7.0.0 onwards, the `convert_unsafe_embeds` option is enabled by default.

> **Note:** If you are using TinyMCE 6.8.1 or higher, set `convert_unsafe_embeds` to `true`. For any earlier versions, a custom NodeFilter is recommended to remove or modify any `object` or `embed` elements. This can be added using the `editor.parser.addNodeFilter` and `editor.serializer.addNodeFilter` APIs.
CVE: [CVE-2024-29881](https://nvd.nist.gov/vuln/detail/CVE-2024-29881)

GHSA: [GitHub Advisory](https://github.com/tinymce/tinymce/security/advisories/GHSA-5359-pvf2-pw78).

> **Note:** Tiny Technologies would like to thank Toni Huttunen of [Fraktal Oy](https://www.fraktal.fi/) for discovering this vulnerability.

## Known issues

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

### Non-breaking spaces `&nbsp;` may be inadvertently inserted around content during Markdown conversion.

Currently, Non-breaking spaces `&nbsp;` may be inadvertently inserted around content inside `<p> </p>` during Markdown conversion, requiring users to manually remove them post-conversion as the current workaround.

Example of unexpected insertion of `&nbsp;`
```html
<p>&nbsp;</p> // unexpected
<h3>Heading</h3>
<p>This is a paragraph.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<p>&nbsp;</p> // unexpected
```

> **Note:** This issue [is addressed](../7.0.1-release-notes/#pasting-markdown-into-some-situations-would-cause-the-pasted-data-to-be-placed-in-unexpected-places) in TinyMCE 7.0.1.

### Tab navigation inside the Enhanced Code Editor function as expected when the host browser is Safari.

Tab navigation inside the Enhanced Code Editor does not function as expected when the host browser is Safari, as tab-key navigation through browser elements is not enabled by default on MacOS.

> **Tip:** Keyboard navigation is essential for accessibility. While tab-key navigation is supported by default on Windows, MacOS requires users to manually enable it within their browser or system settings.
> 
> 1. Launch your Safari browser.
> 2. Navigate to the Safari menu on the menu bar and select Preferences.
> 3. Click on the Advanced tab.
> 4. Enable the accessibility option: "Press Tab to highlight each item on a web page"
> Setting this checkbox will ensure Safari functions properly with tab-key navigation through browser elements.

### Incorrect text color display with TinyMCE `skin: 'oxide-dark'`.

Enhanced Code Editor currently has an issue with the display of text color when TinyMCE is set to `skin: 'oxide-dark'`. When this setting is applied, the text color inside the Enhanced Code Editor does not display correctly.

Workaround:

1. Open the Advanced Code (advcode) dialog.
2. Click on the `Dark/light mode` button within the dialog.

  1. This action will set the text color to white on a black background, resolving the display issue temporarily.

> **Note:** This workaround serves as a temporary solution until a permanent fix is implemented.

### Table that has `colgroup` attribute is highlighted as new in Revision History.

When a `table` element has `colgroup` attribute, Revision History highlights it as new even though it has no change.

Currently, there is no current workaround for this issue.

### Revision History has no integration for saving a version.

For now, the current workaround is to add a custom toolbar button.

Example
```js
const revisions = [];

tinymce.init({
  selector: 'textarea', // change this value according to your HTML
  plugins: 'revisionhistory',
  toolbar: 'revisionhistory saveversion',
  setup: (editor) => {
    // Save the current content of the editor as a new version
    editor.ui.registry.addButton('saveversion', {
      text: 'Save a version',
      onAction: () => {
        // Change this according to your setup
        const revision = {
          content: editor.getContent({ format: 'raw' }),
          revisionId: (revisions.length + 1).toString(),
          createdAt: new Date().toISOString()
        };
        revisions.unshift(revision);
      }
    });
  },
  revisionhistory_fetch: () => Promise.resolve(revisions)
});
```