DOC-2566: Add sidebar_show: 'showcomments' to the Comments Demos, and quickbars. (#3504)

* DOC-2566: Add sidebar_show option to various demos, and include quickbars.

* Add quickbars and image plugins to comments-callback example

* DOC-2566: Update fakeDelay to 200ms

* DOC-2566: update Comments with readonly set to true demo to include sidebar_show option.

Author: kemister85

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

@@ -51,7 +51,7 @@ import ('https://cdn.jsdelivr.net/npm/@faker-js/faker@9/dist/index.min.js').then
     }
   };
 
-  const fakeDelay = 500;
+  const fakeDelay = 200;
   const numberOfUsers = 200;
   const randomString = () => {
     return crypto.getRandomValues(new Uint32Array(1))[0].toString(36).substring(2, 14);
@@ -304,8 +304,11 @@ import ('https://cdn.jsdelivr.net/npm/@faker-js/faker@9/dist/index.min.js').then
         items: 'addcomment showcomments deleteallconversations'
       }
     },
-    plugins: [ 'tinycomments', 'mentions', 'help', 'code' ],
+    plugins: [ 'tinycomments', 'mentions', 'help', 'code', 'quickbars', 'link', 'lists', 'image' ],
+    quickbars_selection_toolbar: 'alignleft aligncenter alignright | addcomment showcomments',
+    quickbars_image_toolbar: 'alignleft aligncenter alignright | rotateleft rotateright | imageoptions',
     tinycomments_mentions_enabled: true,
+    sidebar_show: 'showcomments',
 
     mentions_item_type: 'profile',
     mentions_min_chars: 0,

modules/ROOT/examples/live-demos/comments-callback/example.js

@@ -204,19 +204,22 @@ const tinycomments_fetch = (conversationUids, done, fail) => {
 tinymce.init({
   selector: 'textarea#comments-callback',
   height: 800,
-  plugins: 'code tinycomments help lists',
+  plugins: 'code tinycomments help lists quickbars link image',
   toolbar:
     'addcomment showcomments | undo redo | blocks | ' +
     'bold italic backcolor | alignleft aligncenter ' +
     'alignright alignjustify | bullist numlist outdent indent | ' +
     'removeformat | help',
   menubar: 'file edit view insert format tc',
+  sidebar_show: 'showcomments',
   menu: {
     tc: {
       title: 'Comments',
       items: 'addcomment showcomments deleteallconversations',
     },
   },
+  quickbars_selection_toolbar: 'alignleft aligncenter alignright | addcomment showcomments',
+  quickbars_image_toolbar: 'alignleft aligncenter alignright | rotateleft rotateright | imageoptions',
   tinycomments_create,
   tinycomments_reply,
   tinycomments_edit_comment,
@@ -225,5 +228,4 @@ tinymce.init({
   tinycomments_delete_comment,
   tinycomments_lookup,
   tinycomments_fetch,
-  sidebar_show: 'showcomments',
 });

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

@@ -696,13 +696,15 @@ tinymce.ScriptLoader.loadScripts(
   tinymce.init({
     selector: 'textarea#comments-callback',
     height: 800,
-    plugins: 'code tinycomments help lists',
+    plugins: 'code tinycomments help lists quickbars link image',
     toolbar:
       'addcomment showcomments | undo redo | blocks | ' +
       'bold italic backcolor | alignleft aligncenter ' +
       'alignright alignjustify | bullist numlist outdent indent | ' +
       'removeformat | help',
     menubar: 'file edit view insert format tc',
+    quickbars_selection_toolbar: 'alignleft aligncenter alignright | addcomment showcomments',
+    quickbars_image_toolbar: 'alignleft aligncenter alignright | rotateleft rotateright | imageoptions',
     menu: {
       tc: {
         title: 'Comments',

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

@@ -140,7 +140,9 @@ import ('https://cdn.jsdelivr.net/npm/@faker-js/faker@9/dist/index.min.js').then
         items: 'addcomment showcomments deleteallconversations'
       }
     },
-    plugins: [ 'tinycomments', 'mentions', 'help', 'code' ],
+    plugins: [ 'tinycomments', 'mentions', 'help', 'code', 'quickbars', 'link', 'lists', 'image' ],
+    quickbars_selection_toolbar: 'alignleft aligncenter alignright | addcomment showcomments',
+    quickbars_image_toolbar: 'alignleft aligncenter alignright | rotateleft rotateright | imageoptions',
     tinycomments_mentions_enabled: true,
 
     mentions_item_type: 'profile',
@@ -152,6 +154,7 @@ import ('https://cdn.jsdelivr.net/npm/@faker-js/faker@9/dist/index.min.js').then
     mentions_select,
 
     tinycomments_mode: 'embedded',
+    sidebar_show: 'showcomments',
     tinycomments_author: currentUser.id,
     tinycomments_author_name: currentUser.fullName,
     tinycomments_avatar: currentUser.image,

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

@@ -3,7 +3,7 @@ const userAllowedToResolve = 'Admin1';
 
 tinymce.init({
   selector: 'textarea#comments-embedded',
-  plugins: 'code tinycomments',
+  plugins: 'code tinycomments quickbars link lists image',
   toolbar: 'addcomment showcomments | bold italic underline',
   menubar: 'file edit view insert format tools tc',
   menu: {
@@ -12,7 +12,10 @@ tinymce.init({
       items: 'addcomment showcomments deleteallconversations'
     }
   },
+  quickbars_selection_toolbar: 'alignleft aligncenter alignright | addcomment showcomments',
+  quickbars_image_toolbar: 'alignleft aligncenter alignright | rotateleft rotateright | imageoptions',
   tinycomments_mode: 'embedded',
+  sidebar_show: 'showcomments',
   tinycomments_author: currentAuthor,
   tinycomments_can_resolve: (req, done, fail) => {
     const allowed = req.comments.length > 0 &&

modules/ROOT/examples/live-demos/comments-readonly-mode/index.js

@@ -3,10 +3,13 @@ tinymce.init({
   plugins: [
     "tinycomments", "advlist", "anchor", "autolink", "charmap", "code", "fullscreen",
     "help", "image", "insertdatetime", "link", "lists", "media",
-    "preview", "searchreplace", "table", "visualblocks",
+    "preview", "searchreplace", "table", "visualblocks", "quickbars",
   ],
   toolbar: "addcomment showcomments togglereadonly | undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
+  quickbars_selection_toolbar: 'alignleft aligncenter alignright | addcomment showcomments',
+  quickbars_image_toolbar: 'alignleft aligncenter alignright | rotateleft rotateright | imageoptions',
   tinycomments_mode: 'embedded',
+  sidebar_show: 'showcomments',
   readonly: true,
   setup: (editor) => {
     const isReadonlyMode = () => editor.mode.get() === 'readonly';

modules/ROOT/examples/live-demos/comments-ui-mode/index.js

@@ -3,9 +3,12 @@ tinymce.init({
   plugins: [
     "tinycomments", "advlist", "anchor", "autolink", "charmap", "code", "fullscreen",
     "help", "image", "insertdatetime", "link", "lists", "media",
-    "preview", "searchreplace", "table", "visualblocks",
+    "preview", "searchreplace", "table", "visualblocks", "quickbars", 'quickbars', 'image',
   ],
   toolbar: "addcomment showcomments | undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
+  quickbars_selection_toolbar: 'alignleft aligncenter alignright | addcomment showcomments',
+  quickbars_image_toolbar: 'alignleft aligncenter alignright | rotateleft rotateright | imageoptions',
   tinycomments_mode: 'embedded',
-  tinycomments_access: 'comment'
+  tinycomments_access: 'comment',
+  sidebar_show: 'showcomments'
 });

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

@@ -132,7 +132,7 @@ The **Comments** plugin now offers the `xref:comments-with-mentions.adoc#tinycom
 
 For information on the **Comments with Mentions** feature, see xref:comments-with-mentions.adoc[Configuring the Comments plugin with the Mentions plugin].
 
-==== The `conversationAuthor` property was missing from 'create` conversation events in the EventLog API.
+==== The `conversationAuthor` property was missing from `create` conversation events in the EventLog API.
 // #TINY-11352
 
 In previous versions of the tinycomments plugin, the `conversationAuthor` property was missing from 'create' events within the event log, which led to incomplete tracking of user interactions when retrieving data through the `+getEventLog()+` API.

modules/ROOT/partials/misc/supported-versions.adoc

@@ -6,7 +6,7 @@ Supported versions of {productname}:
 [cols="^,^,^",options="header"]
 |===
 |Version |Release Date |End of Premium Support
-|7.5 |2025-11/06 |2027-05-06
+|7.5 |2025-11-06 |2027-05-06
 |7.4 |2024-10-09 |2026-04-09
 |7.3 |2024-08-07 |2026-02-07
 |7.2 |2024-06-19 |2025-12-19