From 5e0db9b308d48ff28caa500da95c1577e9bd4839 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Thu, 14 Mar 2024 10:54:07 +0800
Subject: [PATCH 1/3] Fix the issue of scrolling to the comment view after the
 initial loading of comments (#98)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

调整滚动到评论组件视图的时机，改为仅在分页的时候才滚动到顶部。在此之前，如果文章比较短，可以在屏幕中显示评论组件时，页面可能会自动滚动到评论组件的部分。

/kind bug

```release-note
优化加载数据之后滚动到评论组件视图的时机
```
---
 packages/comment-widget/src/comment-widget.ts | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/comment-widget/src/comment-widget.ts b/packages/comment-widget/src/comment-widget.ts
index 90a9be3..fd16389 100644
--- a/packages/comment-widget/src/comment-widget.ts
+++ b/packages/comment-widget/src/comment-widget.ts
@@ -84,7 +84,9 @@ export class CommentWidget extends LitElement {
 
   override render() {
     return html`<div class="comment-widget">
-      <comment-form @reload="${() => this.fetchComments(1)}"></comment-form>
+      <comment-form
+        @reload="${() => this.fetchComments({ page: 1, scrollIntoView: true })}"
+      ></comment-form>
       ${this.loading
         ? html`<loading-block></loading-block>`
         : html`
@@ -135,7 +137,8 @@ export class CommentWidget extends LitElement {
     this.currentUser = data.user.metadata.name === 'anonymousUser' ? undefined : data.user;
   }
 
-  async fetchComments(page?: number) {
+  async fetchComments(options?: { page?: number; scrollIntoView?: boolean }) {
+    const { page, scrollIntoView } = options || {};
     try {
       if (this.comments.items.length === 0) {
         this.loading = true;
@@ -170,14 +173,17 @@ export class CommentWidget extends LitElement {
       }
     } finally {
       this.loading = false;
-      this.scrollIntoView({ block: 'start', inline: 'start', behavior: 'smooth' });
+
+      if (scrollIntoView) {
+        this.scrollIntoView({ block: 'start', inline: 'start', behavior: 'smooth' });
+      }
     }
   }
 
   async onPageChange(e: CustomEvent) {
     const data = e.detail;
     this.comments.page = data.page;
-    await this.fetchComments();
+    await this.fetchComments({ scrollIntoView: true });
   }
 
   override connectedCallback(): void {

From db8b8001839e5751f25b64f4fa5acaf1ca9ac2e4 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Thu, 14 Mar 2024 10:56:07 +0800
Subject: [PATCH 2/3] fix: issue of the emoji picker being semi-transparent
 (#103)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修复鼠标移动到 Emoji 区域背景变半透明的问题。

Fixes https://github.com/halo-dev/plugin-comment-widget/issues/96

```release-note
修复鼠标移动到 Emoji 区域背景变半透明的问题。
```
---
 packages/comment-widget/src/emoji-button.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/comment-widget/src/emoji-button.ts b/packages/comment-widget/src/emoji-button.ts
index d31dc52..104ea0e 100644
--- a/packages/comment-widget/src/emoji-button.ts
+++ b/packages/comment-widget/src/emoji-button.ts
@@ -118,7 +118,7 @@ export class EmojiButton extends LitElement {
         position: relative;
       }
 
-      .emoji-button:hover {
+      .emoji-button:hover icon-emoji {
         opacity: 0.8;
       }
 

From d29197eee2cbdc17c2326893fd9edd4b91523a05 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Thu, 14 Mar 2024 11:06:06 +0800
Subject: [PATCH 3/3] feat: make the content editor focused when the reply form
 is opened (#104)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

支持打开评论回复时，自动聚焦输入框。

/kind feature

```release-note
支持打开评论回复时，自动聚焦输入框。
```
---
 packages/comment-widget/src/base-form.ts  | 4 ++++
 packages/comment-widget/src/reply-form.ts | 9 +++++++++
 2 files changed, 13 insertions(+)

diff --git a/packages/comment-widget/src/base-form.ts b/packages/comment-widget/src/base-form.ts
index 41ffbb2..9ae96dd 100644
--- a/packages/comment-widget/src/base-form.ts
+++ b/packages/comment-widget/src/base-form.ts
@@ -223,6 +223,10 @@ export class BaseForm extends LitElement {
     form?.reset();
   }
 
+  setFocus() {
+    this.textareaRef.value?.focus();
+  }
+
   static override styles = [
     varStyles,
     baseStyles,
diff --git a/packages/comment-widget/src/reply-form.ts b/packages/comment-widget/src/reply-form.ts
index 3c0ce18..be1e416 100644
--- a/packages/comment-widget/src/reply-form.ts
+++ b/packages/comment-widget/src/reply-form.ts
@@ -38,6 +38,15 @@ export class ReplyForm extends LitElement {
 
   baseFormRef: Ref<BaseForm> = createRef<BaseForm>();
 
+  override connectedCallback(): void {
+    super.connectedCallback();
+
+    setTimeout(() => {
+      this.scrollIntoView({ block: 'center', inline: 'start', behavior: 'smooth' });
+      this.baseFormRef.value?.setFocus();
+    }, 0);
+  }
+
   override render() {
     return html`<base-form ${ref(this.baseFormRef)} @submit="${this.onSubmit}"></base-form>`;
   }