DOC-2524: Comments Premium Plugin Documentation Improvements (#3453)

* DOC-2524: EPIC branch initial commit. * DOC-2524: Update: Commands, Events and APIs (Comments) (#3462) * DOC-2524: Update: Embedded Mode (Comments). (#3459) * DOC-2524: Update: Introduction (Comments) (#3456) * DOC-2524: Update: Toolbar Buttons and Menu Items (Comments) (#3460) * DOC-2524: New `tinycomments` option: Comments can be made and read, but the editor is in a readonly state. (#3461) * DOC-2524: New comments option: Comments can be made and read, but the editor is in a readonly state. * DOC-2524: revert live_demo testing url. * Update modules/ROOT/examples/live-demos/comments-readonly-mode/index.js Co-authored-by: Mitchell Crompton <[email protected]> * Update modules/ROOT/examples/live-demos/comments-readonly-mode/index.js Co-authored-by: Mitchell Crompton <[email protected]> * Update modules/ROOT/partials/configuration/comments-tinycomments_access.adoc Co-authored-by: Mitchell Crompton <[email protected]> * Update modules/ROOT/partials/configuration/comments-tinycomments_access.adoc Co-authored-by: shirqa <[email protected]> * Update modules/ROOT/pages/comments-options.adoc Co-authored-by: shirqa <[email protected]> * Update modules/ROOT/examples/live-demos/comments-readonly-mode/index.js Co-authored-by: Mitchell Crompton <[email protected]> * Update modules/ROOT/partials/configuration/comments-tinycomments_access.adoc Co-authored-by: shirqa <[email protected]> * DOC-2524: file name change, remove button from demo and update headers. * Update modules/ROOT/partials/configuration/comments-tinycomments_access.adoc Co-authored-by: Shan <[email protected]> * DOC-2524: Restructured tinycomments_access.adoc, removed basic config. * Update modules/ROOT/partials/configuration/comments-tinycomments_access.adoc Co-authored-by: Mitchell Crompton <[email protected]> * Update modules/ROOT/partials/configuration/comments-tinycomments_access.adoc Co-authored-by: Mitchell Crompton <[email protected]> * Update modules/ROOT/partials/configuration/comments-tinycomments_access.adoc Co-authored-by: Mitchell Crompton <[email protected]> * Update modules/ROOT/partials/configuration/comments-tinycomments_access.adoc Co-authored-by: Mitchell Crompton <[email protected]> * Update modules/ROOT/partials/configuration/comments-tinycomments_access.adoc Co-authored-by: shirqa <[email protected]> * Update modules/ROOT/partials/configuration/comments-tinycomments_access.adoc Co-authored-by: shirqa <[email protected]> * Update modules/ROOT/partials/configuration/comments-tinycomments_access.adoc Co-authored-by: Mitchell Crompton <[email protected]> * Update modules/ROOT/partials/configuration/comments-tinycomments_access.adoc Co-authored-by: Mitchell Crompton <[email protected]> * Update modules/ROOT/partials/configuration/comments-tinycomments_access.adoc Co-authored-by: Mitchell Crompton <[email protected]> * Update modules/ROOT/examples/live-demos/comments-ui-mode/index.html Co-authored-by: tiny-ben-tran <[email protected]> --------- Co-authored-by: Mitchell Crompton <[email protected]> Co-authored-by: shirqa <[email protected]> Co-authored-by: Shan <[email protected]> Co-authored-by: tiny-ben-tran <[email protected]> * DOC-2524: Update: Callback Mode (Comments) (#3458) * DOC-2524: Callback Mode (Comments) * Revert live_demo_url from testing. * Update modules/ROOT/examples/live-demos/comments-callback/example.js Co-authored-by: Hamza Benkhaldoun <[email protected]> * Update modules/ROOT/examples/live-demos/comments-callback/index.js Co-authored-by: Hamza Benkhaldoun <[email protected]> * Update modules/ROOT/partials/configuration/tinycomments_delete_comment.adoc Co-authored-by: Hamza Benkhaldoun <[email protected]> * Update modules/ROOT/partials/configuration/tinycomments_fetch.adoc Co-authored-by: Hamza Benkhaldoun <[email protected]> * Update modules/ROOT/pages/comments-callback-mode.adoc * Update modules/ROOT/pages/comments-callback-mode.adoc * DOC-2524: move tinycomments_fetch to optional options, updated examples to reflect optional callback. * DOC-2524: fix optional options header level. * Update modules/ROOT/partials/configuration/tinycomments_lookup.adoc Co-authored-by: tiny-ben-tran <[email protected]> * Update modules/ROOT/examples/live-demos/comments-callback/example.js * Update modules/ROOT/examples/live-demos/comments-callback/index.js * Update modules/ROOT/partials/configuration/tinycomments_resolve.adoc Co-authored-by: tiny-ben-tran <[email protected]> * DOC-2524: Update comments callback demo * Update modules/ROOT/partials/configuration/tinycomments_reply.adoc Co-authored-by: Karl Kemister-Sheppard <[email protected]> * Update modules/ROOT/pages/comments-callback-mode.adoc Co-authored-by: tiny-ben-tran <[email protected]> * Update modules/ROOT/pages/comments-callback-mode.adoc Co-authored-by: tiny-ben-tran <[email protected]> * DOC-2524: update example.js and tinycomments_fetch example to match demo updates. * Update modules/ROOT/pages/comments-callback-mode.adoc Co-authored-by: Farzad Hayat <[email protected]> * Update modules/ROOT/pages/comments-callback-mode.adoc Co-authored-by: Farzad Hayat <[email protected]> * DOC-2524: Add initial comments to callback demo * DOC-2524: Fix initialDB structure * Update modules/ROOT/examples/live-demos/comments-callback/index.js Co-authored-by: Farzad Hayat <[email protected]> * Update modules/ROOT/examples/live-demos/comments-callback/example.js Co-authored-by: Farzad Hayat <[email protected]> --------- Co-authored-by: Hamza Benkhaldoun <[email protected]> Co-authored-by: tiny-ben-tran <[email protected]> Co-authored-by: Farzad Hayat <[email protected]> * DOC-2524: Update: Using Comments (Comments) (#3457) * DOC-2524: Update: Using Comments (Comments) * DOC-2524: update png files. * Update modules/ROOT/pages/comments-using-comments.adoc Co-authored-by: Farzad Hayat <[email protected]> * Update modules/ROOT/pages/comments-using-comments.adoc Co-authored-by: Farzad Hayat <[email protected]> * DOC-2524: Relocate .png in delete-a-comment. * DOC-2524: remove comment-edit-comment-ellipsis.png duplicate. * DOC-2524: add guide to replying to comment and supporting screenshots. * Update modules/ROOT/pages/comments-using-comments.adoc Co-authored-by: Farzad Hayat <[email protected]> * DOC-2524: Replace png files with hi-res. --------- Co-authored-by: Farzad Hayat <[email protected]> --------- Co-authored-by: Mitchell Crompton <[email protected]> Co-authored-by: shirqa <[email protected]> Co-authored-by: Shan <[email protected]> Co-authored-by: tiny-ben-tran <[email protected]> Co-authored-by: Hamza Benkhaldoun <[email protected]> Co-authored-by: Farzad Hayat <[email protected]>
tinymce · Oct 8, 2024 · 07d7e9a · 07d7e9a
1 parent 51f9b77
commit 07d7e9a
Show file tree

Hide file tree

Showing 60 changed files with 738 additions and 225 deletions.
diff --git a/modules/ROOT/examples/live-demos/comments-callback/example.js b/modules/ROOT/examples/live-demos/comments-callback/example.js
@@ -169,15 +169,47 @@ const tinycomments_lookup = ({ conversationUid }, done, fail) => {
     });
 };
 
+const tinycomments_fetch = (conversationUids, done, fail) => {
+  const requests = conversationUids.map((uid) => fetch(`https://api.example/conversations/${uid}`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      }})
+      .then((response) => response.json())
+      .then((data) => ({
+        [uid]: {
+          uid: uid,
+          comments: data
+        }
+      }))
+    );
+
+  Promise.all(requests)
+    .then((data) => {
+      console.log('data', data);
+      const conversations = data.reduce((conv, d) => ({
+          ...conv,
+          ...d
+        })
+      , {});
+      console.log(`Fetch success ${conversationUids}`, conversations);
+      done({ conversations });
+    })
+    .catch((err) => {
+      console.error(`Fetch failure ${conversationUids}`, err);
+      fail('Fetching conversations failed');
+    });
+};
+
 tinymce.init({
   selector: 'textarea#comments-callback',
   height: 800,
   plugins: 'code tinycomments help lists',
   toolbar:
-    'undo redo | blocks | ' +
+    'addcomment showcomments | undo redo | blocks | ' +
     'bold italic backcolor | alignleft aligncenter ' +
     'alignright alignjustify | bullist numlist outdent indent | ' +
-    'removeformat | addcomment showcomments | help',
+    'removeformat | help',
   menubar: 'file edit view insert format tc',
   menu: {
     tc: {
@@ -192,10 +224,6 @@ tinymce.init({
   tinycomments_delete_all,
   tinycomments_delete_comment,
   tinycomments_lookup,
-  /* The following setup callback opens the comments sidebar when the editor loads */
-  setup: (editor) => {
-    editor.on('SkinLoaded', () => {
-      editor.execCommand('ToggleSidebar', false, 'showcomments');
-    });
-  },
+  tinycomments_fetch,
+  sidebar_show: 'showcomments',
 });
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 then attached to the text, exactly like this!</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></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/index.js b/modules/ROOT/examples/live-demos/comments-callback/index.js
@@ -46,8 +46,47 @@ tinymce.ScriptLoader.loadScripts(
   };
 
   /* Our server "database" */
-  const getDB = () =>
-    JSON.parse(localStorage.getItem('fakedb') ?? '{}');
+  const initialDB = {
+    "mce-conversation_19679600221621399703915": [
+      {
+        uid: "mce-conversation_19679600221621399703915",
+        author: "Another Tiny User",
+        authorName: "Another Tiny User",
+        content: "Please revise this sentence, exclamation points are unprofessional!",
+        createdAt: "2021-05-19T04:48:23.914Z",
+        modifiedAt: "2021-05-19T04:48:23.914Z",
+      },
+      {
+        uid: "mce-conversation_19679600221621399703917",
+        author: "Another Tiny User",
+        authorName: "Another Tiny User",
+        content: "Replied",
+        createdAt: "2021-05-19T04:48:23.914Z",
+        modifiedAt: "2021-05-19T04:48:23.914Z",
+      },
+      {
+        uid: "mce-conversation_19679600221621399703918",
+        author: "Another Tiny User",
+        authorName: "Another Tiny User",
+        content: "Replied again",
+        createdAt: "2021-05-19T04:48:23.914Z",
+        modifiedAt: "2021-05-19T04:48:23.914Z",
+      },
+    ],
+    "mce-conversation_420304606321716900864126": [
+      {
+        uid: "mce-conversation_420304606321716900864126",
+        author: "john_smith",
+        authorName: "John Smith",
+        authorAvatar: "https://i.pravatar.cc/150?img=11",
+        content: "I think this is a great idea!",
+        createdAt: "2024-05-28T12:54:24.126Z",
+        modifiedAt: "2024-05-28T12:54:24.126Z",
+      },
+    ],
+  };
+
+  const getDB = () => JSON.parse(localStorage.getItem('fakedb') ?? JSON.stringify(initialDB));
   const setDB = (data) => {
     localStorage.setItem('fakedb', JSON.stringify(data));
   };
@@ -621,16 +660,48 @@ tinymce.ScriptLoader.loadScripts(
         fail(err);
       });
   };
+
+  const tinycomments_fetch = (conversationUids, done, fail) => {
+    const requests = conversationUids.map((uid) => fetch(`https://api.example/conversations/${uid}`, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+        }})
+        .then((response) => response.json())
+        .then((data) => ({
+          [uid]: {
+            uid: uid,
+            comments: data
+          }
+        }))
+      );
+
+    Promise.all(requests)
+      .then((data) => {
+        console.log('data', data);
+        const conversations = data.reduce((conv, d) => ({
+            ...conv,
+            ...d
+          })
+        , {});
+        console.log(`Fetch success ${conversationUids}`, conversations);
+        done({ conversations });
+      })
+      .catch((err) => {
+        console.error(`Fetch failure ${conversationUids}`, err);
+        fail('Fetching conversations failed');
+      });
+  };
 
   tinymce.init({
     selector: 'textarea#comments-callback',
     height: 800,
     plugins: 'code tinycomments help lists',
     toolbar:
-      'undo redo | blocks | ' +
+      'addcomment showcomments | undo redo | blocks | ' +
       'bold italic backcolor | alignleft aligncenter ' +
       'alignright alignjustify | bullist numlist outdent indent | ' +
-      'removeformat | addcomment showcomments | help',
+      'removeformat | help',
     menubar: 'file edit view insert format tc',
     menu: {
       tc: {
@@ -645,13 +716,7 @@ tinymce.ScriptLoader.loadScripts(
     tinycomments_delete_all,
     tinycomments_delete_comment,
     tinycomments_lookup,
-    /* The following setup callback opens the comments sidebar when the editor loads */
-    setup: (editor) => {
-      editor.on('SkinLoaded', () => {
-        editor.execCommand('ToggleSidebar', false, 'showcomments', {
-          skip_focus: true,
-        });
-      });
-    },
+    tinycomments_fetch,
+    sidebar_show: 'showcomments',
   });
 });
diff --git a/modules/ROOT/examples/live-demos/comments-embedded/index.js b/modules/ROOT/examples/live-demos/comments-embedded/index.js
@@ -4,7 +4,7 @@ const userAllowedToResolve = 'Admin1';
 tinymce.init({
   selector: 'textarea#comments-embedded',
   plugins: 'code tinycomments',
-  toolbar: 'bold italic underline | addcomment showcomments',
+  toolbar: 'addcomment showcomments | bold italic underline',
   menubar: 'file edit view insert format tools tc',
   menu: {
     tc: {
@@ -22,10 +22,4 @@ tinymce.init({
     });
   },
   content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }',
-  /* The following setup callback opens the comments sidebar when the editor loads */
-  setup: (editor) => {
-    editor.on('SkinLoaded', () => {
-      editor.execCommand('ToggleSidebar', false, 'showcomments', { skip_focus: true });
-    });
-  }
 });
diff --git a/modules/ROOT/examples/live-demos/comments-readonly-mode/index.html b/modules/ROOT/examples/live-demos/comments-readonly-mode/index.html
@@ -0,0 +1,36 @@
+<div id="tiny-ui-readonly-demo">
+  <textarea id="comment-readonly-ui-mode" style="width: 100%; height: 500px; background-color: #f4f4f9; border: 1px solid #ccc; padding: 1em;" readonly>
+    <h2 style="color: #2c3e50;">Welcome to Tiny Comments Read-Only Mode!</h2>
+    <p>This demo highlights the read-only mode of the <strong>Tiny Comments plugin</strong>. In this mode, both the content and comments are locked, meaning you can't add, <span class="mce-annotation tox-comment" data-mce-annotation-uid="mce-conversation_43588520831727784474869" data-mce-annotation="tinycomments">edit</span>, or delete comments unless <code>tinycomments_access</code> is specified. Without it, interaction with comments is disabled.</p>
+    <p>Feel free to browse the <span class="mce-annotation tox-comment" data-mce-annotation-uid="mce-conversation_61717779551727784503828" data-mce-annotation="tinycomments">existing</span> comments, but note that you can only view them in this mode.</p>
+    <h2 style="color: #2c3e50;">How Read-Only Mode Works</h2>
+    <p>When activated, the toolbar and comment options are disabled. The following actions are unavailable:</p>
+    <ul>
+    <li>Adding new comments</li>
+    <li><span class="mce-annotation tox-comment" data-mce-annotation-uid="mce-conversation_19209556671727784557859" data-mce-annotation="tinycomments">Editing existing</span> comments</li>
+    <li>Deleting comments</li>
+    </ul>
+    <p>Comments will be displayed like this: <span class="mce-annotation tox-comment" style="background-color: #ffd54f;" data-mce-annotation-uid="mce-conversation_19679600221621399703915" data-mce-annotation="tinycomments">exactly like this!</span></p>
+    <p>If you'd like to explore the full functionality of Tiny Comments, including creating and editing, try enabling editable mode or sign up for a <strong>14-day free trial</strong> of Tiny's premium features.</p>
+    <h2 style="color: #2c3e50;">A Simple Table Example (Read-Only)</h2>
+    <table style="border-collapse: collapse; width: 100%; border: 1px solid #ddd;">
+    <thead style="background-color: #f4f4f9;">
+    <tr>
+    <th style="padding: 0.5em; text-align: left;">Product</th>
+    <th style="padding: 0.5em; text-align: left;">Value</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+    <td style="padding: 0.5em;"><a href="https://www.tiny.cloud/">Tiny Cloud</a></td>
+    <td style="padding: 0.5em;">Easily integrate rich text editing into your application with TinyMCE.</td>
+    </tr>
+    <tr>
+    <td style="padding: 0.5em;"><a href="https://www.tiny.cloud/drive/">Tiny Drive</a></td>
+    <td style="padding: 0.5em;">Manage images and files for TinyMCE in the cloud.</td>
+    </tr>
+    </tbody>
+    </table>
+    <p>Thanks for exploring TinyMCE's read-only mode! We hope this demo shows off its versatility and ease of use.</p><!--tinycomments|2.1|data:application/json;base64,eyJtY2UtY29udmVyc2F0aW9uXzE5Njc5NjAwMjIxNjIxMzk5NzAzOTE1Ijp7InVpZCI6Im1jZS1jb252ZXJzYXRpb25fMTk2Nzk2MDAyMjE2MjEzOTk3MDM5MTUiLCJjb21tZW50cyI6W3sidWlkIjoibWNlLWNvbnZlcnNhdGlvbl8xOTY3OTYwMDIyMTYyMTM5OTcwMzkxNSIsImF1dGhvciI6IkFub3RoZXIgVGlueSBVc2VyIiwiYXV0aG9yTmFtZSI6IkFub3RoZXIgVGlueSBVc2VyIiwiY29udGVudCI6IlBsZWFzZSByZXZpc2UgdGhpcyBzZW50ZW5jZSwgZXhjbGFtYXRpb24gcG9pbnRzIGFyZSB1bnByb2Zlc3Npb25hbCEiLCJjcmVhdGVkQXQiOiIyMDIxLTA1LTE5VDA0OjQ4OjIzLjkxNFoiLCJtb2RpZmllZEF0IjoiMjAyMS0wNS0xOVQwNDo0ODoyMy45MTRaIn1dfSwibWNlLWNvbnZlcnNhdGlvbl80MzU4ODUyMDgzMTcyNzc4NDQ3NDg2OSI6eyJ1aWQiOiJtY2UtY29udmVyc2F0aW9uXzQzNTg4NTIwODMxNzI3Nzg0NDc0ODY5IiwiY29tbWVudHMiOlt7InVpZCI6Im1jZS1jb252ZXJzYXRpb25fNDM1ODg1MjA4MzE3Mjc3ODQ0NzQ4NjkiLCJhdXRob3IiOiJBbm9uIiwiYXV0aG9yTmFtZSI6IkFub24iLCJjb250ZW50IjoiRWRpdCBjb21tZW50IiwiY3JlYXRlZEF0IjoiMjAyNC0xMC0wMVQxMjowNzo1NC44NjlaIiwibW9kaWZpZWRBdCI6IjIwMjQtMTAtMDFUMTI6MDc6NTQuODY5WiJ9XX0sIm1jZS1jb252ZXJzYXRpb25fNjE3MTc3Nzk1NTE3Mjc3ODQ1MDM4MjgiOnsidWlkIjoibWNlLWNvbnZlcnNhdGlvbl82MTcxNzc3OTU1MTcyNzc4NDUwMzgyOCIsImNvbW1lbnRzIjpbeyJ1aWQiOiJtY2UtY29udmVyc2F0aW9uXzYxNzE3Nzc5NTUxNzI3Nzg0NTAzODI4IiwiYXV0aG9yIjoiQW5vbiIsImF1dGhvck5hbWUiOiJBbm9uIiwiY29udGVudCI6ImJyb3dzZSBjb21tZW50cyIsImNyZWF0ZWRBdCI6IjIwMjQtMTAtMDFUMTI6MDg6MjMuODI4WiIsIm1vZGlmaWVkQXQiOiIyMDI0LTEwLTAxVDEyOjA4OjIzLjgyOFoifV19LCJtY2UtY29udmVyc2F0aW9uXzE5MjA5NTU2NjcxNzI3Nzg0NTU3ODU5Ijp7InVpZCI6Im1jZS1jb252ZXJzYXRpb25fMTkyMDk1NTY2NzE3Mjc3ODQ1NTc4NTkiLCJjb21tZW50cyI6W3sidWlkIjoibWNlLWNvbnZlcnNhdGlvbl8xOTIwOTU1NjY3MTcyNzc4NDU1Nzg1OSIsImF1dGhvciI6IkFub24iLCJhdXRob3JOYW1lIjoiQW5vbiIsImNvbnRlbnQiOiJTdWdnZXN0aW9uOiB1cGRhdGUgdG8gXCJFZGl0aW5nIGV4aXN0aW5nIGNvbW1lbnRzIHdpdGhpbiB0aGUgRWRpdG9yXCIiLCJjcmVhdGVkQXQiOiIyMDI0LTEwLTAxVDEyOjA5OjE3Ljg1OVoiLCJtb2RpZmllZEF0IjoiMjAyNC0xMC0wMVQxMjowOToxNy44NTlaIn1dfX0=-->
+  </textarea>
+</div>
diff --git a/modules/ROOT/examples/live-demos/comments-readonly-mode/index.js b/modules/ROOT/examples/live-demos/comments-readonly-mode/index.js
@@ -0,0 +1,26 @@
+tinymce.init({
+  selector: "textarea#comment-readonly-ui-mode",
+  plugins: [
+    "tinycomments", "advlist", "anchor", "autolink", "charmap", "code", "fullscreen",
+    "help", "image", "insertdatetime", "link", "lists", "media",
+    "preview", "searchreplace", "table", "visualblocks",
+  ],
+  toolbar: "addcomment showcomments togglereadonly | undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
+  tinycomments_mode: 'embedded',
+  readonly: true,
+  setup: (editor) => {
+    const isReadonlyMode = () => editor.mode.get() === 'readonly';
+    editor.ui.registry.addToggleButton('togglereadonly', {
+      text: 'Readonly mode',
+      context: 'any', // Available from 7.4
+      onSetup: (buttonApi) => {
+        const activate = (api) =>  () => api.setActive(isReadonlyMode());
+        editor.on('SwitchMode', activate(buttonApi));
+        return (teardownApi) => editor.off('SwitchMode', activate(teardownApi));
+      },
+      onAction: (api) => {
+        editor.mode.set(isReadonlyMode() ? 'design' : 'readonly');
+      }
+    });
+  }
+});
diff --git a/modules/ROOT/examples/live-demos/comments-ui-mode/index.html b/modules/ROOT/examples/live-demos/comments-ui-mode/index.html
@@ -0,0 +1,38 @@
+<div id="tiny-comments-ui-mode">
+  <textarea id="comments-ui-mode" style="width: 100%; height: 500px;">
+    <h2>Welcome to the New Tiny Comments Mode!</h2>
+    <p>This demo showcases the new Comments UI Mode. You can add or delete comments on the content, but the content itself is locked for editing.</p>
+    <ol>
+      <li>Highlight the text 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 in the Comment sidebar.</li>
+      <li>Click <strong>Comment</strong> to attach the comment to the text.</li>
+      <li>To delete a comment, click the comment options and choose <strong>Delete Comment</strong>.</li>
+    </ol>
+    <p>Your comment will appear linked to the selected text, just like this: <span class="mce-annotation tox-comment" data-mce-annotation-uid="mce-conversation_19679600221621399703915" data-mce-annotation="tinycomments">exactly like this!</span></p>
+    <p>Note that in this mode, the content is non-editable, but you can freely interact with comments.</p>
+    <h2>Explore Tiny Comments</h2>
+    <p>If you want to explore more, you can try Tiny Comments in your own environment for free for 14 days by signing up for a Tiny account. Visit our <a href="https://www.tiny.cloud/docs/">documentation</a> for more information.</p>
+    <h2>A Demo Table</h2>
+    <table style="border-collapse: collapse; width: 100%;" border="1">
+      <thead>
+        <tr>
+          <th>Product</th>
+          <th>Description</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td><a href="https://www.tiny.cloud/">Tiny Cloud</a></td>
+          <td>Integrates rich text editing easily into any application.</td>
+        </tr>
+        <tr>
+          <td><a href="https://www.tiny.cloud/drive/">Tiny Drive</a></td>
+          <td>Manage files and images in the cloud seamlessly with TinyMCE.</td>
+        </tr>
+      </tbody>
+    </table>
+    <p>Thanks for testing the new comment-only mode! We hope this improves your workflow.</p>
+    <!--tinycomments|2.1|data:application/json;base64,eyJtY2UtY29udmVyc2F0aW9uXzE5Njc5NjAwMjIxNjIxMzk5NzAzOTE1Ijp7InVpZCI6Im1jZS1jb252ZXJzYXRpb25fMTk2Nzk2MDAyMjE2MjEzOTk3MDM5MTUiLCJjb21tZW50cyI6W3sidWlkIjoibWNlLWNvbnZlcnNhdGlvbl8xOTY3OTYwMDIyMTYyMTM5OTcwMzkxNSIsImF1dGhvciI6IkFub3RoZXIgVGlueSBVc2VyIiwiYXV0aG9yTmFtZSI6IkFub3RoZXIgVGlueSBVc2VyIiwiY29udGVudCI6IlBsZWFzZSByZXZpc2UgdGhpcyBzZW50ZW5jZSwgZXhjbGFtYXRpb24gcG9pbnRzIGFyZSB1bnByb2Zlc3Npb25hbCEiLCJjcmVhdGVkQXQiOiIyMDIxLTA1LTE5VDA0OjQ4OjIzLjkxNFoiLCJtb2RpZmllZEF0IjoiMjAyMS0wNS0xOVQwNDo0ODoyMy45MTRaIn1dfX0=-->
+  </textarea>
+</div>
diff --git a/modules/ROOT/examples/live-demos/comments-ui-mode/index.js b/modules/ROOT/examples/live-demos/comments-ui-mode/index.js
@@ -0,0 +1,11 @@
+tinymce.init({
+  selector: "textarea#comments-ui-mode",
+  plugins: [
+    "tinycomments", "advlist", "anchor", "autolink", "charmap", "code", "fullscreen",
+    "help", "image", "insertdatetime", "link", "lists", "media",
+    "preview", "searchreplace", "table", "visualblocks",
+  ],
+  toolbar: "addcomment showcomments | undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
+  tinycomments_mode: 'embedded',
+  tinycomments_access: 'comment'
+});
diff --git a/modules/ROOT/images/comment-add-comment.png b/modules/ROOT/images/comment-add-comment.png
diff --git a/modules/ROOT/images/comment-comment-created.png b/modules/ROOT/images/comment-comment-created.png
diff --git a/modules/ROOT/images/comment-delete-all-conversations-file-menu.png b/modules/ROOT/images/comment-delete-all-conversations-file-menu.png
diff --git a/modules/ROOT/images/comment-delete-all-conversations.png b/modules/ROOT/images/comment-delete-all-conversations.png
diff --git a/modules/ROOT/images/comment-delete-comment-dialog.png b/modules/ROOT/images/comment-delete-comment-dialog.png
diff --git a/modules/ROOT/images/comment-delete-comment.png b/modules/ROOT/images/comment-delete-comment.png
diff --git a/modules/ROOT/images/comment-delete-conversation-dialog.png b/modules/ROOT/images/comment-delete-conversation-dialog.png
diff --git a/modules/ROOT/images/comment-delete-conversation.png b/modules/ROOT/images/comment-delete-conversation.png
diff --git a/modules/ROOT/images/comment-edit-comment.png b/modules/ROOT/images/comment-edit-comment.png
diff --git a/modules/ROOT/images/comment-edit-existing-comment-ellipsis.png b/modules/ROOT/images/comment-edit-existing-comment-ellipsis.png
diff --git a/modules/ROOT/images/comment-edited-comment.png b/modules/ROOT/images/comment-edited-comment.png
diff --git a/modules/ROOT/images/comment-reply-add-comment-focus.png b/modules/ROOT/images/comment-reply-add-comment-focus.png
diff --git a/modules/ROOT/images/comment-reply-add-comment-pre-submit.png b/modules/ROOT/images/comment-reply-add-comment-pre-submit.png
diff --git a/modules/ROOT/images/comment-reply-add-comment-textarea.png b/modules/ROOT/images/comment-reply-add-comment-textarea.png
diff --git a/modules/ROOT/images/comment-reply-add-comment.png b/modules/ROOT/images/comment-reply-add-comment.png
diff --git a/modules/ROOT/images/comment-reply-to-comment-done.png b/modules/ROOT/images/comment-reply-to-comment-done.png
diff --git a/modules/ROOT/images/comment-reply-to-comment-submitted.png b/modules/ROOT/images/comment-reply-to-comment-submitted.png
diff --git a/modules/ROOT/images/comment-resolve-conversation.png b/modules/ROOT/images/comment-resolve-conversation.png
diff --git a/modules/ROOT/images/comments-delete-comment.png b/modules/ROOT/images/comments-delete-comment.png
diff --git a/modules/ROOT/images/comments-delete-conversation.png b/modules/ROOT/images/comments-delete-conversation.png
diff --git a/modules/ROOT/images/comments-delete-conversations.png b/modules/ROOT/images/comments-delete-conversations.png
diff --git a/modules/ROOT/images/comments-edit.png b/modules/ROOT/images/comments-edit.png
diff --git a/modules/ROOT/images/comments-resolve-conversation.png b/modules/ROOT/images/comments-resolve-conversation.png
diff --git a/modules/ROOT/nav.adoc b/modules/ROOT/nav.adoc
@@ -303,6 +303,7 @@
 **** xref:comments-callback-mode.adoc[Callback mode]
 **** xref:comments-embedded-mode.adoc[Embedded mode]
 **** xref:comments-toolbars-menus.adoc[Toolbar buttons and menu items]
+**** xref:comments-access-options.adoc[Access Options]
 **** xref:comments-commands-events-apis.adoc[Commands, Events and APIs]
 *** xref:advcode.adoc[Enhanced Code Editor]
 *** Enhanced Media Embed

diff --git a/modules/ROOT/pages/comments-access-options.adoc b/modules/ROOT/pages/comments-access-options.adoc
@@ -0,0 +1,13 @@
+:navtitle: Comments Access Options
+:description: TinyMCE Comments plugin access options.
+:keywords: comments, commenting, tinycomments, access options
+:pluginname: Comments
+:plugincode: comments
+:pluginminimumplan: enterprise
+
+[[access-options]]
+== Access Options
+
+The following configuration option affects the behavior of the {pluginname} plugin.
+
+include::partial$configuration/comments-tinycomments_access.adoc[leveloffset=+1]