Merge pull request #8 from adanski/bugfix

Fix for handling deleted comments
adanski · Feb 3, 2023 · 539aae8 · 539aae8
2 parents 68d0d7e + 9e069d9
commit 539aae8
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 10 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "ax-comments",
   "title": "ax-comments",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "author": {
     "name": "Adrian Z."
   },

diff --git a/src/default-options-factory.ts b/src/default-options-factory.ts
@@ -58,7 +58,8 @@ export function getDefaultOptions(): Required<CommentsOptions> {
         putComment: (comment, success, error) => success(comment),
         deleteComment: (comment, success, error) => success({
             ...comment,
-            content: 'Deleted'
+            content: 'Deleted',
+            isDeleted: true
         }),
         upvoteComment: (comment, success, error) => success(comment),
         validateAttachments: (attachments, accept) => accept(attachments),

diff --git a/src/subcomponent/button-element.ts b/src/subcomponent/button-element.ts
@@ -123,7 +123,7 @@ export class ButtonElement extends HTMLButtonElement implements WebComponent {
     static createUpvoteButton(commentModel: CommentModelEnriched): ButtonElement {
         const upvoteButton: ButtonElement = document.createElement('button', {is: 'ax-button'}) as ButtonElement;
         upvoteButton.classList.add('action', 'upvote');
-        upvoteButton.classList.toggle("disabled", !!commentModel.createdByCurrentUser);
+        upvoteButton.classList.toggle("disabled", !!commentModel.createdByCurrentUser || !!commentModel.isDeleted);
         const upvoteCount: HTMLSpanElement = document.createElement('span');
         upvoteCount.classList.add('upvote-count');
 

diff --git a/src/subcomponent/comment-container-element.ts b/src/subcomponent/comment-container-element.ts
@@ -250,7 +250,7 @@ export class CommentContainerElement extends HTMLElement implements WebComponent
         }
 
         // Edit
-        if (commentModel.createdByCurrentUser || this.#options.currentUserIsAdmin) {
+        if ((commentModel.createdByCurrentUser || this.#options.currentUserIsAdmin) && !commentModel.isDeleted) {
             const editButton: ButtonElement = ButtonElement.createActionButton('edit', this.#options.editText, {
                 onclick: this.#editButtonClicked
             });
@@ -329,11 +329,9 @@ export class CommentContainerElement extends HTMLElement implements WebComponent
     };
 
     #isAllowedToDelete(commentModel: CommentModelEnriched): boolean {
-        if (!this.#options.enableDeleting || !commentModel.createdByCurrentUser && !this.#options.currentUserIsAdmin) {
-            return false;
-        } else {
-            return this.#options.enableDeletingCommentWithReplies || !commentModel.childIds.length;
-        }
+        return this.#options.enableDeleting
+            && (this.#options.enableDeletingCommentWithReplies || !commentModel.childIds.length)
+            && (this.#options.currentUserIsAdmin || !!commentModel.createdByCurrentUser);
     }
 
     #deleteButtonClicked: (e: MouseEvent) => void = e => {

diff --git a/src/subcomponent/comment-content-formatter.ts b/src/subcomponent/comment-content-formatter.ts
@@ -20,13 +20,22 @@ export class CommentContentFormatter {
     }
 
     getFormattedCommentContent(commentModel: CommentModelEnriched, replaceNewLines?: boolean): HTMLElement {
+        const content: HTMLSpanElement = document.createElement('span');
         let html: string = this.escape(DOMPurify.sanitize(commentModel.content));
+        if (commentModel.isDeleted) {
+            const deletedContent: HTMLElement = document.createElement('i');
+            deletedContent.style.color = 'gray';
+            deletedContent.innerHTML = html;
+            content.append(deletedContent);
+            return content;
+        }
+
         html = this.linkify(html);
         html = this.highlightTags(commentModel, html);
         if (replaceNewLines) {
             html = html.replace(/(?:\n)/g, '<br>');
         }
-        const content: HTMLSpanElement = document.createElement('span');
+
         content.innerHTML = html;
         content.querySelectorAll<HTMLElement>('.hashtag')
             .forEach(hashtag => hashtag.onclick = this.#hashtagClicked);