DOC-3161: Updated mentions demo

Author: MitchC1999

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

@@ -1,52 +1,70 @@
 import ('https://cdn.jsdelivr.net/npm/@faker-js/faker@9/dist/index.min.js').then(({ faker }) => {
-  const adminUser = {
-    id: 'johnsmith',
-    name: 'John Smith',
-    fullName: 'John Smith',
-    description: 'Company Founder',
-    image: "https://i.pravatar.cc/150?img=11"
-  };
-
-  const currentUser = {
-    id: 'jennynichols',
-    name: 'Jenny Nichols',
-    fullName: 'Jenny Nichols',
-    description: 'Marketing Director',
-    image: "https://i.pravatar.cc/150?img=10"
+  const userDb = {
+    'michaelcook': {
+      id: 'michaelcook',
+      name: 'Michael Cook',
+      fullName: 'Michael Cook',
+      description: 'Product Owner',
+      image: "{{imagesdir}}/avatars/michaelcook.png"
+    },
+    'kalebwilson': {
+      id: 'kalebwilson',
+      name: 'Kaleb Wilson',
+      fullName: 'Kaleb Wilson',
+      description: 'Marketing Director',
+      image: "{{imagesdir}}/avatars/kalebwilson.png"
+    }
   };
 
+  const currentUid = 'kalebwilson';
+  const adminUid = 'michaelcook';
+  
+  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 fillAuthorInfo = (id, fullName, image) => ({
+    author: id,
+    authorName: fullName,
+    authorAvatar: image,
+  });
+  
+  const getAuthorInfo = (uid) => {
+    const user = userDb[uid];
+    if (user) {
+      return fillAuthorInfo(user.id, user.fullName, user.image);
+    }
+    return {
+      author: uid,
+      authorName: uid,
+    };
+  }
+  
   const conversationDb = {
     'mce-conversation_19679600221621399703915': {
       uid: 'mce-conversation_19679600221621399703915',
       comments: [{
         uid: 'mce-conversation_19679600221621399703915',
-        author: currentUser.id,
-        authorName: currentUser.fullName,
-        authorAvatar: currentUser.image,
-        content: `What do you think about this @${adminUser.id}?`,
-        createdAt: '2021-05-19T04:48:23.914Z',
-        modifiedAt: '2021-05-19T04:48:23.914Z'
-      },
-      {
+        ...getAuthorInfo(currentUid),
+        content: `What do you think about this? @${adminUser.id}?`,
+        createdAt: yesterday,
+        modifiedAt: yesterday
+      }, {
         uid: 'mce-conversation_19679600221621399703917',
-        author: adminUser.id,
-        authorName: adminUser.fullName,
-        authorAvatar: adminUser.image,
+        ...getAuthorInfo(adminUid),
         content: `I think this is a great idea @${currentUser.id}!`,
-        createdAt: "2024-05-28T12:54:24.126Z",
-        modifiedAt: "2024-05-28T12:54:24.126Z",
+        createdAt: anhourago,
+        modifiedAt: anhourago,
       }]
     },
     'mce-conversation_420304606321716900864126': {
       uid: 'mce-conversation_420304606321716900864126',
       comments: [{
         uid: 'mce-conversation_420304606321716900864126',
-        author: adminUser.id,
-        authorName: adminUser.fullName,
-        authorAvatar: adminUser.image,
+        ...getAuthorInfo(adminUid),
         content: `@${currentUser.id} Please revise this sentence, exclamation points are unprofessional!`,
-        createdAt: '2024-05-28T12:54:24.126Z',
-        modifiedAt: '2024-05-28T12:54:24.126Z'
+        createdAt: yesterday,
+        modifiedAt: anhourago
       }]
     }
   };
@@ -122,6 +140,10 @@ import ('https://cdn.jsdelivr.net/npm/@faker-js/faker@9/dist/index.min.js').then
 
   const fakeServer = setupFakeServer();
 
+  /********************************
+   *   Mentions functions    *
+   ********************************/
+  
   const mentions_fetch = (query, success) => {
     if (!fetchedUsers) {
       fetchedUsers = true;
@@ -162,6 +184,11 @@ import ('https://cdn.jsdelivr.net/npm/@faker-js/faker@9/dist/index.min.js').then
     }
   };
 
+  /********************************
+   *   Tiny Comments functions    *
+   * (must call "done" or "fail") *
+   ********************************/
+
   const tinycomments_create = (req, done, fail) => {
     if (req.content === 'fail') {
       fail(new Error('Something has gone wrong...'));
@@ -170,128 +197,129 @@ import ('https://cdn.jsdelivr.net/npm/@faker-js/faker@9/dist/index.min.js').then
       conversationDb[uid] = {
         uid,
         comments: [{
-        uid,
-        authorName: currentUser.fullName,
-        authorAvatar: currentUser.image,
-        author: currentUser.name,
-        content: req.content,
-        createdAt: req.createdAt,
-        modifiedAt: req.createdAt
+          uid,
+          ...getAuthorInfo(currentUid),
+          content: req.content,
+          createdAt: req.createdAt,
+          modifiedAt: req.createdAt
         }]
       };
-    
-      setTimeout(() => {
-        done({
-        conversationUid: uid
-        });
-      }, fakeDelay);
+      setTimeout(() => done({ conversationUid: uid }), fakeDelay);
     }
   };
-  
+
   const tinycomments_reply = (req, done) => {
     const replyUid = 'annotation-' + randomString();
-    const current = conversationDb[req.conversationUid];
-    current.comments.push(
-      {
-        uid: replyUid,
-        authorName: currentUser.fullName,
-        authorAvatar: currentUser.image,
-        author: currentUser.name,
-        content: req.content,
-        createdAt: req.createdAt,
-        modifiedAt: req.createdAt
-      }
-    );
-  
-    setTimeout(() => {
-      done({
-        commentUid: replyUid
-      });
-    }, fakeDelay);
+    conversationDb[req.conversationUid].comments.push({
+      uid: replyUid,
+      ...getAuthorInfo(currentUid),
+      content: req.content,
+      createdAt: req.createdAt,
+      modifiedAt: req.createdAt
+    });
+    setTimeout(() => done({ commentUid: replyUid }), fakeDelay);
   };
-  
+
   const tinycomments_delete = (req, done) => {
-    delete conversationDb[req.conversationUid];
-  
-    setTimeout(() => {
-      done({
-        canDelete: true
-      });
-    }, fakeDelay);
+    if (currentUid === adminUid) { // 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);
+    }
   };
-  
+
   const tinycomments_resolve = (req, done) => {
-    resolvedConversationDb[req.conversationUid] = conversationDb[req.conversationUid];
-    delete conversationDb[req.conversationUid];
-  
-    setTimeout(() => {
-      done({
-        canResolve: true
-      });
-    }, fakeDelay);
+    const conversation = conversationDb[req.conversationUid];
+    if (currentUid === conversation.comments[0].author) { // Replace wth your own logic, e.g. check if user has admin priveleges
+      delete conversationDb[req.conversationUid];
+      setTimeout(() => done({ canResolve: true }), fakeDelay);
+    } else {
+      setTimeout(() => done({ canResolve: false, reason: 'Must be conversation author' }), fakeDelay);
+    }
   };
-  
+
   const tinycomments_delete_comment = (req, done) => {
-    const current = conversationDb[req.conversationUid];
-    // Should be supported on browsers ...
-    current.comments = current.comments.filter((f) => {
-      return f.uid !== req.commentUid;
+    const oldcomments = conversationDb[req.conversationUid].comments;
+    let reason = 'Comment not found';
+
+    const newcomments = oldcomments.filter((comment) => {
+      if (comment.uid === req.commentUid) { // Found the comment to delete
+        if (currentUid === comment.author) { // Replace with your own logic, e.g. check if user has admin privileges
+          return false; // Remove the comment
+        } else {
+          reason = 'Not authorised to delete this comment'; // Update reason
+        }
+      }
+      return true; // Keep the comment
     });
-  
-    setTimeout(() => {
-      done({
-        canDelete: true
-      });
-    }, fakeDelay);
+    if (newcomments.length === oldcomments.length) {
+      setTimeout(() => done({ canDelete: false, reason }), fakeDelay);
+    } else {
+      conversationDb[req.conversationUid].comments = newcomments;
+      setTimeout(() => done({ canDelete: true }), fakeDelay);
+    }
   };
-  
+
   const tinycomments_edit_comment = (req, done) => {
-    const current = conversationDb[req.conversationUid];
-    // Should be supported on browsers ...
-    current.comments = current.comments.map((f) => {
-    return f.uid === req.commentUid ? {
-        ...f,
-        content: req.content,
-        modifiedAt: new Date().toISOString()
-      } : f;
+    const oldcomments = conversationDb[req.conversationUid].comments;
+    let reason = 'Comment not found';
+    let canEdit = false;
+
+    const newcomments = oldcomments.map((comment) => {
+      if (comment.uid === req.commentUid) { // Found the comment to delete
+        if (currentUid === comment.author) { // Replace with your own logic, e.g. check if user has admin privileges
+          canEdit = true; // User can edit the comment
+          return { ...comment, content: req.content, modifiedAt: new Date().toISOString() }; // Update the comment
+        } else {
+          reason = 'Not authorised to edit this comment'; // Update reason
+        }
+      }
+      return comment; // Keep the comment
     });
-  
-    setTimeout(() => {
-      done({
-        canEdit: true
-      });
-    }, fakeDelay);
+
+    if (canEdit) {
+      conversationDb[req.conversationUid].comments = newcomments;
+      setTimeout(() => done({ canEdit }), fakeDelay);
+    } else {
+      setTimeout(() => done({ canEdit, reason }), fakeDelay);
+    }
   };
-  
+
   const tinycomments_delete_all = (req, done) => {
-    Object.keys(conversationDb).forEach((k) => {
-      delete conversationDb[k];
-    });
-  
-    setTimeout(() => {
-      done({
-        canDelete: true
-      });
-    }, fakeDelay);
+    const conversation = conversationDb[req.conversationUid];
+    if (currentUid === conversation.comments[0].author) { // Replace wth your own logic, e.g. check if user has admin priveleges
+      delete conversationDb[req.conversationUid];
+      setTimeout(() => done({ canDelete: true }), fakeDelay);
+    } else {
+      setTimeout(() => done({ canDelete: false, reason: 'Must be conversation author' }), fakeDelay);
+    }
   };
-  
+
   const tinycomments_lookup = (req, done) => {
     setTimeout(() => {
       done({
         conversation: {
-        uid: conversationDb[req.conversationUid].uid,
-        comments: conversationDb[req.conversationUid].comments.slice(0)
+          uid: conversationDb[req.conversationUid].uid,
+          comments: [...conversationDb[req.conversationUid].comments]
         }
       });
     }, fakeDelay);
   };
-  
-  const tinycomments_fetch = (_, done) => {
-    setTimeout(() => done({
-      conversations: conversationDb
-    }), fakeDelay);
+
+  const tinycomments_fetch = (conversationUids, done) => {
+    const fetchedConversations = {};
+    conversationUids.forEach((uid) => {
+      const conversation = conversationDb[uid];
+      if (conversation) {
+        fetchedConversations[uid] = {...conversation};
+      }
+    });
+    setTimeout(() => done({ conversations: fetchedConversations }), fakeDelay);
   };
-  
+
+  // Read the above `getAuthorInfo` function to see how this could be implemented
+  const tinycomments_fetch_author_info = (_, done) => done(getAuthorInfo(currentUid));
 
   tinymce.init({
     selector: 'textarea#comments-callback-with-mentions',
@@ -331,5 +359,6 @@ import ('https://cdn.jsdelivr.net/npm/@faker-js/faker@9/dist/index.min.js').then
     tinycomments_delete_comment,
     tinycomments_edit_comment,
     tinycomments_fetch,
+    tinycomments_fetch_author_info
   });
 });

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

@@ -23,7 +23,6 @@ const currentUid = 'kalebwilson';
 const adminUid = 'michaelcook';
 
 const now = new Date();
-const currentTime = now.toISOString();
 const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000).toISOString();
 const anhourago = new Date(now.getTime() - 60 * 60 * 1000).toISOString();