DOC-2524: New tinycomments option: Comments can be made and read, b…

…ut 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]>
tinymce · Oct 8, 2024 · c2711b6 · c2711b6
1 parent e084118
commit c2711b6
Show file tree

Hide file tree

Showing 7 changed files with 179 additions and 0 deletions.
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/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]
diff --git a/modules/ROOT/partials/configuration/comments-tinycomments_access.adoc b/modules/ROOT/partials/configuration/comments-tinycomments_access.adoc
@@ -0,0 +1,54 @@
+[[tinycomments-access]]
+== `tinycomments_access`
+
+*Type:* `+String+`
+
+*Possible values:* `'comment'`
+
+This option sets the editor to the readonly mode, while still allowing comments to be made. 
+
+[IMPORTANT]
+====
+* When `tinycomments_access` is set to `comment`, the editor will automatically switch to xref:editor-important-options.adoc#readonly[Readonly Mode].
+====
+
+=== Comments with `tinycomments_access` set to `'comment'`
+
+When `tinycomments_access` is set to `comment`, the editor will be in xref:editor-important-options.adoc#readonly[Readonly mode], but the comments will be in a **comment-only** mode. This means that users can add and delete comments, but they cannot edit the editor content.
+
+
+.Example
+[source,javascript]
+----
+tinymce.init({
+  selector: 'textarea',  // change this value according to your HTML
+  plugins: 'tinycomments',
+  toolbar: 'addcomment showcomments',
+  tinycomments_access: 'comment' 
+});
+----
+
+liveDemo::comments-ui-mode[]
+
+=== Comments with `readonly` set to `true`
+
+When not using the `tinycomments_access` option, the comments sidebar will have a different state depending on the use of the xref:editor-important-options.adoc#readonly[`readonly` option].
+
+With neither xref:editor-important-options.adoc#readonly[Readonly mode] nor `tinycomments: "comment"` configured, both the editor and the comments sidebar will be in their default state. By default, comments can be both viewed and added, and the editor content is editable.
+
+With xref:editor-important-options.adoc#readonly[Readonly mode] enabled, the comments sidebar will be in a **view-only** mode, meaning all comments can be viewed and navigated, but no new comments can be added. Also, in the **readonly** state, the editor will still not be editable.
+
+
+.Example
+[source,javascript]
+----
+tinymce.init({
+  selector: 'textarea',  // change this value according to your HTML
+  plugins: 'tinycomments',
+  tinycomments_mode: 'embedded',
+  toolbar: 'addcomment showcomments',
+  readonly: true, // set the editor to read-only mode
+});
+----
+
+liveDemo::comments-readonly-mode[]