--- title: "TinyMCE 6.3" description: "Release notes for TinyMCE 6.3" canonical_url: "https://www.tiny.cloud/docs/tinymce/6/6.3-release-notes/" md_url: "https://www.tiny.cloud/docs/tinymce/6/6.3-release-notes/index.md" version: "6" last_updated: "2024-04-16T02:53:31Z" tokens: 8701 --- 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.3 > **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.3 was released for TinyMCE Enterprise and Tiny Cloud on Thursday, December 8 th, 2022. It includes TinyMCE 6.3, additional changes to Premium plugins, and several new Premium plugins. These release notes provide an overview of the changes for TinyMCE 6.3: - [New Premium plugins](#new-premium-plugins) - [Accompanying Premium Plugin changes](#accompanying-premium-plugin-changes) - [Accompanying Premium Skins and Icon Packs changes](#accompanying-premium-skins-and-icon-packs-changes) - [Improvements](#improvements) - [Additions](#additions) - [Changes](#changes) - [Bug fixes](#bug-fixes) - [Security fixes](#security-fixes) - [Known issues](#known-issues) ## New Premium plugins ### Inline CSS 1.0.0 The TinyMCE 6.3 release includes the new **Inline CSS** premium plugin. As is normal and long-time best practice, TinyMCE documents keep CSS and HTML separate. This practice is not, however, email-friendly. The Inline CSS plugin takes a TinyMCE document, and processes it such that the previously separate CSS is applied inline to each HTML element. This single output file is much closer to the common requirements for sending as an HTML-formatted email. For information on the **Inline CSS** plugin, see: [Inline CSS](../inline-css/). ### Advanced Typography 1.0.1 The TinyMCE 6.3 release includes the new **Advanced typography** premium plugin. The **Advanced Typography** plugin, depending on its setting, can replace common typewriter-style characters with their professional typesetter equivalents after the *Advanced Typography* button is pressed. This action will modify either the entire TinyMCE document or the text selected by the user. For information on the **Advanced typography** plugin, see: [Advanced typography](../advanced-typography/). There is one known issue in **Advanced Typography** 1.0.1: #### Switching the Advanced Typography target language does not always work as expected Selecting a language from the **Advanced Typography** toolbar button’s menu, runs the rules for the newly selected over the current TinyMCE document. In some circumstances, switching the target language in this fashion does not result in typesetting changes as expected. This is most visibly apparent with quotation marks. The British English typesetting norm is to use opening and closing single-quote marks to denote direct quotation: **‘** and **’**. The American English typesetting norm is to use opening and closing double-quote marks to denote direct quotation: **“** and **”**. And one Spanish typesetting norm is to use guillemets, also known as comillas angulares, comillas francesas or chevrons, to denote direct quotation: **«** and **»**. So, for example, if a TinyMCE document included a string thus: ```text "They went that way," he said, pointing. ``` Selecting *English (US)* from the **Advanced Typography** toolbar icon’s pop-up menu transforms the text, as expected, into ```text “They went that way,” he said, pointing. ``` Following this action by, then, selecting *Spanish* from the **Advanced Typography** toolbar icon’s pop-up menu, however, can result in the following incomplete typesetting change: ```text «They went that way, ” he said, pointing. ``` As of this release the only workaround is to not change **Advanced Typography** target languages after running any given target language’s rules over a TinyMCE document. ## Accompanying Premium Plugin changes The following premium plugin updates were released alongside TinyMCE 6.3. ### Accessibility Checker 3.1.0 The TinyMCE 6.3 release includes an accompanying release of the **Accessibility Checker** premium plugin. **Accessibility Checker** 3.1.0 includes the following fixes, additions, and improvements. #### Merge Tags prefix and suffix elements were not ignored Previously, **Accessibility Checker** incorrectly flagged [Merge Tags](../mergetags/) prefixes and suffixes as presenting a contrast issue. With this update, the **Accessibility Checker** plugin ignores Merge Tag prefixes and suffixes, as expected. #### Added a new rule to show a warning when the alternative text of an image exceeds 100 characters **Accessibility Checker** 3.1.0 now includes a rule that, when applied, shows a warning dialog when an image’s alternative (`alt`) text attribute exceeds 100 characters. When the alternative text exceeds 100 characters, an **Image alternative text should be less than 100 characters** warning presents. This dialog also presents the alternative text in an editable field, for immediate repair. #### The discoverability of the question mark button in warning dialogs was improved Many **Accessibility Checker** dialogs include a question mark icon. This icon is a link to further information about the discovered issue. This update includes changes to the presentation of this icon to make discoverability as a clickable button more apparent. #### The legibility of warning dialogs was improved In concert with the changes noted above to the question mark icon in **Accessibility Checker** dialogs, legibility improvements were made to the presentation and typography of these dialogs. The icon’s text was centered and the **Issue**, **Warning**, or **Error** sub-heading’s font size was reduced. Additionally, borders were removed from the exterior of the description field and contrast colors were adjusted to match the background color of the icons added for this release. #### Replaced the single warning icon presented in dialogs with icons specific to each alert level Previously, all **Accessibility Checker** warning dialogs presented with a triangle warning icon, regardless of whether the alert was informational, a warning, or an error. In TinyMCE 6.3, improvements for the accessibility checker were added to provide additional support for users when trying to identify different alerts such as *info*, *warning* or *error* icons. In previous versions of TinyMCE the accessibility checker used the same triangle warning icon for all alerts when displayed. In TinyMCE 6.3, each alert type now displays a unique icon. - Warning alerts now display as an exclamation mark nested inside a yellow octagon. - Error alerts now display as an exclamation mark nested inside a red triangle. - Success alerts now display as a green tick. For information on the **Accessibility Checker** plugin, see: [Accessibility Checker](../a11ychecker/). ### Advanced Code Editor 3.1.0 The TinyMCE 6.3 release includes an accompanying release of the **Advanced Code Editor** premium plugin. **Advanced Code Editor** 3.1.0 includes the following improvement. #### New option to display the Advanced Code Editor inline instead of in a dialog In TinyMCE 6.3, the Advanced Code Editor plugin includes a new option, `advcode_inline`, that allows users to open the Advanced Code Editor within TinyMCE’s existing editor space instead of being displayed in a separate dialog box. The basic setup for this new option as follows. ```js tinymce.init({ selector: "textarea", // change this value according to your HTML plugins: "advcode", advcode_inline: true, // To use this option, set this value to "true". toolbar: "code", }); ``` ### Checklist 2.0.2 The TinyMCE 6.3 release includes an accompanying release of the **Checklist** premium plugin. **Checklist** 2.0.2 includes one fix: #### Checklist toggling did not preserve selection when used on an existing list In previous TinyMCE versions, when selecting content over either an ordered or unordered list, then switching the list to a checklist, the user’s content selection was not preserved. In TinyMCE 6.3, the user selection is now preserved when toggling a list to a checklist. For information on the **Checklist** plugin, see [Checklist](../checklist/). ### Comments 3.2.0 The TinyMCE 6.3 release includes an accompanying release of the **Comments** premium plugin. **Comments** 3.2.0 includes one fix and one change: #### A comment could be inserted when in an empty editor or block In previous TinyMCE versions a bug existed that allowed comments to be placed into an empty editor or block. With this update, the comments button, menu-item, comment sidebar and shortcut keys are now disabled when the editor contains no content. #### The selection now expands to encompass the word containing the insertion point when a comment is added TinyMCE 6.3 adds [two new API functions](#additions) — `tinymce.selection.expand` and `tinymce.dom.RangeUtils.expand`. With these two functions available, if there is no selected text when a new comment is added, TinyMCE automatically extends the selection to encompass the word containing the insertion point and links the newly added comment to this automatically selected word. For information on the **Comments** plugin, see: [Introduction to Tiny Comments](../introduction-to-tiny-comments/). ### Merge Tags 1.1.0 The TinyMCE 6.3 release includes an accompanying release of the **Merge Tags** premium plugin. **Merge Tags** 1.1.0 includes one addition, one fix, and one change: #### New `mceMergeTag` command to wrap selected content in a merge tag A new command, `mceMergeTag` has been added which can convert any selected text into a merge tag. This new command is available to use when defining [Text Patterns](../content-behavior-options/#text_patterns). Previously only a predefined list of merge tags could be used. When the new `mceMergeTag` command is added, any selected text can be converted into a merge tag. As well, configuring the inline `text_patterns` with this command allows merge tags to be entered by manual typing. Type the prefix, some content, the suffix, and then a word boundary character, and the `mceMergeTag` command will immediately wrap that content in a complete merge tag. In the following example, the Merge Tag prefix and suffix are the default, `{{` and `}}` ```js tinymce.init({ selector: 'textarea', // change this value according to your HTML plugins: 'mergetags', text_patterns: [ { start: '{{', end: '}}', cmd: 'mceMergeTag' } ], mergetags_list: [ { value: 'merge.tag', title: 'A merge tag.' }, ], toolbar: 'mergetags', }); ``` In this example, typing `{{string}}` followed by a word boundary character (such as a space, full-stop, question mark or comma) will result in the *string* being turned into an active merge tag. #### Merge tags cannot exceed 255 characters in length In TinyMCE 6.3 a new character limit was introduced: merge tags cannot, now, exceed 255 characters. With this change, all merge tags are now subject to this limit including those predefined in the `mergetags_list` option. In TinyMCE 6.3, to support this feature, the editor will check all merge tag lengths to ensure they do not exceed 255 characters. In the event the merge tag length exceeds this, the item will be inserted as plain text. > **Note:** Some non-ASCII characters or Unicode codepoints count as more than one character. For information on the **Merge Tags** plugin, see: [Merge Tags](../mergetags/). ### Spell Checker Pro 3.1.1 The TinyMCE 6.3 release includes an accompanying release of the **Spell Checker Pro** premium plugin. **Spell Checker Pro** 3.1.1 includes one fix: #### Spell Checker Pro could search outside of the TinyMCE editor for a language match For spelling, a word’s language was identified by finding the nearest `lang` attribute anywhere in an ancestor HTML element to the word (ie, any elements that contain the word). When TinyMCE was running in Inline mode, that ancestry included HTML ancestors extant outside the TinyMCE editor instance. If a `lang` attribute existed anywhere in that ancestry, this ancestral `lang` attribute value overrode all attempts by the user to set the spell checking language for the document. As of TinyMCE 6.3, the `lang` attribute inherits the default settings for the TinyMCE editor body. As a consequence, the editor no longer searches elements external to the editor body when searching for `lang` attributes. For information on the **Spell Checker Pro** plugin, see: [Spell Checker Pro](../introduction-to-tiny-spellchecker/). ### Spelling Autocorrect 1.0.1 The TinyMCE 6.3 release includes an accompanying release of the **Spelling Autocorrect** premium plugin. **Spelling Autocorrect** 1.0.1 includes one fix: #### Fixed format changes at the start of sentences when auto-capitalization was on When **Spelling Autocorrect** was active and had Capitalization enabled (ie had `autocorrect_capitalize: true` set), any inline formatting applied at the beginning of a new sentence, after a full stop (period) but before the start of the word, would be lost when the word was auto-capitalized. Instead, the format at the end of the previous sentence was incorrectly applied. This update to the **Spelling Autocorrect** premium plugin includes changes to the **Spelling Autocorrect** logic that prevent this. As a consequence, formatting is now retained when the word is capitalized, as expected. ## Accompanying Premium Skins and Icon Packs changes The TinyMCE 6.3 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.3 skin, Oxide. For information on using premium skins and icon packs, see: [Premium Skins and Icon Packs](../enhanced-skins-and-icon-packs/). ## Improvements TinyMCE 6.3 also includes the following improvements ### The Text color and Background color menus now display a check mark denoting the currently selected color Previously, the color swatches displayed when the Text color and Background color menus were opened gave no indication as to whether or not the Text color or Background color of the current selection was one of the colors displayed in these menus. With this update, when the selected text’s current Text color or Background color matches one of the colors available from the appropriate color swatch menu, a check mark (the ✔️ character, also known as a tick) displays over that color. ### Text color and Background color toolbar menus now pre-select the color for the selected text or insertion point position. TinyMCE 6.3 included an improvement to the Text color or Background color menus that allows the user to identify the pre-populated color for the selected-text: a checkmark (also known as a tick or tickmark) displayed over the color that matches the currently selected Text color or Background color. In addition to this, in TinyMCE 6.3, `getCurrentColor` checks for the first found `backcolor` and `forecolor` color before the parent color, based on the current selection or insertion point position. As a consequence, when either the Text color or Background color toolbar menus are opened, if the selected Text color or Background color matches one of the colors available from the appropriate color swatch menu, that color is pre-selected. ## Additions TinyMCE 6.3 also includes the following additions: ### New expand functions added to tinymce.selection and tinymce.dom.RangeUtils which expand the selection around the nearest word. TinyMCE 6.3 introduced two new API functions that allow a user to select a word from the insertion point location which applies a new expand feature. The `tinymce.selection.expand` API function allows TinyMCE users and developers to expand the selection range to contain the entire word when the selection is collapsed within the word. The `tinymce.selection.expand` method expands the selection over the entire selected word, while the `tinymce.dom.RangeUtils.expand` method returns a range expanded over an entire selected word. These new API functions are implemented to improve the selection of whole words in the Comments plugin. If, in the following example, a user places the insertion point between the first and second `m` in the word, `comment`, then clicks the *Add comment* toolbar button, or selects *Insert > Add comment* from the TinyMCE menu, or presses the *Add comment* keyboard shortcut (eg ⌘+⌥+M) — ```html

Comment

``` — TinyMCE 6.3 will automatically expand the selection to include the whole word, ‘Comment’. ### New `color_map_foreground` and `color_map_background` options store custom colors selected using the Text color and Background color menus. TinyMCE 6.3 has two new and separate color palettes — `color_map_foreground` and `color_map_background` — for custom Text colors and custom Background colors. When custom colors are selected from the Text color or Background color menus, these colors are now stored in these separate color palettes, `color_map_foreground` and `color_map_background`, respectively. When chosen, these custom colors are still added to the Text color and Background color menus. But they are now stored separately from the default color sets used by both menus. > **Note:** When a user adds a custom color to the `color_map_background` palette, the editor does not replicate the new color in the `color_map_foreground` palette. ### Added optional storageKey property to `colorinput` component TinyMCE 6.3 introduced two new color palettes for `color_map_background` and `color_map_foreground`. This addition introduced changes to the `colorcache`: it is no longer considered a singleton. The `colorcache` can now be accessed with the help of a custom ID, which can now create custom `color_map` colors, selected by the user to be assigned to either the `backcolor` or `forecolor` palettes separately. To accompany this, TinyMCE 6.3 now allows for the creation of a separate `storageKey` property for the pre-provided colors in `color_map_forground` and `color_map_background` respectively. `storageKey` properties can also be set to `color_cols`, the `colorinput` component, and `colorswatch`. > **Note:** If no separate values are set for `color_map_forground` and `color_map_background`, they still default to the shared or previous values as before. ### A new `addView` API was added to `editor.ui.registry` The new `addView` API registers a new view container. This container, which is off (hidden) by default, is attached to the main view. In this default state, the main editor view is shown and the `addView` -specific view is hidden. When `addView` is turned on, the main editor view is hidden, and the `addView` -specific view is shown. Accompanying this new API is a new `ToggleView` command. The `ToggleView` command can, as its name suggests, toggle view visibility. As well, the `ToggleView` command can be queried for its current state. ### New `color_default_foreground` and `color_default_background` options to set the initial default color for the forecolor and backcolor toolbar buttons and menu items. TinyMCE 6.3 adds a new feature that allows the default color for the icons in the foreground color and background color toolbar buttons to be pre-defined. The `color_default_foreground` and `color_default_background` colors are options that take strings. In the example below, the foreground color is set to red and the background color is set to a shade of cyan. As the example shows, these colors can be defined by either name or hex #. ```js tinymce.init({ selector: 'textarea', // change this value according to your HTML color_default_background: 'red', color_default_foreground: '#0DEDFF', toolbar: 'forecolor backcolor fontsize' }); ``` ### Placing block elements inside anchor tags is now supported Previously, TinyMCE only supported placing inline elements — such as `` or `` — inside anchor tags TinyMCE 6.3 adds support for wrapping anchor tags around block level elements. For example, the following is now supported: ```html

Link text inside <p> tags.

 ``` ### Added `ToggleToolbarDrawer` event to subscribe to toolbar’s opening and closing TinyMCE 6.3 includes a new event, `ToggleToolbarDrawer`, to subscribe to the toolbar’s opening and closing actions. This new event passes `{state: true}` if the toolbar is visible and it passes `{state: false}` if the toolbar is invisible. ## Changes TinyMCE 6.3 also incorporates the following changes: ### Keyboard navigation in the Text color and Background color menus now starts on the currently selected color if that color is present In TinyMCE 6.3, `getCurrentColor` now checks for the first found `backcolor` and `forecolor` color before the parent color, based on the current selection or insertion point position. As a consequence, when either the Text color or Background color toolbar menus are opened, if the selected Text color or Background color matches one of the colors available from the appropriate color swatch menu, that color is pre-selected and navigating through the available colors using arrow keys on the keyboard starts from this pre-selected color. ### `setContent` is now allowed to accept any custom keys and values as a second options argument In TinyMCE 6.3, changes have been made to the `setContent` API that now allows the editor to accept any custom `[key: string]: (value) any;` as a second option argument when the user inserts content. The provides more flexibility with the `getContent` and `setContent` features. New tests have been added to the `setContent` feature in TinyMCE 6.3 that now check if content manipulation in `BeforeSetContent` callback is possible so it can pass the custom data object to the `getContent` feature, allowing it to set both the content and action events. ## Bug fixes TinyMCE 6.3 also includes the following bug fixes: ### Parsing media content would cause a memory leak, which for example occurred when using the getContent API A memory leak occurred in Chrome, Edge and Firefox browsers when media content was parsed into the editor using the `tinymce.activeEditor.getContent()` method API. The memory leak caused an abnormal behavior that increased the memory requirements of the editor until the active tab in the browser crashed. This memory leak has been reported as [Memory leak with DOMParser parseFromString method](https://bugs.chromium.org/p/chromium/issues/detail?id=1374180) in the Chromium bug tracker. A fix that prevents TinyMCE being affected by the leak has been included in TinyMCE 6.3. ### Dragging a noneditable element toward the bottom edge would cause the page to scroll up A regression was found in TinyMCE 6.2 where dragging an element containing a `contenteditable=false` attribute towards a document’s edge did not cause scrolling. It was also found that dragging elements containing a `contenteditable=false` attribute toward the bottom edge causes similar behavior. In this instance, however, when the elements containing a `contenteditable=false` attribute was dragged to the bottom of the page the editor would sometimes scroll up. This regression has been addressed in TinyMCE 6.3. Dragging elements containing a `contenteditable=false` attribute towards a document’s edge causes the viewport to scroll as expected. And dragging elements containing a `contenteditable=false` attribute toward the bottom edge of the editor no longer causes the page to scroll up. ### Range expanding capabilities behaved inconsistently depending on where the insertion point was placed When the `ExpandRange.ts:expandRng()` function is given a range, it is expected to select the next word whether the range begins before or after the word. Previously, however, this was discovered to not be the case. Fixes were applied to the `tinymce.activeEditor.selection.expand()` function which is responsible for directly affecting the white space next to a word that accompanies a space-separated instance. In TinyMCE 6.3, the `ExpandRange.ts:expandRng()` function now behaves as intended with any element such as text, special character, styles or elements with `contenteditable="false”` attributes. Regardless of where the insertion point is placed, the function, when given a range, now selects the word as expected. ### Compilation errors were thrown when using TypeScript 4.8 TinyMCE 6.3 includes updates to the latest `rollup-plugin-dts` version to pull in a fix that was generating invalid generics. The update also allowed for a transition from Typescript 4.7.4 to Typescript 4.8.3, which, further, fixed compilation errors that were occurring. ### Line separator scrolling in floating toolbars In TinyMCE 6.0.3 the background images in the floating toolbar followed the scroll position of any nested scrolling containers when the editor width was reduced by the browser. By default, however, the background images should scroll with the main scrollable element, ``. As a consequence, the divider lines that act as background image to improve the UI would not follow the scroll position of any nested containers inside the floating toolbar. In TinyMCE 6.3 background images now scroll with the toolbar’s content as expected. ### A double bottom border appeared on inline mode editor for the tinymce-5 skin The `inline-mode` toolbar showed an additional border line with TinyMCE 6.x premium skins that used TinyMCE 5.x skin packages. With TinyMCE 6.3, all TinyMCE premium skins were updated and the additional border line no longer presents. ### The editor header showed up even with no menubar and toolbar configured. In classic mode, when both the TinyMCE toolbar and menubar were disabled, a header was still visible at the top of the editor. In TinyMCE 6.3 this header no longer presents when the TinyMCE toolbar and menubar are disabled, giving the editor a cleaner appearance with only the content editor visible. ### Inline text pattern no longer triggers if only the end pattern matches and similar inline text pattern matches are now managed correctly. TinyMCE supports the automatic styling of basic Markdown-style markup syntax. For example, typing ```text This is a **bold** step. ``` will be automatically turned into ```html

This is a bold step. ``` and will be displayed accordingly. In providing this support, TinyMCE uses [text_patterns](../content-behavior-options/#text_patterns). Previously, to check if something matched a supported pattern, TinyMCE first searched for the end pattern (ie, in the example above, the trailing `**`), then searched for the starting pattern (ie, in the example above, the leading `**`, then checked the offset to establish if the leading pattern was, in fact, a leading pattern. However, the previous logic for determining offset could, in some circumstances, cause inline formatting to be either applied when not expected and not applied when expected. In TinyMCE 6.3 the mechanism now checks the text patterns only and applies the closest match based on said text patterns. ### The context toolbar prevented the user from placing the cursor at the edges of the editor. When scrolled past the top row of a table, the table *context toolbar* overlapped any rows at the top of the editor to display below the toolbar. In TinyMCE 5.x, the *context toolbar* switches from being at the top of the editor, to the bottom of the table or editor when a user attempted to select cells close to the top row of the table. And vice versa when the *context toolbar* was docked to the bottom of the editor. In TinyMCE 6.x, the height of the *context toolbar* was increased, while the distance from which it needed to be selected in order to switch locations was not. With TinyMCE 6.3 this distance has been increased. This allows the *context toolbar* to correctly switch locations when a user selects cells close to the toolbar, allowing the top or bottom visible rows of a table to be selected without issue when the *context toolbar* is visible. ### The Quick Insert context toolbar provided by the quickbars plugin showed when the cursor was in a fake block caret The Quick Insert context toolbar, provided by the [Quick Toolbars](../quickbars/) plugin, was displayed when the cursor was moved to the left of an element with a `contenteditable="false"` attribute. This behavior was unexpected because the Quick Insert context toolbar should not present when the insertion point is placed on a line with content. The root cause was the insertion point being placed into a fake block caret, which was not considered by the logic for toggling the Quick Insert context toolbar. A fix was applied to the logic to ensure it could handle such cases, and prevent it from showing in this circumstance. ### When running on Firefox, the editor.selection.getRng() API was not returning expected values on hidden editors In contrast to other supported browsers, Firefox did not return the selected object or the selection range from iframes that are hidden by the `display: none` attribute. As a consequence, when a TinyMCE instance was running on Firefox, the `window.getSelection()` API for an iframe returned `null` if the iframe was hidden. This, further, resulted in the `editor.selection.getRng()` and `editor.selection.getBookmark()` APIs returning incorrect data from hidden editors when Firefox was the host browser. This has been fixed in TinyMCE 6.3. All browsers, including Firefox, now return the correct values even when the iframe is hidden. ### Dragging a noneditable element before or after another noneditable element now works correctly Elements that had the `contenteditable="false"` attribute set could not be dragged to the left of an ancestor element. For example in the following ```html

Text in a paragraph tag with a span of non-editable text inside.

``` the string *non-editable text* could not be dragged to before the opening `

` tag. TinyMCE 6.3 can place a fake insertion point next to elements with a `contenteditable="false"` attribute when another element with a `contenteditable="false"` attribute is dragged, allowing the object to be moved before and after other such elements. ### The restored selection or location after a redo or undo action was not scrolled into view Prior to the TinyMCE 6.3 release, executing an undo or redo function in the editor did not scroll the editor to the new insertion point or selection, should the undo or redo result in the insertion point or selection being out of the current viewport. Instead, users had to manually scroll to the insertion point or selection after issuing an undo or redo command that resulted in the insertion point or selection being out of view. As of the TinyMCE 6.3 release, the scroll function now repositions the insertion point to the last known undo or redo location. ### A newline could not be inserted after an inline element with a contenteditable="false" attribute was created In previous versions of TinyMCE, a newline could not be inserted when the selection was restored from a bookmark positioning after adding an inline element with a `contenteditable="false"` attribute. This was most commonly seen by pressing the **Return** (or **Enter**) key not moving the insertion point to a new line after a merge tag was created in the editor. For TinyMCE 6.3, a fix was applied to the core `SelectionOverrides` settings to ensure the user selection restores from the bookmark positioning before and after an inline element with a `contenteditable="false"` attribute is created. Hitting the **Return** (or **Enter**) after creating a merge tag now moves the insertion point to a new line, as expected. ### Inline mode did not respect the `content_css_cors` option In previous versions of TinyMCE, the `tinymce.dom.styleSheetLoader` global was not configured by the `content_css_cors` option, when specified. Consequently, stylesheets loaded by TinyMCE onto the outer document page did not have the `crossorigin="anonymous"` attribute. This particularly affected TinyMCE instances running in inline mode, because the `tinymce.dom.styleSheetLoader` global is used to load stylesheets used by inline editors. (Stylesheets for TinyMCE editors running in iframe mode are specific to the editor.) Without the `crossorigin="anonymous"` attribute being set, no external stylesheets were loaded. And inline editors with the `pageembed` plugin loaded and the `tiny_pageembed_inline_styles` option set to `true` would, as a result, return an error when attempting to insert any iframes through the dialog. As of TinyMCE 6.3, the `content_css_cors` option now configures the `tinymce.dom.styleSheetLoader` global when specified. This allows the `crossorigin="anonymous"` attribute to be added to all stylesheets loaded by the editor — including editors running in inline mode — when the option is set to true. ### The insertion point moved to the previous line when a text pattern executed a `mceInsertContent` command on Firefox In previous versions of TinyMCE, when running on Firefox and after pressing Enter or Return to execute an `mceInsertContent` command (to, for example, add a merge tag to a TinyMCE document), [text_patterns](../content-behavior-options/#text_patterns) moved the insertion point to the previous line. This error has been corrected in TinyMCE 6.3. When running TinyMCE 6.3 on Firefox and creating a merge tag using `mceInsertContent`, pressing Enter or Return to generate the desired merge tag moves the insertion point to the end of said newly-created merge tag, as expected. ## Security fixes TinyMCE 6.3 includes a fix for the following security issue: ### A cross-site scripting (XSS) vulnerability was found in TinyMCE alerts It was discovered that HTML being inserted into the DOM for presentation in TinyMCE alert and confirm dialogs was not being sanitized. As a consequence, plugins that used the alert or confirm dialogs could be used to insert arbitrary JavaScript that would execute when an alert presented in the TinyMCE UI for the current user. As of TinyMCE 6.3, HTML being provided to the DOM for presentation in TinyMCE alert and confirm dialogs is now sanitized before being added. This sanitizing closes the XSS vulnerability. CVE: [CVE-2022-23494](https://www.cve.org/CVERecord?id=CVE-2022-23494). > **Note:** Tiny Technologies would like to thank [P4rkJW](https://p4rkjw.com/) for discovering this vulnerability. ## Known issues This section describes issues that users of TinyMCE 6.3 may encounter and possible workarounds for these issues. There are several known issues in TinyMCE 6.3. ### The More button can disappear from the TinyMCE toolbar when exiting the inline code editor When the More button in the TinyMCE toolbar is open (ie, is set to display all of a multi-line toolbar), opening and closing the [Advanced Code Editor](../advcode/) in inline mode can cause the More button to disappear. Specifically, when TinyMCE 6.3 is running `advcode_inline: true` and `toolbar_mode: sliding` specifically the More button disappears after clicking on the *Cancel* button in the [Advanced Code Editor](../advcode/) viewport. This only occurs when the toolbar is forced into a viewport small enough to render the *More* toolbar button inside the editor. As in the example below, which sets the viewport width to be less than the toolbar width. ```js tinymce.init({ selector: 'textarea', // change this value according to your HTML width: 400, plugins: 'advcode', advcode_inline: true, toolbar_mode: 'sliding', toolbar: 'undo redo | styles | bold italic underline strikethrough | code' }); ``` A workaround does exist to resolve this issue: if the More button disappears, re-sizing the editor viewport forces it to re-display. Switching to Full Screen mode and back counts as re-sizing for this workaround’s purposes. ### In Safari 16.1, the ‘Click for more info’ button in Accessibility Checker dialogs is not outlined when made active **Accessibility Checker** dialogs for accessibility Errors and Warnings include a *Click for more info* button: a colored square containing a circled question mark. When this button is navigated to using keyboard navigation, the button is highlighted and a blue outline appears around the highlighted button. When Safari 16.1 is the host browser for a TinyMCE instance, the *Click for more info* button highlights, but the blue outline does not present when this button is navigated to using keyboard navigation. This is a presentation issue only. The *Click for more info* button still works as a button in Safari 16.1, responding as expected when it is clicked or pressed, or when the Return key is pressed after navigating to the button using the Tab key. There is, as of this release, no specific workaround. > **Note:** If the *Click for more info* button is navigated to using the Tab key, and then the Return key is pressed to activate the button and load the more information page, the blue outline does appear in Safari 16.1 after the Return key is pressed. ### Checkmark over the current color is not displayed when ‘Text color’ or ‘Background color’ is accessed from the TinyMCE menu The **Text color** and **Background color** commands set the color of the selected text and the background behind the selected text respectively. Depending on the TinyMCE configuration, these commands can be accessed from the **Format** menu or from the TinyMCE toolbar, or both. And, when selected text or the background behind selected text is set to one of the colors available from the swatch presented by both commands, a checkbox appears over that color when these commands are selected and the swatch is opened. As of TinyMCE 6.3, however, this checkmark does not appear if the **Text color** or **Background color** commands are opened via the **Format** menu. The checkmark does, however, appear when the equivalent toolbar button menus are opened. This presentation issue does not affect functionality. Selecting a new **Text color** or **Background color**, either via the **Format** menu or the toolbar, changes the selected text color or the selected text’s background color, as expected. A workaround is to specify the **Text color** and **Background color** using the color swatch UI provided by the `forecolor` and `backcolor` toolbar buttons. ### Checkmark over the current Background color is not displayed when inline formatting is applied in a certain order If text in a TinyMCE document is formatted in the following order, the checkmark over the currently active background color does not display in the Background color swatch menu: 1. Apply inline formatting, such as **Bold** or *Italic*. 2. Apply a Text color 3. Apply a Background color This presentation issue does not affect functionality. Selecting a new **Background color**, either via the **Format** menu or the toolbar, changes the selected text’s background color, as expected. A workaround is to apply inline formatting after applying the Text and Background color. When the inline formatting is applied after the Text and Background colors are applied, the presentation error does not occur. > **Note:** This checkmark presentation issue occurs in conjunction with the similar checkmark presentation issue documented above. When this presentation issue occurs, the checkmark does denote the current background color in either the **Background color** menu or toolbar item.