DOC-2354: Add TINY-10682 release note entry (#3192)

* DOC-2354: Add TINY-10682 release note entry

* Improve CCFR and add example of before/after fix.

* Added an example to TINY-10789

* Apply suggestions from Shan's code review

Co-authored-by: shanmen-tiny <[email protected]>

* Add live demo examples for TINY-10789

* Add live demo example for TINY-10682

---------

Co-authored-by: shanmen-tiny <[email protected]>

modules/ROOT/examples/live-demos/tiny-10682-after/index.html

@@ -0,0 +1,9 @@
+<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>

modules/ROOT/examples/live-demos/tiny-10682-after/index.js

@@ -0,0 +1,8 @@
+tinymce.init({
+  selector: 'div#tiny-10682-after',
+  plugins: 'tableofcontents',
+  menubar: false,
+  inline: true,
+  toolbar: false,
+  readonly: true
+});

modules/ROOT/examples/live-demos/tiny-10682-before/index.html

@@ -0,0 +1,9 @@
+<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>

modules/ROOT/examples/live-demos/tiny-10682-before/index.js

@@ -0,0 +1,8 @@
+tinymce.init({
+  selector: 'div#tiny-10682-before',
+  plugins: 'tableofcontents',
+  menubar: false,
+  inline: true,
+  toolbar: false,
+  readonly: true
+});

modules/ROOT/examples/live-demos/tiny-10682-initial/index.html

@@ -0,0 +1,9 @@
+<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>

modules/ROOT/examples/live-demos/tiny-10682-initial/index.js

@@ -0,0 +1,8 @@
+tinymce.init({
+  selector: 'div#tiny-10682-initial',
+  plugins: 'tableofcontents',
+  menubar: false,
+  inline: true,
+  toolbar: false,
+  readonly: true
+});

modules/ROOT/examples/live-demos/tiny-10789-after/index.html

@@ -0,0 +1,9 @@
+<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>

modules/ROOT/examples/live-demos/tiny-10789-after/index.js

@@ -0,0 +1,8 @@
+tinymce.init({
+  selector: 'div#tiny-10789-after',
+  plugins: 'tableofcontents',
+  menubar: false,
+  inline: true,
+  toolbar: false,
+  readonly: true
+});

modules/ROOT/examples/live-demos/tiny-10789-before/index.html

@@ -0,0 +1,9 @@
+<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>

modules/ROOT/examples/live-demos/tiny-10789-before/index.js

@@ -0,0 +1,8 @@
+tinymce.init({
+  selector: 'div#tiny-10789-before',
+  plugins: 'tableofcontents',
+  menubar: false,
+  inline: true,
+  toolbar: false,
+  readonly: true
+});

modules/ROOT/pages/7.0.1-release-notes.adoc

@@ -93,13 +93,40 @@ The {productname} {release-version} release includes an accompanying release of
 
 This **Table of Contents** release includes the following fixes.
 
-==== Encode header title for literal display in table of contents.
+==== Encoding header of Table of Contents causing HTML source to be revealed on refresh.
+// #TINY-10682
+
+Previously in {productname}, 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:
+
+liveDemo::tiny-10682-initial[]
+
+Upon refreshing the ToC, the header would change to display the HTML tags literally, exposing the underlying HTML:
+
+liveDemo::tiny-10682-before[]
+
+Now, the header maintains the intended HTML rendering even after refreshing:
+
+liveDemo::tiny-10682-after[]
+
+==== Encode header title for literal display in Table of Contents.
 // #TINY-10789
 
-Previously in {productname}, during Table of Contents (ToC) generation, heading elements containing HTML tags such as `<i>` for italics were incorrectly rendered within the ToC itself.
+Previously in {productname}, during Table of Contents (ToC) generation, heading elements containing HTML tags such as `<em>` for italics were incorrectly rendered within the ToC itself.
 
 {productname} {release-version} 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:
+
+liveDemo::tiny-10789-before[]
+
+Now, the ToC maintains the HTML tags within the heading element as plain text, matching the heading element itself:
+
+liveDemo::tiny-10789-after[]
+
 For information on the **Table of Contents** plugin, see: xref:tableofcontents.adoc[Table of Contents].