DOC-2565

Author: MitchC1999

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: #1b1; background-color: #eee;" data-mention-id="jennynichols" data-mce-mentions-id="jennynichols">@Jenny Nichols</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_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: #37F;" data-mention-id="jennynichols" data-mce-mentions-id="jennynichols">@Jenny Nichols</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">

modules/ROOT/examples/live-demos/comments-callback-with-mentions/index.js

@@ -146,7 +146,7 @@ import ('https://cdn.jsdelivr.net/npm/@faker-js/faker@9/dist/index.min.js').then
   const mentions_menu_complete = (editor, userInfo) => {
     const span = editor.getDoc().createElement('span');
     span.className = 'mymention';
-    span.setAttribute('style', 'color: #1b1; background-color: #eee;');
+    span.setAttribute('style', 'color: #37F;');
     span.setAttribute('data-mention-id', userInfo.id);
     span.appendChild(editor.getDoc().createTextNode('@' + userInfo.name));
     return span;

modules/ROOT/examples/live-demos/comments-embedded-with-mentions/index.html

@@ -8,7 +8,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: #1b1; background-color: #eee;" data-mention-id="jennynichols" data-mce-mentions-id="jennynichols">@Jenny Nichols</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_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: #37F;" data-mention-id="jennynichols" data-mce-mentions-id="jennynichols">@Jenny Nichols</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">

modules/ROOT/examples/live-demos/comments-embedded-with-mentions/index.js

@@ -106,7 +106,7 @@ import ('https://cdn.jsdelivr.net/npm/@faker-js/faker@9/dist/index.min.js').then
   const mentions_menu_complete = (editor, userInfo) => {
     const span = editor.getDoc().createElement('span');
     span.className = 'mymention';
-    span.setAttribute('style', 'color: #1b1; background-color: #eee;');
+    span.setAttribute('style', 'color: #37F;');
     span.setAttribute('data-mention-id', userInfo.id);
     span.appendChild(editor.getDoc().createTextNode('@' + userInfo.name));
     return span;