TinyMCE 6.8.1

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

Advanced Templates 1.4.0 includes the following improvement and fix.

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

AI Assistant 1.2.0 includes the following improvement:

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

Comments 3.3.4 includes the following fix:

In previous versions of TinyMCE, occasionally the sidebar would unexpectedly be set as readonly due to an invalid selection state.

As a consequence, when the user moved the cursor from an empty element to a commented text selection, the sidebar and comments section would change to be readonly.

TinyMCE 6.8.1 addresses this issue, now, when the editor verifies that the sidebar state should set as readonly false, it also update invalid selection to false, so both states do not affect the sidebar state.

For information on the Comments plugin, see: Comments plugin.

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

PowerPaste 6.2.3 includes the following fixes:

Previously, when copying content, including comments, and subsequently pasting it into a TinyMCE document, the comments were also unintentionally included in the pasted data.

TinyMCE 6.8.1 addresses this issue, now, when a user copies and pastes content from Word with the inclusion of comments, the Powerpaste plugin now excludes these comments from the pasted content.

Previously, when a user pasted content from Word, the pasted content would be converted to:

As a consequence, two distinct behaviors were apparent.

To fix this, when a paragraph contains no content except for a  , then PowerPaste would unwrap that specific paragraph so that it becomes:

Instead of:

Powerpaste 6.4.2 addresses this issue, now, when a paragraph contains a   within the copied text content, the inner s tags, u tags and spans are removed on paste.

Previously, when the setProgressState(true) API was invoked while the editor is not completely visible, it would trigger the editor to focus.

As a consequence, the page automatically scrolls until the editor is fully visible.

TinyMCE 6.8.1 addresses this issue, now, the editor retains the focus functionality whilst eliminating the need for the automatic scrolling behavior.

As a result, the editor will still receive focus as intended, but the page will no longer scroll unnecessarily when pasted content is inserted.

Previously, when pasting a table from a Microsoft Excel document that had a solid thin border of (.5pt) such as border: 0.5px solid #000; into the editor when powerpaste was enabled would result in the table rendering as a dashed border instead of the solid border.

TinyMCE 6.8.1 addresses this by updating the default table border width for tables within TinyMCE from .5pt to 1px.

As a result, pasting tables now retains its original solid border on paste.

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 fixes:

Previously, while pressing Enter, Spacebar or changing context within the editor after an incorrectly spelled word would trigger the Spell Checker Pro plugin. Although it was discovered that after pressing Shift+Enter, the plugin failed to trigger, as the initial implementation did not consider this keypress as a space, or as a change to the context.

TinyMCE 6.8.1 addresses this issue, now, the Spell Checker Pro mechanism is triggered by either Space, Enter or Shift+Enter.

Spell Checker Pro would in some situations be interrupted while composing when the user selects a suggestion with a space.

As a consequence, issues such as duplication or other unintended outcomes would occur.

TinyMCE 6.8.1 addresses this issue, by introducing a new check that prevents as-you-type checks from being performed if composing is already in progress.

As a result, composing can now be done safely.

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

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

Advanced Typography 1.1.3 includes one 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.8.1 skin, Oxide.

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

As a result of an accessibility report for TinyMCE, it was discovered that the color picker dialog scored lower than expected, specifically when the user attempted to interact with the brightness/saturation selector and the hue slider when selecting a foreground or background color.

As a consequence, it was noted that the color picker was not fully accessible via keyboard.

TinyMCE 6.8.1.1 addresses this issue, now, when navigating through the dialog using the keyboard, the focus will be on the brightness/saturation pane, this allows the user to use the arrow keys to navigate in all four directions when selection a color. In addition when holding the "shift" key down, the navigation speed will be increased. This functionality has also been applied to the hue slider for added benefit for accessibility.

In previous versions of TinyMCE, the tooltips of file picker buttons of urlinput dialog components assumed the label of the component.

Consequently, the tooltip does not always clearly indicate the functionality of the file picker button. This affected the urlinput dialog components in the Insert/Edit Link, Insert/Edit Image, and Insert/Edit Media dialogs.

In TinyMCE 6.8.1, the tooltips of urlinput file picker buttons on affected dialogs have been improved as follows:

In previous versions of TinyMCE, when a dialog was redialed with a new size value, that value would have no effect on the size of the dialog.

In TinyMCE 6.8.1, now, the size of the dialog is updated when the dialog is redialed with a spec containing a new size that is different from the current size.

Prior to TinyMCE 6.8.1, accessibility labels of bespoke dropdown buttons only announced the name of the button, and not the visible text label of the selected option.

For example, when the fontfamily dropdown button selection was set to “Verdana”, the accessibility name was set as “Fonts”. However, it should have been set as “Fonts Verdana” as the selected option is also visible on the button.

In TinyMCE 6.8.1, the visible text label (or icon name where icons are present instead) of selected options of bespoke dropdown buttons are appended to the accessible name. This ensures that the accessible name of the above scenario is announced as “Fonts Verdana”, improving accessibility.

TinyMCE 6.8.1 introduces a new option default_font_stack, that allows integrators to define the default font stack for the "System Font" stack in the fontfamily toolbar and menu items.

The array should contain a font family name that matches the default fonts configured in the content_css CSS file.

For information on the user formatting options, see: user formatting options.

Previously, when applying colors to content within the editor via the forecolor and backcolor, HEX colors were always converted to RGB.

TinyMCE 6.8.1 addresses this issue, by adding the new editor option force_hex_color: 'off' which is set as default, can now be added to the TinyMCE config by;

Recently it was discovered that iframes could embed resources that can cause nefarious effects when inserted into the editor via scripting and other mechanisms. This was especially problematic if the iframe had scripts that triggered automatic downloads of malicious files, or if the iframe resource is hosted on the same origin as the editor, which could lead to highly impactful scripting in the same context. In addition, since iframes can be modified to have very small, near-invisible dimensions, they could be unintentionally copied and pasted by users into the editor.

TinyMCE 6.8.1 addresses this, by introducing a new sandbox_iframes boolean option. When set to true, it will add a sandbox="" attribute to all iframes inserted into the editor. According to MDN docs, this will restrict the iframe’s embedded resource from performing potentially malicious actions including scripting, file downloads, browser popups, passing the same-origin policy, among others.

Previously the <object> and <embed> elements, similar to <iframe> elements, could embed external resources. However, unlike <iframe>, <object> and <embed> elements did not have a sandboxing mechanism to neutralize resources which have potentially nefarious effects such as malicious scripting, automatic downloads of dangerous files, among others.

TinyMCE 6.8.1 addresses this by introducing a new convert_unsafe_embeds boolean option. When set to true, <object> and <embed> elements will be converted to different safer alternatives based on their embedded content’s MIME type, set via the type attribute:

The first three types of conversions will prevent scripting and other potentially malicious actions by the embedded resource.

To ensure any embeds converted to <iframe> elements are also neutralized, it is recommended to enable the new sandbox_iframes option. This will add a sandbox="" attribute to the converted iframe and prevent the embedded resource from performing potentially malicious actions such as executing scripts, triggering downloads, passing the same-origin policy, etc.

Previously, clicking on the expand arrow of a details element would result in the editor selection to be external of the summary element when the host browser was Safari.

As a consequence, the plugin failed to detect if the selection was at the beginning of the details element, which resulted in a unsuccessful attempt to toggle the Accordion component when the Enter key is pressed

TinyMCE 6.8.1 addresses this issue, now, the predicate considers that the selection can be right before the summary element, so the Accordion toggling can work as expected on Safari.

Previously, when applying directionality to the accordion, the dir attribute was modified in both the summary and auxiliary accordion body div element. However, the auxiliary accordion body div element disappeared during the editor serialization process, resulting in the loss of the applied dir value for the accordion content.

As a consequence, when selecting the accordion block and applying RTL directionality, the alignment was only applied to the summary, not the entire accordion.

TinyMCE 6.8.1 addresses this issue.

As a result, when selecting an accordion component, the selection now encompasses the entire details element. This ensures that alignment is applied to the entire accordion block when applying directionality, such as RTL, to the component.

Previously TinyMCE’s notification system would bring the focus to the editors content after the user;

As a consequence, the focus would consistently shift back to the editor, irrespective of its current location when the notification closed.

TinyMCE 6.8.1 addresses this issue, now, the focus is only retained within the editor if the notification closure was initiated by user interaction.

Previously, the editor checked the number of tables included in a selection by identifying the closest parent to the selected elements within the table. However, when selecting part of a nested table along with some other element, two different tables were detected: the nested one and the one containing both the nested table and the additional element.

The consequence of this issue was that deleting the selection emptied the main table containing the additional element because it was the last part of the selection, and the selection also included another table (the nested one). Since the entire nested table was contained in the main table, it was completely deleted as well.

TinyMCE 6.8.1 addresses this issue, now the editor recognizes this scenario and manages it as if the additional element was not contained in any table. As a result, the deletion now behaves as if it were outside a table, and it functions as expected.

Previously, a formatted caret was mistakenly perceived as an empty element, which resulted in,

However, with the recent fix in TinyMCE 6.8.1, the caret is now disregarded when clearing the editor, and before removing the caret format, the system now checks if the matching format node is non-nullable and retrieves the parent nodes when necessary.

As a result, formatting can now be correctly removed in both empty and non-empty editors.

In previous versions of TinyMCE, when using the Link Plugin, and inserting a link that is not http/s or relative (such as onenote link), the editor would modify/update the link by adding a new hostname to the url.

TinyMCE 6.8.1 addresses this issue, now, the editor no longer changes links that are not http/s or relative.

Previously, editor schema heading elements were invalid children of a <summary> node within the Accordion component.

As a consequence of this, any attempt to apply a heading format to the <summary> content within the Accordion component was unsuccessful.

TinyMCE 6.8.1 addresses this issue, updates have been applied to the editor schema for heading elements, so they can now be converted as valid children of the <summary> element.

In previous versions of TinyMCE, a regression was identified that affected images nested within a NonEditable section.

As a consequence, the editor would only check the parent element within a nested editable section, which neglected to inspect the image itself and treated the image as a readonly element, rendering it uneditable.

TinyMCE 6.8.1 addresses this issue, now, the editor checks the "readonly" attribute on images, rather than just the parent element.

In previous versions of DOMPurify, a critical issue was identified where attributes containing the self-closing /> tags were erroneously removed during the sanitization process.

This issue stemmed from a older version of DOMPurify was inadvertently truncating attributes associated with self-closing tags.

As a consequence, the removal of these attributes by DOMPurify would cause significant problems in the users web applications.

TinyMCE 6.8.1 addresses this issue by updating DOMPurify to the latest version. By doing so, these attributes are no longer removed, which preserves the integrity of their content.

Previously, when changing the color for either forecolor and backcolor, screen readers didn’t announce the last selected color for that button.

TinyMCE 6.8.1 addresses this issue, now, the last selected color for Text/Background color are read aloud by the screen reader as expected.

Before, if a user copied and pasted a block element that was inside a custom element like the example config below, the editor would make an duplicate copy of the outer wrapper for the custom block element when pasting the content back. This happened because the function didn’t check if the element is a wrapper element.

TinyMCE 6.8.1, now also considers custom elements as part of its process when checking if the element is a wrapper element.

Previously, when the user created a new li from a nested list within its parent by keypress Enter the editor would ignore the styles applied to the nested list.

As a consequence, the new li did not inherit the nested list styles.

TinyMCE 6.8.1 addresses this issue, now, when the user creates a new li item within a nested list, the styles are copied over from the “source” to the newly created li as expected.

Previously, when a caret was positioned at the start of a list item containing only one block element, pressing the Backspace key caused the block content to unwrap.

This had the unintended consequence of detaching the child details element content and appending it to the content of the preceding list item. Unfortunately, this action left the summary element devoid of its requisite parent details element, rendering it structurally invalid. TinyMCE 6.8.1 addresses this issue. now, the details content is no longer unwrapped and moved to the upper list item, which preserves the component’s expected structure.

Previously, when the caret was positioned at either the,

the <p> tag element would be moved inside the child element, rather than the context being merged with the <li> child element context.

As a consequence, a console error "Uncaught DOMException: Failed to execute 'appendChild' on 'Node': The new child element contains the parent", would be displayed in the developer console.

TinyMCE 6.8.1 addresses this issue, now, after pressing the backspace or delete key, the parent element no longer attempts to merge into the child element, but rather unwraps the parent element and merges the context into the child element, resulting in:

As a result, the developer console, no longer displays the console error and the merge between the two elements behaves as expected.

The console error warning "The component must be in a context to execute: triggerEvent" stemmed from two distinct causes.

As a consequence, these issues manifested between the first and second initialization of the toolbar resulting in the input of the first 'fontsizeinput' not been entirely unmounted, leading to attempts to update a non-existent input.

TinyMCE 6.8.1 addresses this issue, now the editor removes the redundant second initialization of the toolbar, and fix the 'fontsizeinput' 'destroy' action, so all its components are now properly unmounted. This fix ensures that updates are only applied to components that genuinely exist.

Previously when rendering the menubar in sync with the fetch of the styles, it was possible in some situations that the styles would render after the menubar.

As a consequence, the menubar would not correctly render such as the width of a button, as a result the button width would force the button to wrap vertically rather then display the button content as intended.

TinyMCE 6.8.1 addresses this issue, now, the rendering for the toolbar is done after the styles have been fetched.

As a result, the width of the buttons now display correctly.

In earlier versions of TinyMCE, collection items set in a collection dialog component would not display any icon as set in the icon property, instead only displaying the string itself.

In TinyMCE 6.8.1, dialog collection items will now use any specified icon from the icon pack, with the string itself used in the case where no such icon exists. This is the current behaviour, as in most uses of dialog collections in TinyMCE, the icon property is set as an individual character, such as in the Emoticons and Charmap plugins.

For information on the Dialog layout components for collections plugin see dialog components.

As focus is required to be in the editor when interacting with the autocompleter or mentions plugins, a issue was identified when the user would navigate through the autocompleter menu.

As a consequence, this may have cause difficulty navigating through the autocompleter menu for users relying on screen readers.

TinyMCE 6.8.1 addresses this, now, by adding aria-owns and aria-activedescendant attributes into the editor body. This will now ensure that the screen reader can announce the current active autocomplete item when the user navigates through the menu.

As a result, these modifications significantly enhance the accessibility of autocompleter and mentions plugins for users relying on screen readers.

In TinyMCE 6.7.0, each cell in the table grid menu item was updated so that it would announce the number of columns and rows currently selected.

In TinyMCE 6.8.1 translations were added for this text, though this announcement was still only available in English as the syntax used for the table grid announcement text in detecting strings which are to be translated was invalid.

TinyMCE 6.8.1 addresses this, now, the syntax has been corrected and each cell in the table grid announces the current selected columns and rows in the correct language, not only in English.

Previously the isInline and isWrapper functions in the Schema module would incorrectly output true for elements nodes when their name begins with # such as #text and #comment.

As a consequence, in certain cases the editor would attempt to append a child node inside such a element node, which is forbidden and resulted in an error being thrown.

In TinyMCE 6.8.1, Schema.isInline and Schema.isWrapper now, excludes element nodes for those which names starts with #, such as #text and #comment.

As a result, these elements are no longer considered as valid inline or wrapper elements, preventing errors caused by element methods being called on specific element nodes like these.