Refactor comment and reply event handling

ruibaby · ruibaby · commit ed300516c70d · 2025-08-12T13:01:11.000+08:00
Fixes #54
diff --git a/packages/comment-widget/src/comment-form.ts b/packages/comment-widget/src/comment-form.ts
@@ -140,14 +140,7 @@ export class CommentForm extends LitElement {
         );
       }
 
-      window.dispatchEvent(
-        new CustomEvent('comment:reload', {
-          detail: {
-            page: 1,
-            scrollIntoView: true,
-          },
-        })
-      );
+      window.dispatchEvent(new CustomEvent('halo:comment:created'));
 
       this.baseFormRef.value?.resetForm();
     } catch (error) {
diff --git a/packages/comment-widget/src/comment-list.ts b/packages/comment-widget/src/comment-list.ts
@@ -85,15 +85,12 @@ export class CommentList extends LitElement {
     super.connectedCallback();
     this.fetchComments();
 
-    // Handle comment:reload event
-    window.addEventListener('comment:reload', (e: Event) => {
-      if (e instanceof CustomEvent) {
-        const data = e.detail;
-        this.fetchComments({
-          page: data.page,
-          scrollIntoView: data.scrollIntoView,
-        });
-      }
+    // Handle halo:comment:created event, then reload the comment list
+    window.addEventListener('halo:comment:created', () => {
+      this.fetchComments({
+        page: 1,
+        scrollIntoView: true,
+      });
     });
   }
 
diff --git a/packages/comment-widget/src/comment-replies.ts b/packages/comment-widget/src/comment-replies.ts
@@ -57,7 +57,7 @@ export class CommentReplies extends LitElement {
                 this.replies,
                 (item) => item.metadata.name,
                 (item) =>
-                  html` <reply-item
+                  html`<reply-item
                     .comment=${this.comment}
                     .reply="${item}"
                     .replies=${this.replies}
diff --git a/packages/comment-widget/src/reply-form.ts b/packages/comment-widget/src/reply-form.ts
@@ -144,6 +144,8 @@ export class ReplyForm extends LitElement {
       }
 
       this.dispatchEvent(new CustomEvent('reload'));
+      window.dispatchEvent(new CustomEvent('halo:comment-reply:created'));
+
       this.baseFormRef.value?.resetForm();
     } catch (error) {
       if (error instanceof FetchError) {
diff --git a/packages/example/index.html b/packages/example/index.html
@@ -37,6 +37,14 @@
           document.documentElement.classList.add(theme);
         }
       });
+
+      window.addEventListener("halo:comment:created", () => {
+        console.log("halo:comment:created");
+      });
+
+      window.addEventListener("halo:comment-reply:created", () => {
+        console.log("halo:comment-reply:created");
+      });
     </script>
   </head>
   <body>

Original file line number	Diff line number	Diff line change
`@@ -144,6 +144,8 @@ export class ReplyForm extends LitElement {`
`144`	`144`	`}`
`145`	`145`
`146`	`146`	`this.dispatchEvent(new CustomEvent('reload'));`
	`147`	`+ window.dispatchEvent(new CustomEvent('halo:comment-reply:created'));`
	`148`	`+`
`147`	`149`	`this.baseFormRef.value?.resetForm();`
`148`	`150`	`} catch (error) {`
`149`	`151`	`if (error instanceof FetchError) {`