From 42c5e8bf3d5830960bb38baa02089f122939a46f Mon Sep 17 00:00:00 2001
From: Farzad Hayatbakhsh <farzad.hayatbakhsh@tiny.cloud>
Date: Tue, 2 Apr 2024 11:05:04 +1000
Subject: [PATCH] Add live demo example for TINY-10682

---
 .../ROOT/examples/live-demos/tiny-10682-after/index.html | 9 +++++++++
 .../ROOT/examples/live-demos/tiny-10682-after/index.js   | 8 ++++++++
 .../examples/live-demos/tiny-10682-before/index.html     | 9 +++++++++
 .../ROOT/examples/live-demos/tiny-10682-before/index.js  | 8 ++++++++
 .../examples/live-demos/tiny-10682-initial/index.html    | 9 +++++++++
 .../ROOT/examples/live-demos/tiny-10682-initial/index.js | 8 ++++++++
 modules/ROOT/pages/7.0.1-release-notes.adoc              | 8 ++++----
 7 files changed, 55 insertions(+), 4 deletions(-)
 create mode 100644 modules/ROOT/examples/live-demos/tiny-10682-after/index.html
 create mode 100644 modules/ROOT/examples/live-demos/tiny-10682-after/index.js
 create mode 100644 modules/ROOT/examples/live-demos/tiny-10682-before/index.html
 create mode 100644 modules/ROOT/examples/live-demos/tiny-10682-before/index.js
 create mode 100644 modules/ROOT/examples/live-demos/tiny-10682-initial/index.html
 create mode 100644 modules/ROOT/examples/live-demos/tiny-10682-initial/index.js

diff --git a/modules/ROOT/examples/live-demos/tiny-10682-after/index.html b/modules/ROOT/examples/live-demos/tiny-10682-after/index.html
new file mode 100644
index 0000000000..75b238b50b
--- /dev/null
+++ b/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>
diff --git a/modules/ROOT/examples/live-demos/tiny-10682-after/index.js b/modules/ROOT/examples/live-demos/tiny-10682-after/index.js
new file mode 100644
index 0000000000..3d68c5fcc6
--- /dev/null
+++ b/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
+});
\ No newline at end of file
diff --git a/modules/ROOT/examples/live-demos/tiny-10682-before/index.html b/modules/ROOT/examples/live-demos/tiny-10682-before/index.html
new file mode 100644
index 0000000000..20b95df7e3
--- /dev/null
+++ b/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>
diff --git a/modules/ROOT/examples/live-demos/tiny-10682-before/index.js b/modules/ROOT/examples/live-demos/tiny-10682-before/index.js
new file mode 100644
index 0000000000..a25d8b5d80
--- /dev/null
+++ b/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
+});
\ No newline at end of file
diff --git a/modules/ROOT/examples/live-demos/tiny-10682-initial/index.html b/modules/ROOT/examples/live-demos/tiny-10682-initial/index.html
new file mode 100644
index 0000000000..75b238b50b
--- /dev/null
+++ b/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>
diff --git a/modules/ROOT/examples/live-demos/tiny-10682-initial/index.js b/modules/ROOT/examples/live-demos/tiny-10682-initial/index.js
new file mode 100644
index 0000000000..01e33b5edb
--- /dev/null
+++ b/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
+});
\ No newline at end of file
diff --git a/modules/ROOT/pages/7.0.1-release-notes.adoc b/modules/ROOT/pages/7.0.1-release-notes.adoc
index 99ecdf9be5..8a04a0e79c 100644
--- a/modules/ROOT/pages/7.0.1-release-notes.adoc
+++ b/modules/ROOT/pages/7.0.1-release-notes.adoc
@@ -87,15 +87,15 @@ To address this issue, the HTML encoding has been removed. As a result, the ToC
 
 For example, if the **Table of Contents** (ToC) header contained the following content with "_Contents_" emphasized as follows:
 
-*`Table of _Contents_`*
+liveDemo::tiny-10682-initial[]
 
-Upon refreshing the ToC, the header would change to display the HTML tags literally, as follows:
+Upon refreshing the ToC, the header would change to display the HTML tags literally, exposing the underlying HTML:
 
-*`Table of <em>Contents</em>`*
+liveDemo::tiny-10682-before[]
 
 Now, the header maintains the intended HTML rendering even after refreshing:
 
-*`Table of _Contents_`*
+liveDemo::tiny-10682-after[]
 
 ==== Encode header title for literal display in Table of Contents.
 // #TINY-10789