DOC-3309_2: Update full-feature demo to include initial comments, and include tinycomments_can_resolve callback.

Author: kemister85

modules/ROOT/examples/live-demos/full-featured/example.js

@@ -9,6 +9,8 @@ const collaborator_id = 'mia-andersson';
 const now = new Date();
 const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000).toISOString();
 const anhourago = new Date(now.getTime() - 60 * 60 * 1000).toISOString();
+const oneminuteago = new Date(now.getTime() - 1 * 60 * 1000).toISOString();
+const amomentago = new Date(now.getTime() - 30 * 1000).toISOString();
 const fakeDelay = 200;
 
 const randomString = () => {
@@ -23,29 +25,29 @@ const conversationDb = {
       author: user_id,
       authorName: 'James Wilson',
       authorAvatar: 'https://sneak-preview.tiny.cloud/demouserdirectory/images/employee_james-wilson_128_52f19412.jpg',
-      content: `What do you think about this? @${collaborator_id}?`,
-      createdAt: yesterday,
-      modifiedAt: yesterday
+      content: 'Do we want to say "rich text editor" or "WYSIWYG editor" here?',
+      createdAt: oneminuteago,
+      modifiedAt: oneminuteago
     }, {
       uid: 'mce-conversation_19679600221621399703917',
       author: collaborator_id,
       authorName: 'Mia Andersson',
       authorAvatar: 'https://sneak-preview.tiny.cloud/demouserdirectory/images/employee_mia-andersson_128_e6f9424b.jpg',
-      content: `I think this is a great idea @${user_id}!`,
-      createdAt: anhourago,
-      modifiedAt: anhourago,
+      content: 'I think "rich text editor" works ok.',
+      createdAt: amomentago,
+      modifiedAt: amomentago,
     }]
   },
   'mce-conversation_420304606321716900864126': {
     uid: 'mce-conversation_420304606321716900864126',
     comments: [{
       uid: 'mce-conversation_420304606321716900864126',
-      author: collaborator_id,
-      authorName: 'Mia Andersson',
-      authorAvatar: 'https://sneak-preview.tiny.cloud/demouserdirectory/images/employee_mia-andersson_128_e6f9424b.jpg',
-      content: `@${user_id} Please revise this sentence, exclamation points are unprofessional!`,
-      createdAt: yesterday,
-      modifiedAt: anhourago
+      author: user_id,
+      authorName: 'James Wilson',
+      authorAvatar: 'https://sneak-preview.tiny.cloud/demouserdirectory/images/employee_james-wilson_128_52f19412.jpg',
+      content: 'Let\'s mention Export to PDF here as well.',
+      createdAt: oneminuteago,
+      modifiedAt: oneminuteago
     }]
   }
 };
@@ -140,11 +142,12 @@ const tinycomments_reply = (req, done) => {
 };
 
 const tinycomments_delete = (req, done) => {
-  if (user_id === collaborator_id) { // Replace wth your own logic, e.g. check if user created the conversation
+  const conversation = conversationDb[req.conversationUid];
+  if (user_id === conversation.comments[0].author) { // Replace wth your own logic, e.g. check if user created the conversation
     delete conversationDb[req.conversationUid];
     setTimeout(() => done({ canDelete: true }), fakeDelay);
   } else {
-    setTimeout(() => done({ canDelete: false, reason: 'Must be admin user' }), fakeDelay);
+    setTimeout(() => done({ canDelete: false, reason: 'Must be conversation author' }), fakeDelay);
   }
 };
 
@@ -158,6 +161,15 @@ const tinycomments_resolve = (req, done) => {
   }
 };
 
+const tinycomments_can_resolve = (req, done, fail) => {
+  const conversation = conversationDb[req.conversationUid];
+  if (user_id === conversation.comments[0].author) { // Replace wth your own logic, e.g. check if user has admin priveleges
+    setTimeout(() => done({ canResolve: true }), fakeDelay);
+  } else {
+    setTimeout(() => done({ canResolve: false, reason: 'Must be conversation author' }), fakeDelay);
+  }
+};
+
 const tinycomments_delete_comment = (req, done) => {
   const oldcomments = conversationDb[req.conversationUid].comments;
   let reason = 'Comment not found';
@@ -616,7 +628,7 @@ tinymce.init({
   ],
   importcss_append: true,
   height: 600,
-  quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote quicktable',
+  quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote quicktable | addcomment showcomments',
   noneditable_class: 'mceNonEditable',
   toolbar_mode: 'sliding',
   spellchecker_ignore_list: ['Ephox', 'Moxiecode', 'tinymce', 'TinyMCE'],
@@ -633,6 +645,7 @@ tinymce.init({
   tinycomments_reply,
   tinycomments_delete,
   tinycomments_resolve,
+  tinycomments_can_resolve,
   tinycomments_delete_all,
   tinycomments_lookup,
   tinycomments_delete_comment,

modules/ROOT/examples/live-demos/full-featured/index.html

@@ -1,12 +1,11 @@
 <textarea id="full-featured">
-  <p>&nbsp;</p>
   <h1 style="text-align: left;">Welcome to the TinyMCE editor demo!</h1>
-  <p>Meet <strong>TinyMCE, </strong>the Internet's most&nbsp;<span style="background-color: #eccafa;">battle-tested rich text editor</span> with over 60 features including: <em>Advanced formatting, </em><span style="color: #ba372a;"><strong><em>Export to and from Word and PDF, </em></strong></span><span style="font-family: 'times new roman', times, serif; font-size: 14pt;">Accessibility and spelling checkers</span>,&nbsp;Mentions and comments, and <strong><span style="color: #169179;">an AI assistant</span></strong>.</p>
+  <p>Meet <strong>TinyMCE, </strong>the Internet's most&nbsp;<span style="background-color: #eccafa;">battle-tested <span class="mce-annotation tox-comment" data-mce-annotation-uid="mce-conversation_19679600221621399703915" data-mce-annotation="tinycomments">rich text editor</span></span> with over 60 features including: <em>Advanced formatting, </em><span style="color: #ba372a;"><strong><em>Export to and from Word and PDF, </em></strong></span><span style="font-family: 'times new roman', times, serif; font-size: 14pt;">Accessibility and spelling checkers</span>,&nbsp;Mentions and comments, and <strong><span style="color: #169179;">an AI assistant</span></strong>.</p>
   <p><span style="font-family: terminal, monaco, monospace;">TinyMCE is easy to implement and configure</span>. <a href="https://www.tiny.cloud/auth/signup/?utm_campaign=tiny_docs&amp;utm_source=site&amp;keyword=docs">Try it out yourself today</a>.</p>
   <h2>⭐️ Popular features</h2>
   <ul>
   <li>Collaborate with <a href="https://www.tiny.cloud/docs/tinymce/latest/mentions/?utm_campaign=tiny_docs&amp;utm_source=site&amp;keyword=docs">@Mentions</a>, <a href="https://www.tiny.cloud/docs/tinymce/latest/introduction-to-tiny-comments/?utm_campaign=tiny_docs&amp;utm_source=site&amp;keyword=docs">discuss using Comments</a> and review changes using <a href="https://www.tiny.cloud/docs/tinymce/latest/suggestededits/?utm_campaign=tiny_docs&amp;utm_source=site&amp;keyword=docs">Suggested Edits</a> and keep an audit trail with <a href="https://www.tiny.cloud/docs/tinymce/latest/revisionhistory/?utm_campaign=tiny_docs&amp;utm_source=site&amp;keyword=docs">Revision history</a>.</li>
-  <li><a href="https://www.tiny.cloud/docs/tinymce/latest/introduction-to-powerpaste/?utm_campaign=tiny_docs&amp;utm_source=site&amp;keyword=docs">Paste from MS Word</a> and retain formatting. You can even <a href="https://www.tiny.cloud/docs/tinymce/latest/importword/?utm_campaign=tiny_docs&amp;utm_source=site&amp;keyword=docs">import Word documents</a>!&nbsp;</li>
+  <li><span class="mce-annotation tox-comment" data-mce-annotation-uid="mce-conversation_420304606321716900864126" data-mce-annotation="tinycomments"><a href="https://www.tiny.cloud/docs/tinymce/latest/introduction-to-powerpaste/?utm_campaign=tiny_docs&amp;utm_source=site&amp;keyword=docs">Paste from MS Word</a> and retain formatting. You can even <a href="https://www.tiny.cloud/docs/tinymce/latest/importword/?utm_campaign=tiny_docs&amp;utm_source=site&amp;keyword=docs">import Word documents</a>!</span>&nbsp;</li>
   <li>Power your email editor with <a href="https://www.tiny.cloud/docs/tinymce/latest/mergetags/?utm_campaign=tiny_docs&amp;utm_source=site&amp;keyword=docs">Merge tags</a> and <a href="https://www.tiny.cloud/docs/tinymce/latest/inline-css/?utm_campaign=tiny_docs&amp;utm_source=site&amp;keyword=docs">Inline CSS output</a>.</li>
   <li>Hit the highest standards with <a href="https://www.tiny.cloud/docs/tinymce/latest/introduction-to-tiny-spellchecker/?utm_campaign=tiny_docs&amp;utm_source=site&amp;keyword=docs">Spell Checker</a>, <a href="https://www.tiny.cloud/docs/tinymce/latest/a11ychecker/?utm_campaign=tiny_docs&amp;utm_source=site&amp;keyword=docs">Accessibility Checker</a>, <a href="https://www.tiny.cloud/docs/tinymce/latest/advanced-typography/?utm_campaign=tiny_docs&amp;utm_source=site&amp;keyword=docs">Advanced Typography</a> and <a href="https://www.tiny.cloud/docs/tinymce/latest/linkchecker/?utm_campaign=tiny_docs&amp;utm_source=site&amp;keyword=docs">Link Checker</a>.</li>
   </ul>

modules/ROOT/examples/live-demos/full-featured/index.js

@@ -9,6 +9,8 @@ const collaborator_id = 'mia-andersson';
 const now = new Date();
 const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000).toISOString();
 const anhourago = new Date(now.getTime() - 60 * 60 * 1000).toISOString();
+const oneminuteago = new Date(now.getTime() - 1 * 60 * 1000).toISOString();
+const amomentago = new Date(now.getTime() - 30 * 1000).toISOString();
 const fakeDelay = 200;
 
 const randomString = () => {
@@ -23,29 +25,29 @@ const conversationDb = {
       author: user_id,
       authorName: 'James Wilson',
       authorAvatar: 'https://sneak-preview.tiny.cloud/demouserdirectory/images/employee_james-wilson_128_52f19412.jpg',
-      content: `What do you think about this? @${collaborator_id}?`,
-      createdAt: yesterday,
-      modifiedAt: yesterday
+      content: 'Do we want to say "rich text editor" or "WYSIWYG editor" here?',
+      createdAt: oneminuteago,
+      modifiedAt: oneminuteago
     }, {
       uid: 'mce-conversation_19679600221621399703917',
       author: collaborator_id,
       authorName: 'Mia Andersson',
       authorAvatar: 'https://sneak-preview.tiny.cloud/demouserdirectory/images/employee_mia-andersson_128_e6f9424b.jpg',
-      content: `I think this is a great idea @${user_id}!`,
-      createdAt: anhourago,
-      modifiedAt: anhourago,
+      content: 'I think "rich text editor" works ok.',
+      createdAt: amomentago,
+      modifiedAt: amomentago,
     }]
   },
   'mce-conversation_420304606321716900864126': {
     uid: 'mce-conversation_420304606321716900864126',
     comments: [{
       uid: 'mce-conversation_420304606321716900864126',
-      author: collaborator_id,
-      authorName: 'Mia Andersson',
-      authorAvatar: 'https://sneak-preview.tiny.cloud/demouserdirectory/images/employee_mia-andersson_128_e6f9424b.jpg',
-      content: `@${user_id} Please revise this sentence, exclamation points are unprofessional!`,
-      createdAt: yesterday,
-      modifiedAt: anhourago
+      author: user_id,
+      authorName: 'James Wilson',
+      authorAvatar: 'https://sneak-preview.tiny.cloud/demouserdirectory/images/employee_james-wilson_128_52f19412.jpg',
+      content: 'Let\'s mention Export to PDF here as well.',
+      createdAt: oneminuteago,
+      modifiedAt: oneminuteago
     }]
   }
 };
@@ -140,11 +142,12 @@ const tinycomments_reply = (req, done) => {
 };
 
 const tinycomments_delete = (req, done) => {
-  if (user_id === collaborator_id) { // Replace wth your own logic, e.g. check if user created the conversation
+  const conversation = conversationDb[req.conversationUid];
+  if (user_id === conversation.comments[0].author) { // Replace wth your own logic, e.g. check if user created the conversation
     delete conversationDb[req.conversationUid];
     setTimeout(() => done({ canDelete: true }), fakeDelay);
   } else {
-    setTimeout(() => done({ canDelete: false, reason: 'Must be admin user' }), fakeDelay);
+    setTimeout(() => done({ canDelete: false, reason: 'Must be conversation author' }), fakeDelay);
   }
 };
 
@@ -158,6 +161,15 @@ const tinycomments_resolve = (req, done) => {
   }
 };
 
+const tinycomments_can_resolve = (req, done, fail) => {
+  const conversation = conversationDb[req.conversationUid];
+  if (user_id === conversation.comments[0].author) { // Replace wth your own logic, e.g. check if user has admin priveleges
+    setTimeout(() => done({ canResolve: true }), fakeDelay);
+  } else {
+    setTimeout(() => done({ canResolve: false, reason: 'Must be conversation author' }), fakeDelay);
+  }
+};
+
 const tinycomments_delete_comment = (req, done) => {
   const oldcomments = conversationDb[req.conversationUid].comments;
   let reason = 'Comment not found';
@@ -601,7 +613,7 @@ tinymce.init({
   ],
   importcss_append: true,
   height: 600,
-  quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote quicktable',
+  quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote quicktable | addcomment showcomments',
   noneditable_class: 'mceNonEditable',
   toolbar_mode: 'sliding',
   spellchecker_ignore_list: ['Ephox', 'Moxiecode', 'tinymce', 'TinyMCE'],
@@ -618,6 +630,7 @@ tinymce.init({
   tinycomments_reply,
   tinycomments_delete,
   tinycomments_resolve,
+  tinycomments_can_resolve,
   tinycomments_delete_all,
   tinycomments_lookup,
   tinycomments_delete_comment,