DOC-3251: Update full featured demo

MitchC1999 · MitchC1999 · commit a4956f6c374c · 2025-08-15T12:32:03.000+10:00
diff --git a/modules/ROOT/examples/live-demos/comments-callback-with-mentions/index.html b/modules/ROOT/examples/live-demos/comments-callback-with-mentions/index.html
@@ -7,7 +7,7 @@ <h2>Welcome to Tiny Comments!</h2>
   <li>Type your comment into the text field at the bottom of the Comment sidebar, and use <code>@</code> followed by a name to mention a collaborator.</li>
   <li>Click <strong>Comment</strong>.</li>
 </ol>
-<p>Your comment is <span class="mce-annotation tox-comment" data-mce-annotation-uid="mce-conversation_420304606321716900864126" data-mce-annotation="tinycomments">then</span> attached to the text, <span class="mce-annotation tox-comment" data-mce-annotation-uid="mce-conversation_19679600221621399703915" data-mce-annotation="tinycomments">exactly like this!</span> You can <span class="mymention" style="color: gray;" data-mention-id="mia-andersson" data-mce-mentions-id="mia-andersson">@Mia Andersson</span> directly in your comments to notify them.</p>
+<p>Your comment is <span class="mce-annotation tox-comment" data-mce-annotation-uid="mce-conversation_19679600221621399703915" data-mce-annotation="tinycomments">then</span> attached to the text, <span class="mce-annotation tox-comment" data-mce-annotation-uid="mce-conversation_420304606321716900864126" data-mce-annotation="tinycomments">exactly like this!</span> You can <span class="mymention" style="color: gray;" data-mention-id="mia-andersson" data-mce-mentions-id="mia-andersson">@Mia Andersson</span> directly in your comments to notify them.</p>
 <p>If you want to take Tiny Comments for a test drive in your own environment, Tiny Comments is one of the premium plugins you can try for free for 14 days by signing up for a Tiny account. Make sure to check out our documentation as well.</p>
 <h2>A simple table to play with</h2>
 <table style="border-collapse: collapse; width: 100%;" border="1">
diff --git a/modules/ROOT/examples/live-demos/comments-callback-with-mentions/style.css b/modules/ROOT/examples/live-demos/comments-callback-with-mentions/style.css
@@ -1,7 +1,3 @@
-textarea#mentions {
-  height: 350px;
-}
-
 span.mymention {
   color: gray !important;
 }
diff --git a/modules/ROOT/examples/live-demos/comments-callback/index.html b/modules/ROOT/examples/live-demos/comments-callback/index.html
@@ -7,7 +7,7 @@ <h2>Welcome to Tiny Comments!</h2>
     <li>Type your comment into the text field at the bottom of the Comment sidebar.</li>
     <li>Click <strong>Comment</strong>.</li>
   </ol>
-  <p>Your comment is <span class="mce-annotation tox-comment" data-mce-annotation-uid="mce-conversation_420304606321716900864126" data-mce-annotation="tinycomments">then</span> attached to the text, <span class="mce-annotation tox-comment" data-mce-annotation-uid="mce-conversation_19679600221621399703915" data-mce-annotation="tinycomments">exactly like this!</span></p>
+  <p>Your comment is <span class="mce-annotation tox-comment" data-mce-annotation-uid="mce-conversation_19679600221621399703915" data-mce-annotation="tinycomments">then</span> attached to the text, <span class="mce-annotation tox-comment" data-mce-annotation-uid="mce-conversation_420304606321716900864126" data-mce-annotation="tinycomments">exactly like this!</span></p>
   <p>If you want to take Tiny Comments for a test drive in your own environment, Tiny Comments is one of the premium plugins you can try for free for 14 days by signing up for a Tiny account. Make sure to check out our documentation as well.</p>
   <h2>A simple table to play with</h2>
   <table style="border-collapse: collapse; width: 100%;" border="1">
diff --git a/modules/ROOT/examples/live-demos/comments-embedded-with-mentions/index.html b/modules/ROOT/examples/live-demos/comments-embedded-with-mentions/index.html
@@ -7,7 +7,7 @@ <h2>Welcome to Tiny Comments!</h2>
     <li>Type your comment into the text field at the bottom of the Comment sidebar, and use <code>@</code> followed by a name to mention a collaborator.</li>
     <li>Click <strong>Comment</strong>.</li>
   </ol>
-  <p>Your comment is <span class="mce-annotation tox-comment" data-mce-annotation-uid="mce-conversation_420304606321716900864126" data-mce-annotation="tinycomments">then</span> attached to the text, <span class="mce-annotation tox-comment" data-mce-annotation-uid="mce-conversation_19679600221621399703915" data-mce-annotation="tinycomments">exactly like this!</span> You can <span class="mymention" style="color: gray;" data-mention-id="mia-andersson" data-mce-mentions-id="mia-andersson">@Mia Andersson</span> directly in your comments to notify them.</p>
+<p>Your comment is <span class="mce-annotation tox-comment" data-mce-annotation-uid="mce-conversation_19679600221621399703915" data-mce-annotation="tinycomments">then</span> attached to the text, <span class="mce-annotation tox-comment" data-mce-annotation-uid="mce-conversation_420304606321716900864126" data-mce-annotation="tinycomments">exactly like this!</span> You can <span class="mymention" style="color: gray;" data-mention-id="mia-andersson" data-mce-mentions-id="mia-andersson">@Mia Andersson</span> directly in your comments to notify them.</p>
   <p>If you want to take Tiny Comments for a test drive in your own environment, Tiny Comments is one of the premium plugins you can try for free for 14 days by signing up for a Tiny account. Make sure to check out our documentation as well.</p>
   <h2>A simple table to play with</h2>
   <table style="border-collapse: collapse; width: 100%;" border="1">
diff --git a/modules/ROOT/examples/live-demos/comments-embedded-with-mentions/style.css b/modules/ROOT/examples/live-demos/comments-embedded-with-mentions/style.css
@@ -1,7 +1,3 @@
-textarea#mentions {
-  height: 350px;
-}
-
 span.mymention {
   color: gray !important;
 }
diff --git a/modules/ROOT/examples/live-demos/comments-embedded/index.html b/modules/ROOT/examples/live-demos/comments-embedded/index.html
@@ -7,7 +7,7 @@ <h2>Welcome to Tiny Comments!</h2>
     <li>Type your comment into the text field at the bottom of the Comment sidebar.</li>
     <li>Click <strong>Comment</strong>.</li>
   </ol>
-  <p>Your comment is then attached to the text, <span class="mce-annotation tox-comment" data-mce-annotation-uid="mce-conversation_19679600221621399703915" data-mce-annotation="tinycomments">exactly like this!</span></p>
+  <p>Your comment is <span class="mce-annotation tox-comment" data-mce-annotation-uid="mce-conversation_19679600221621399703915" data-mce-annotation="tinycomments">then</span> attached to the text, <span class="mce-annotation tox-comment" data-mce-annotation-uid="mce-conversation_420304606321716900864126" data-mce-annotation="tinycomments">exactly like this!</span></p>
   <p>If you want to take Tiny Comments for a test drive in your own environment, Tiny Comments is one of the premium plugins you can try for free for 14 days by signing up for a Tiny account. Make sure to check out our documentation as well.</p>
   <p>And if you are ready to buy, you can either purchase Tiny Comments a la carte or as part of your Tiny Pro subscription. If you are a current cloud user, Tiny Comments has already been added to your key, and if you are a self-hosted user, Tiny Comments is now available in the latest download which you can access in My Account.</p>
   <h2>A simple table to play with</h2>
diff --git a/modules/ROOT/examples/live-demos/full-featured/index.html b/modules/ROOT/examples/live-demos/full-featured/index.html
@@ -16,6 +16,15 @@ <h2>Got questions or need help?</h2>
   <li>We also offer enterprise grade support as part of <a href="{{pricingpage}}">TinyMCE premium subscriptions</a>.</li>
 </ul>
 
+<p>Please try out this demo of our Tiny Comments premium plugin with @mentions support.</p>
+<ol>
+  <li>Highlight the content you want to comment on.</li>
+  <li>Click the <em>Add Comment</em> icon in the toolbar.</li>
+  <li>Type your comment into the text field at the bottom of the Comment sidebar, and use <code>@</code> followed by a name to mention a collaborator.</li>
+  <li>Click <strong>Comment</strong>.</li>
+</ol>
+<p>Your comment is <span class="mce-annotation tox-comment" data-mce-annotation-uid="mce-conversation_19679600221621399703915" data-mce-annotation="tinycomments">then</span> attached to the text, <span class="mce-annotation tox-comment" data-mce-annotation-uid="mce-conversation_420304606321716900864126" data-mce-annotation="tinycomments">exactly like this!</span> You can <span class="mymention" style="color: gray;" data-mention-id="mia-andersson" data-mce-mentions-id="mia-andersson">@Mia Andersson</span> directly in your comments to notify them.</p>
+
 <h2>A simple table to play with</h2>
 
   <table style="border-collapse: collapse; width: 100%;" border="1">
@@ -40,7 +49,6 @@ <h2>A simple table to play with</h2>
     </tbody>
   </table>
 
-
 <h2>Character strings to demonstrate some of the Advanced Typography plugin’s features</h2>
 
 <p>Select the characters in the list below and choose <strong>Tools → Typography → Enhance</strong>.</p>
diff --git a/modules/ROOT/examples/live-demos/full-featured/index.js b/modules/ROOT/examples/live-demos/full-featured/index.js
diff --git a/modules/ROOT/examples/live-demos/full-featured/style.css b/modules/ROOT/examples/live-demos/full-featured/style.css

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,3 @@`
`1`		`-textarea#mentions {`
`2`		`- height: 350px;`
`3`		`-}`
`4`		`-`
`5`	`1`	`span.mymention {`
`6`	`2`	`color: gray !important;`
`7`	`3`	`}`