TinyMCE 7.0.1

These are the Tiny Cloud and TinyMCE Enterprise release notes. For information on the latest community version of TinyMCE, see the TinyMCE Changelog.

Overview

TinyMCE 7.0.1 was released for TinyMCE Enterprise and Tiny Cloud on Wednesday, April 10th, 2024.

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

Accompanying Premium plugin changes

The following premium plugin updates were released alongside TinyMCE 7.0.1.

Enhanced Code Editor

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

This Enhanced Code Editor release includes the following fixes.

Text inside code editor was not properly rendered when using a dark TinyMCE skin.

In previous versions of the Enhanced Code Editor, the text color of the code editor was inherited from the TinyMCE skin. This caused the light theme of the code editor to display white text on a white background when using a dark skin, such as oxide-dark.

In TinyMCE 7.0.1, this issue has been resolved. Now, the light theme of the Enhanced Code Editor will always use a dark text color, regardless of the skin being used. As a result, the light mode will render correctly and be easily readable when using a dark skin.

Light mode background with advcode_inline: true had the wrong color when TinyMCE was used with a dark skin.

Previously in the Enhanced Code Editor, the advcode background color depended on the skin of the TinyMCE editor when advcode_inline was set to true. As a result, when TinyMCE was used with a dark skin, the advcode light mode would display dark text on a dark background.

In TinyMCE 7.0.1, this issue has been fixed. Now, when advcode_inline is set to true, the background for advcode light mode is set to white. As a result, the advcode light mode correctly displays dark text on a light background when TinyMCE is used with a dark skin.

For information on the Enhanced Code Editor plugin, see: Enhanced Code Editor.

Markdown

The TinyMCE 7.0.1 release includes an accompanying release of the Markdown premium plugin.

This Markdown release includes the following fixes and improvements.

Pasting markdown then pressing undo resulted in incorrect text layout.

Previously in Markdown, the markdown paste feature performed a direct content insertion for creating the intermediary undo level between the raw pasted content and the markdown conversion. As a consequence, the editor would lose the newline formatting of the original text when pasting markdown and then pressing undo.

In TinyMCE 7.0.1, the markdown paste feature has been updated to use the clipboard insert command for creating the undo level. This ensures that the editor retains the newline formatting of the original text when pasting markdown and then pressing undo.

Pasting markdown into some situations would cause the pasted data to be placed in unexpected places.

Previously in the Markdown plugin, the "markdown-on-paste" feature used the editor.selection.setContent function to insert content into the TinyMCE editor. This approach resulted in some unnecessary   characters being appended before and after the pasted text. As a result, the editor experienced some unexpected content placement behavior and possible duplicated content.

TinyMCE 7.0.1 addresses this issue by changing the paste feature to use the editor.insertContent function instead. As a result, pasting markdown no longer adds unnecessary   and the pasted content is placed correctly and does not duplicate.

This fix addresses a known issue in the Markdown premium plugin.

For information on the Markdown plugin, see: Markdown.

Revision History

The TinyMCE 7.0.1 release includes an accompanying release of the Revision History premium plugin.

This Revision History release includes the following fix.

Reduce the chance of diff annotation styles being overridden by inline styles.

Previously in Revision History, the inline CSS styles of content took precedence over the diff annotation styles. As a consequence, the changes highlighted were not distinguishable to the users.

TinyMCE 7.0.1 addresses this issue by adding an !important declaration to the default annotation styles. As a result, the annotation styling properties will take precedence over the inline styles, ensuring that the changes are clearly visible to the users.

This fix assumes that the inline styles are not using !important declarations. If the inline styles are using !important declarations, the annotation styles will be overridden.

For information on the Revision History plugin, see: Revision History.

Table of Contents

The TinyMCE 7.0.1 release includes an accompanying release of the Table of Contents premium plugin.

This Table of Contents release includes the following fixes.

Encoding header of Table of Contents causing HTML source to be revealed on refresh.

Previously in TinyMCE, the Table of Contents (ToC) header encoding caused special characters to be incorrectly displayed as code instead of their HTML representation.

To address this issue, the HTML encoding has been removed. As a result, the ToC header now renders correctly as HTML even after refreshing, displaying as intended.

For example, if the Table of Contents (ToC) header contained the following content with "Contents" emphasized as follows:

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

Table of Contents

My Heading

<div id="div#tiny-10682-initial">
  <div class="mce-toc">
    <h2>Table of <em>Contents</em></h2>
    <ul>
      <li><a href="#my-heading">My Heading</a></li>
    </ul>
  </div>
  <h1 id="my-heading">My Heading</h1>
</div>
tinymce.init({
  selector: 'div#tiny-10682-initial',
  plugins: 'tableofcontents',
  menubar: false,
  inline: true,
  toolbar: false,
  readonly: true
});

Upon refreshing the ToC, the header would change to display the HTML tags literally, exposing the underlying HTML:

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

Table of <em>Contents</em>

My Heading

<div id="div#tiny-10682-before">
  <div class="mce-toc">
    <h2>Table of &lt;em&gt;Contents&lt;/em&gt;</h2>
    <ul>
      <li><a href="#my-heading">My Heading</a></li>
    </ul>
  </div>
  <h1 id="my-heading">My Heading</h1>
</div>
tinymce.init({
  selector: 'div#tiny-10682-before',
  plugins: 'tableofcontents',
  menubar: false,
  inline: true,
  toolbar: false,
  readonly: true
});

Now, the header maintains the intended HTML rendering even after refreshing:

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

Table of Contents

My Heading

<div id="div#tiny-10682-initial">
  <div class="mce-toc">
    <h2>Table of <em>Contents</em></h2>
    <ul>
      <li><a href="#my-heading">My Heading</a></li>
    </ul>
  </div>
  <h1 id="my-heading">My Heading</h1>
</div>
tinymce.init({
  selector: 'div#tiny-10682-after',
  plugins: 'tableofcontents',
  menubar: false,
  inline: true,
  toolbar: false,
  readonly: true
});

Encode header title for literal display in Table of Contents.

Previously in TinyMCE, during Table of Contents (ToC) generation, heading elements containing HTML tags such as <em> for italics were incorrectly rendered within the ToC itself.

TinyMCE 7.0.1 addresses this issue by encoding the heading element during ToC generation. This ensures that any HTML tags present within the heading element are treated as plain text and displayed literally.

For example, if your document contained a heading element with HTML tags as string in the heading content, the ToC would previously render the heading element as follows:

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

Table of Contents

My <em>Heading</em>

<div id="tiny-10789-before">
  <div class="mce-toc">
    <h2>Table of Contents</h2>
    <ul>
      <li><a href="#my-heading">My <em>Heading</em></a></li>
    </ul>
  </div>
  <h1 id="my-heading">My &lt;em&gt;Heading&lt;/em&gt;</h1>
</div>
tinymce.init({
  selector: 'div#tiny-10789-before',
  plugins: 'tableofcontents',
  menubar: false,
  inline: true,
  toolbar: false,
  readonly: true
});

Now, the ToC maintains the HTML tags within the heading element as plain text, matching the heading element itself:

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

Table of Contents

My <em>Heading</em>

<div id="tiny-10789-after">
  <div class="mce-toc">
    <h2>Table of Contents</h2>
    <ul>
      <li><a href="#my-heading">My &lt;em&gt;Heading&lt;/em&gt;</a></li>
    </ul>
  </div>
  <h1 id="my-heading">My &lt;em&gt;Heading&lt;/em&gt;</h1>
</div>
tinymce.init({
  selector: 'div#tiny-10789-after',
  plugins: 'tableofcontents',
  menubar: false,
  inline: true,
  toolbar: false,
  readonly: true
});

For information on the Table of Contents plugin, see: Table of Contents.

Bug fixes

TinyMCE 7.0.1 also includes the following bug fixes:

Toggle list behavior generated wrong HTML when the forced_root_block option was set to div.

Previously in TinyMCE, when creating a new list item, the editor only considered default root nodes. This caused the caret to be placed incorrectly and resulted in the editor generating a new list instead of adding a list item to the existing list.

In TinyMCE 7.0.1, this issue has been fixed. The editor now checks for non-default root nodes, such as when forced_root_block is set to div, when creating new list items. As a result, the caret is placed correctly after the creation of the new list item, allowing the editor to add a list item instead of generating a new list.

Tapping inside a composed text on Firefox Android would not close the autocompleter.

Previously in TinyMCE, when typing Korean on Firefox Android and moving the caret inside the word being typed, the autocompleter menu did not close. This issue was caused by Gboard triggering an extra input even after the composition had ended. As a result, the autocompleter mistakenly interpreted it as the user starting to type again.

In TinyMCE 7.0.1, this issue has been fixed. Now, the autocompleter menu is properly closed when tapping inside the word being typed on Firefox Android.

An inline editor toolbar now behaves correctly in horizontally scrolled containers.

Previously in TinyMCE, when using an inline editor within a horizontally scrollable container, the calculation of the inline toolbar’s width was incorrect. This resulted in the toolbar’s maximum width being set too small or the toolbar displaying unexpected overflow behavior.

TinyMCE 7.0.1 resolves this issue, now, the toolbar’s maximum width calculation has been fixed to span the available viewport space. As a result, the inline toolbar will now behave correctly, displaying all items when there’s enough space, or hiding them behind the overflow toolbar button when necessary.

Tooltips unintended shrinking and incorrectly positioned when shown in horizontally scrollable container.

Previously in TinyMCE, toolbar tooltips within the editor were positioned as absolute. This caused tooltips to shrink and become misplaced when the editor was placed inside a container with horizontal scrolling.

To resolve this issue, the tooltip element is now styled with a "max-content" width. As a result, tooltips within the editor’s toolbar will display as intended and remain anchored to the corresponding button regardless of the presence of horizontal scrolling.

The status bar was invisible when the editor’s height was set to the minimum.

As a part of the change to add addView API, the status bar was moved inside the editor container. Consequently, when the editor’s height was set to the minimum and the toolbar contained many buttons, the status bar would be hidden under the toolbar buttons.

In TinyMCE 7.0.1, this change is reverted by moving the status bar outside the editor. As a result, the status bar is now visible even when the editor’s height is resized to the minimum.