artalk 2.8.0 → 2.8.1

package/dist/ArtalkLite.mjs

@@ -368,6 +368,29 @@ let Api$1 = class Api extends HttpClient {
         type: "application/json",
         format: "json"
       }, params)),
+      /**
+       * @description Get the detail of a comment by comment id
+       *
+       * @tags Comment
+       * @name GetComment
+       * @summary Get a comment
+       * @request GET:/comments/{id}
+       * @response `200` `HandlerResponseCommentGet` OK
+       * @response `404` `(HandlerMap & {
+          msg?: string,
+      
+      })` Not Found
+       * @response `500` `(HandlerMap & {
+          msg?: string,
+      
+      })` Internal Server Error
+       */
+      getComment: (id, params = {}) => this.request(__spreadValues({
+        path: `/comments/${id}`,
+        method: "GET",
+        type: "application/json",
+        format: "json"
+      }, params)),
       /**
        * @description Update a specific comment
        *
@@ -3131,7 +3154,7 @@ function showLoading(parentElem, conf) {
   let $loading = parentElem.querySelector(":scope > .atk-loading");
   if (!$loading) {
     $loading = createElement(
-      `<div class="atk-loading atk-fade-in" style="display: none;">
+      `<div class="atk-loading" style="display: none;">
       <div class="atk-loading-spinner">
         <svg viewBox="25 25 50 50"><circle cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"></circle></svg>
       </div>
@@ -3146,7 +3169,8 @@ function showLoading(parentElem, conf) {
   if ($spinner) {
     $spinner.style.display = "none";
     window.setTimeout(() => {
-      $spinner.style.display = "";
+      if ($spinner.isConnected)
+        $spinner.style.display = "";
     }, 500);
   }
 }
@@ -3166,8 +3190,7 @@ function scrollIntoView(elem, enableAnim = true, relativeTo) {
   if (relativeTo) {
     const containerRect = relativeTo.getBoundingClientRect();
     const elementRect = elem.getBoundingClientRect();
-    top = elementRect.top - containerRect.top + relativeTo.scrollTop;
-    top += getHeight(relativeTo) / 2 - getHeight(elem) / 2;
+    top = elementRect.top - containerRect.top + relativeTo.scrollTop - relativeTo.clientHeight / 2 + elem.clientHeight / 2;
   } else {
     const rect = elem.getBoundingClientRect();
     const elemTop = rect.top + window.scrollY;
@@ -3501,6 +3524,9 @@ class Component {
   get conf() {
     return this.ctx.conf;
   }
+  getEl() {
+    return this.$el;
+  }
 }
 const EditorHTML = '<div class="atk-main-editor">\n  <div class="atk-header">\n    <input name="nick" class="atk-nick" type="text" required="required">\n    <input name="email" class="atk-email" type="email" required="required">\n    <input name="link" class="atk-link" type="url">\n  </div>\n  <div class="atk-textarea-wrap">\n    <textarea class="atk-textarea"></textarea>\n  </div>\n  <div class="atk-plug-panel-wrap" style="display: none;"></div>\n  <div class="atk-bottom">\n    <div class="atk-item atk-plug-btn-wrap"></div>\n    <div class="atk-item">\n      <button type="button" class="atk-send-btn"></button>\n    </div>\n  </div>\n  <div class="atk-notify-wrap"></div>\n</div>\n';
 const Sel = {
@@ -3885,39 +3911,18 @@ function makeNestCommentNodeList(srcData, sortBy = "DATE_DESC", nestMax = 2) {
   })(nodeList);
   return nodeList;
 }
-class ListLayout {
-  constructor(options) {
-    this.options = options;
-  }
-  // TODO: refactor `if syntax` to strategy pattern
-  import(comments) {
-    if (this.options.flatMode) {
-      comments.forEach((commentData) => {
-        this.putCommentFlatMode(commentData, comments, "append");
-      });
-    } else {
-      this.importCommentsNestMode(comments);
-    }
-  }
-  insert(comment) {
-    if (!this.options.flatMode) {
-      this.insertCommentNest(comment);
-    } else {
-      this.insertCommentFlatMode(comment);
-    }
-  }
-  // 导入评论 · 嵌套模式
-  importCommentsNestMode(srcData) {
-    const rootNodes = makeNestCommentNodeList(srcData, this.options.nestSortBy, this.options.nestMax);
+const createNestStrategy = (opts) => ({
+  import: (comments) => {
+    const rootNodes = makeNestCommentNodeList(comments, opts.nestSortBy, opts.nestMax);
     rootNodes.forEach((rootNode) => {
       var _a;
-      const rootC = this.options.createCommentNode(rootNode.comment, srcData);
-      (_a = this.options.$commentsWrap) == null ? void 0 : _a.appendChild(rootC.getEl());
+      const rootC = opts.createCommentNode(rootNode.comment);
+      (_a = opts.$commentsWrap) == null ? void 0 : _a.appendChild(rootC.getEl());
       rootC.getRender().playFadeAnim();
       const loadChildren = (parentC, parentNode) => {
         parentNode.children.forEach((node) => {
           const childD = node.comment;
-          const childC = this.options.createCommentNode(childD, srcData);
+          const childC = opts.createCommentNode(childD, parentC.getData());
           parentC.putChild(childC);
           loadChildren(childC, node);
         });
@@ -3925,44 +3930,66 @@ class ListLayout {
       loadChildren(rootC, rootNode);
       rootC.getRender().checkHeightLimit();
     });
-  }
-  /** 导入评论 · 平铺模式 */
-  putCommentFlatMode(cData, ctxData, insertMode) {
-    var _a, _b;
-    if (cData.is_collapsed)
-      cData.is_allow_reply = false;
-    const comment = this.options.createCommentNode(cData, ctxData);
-    if (cData.visible) {
-      if (insertMode === "append")
-        (_a = this.options.$commentsWrap) == null ? void 0 : _a.append(comment.getEl());
-      if (insertMode === "prepend")
-        (_b = this.options.$commentsWrap) == null ? void 0 : _b.prepend(comment.getEl());
-      comment.getRender().playFadeAnim();
-    }
-    comment.getRender().checkHeightLimit();
-    return comment;
-  }
-  insertCommentNest(commentData) {
+  },
+  insert: (comment, replyComment) => {
     var _a;
-    const comment = this.options.createCommentNode(commentData, this.options.getCommentDataList());
-    if (commentData.rid === 0) {
-      (_a = this.options.$commentsWrap) == null ? void 0 : _a.prepend(comment.getEl());
+    const node = opts.createCommentNode(comment, replyComment);
+    if (comment.rid === 0) {
+      (_a = opts.$commentsWrap) == null ? void 0 : _a.prepend(node.getEl());
     } else {
-      const parent = this.options.findCommentNode(commentData.rid);
+      const parent = opts.findCommentNode(comment.rid);
       if (parent) {
-        parent.putChild(comment, this.options.nestSortBy === "DATE_ASC" ? "append" : "prepend");
-        comment.getParents().forEach((p) => {
+        parent.putChild(node, opts.nestSortBy === "DATE_ASC" ? "append" : "prepend");
+        node.getParents().forEach((p) => {
           p.getRender().heightLimitRemoveForChildren();
         });
       }
     }
-    comment.getRender().checkHeightLimit();
-    scrollIntoView(comment.getEl());
-    comment.getRender().playFadeAnim();
+    node.getRender().checkHeightLimit();
+    node.scrollIntoView();
+    node.getRender().playFadeAnim();
+  }
+});
+const createFlatStrategy = (opts) => ({
+  import: (comments) => {
+    comments.forEach((comment) => {
+      const replyComment = comment.rid === 0 ? void 0 : comments.find((c) => c.id === comment.rid);
+      insertComment(opts, "append", comment, replyComment);
+    });
+  },
+  insert: (comment, replyComment) => {
+    const node = insertComment(opts, "prepend", comment, replyComment);
+    node.scrollIntoView();
+  }
+});
+function insertComment(opts, insertMode, comment, replyComment) {
+  if (comment.is_collapsed)
+    comment.is_allow_reply = false;
+  const node = opts.createCommentNode(comment, replyComment);
+  if (comment.visible) {
+    const $comment = node.getEl();
+    const $listCommentsWrap = opts.$commentsWrap;
+    if (insertMode === "append")
+      $listCommentsWrap == null ? void 0 : $listCommentsWrap.append($comment);
+    if (insertMode === "prepend")
+      $listCommentsWrap == null ? void 0 : $listCommentsWrap.prepend($comment);
+    node.getRender().playFadeAnim();
+  }
+  node.getRender().checkHeightLimit();
+  return node;
+}
+class ListLayout {
+  constructor(options) {
+    this.options = options;
+  }
+  getStrategy() {
+    return this.options.flatMode ? createFlatStrategy(this.options) : createNestStrategy(this.options);
+  }
+  import(comments) {
+    this.getStrategy().import(comments);
   }
-  insertCommentFlatMode(commentData) {
-    const comment = this.putCommentFlatMode(commentData, this.options.getCommentDataList(), "prepend");
-    scrollIntoView(comment.getEl());
+  insert(comment, replyComment) {
+    this.getStrategy().insert(comment, replyComment);
   }
 }
 function Detect(userAgent) {
@@ -4225,7 +4252,7 @@ const CommentHTML = '<div class="atk-comment-wrap">\n  <div class="atk-comment">
 function renderAvatar(r) {
   const $avatar = r.$el.querySelector(".atk-avatar");
   const $avatarImg = createElement("<img />");
-  const avatarURLBuilder = r.conf.avatarURLBuilder;
+  const avatarURLBuilder = r.opts.avatarURLBuilder;
   $avatarImg.src = avatarURLBuilder ? avatarURLBuilder(r.data) : r.comment.getGravatarURL();
   if (r.data.link) {
     const $avatarA = createElement('<a target="_blank" rel="noreferrer noopener nofollow"></a>');
@@ -4264,12 +4291,12 @@ function renderVerifyBadge(ctx) {
   const badgeColor = ctx.data.badge_color;
   if (badgeText) {
     const $badge = createElement(`<span class="atk-badge"></span>`);
-    $badge.innerText = badgeText.replace("管理员", ctx.ctx.$t("admin"));
+    $badge.innerText = badgeText.replace("管理员", t("admin"));
     $badge.style.backgroundColor = badgeColor || "";
     ctx.$headerBadgeWrap.append($badge);
   }
   if (ctx.data.is_pinned) {
-    const $pinnedBadge = createElement(`<span class="atk-pinned-badge">${ctx.ctx.$t("pin")}</span>`);
+    const $pinnedBadge = createElement(`<span class="atk-pinned-badge">${t("pin")}</span>`);
     ctx.$headerBadgeWrap.append($pinnedBadge);
   }
 }
@@ -4279,7 +4306,7 @@ function renderDate(ctx) {
   $date.setAttribute("data-atk-comment-date", String(+new Date(ctx.data.date)));
 }
 function renderUABadge(ctx) {
-  if (!ctx.ctx.conf.uaBadge && !ctx.data.ip_region)
+  if (!ctx.opts.uaBadge && !ctx.data.ip_region)
     return;
   let $uaWrap = ctx.$header.querySelector("atk-ua-wrap");
   if (!$uaWrap) {
@@ -4292,7 +4319,7 @@ function renderUABadge(ctx) {
     $regionBadge.innerText = ctx.data.ip_region;
     $uaWrap.append($regionBadge);
   }
-  if (ctx.ctx.conf.uaBadge) {
+  if (ctx.opts.uaBadge) {
     const { browser, os } = ctx.comment.getUserUA();
     if (String(browser).trim()) {
       const $uaBrowser = createElement(`<span class="atk-ua ua-browser"></span>`);
@@ -4315,8 +4342,8 @@ function renderContent(r) {
   r.$content.classList.add("atk-hide", "atk-type-collapsed");
   const collapsedInfoEl = createElement(`
     <div class="atk-collapsed">
-      <span class="atk-text">${r.ctx.$t("collapsedMsg")}</span>
-      <span class="atk-show-btn">${r.ctx.$t("expand")}</span>
+      <span class="atk-text">${t("collapsedMsg")}</span>
+      <span class="atk-show-btn">${t("expand")}</span>
     </div>`);
   r.$body.insertAdjacentElement("beforeend", collapsedInfoEl);
   const contentShowBtn = collapsedInfoEl.querySelector(".atk-show-btn");
@@ -4326,51 +4353,51 @@ function renderContent(r) {
       r.$content.innerHTML = r.comment.getContentMarked();
       r.$content.classList.remove("atk-hide");
       playFadeInAnim(r.$content);
-      contentShowBtn.innerText = r.ctx.$t("collapse");
+      contentShowBtn.innerText = t("collapse");
     } else {
       r.$content.innerHTML = "";
       r.$content.classList.add("atk-hide");
-      contentShowBtn.innerText = r.ctx.$t("expand");
+      contentShowBtn.innerText = t("expand");
     }
   });
 }
 function renderReplyAt(r) {
-  if (r.cConf.isFlatMode || r.data.rid === 0)
+  if (r.opts.flatMode || r.data.rid === 0)
     return;
-  if (!r.cConf.replyTo)
+  if (!r.opts.replyTo)
     return;
   r.$replyAt = createElement(`<span class="atk-item atk-reply-at"><span class="atk-arrow"></span><span class="atk-nick"></span></span>`);
-  r.$replyAt.querySelector(".atk-nick").innerText = `${r.cConf.replyTo.nick}`;
+  r.$replyAt.querySelector(".atk-nick").innerText = `${r.opts.replyTo.nick}`;
   r.$replyAt.onclick = () => {
     r.comment.getActions().goToReplyComment();
   };
   r.$headerBadgeWrap.insertAdjacentElement("afterend", r.$replyAt);
 }
 function renderReplyTo(r) {
-  if (!r.cConf.isFlatMode)
+  if (!r.opts.flatMode)
     return;
-  if (!r.cConf.replyTo)
+  if (!r.opts.replyTo)
     return;
   r.$replyTo = createElement(`
     <div class="atk-reply-to">
-      <div class="atk-meta">${r.ctx.$t("reply")} <span class="atk-nick"></span>:</div>
+      <div class="atk-meta">${t("reply")} <span class="atk-nick"></span>:</div>
       <div class="atk-content"></div>
     </div>`);
   const $nick = r.$replyTo.querySelector(".atk-nick");
-  $nick.innerText = `@${r.cConf.replyTo.nick}`;
+  $nick.innerText = `@${r.opts.replyTo.nick}`;
   $nick.onclick = () => {
     r.comment.getActions().goToReplyComment();
   };
-  let replyContent = marked(r.cConf.replyTo.content);
-  if (r.cConf.replyTo.is_collapsed)
-    replyContent = `[${r.ctx.$t("collapsed")}]`;
+  let replyContent = marked(r.opts.replyTo.content);
+  if (r.opts.replyTo.is_collapsed)
+    replyContent = `[${t("collapsed")}]`;
   r.$replyTo.querySelector(".atk-content").innerHTML = replyContent;
   r.$body.prepend(r.$replyTo);
 }
 function renderPending(r) {
   if (!r.data.is_pending)
     return;
-  const pendingEl = createElement(`<div class="atk-pending">${r.ctx.$t("pendingMsg")}</div>`);
+  const pendingEl = createElement(`<div class="atk-pending">${t("pendingMsg")}</div>`);
   r.$body.prepend(pendingEl);
 }
 class ActionBtn {
@@ -4523,14 +4550,14 @@ function renderActions(r) {
   });
 }
 function renderVote(r) {
-  if (!r.ctx.conf.vote)
+  if (!r.opts.vote)
     return;
-  r.voteBtnUp = new ActionBtn(() => `${r.ctx.$t("voteUp")} (${r.data.vote_up || 0})`).appendTo(r.$actions);
+  r.voteBtnUp = new ActionBtn(() => `${t("voteUp")} (${r.data.vote_up || 0})`).appendTo(r.$actions);
   r.voteBtnUp.setClick(() => {
     r.comment.getActions().vote("up");
   });
-  if (r.ctx.conf.voteDown) {
-    r.voteBtnDown = new ActionBtn(() => `${r.ctx.$t("voteDown")} (${r.data.vote_down || 0})`).appendTo(r.$actions);
+  if (r.opts.voteDown) {
+    r.voteBtnDown = new ActionBtn(() => `${t("voteDown")} (${r.data.vote_down || 0})`).appendTo(r.$actions);
     r.voteBtnDown.setClick(() => {
       r.comment.getActions().vote("down");
     });
@@ -4539,20 +4566,16 @@ function renderVote(r) {
 function renderReply(r) {
   if (!r.data.is_allow_reply)
     return;
-  const replyBtn = createElement(`<span>${r.ctx.$t("reply")}</span>`);
+  const replyBtn = createElement(`<span>${t("reply")}</span>`);
   r.$actions.append(replyBtn);
   replyBtn.addEventListener("click", (e) => {
     e.stopPropagation();
-    if (!r.cConf.onReplyBtnClick) {
-      r.ctx.replyComment(r.data, r.$el);
-    } else {
-      r.cConf.onReplyBtnClick();
-    }
+    r.opts.replyComment(r.data, r.$el);
   });
 }
 function renderCollapse(r) {
   const collapseBtn = new ActionBtn({
-    text: () => r.data.is_collapsed ? r.ctx.$t("expand") : r.ctx.$t("collapse"),
+    text: () => r.data.is_collapsed ? t("expand") : t("collapse"),
     adminOnly: true
   });
   collapseBtn.appendTo(r.$actions);
@@ -4562,7 +4585,7 @@ function renderCollapse(r) {
 }
 function renderModerator(r) {
   const pendingBtn = new ActionBtn({
-    text: () => r.data.is_pending ? r.ctx.$t("pending") : r.ctx.$t("approved"),
+    text: () => r.data.is_pending ? t("pending") : t("approved"),
     adminOnly: true
   });
   pendingBtn.appendTo(r.$actions);
@@ -4572,7 +4595,7 @@ function renderModerator(r) {
 }
 function renderPin(r) {
   const pinnedBtn = new ActionBtn({
-    text: () => r.data.is_pinned ? r.ctx.$t("unpin") : r.ctx.$t("pin"),
+    text: () => r.data.is_pinned ? t("unpin") : t("pin"),
     adminOnly: true
   });
   pinnedBtn.appendTo(r.$actions);
@@ -4582,19 +4605,19 @@ function renderPin(r) {
 }
 function renderEdit(r) {
   const editBtn = new ActionBtn({
-    text: r.ctx.$t("edit"),
+    text: t("edit"),
     adminOnly: true
   });
   editBtn.appendTo(r.$actions);
   editBtn.setClick(() => {
-    r.ctx.editComment(r.data, r.$el);
+    r.opts.editComment(r.data, r.$el);
   });
 }
 function renderDel(r) {
   const delBtn = new ActionBtn({
-    text: r.ctx.$t("delete"),
+    text: t("delete"),
     confirm: true,
-    confirmText: r.ctx.$t("deleteConfirm"),
+    confirmText: t("deleteConfirm"),
     adminOnly: true
   });
   delBtn.appendTo(r.$actions);
@@ -4636,18 +4659,21 @@ class Render {
     __publicField(this, "$replyAt");
     this.comment = comment;
   }
-  get ctx() {
-    return this.comment.ctx;
-  }
   get data() {
     return this.comment.getData();
   }
-  get conf() {
-    return this.comment.conf;
-  }
-  get cConf() {
-    return this.comment.getConf();
+  get opts() {
+    return this.comment.getOpts();
   }
+  /**
+   * Render the comment ui
+   *
+   * If comment data is updated, call this method to re-render the comment ui.
+   * The method will be called multiple times, so it should be idempotent.
+   *
+   * Renders may add event listeners to the comment ui, so it should be called only once or override the original.
+   * Please be aware of the memory leak caused by the event listener.
+   */
   render() {
     this.$el = createElement(CommentHTML);
     this.$main = this.$el.querySelector(".atk-main");
@@ -4657,12 +4683,14 @@ class Render {
     this.$actions = this.$el.querySelector(".atk-actions");
     this.$el.setAttribute("id", `atk-comment-${this.data.id}`);
     loadRenders(this);
-    this.recoveryChildrenWrap();
+    if (this.$childrenWrap) {
+      this.$main.append(this.$childrenWrap);
+    }
     return this.$el;
   }
   /** 内容限高检测 */
   checkHeightLimit() {
-    const conf = this.ctx.conf.heightLimit;
+    const conf = this.opts.heightLimit;
     if (!conf || !conf.content || !conf.children)
       return;
     const contentMaxH = conf.content;
@@ -4696,24 +4724,21 @@ class Render {
   playFadeAnimForBody() {
     playFadeInAnim(this.comment.getRender().$body);
   }
+  /** Perform the flash animation */
+  playFlashAnim() {
+    this.$el.classList.remove("atk-flash-once");
+    window.setTimeout(() => {
+      this.$el.classList.add("atk-flash-once");
+    }, 150);
+  }
   /** 获取子评论 Wrap */
   getChildrenWrap() {
-    return this.$childrenWrap;
-  }
-  /** 初始化子评论区域 Wrap */
-  renderChildrenWrap() {
     if (!this.$childrenWrap) {
       this.$childrenWrap = createElement('<div class="atk-comment-children"></div>');
       this.$main.append(this.$childrenWrap);
     }
     return this.$childrenWrap;
   }
-  /** 恢复原有的子评论区域 Wrap */
-  recoveryChildrenWrap() {
-    if (this.$childrenWrap) {
-      this.$main.append(this.$childrenWrap);
-    }
-  }
   /** 设置已读 */
   setUnread(val) {
     if (val)
@@ -4732,17 +4757,15 @@ class Render {
   setOpenURL(url) {
     this.setOpenable(true);
     this.$el.onclick = (evt) => {
-      evt.preventDefault();
+      evt.stopPropagation();
       window.open(url);
-      if (this.cConf.openEvt)
-        this.cConf.openEvt();
     };
   }
   /** 设置点击评论时的操作 */
   setOpenAction(action) {
     this.setOpenable(true);
     this.$el.onclick = (evt) => {
-      evt.preventDefault();
+      evt.stopPropagation();
       action();
     };
   }
@@ -4752,26 +4775,26 @@ class CommentActions {
     __publicField(this, "comment");
     this.comment = comment;
   }
-  get ctx() {
-    return this.comment.ctx;
-  }
   get data() {
     return this.comment.getData();
   }
-  get cConf() {
-    return this.comment.getConf();
+  get opts() {
+    return this.comment.getOpts();
+  }
+  getApi() {
+    return this.comment.getOpts().getApi();
   }
   /** 投票操作 */
   vote(type) {
     const actionBtn = type === "up" ? this.comment.getRender().voteBtnUp : this.comment.getRender().voteBtnDown;
-    this.ctx.getApi().votes.vote(`comment_${type}`, this.data.id, __spreadValues({}, this.ctx.getApi().getUserFields())).then((res) => {
+    this.getApi().votes.vote(`comment_${type}`, this.data.id, __spreadValues({}, this.getApi().getUserFields())).then((res) => {
       var _a, _b;
       this.data.vote_up = res.data.up;
       this.data.vote_down = res.data.down;
       (_a = this.comment.getRender().voteBtnUp) == null ? void 0 : _a.updateText();
       (_b = this.comment.getRender().voteBtnDown) == null ? void 0 : _b.updateText();
     }).catch((err) => {
-      actionBtn == null ? void 0 : actionBtn.setError(this.ctx.$t("voteFail"));
+      actionBtn == null ? void 0 : actionBtn.setError(t("voteFail"));
       console.log(err);
     });
   }
@@ -4779,7 +4802,7 @@ class CommentActions {
   adminEdit(type, btnElem) {
     if (btnElem.isLoading)
       return;
-    btnElem.setLoading(true, `${this.ctx.$t("editing")}...`);
+    btnElem.setLoading(true, `${t("editing")}...`);
     const modify = __spreadValues({}, this.data);
     if (type === "collapsed") {
       modify.is_collapsed = !modify.is_collapsed;
@@ -4788,26 +4811,26 @@ class CommentActions {
     } else if (type === "pinned") {
       modify.is_pinned = !modify.is_pinned;
     }
-    this.ctx.getApi().comments.updateComment(this.data.id, __spreadValues({}, modify)).then((res) => {
+    this.getApi().comments.updateComment(this.data.id, __spreadValues({}, modify)).then((res) => {
       btnElem.setLoading(false);
       this.comment.setData(res.data);
     }).catch((err) => {
       console.error(err);
-      btnElem.setError(this.ctx.$t("editFail"));
+      btnElem.setError(t("editFail"));
     });
   }
   /** 管理员 - 评论删除 */
   adminDelete(btnElem) {
     if (btnElem.isLoading)
       return;
-    btnElem.setLoading(true, `${this.ctx.$t("deleting")}...`);
-    this.ctx.getApi().comments.deleteComment(this.data.id).then(() => {
+    btnElem.setLoading(true, `${t("deleting")}...`);
+    this.getApi().comments.deleteComment(this.data.id).then(() => {
       btnElem.setLoading(false);
-      if (this.cConf.onDelete)
-        this.cConf.onDelete(this.comment);
+      if (this.opts.onDelete)
+        this.opts.onDelete(this.comment);
     }).catch((e) => {
       console.error(e);
-      btnElem.setError(this.ctx.$t("deleteFail"));
+      btnElem.setError(t("deleteFail"));
     });
   }
   /** 快速跳转到该评论 */
@@ -4819,21 +4842,18 @@ class CommentActions {
       window.dispatchEvent(new Event("hashchange"));
   }
 }
-class CommentNode extends Component {
-  // 最大嵌套层数
-  constructor(ctx, data, conf) {
-    super(ctx);
+class CommentNode {
+  // 当前嵌套层数
+  constructor(data, opts) {
+    __publicField(this, "$el");
     __publicField(this, "renderInstance");
     __publicField(this, "actionInstance");
     __publicField(this, "data");
-    __publicField(this, "cConf");
+    __publicField(this, "opts");
     __publicField(this, "parent");
     __publicField(this, "children", []);
     __publicField(this, "nestCurt");
-    // 当前嵌套层数
-    __publicField(this, "nestMax");
-    this.nestMax = ctx.conf.nestMax || 3;
-    this.cConf = conf;
+    this.opts = opts;
     this.data = __spreadValues({}, data);
     this.data.date = this.data.date.replace(/-/g, "/");
     this.parent = null;
@@ -4847,8 +4867,8 @@ class CommentNode extends Component {
     if (this.$el)
       this.$el.replaceWith(newEl);
     this.$el = newEl;
-    if (this.cConf.afterRender)
-      this.cConf.afterRender();
+    if (this.opts.onAfterRender)
+      this.opts.onAfterRender();
   }
   /** 获取评论操作实例对象 */
   getActions() {
@@ -4889,51 +4909,76 @@ class CommentNode extends Component {
     return this.data.id;
   }
   /** 置入子评论 */
-  putChild(childC, insertMode = "append") {
-    childC.parent = this;
-    childC.nestCurt = this.nestCurt + 1;
-    this.children.push(childC);
-    const $children = this.getChildrenEl();
+  putChild(childNode, insertMode = "append") {
+    childNode.parent = this;
+    childNode.nestCurt = this.nestCurt + 1;
+    this.children.push(childNode);
+    const $childrenWrap = this.getChildrenWrapEl();
+    const $childComment = childNode.getEl();
     if (insertMode === "append")
-      $children.append(childC.getEl());
+      $childrenWrap.append($childComment);
     else if (insertMode === "prepend")
-      $children.prepend(childC.getEl());
-    childC.getRender().playFadeAnim();
-    childC.getRender().checkHeightLimit();
+      $childrenWrap.prepend($childComment);
+    childNode.getRender().playFadeAnim();
+    childNode.getRender().checkHeightLimit();
   }
   /** 获取存放子评论的元素对象 */
-  getChildrenEl() {
-    let $children = this.getRender().getChildrenWrap();
-    if (!$children) {
-      if (this.nestCurt < this.nestMax) {
-        $children = this.getRender().renderChildrenWrap();
-      } else {
-        $children = this.parent.getChildrenEl();
-      }
+  getChildrenWrapEl() {
+    if (this.nestCurt >= this.opts.nestMax) {
+      return this.parent.getChildrenWrapEl();
     }
-    return $children;
+    return this.getRender().getChildrenWrap();
   }
   /** 获取所有父评论 */
   getParents() {
-    const parents = [];
-    const once = (c) => {
-      if (c.parent) {
-        parents.push(c.parent);
-        once(c.parent);
-      }
-    };
-    once(this);
-    return parents;
+    const flattenParents = [];
+    let parent = this.parent;
+    while (parent) {
+      flattenParents.push(parent);
+      parent = parent.getParent();
+    }
+    return flattenParents;
   }
-  /** 获取评论元素对象 */
+  /**
+   * Get the element of the comment
+   *
+   * The `getEl()` will always return the latest $el after calling `render()`.
+   * Please be aware of the memory leak if you use the $el reference directly.
+   */
   getEl() {
+    if (!this.$el)
+      throw new Error("comment element not initialized before `getEl()`");
     return this.$el;
   }
+  /**
+   * Focus on the comment
+   *
+   * Scroll to the comment and perform flash animation
+   */
+  focus() {
+    if (!this.$el)
+      throw new Error("comment element not initialized before `focus()`");
+    this.getParents().forEach((p) => {
+      p.getRender().heightLimitRemoveForChildren();
+    });
+    this.scrollIntoView();
+    this.getRender().playFlashAnim();
+  }
+  scrollIntoView() {
+    this.$el && scrollIntoView(this.$el, false, this.opts.scrollRelativeTo && this.opts.scrollRelativeTo());
+  }
+  /**
+   * Remove the comment node
+   */
+  remove() {
+    var _a;
+    (_a = this.$el) == null ? void 0 : _a.remove();
+  }
   /** 获取 Gravatar 头像 URL */
   getGravatarURL() {
     return getGravatarURL({
-      mirror: this.ctx.conf.gravatar.mirror,
-      params: this.ctx.conf.gravatar.params,
+      mirror: this.opts.gravatar.mirror,
+      params: this.opts.gravatar.params,
       emailMD5: this.data.email_encrypted
     });
   }
@@ -4943,7 +4988,7 @@ class CommentNode extends Component {
   }
   /** 获取格式化后的日期 */
   getDateFormatted() {
-    return timeAgo(new Date(this.data.date), this.ctx.$t);
+    return timeAgo(new Date(this.data.date), t);
   }
   /** 获取用户 UserAgent 信息 */
   getUserUA() {
@@ -4954,21 +4999,33 @@ class CommentNode extends Component {
     };
   }
   /** 获取配置 */
-  getConf() {
-    return this.cConf;
+  getOpts() {
+    return this.opts;
   }
 }
-function createComment(ctx, comment, ctxComments) {
-  var _a;
-  const instance2 = new CommentNode(ctx, comment, {
-    isFlatMode: (_a = ctx.getData().getListLastFetch()) == null ? void 0 : _a.params.flatMode,
-    afterRender: () => {
+function createCommentNode(ctx, comment, replyComment, opts) {
+  const instance2 = new CommentNode(comment, {
+    onAfterRender: () => {
       ctx.trigger("comment-rendered", instance2);
     },
     onDelete: (c) => {
       ctx.getData().deleteComment(c.getID());
     },
-    replyTo: comment.rid ? ctxComments.find((c) => c.id === comment.rid) : void 0
+    replyTo: replyComment,
+    // TODO simplify reference
+    flatMode: typeof (opts == null ? void 0 : opts.forceFlatMode) === "boolean" ? opts == null ? void 0 : opts.forceFlatMode : ctx.conf.flatMode,
+    gravatar: ctx.conf.gravatar,
+    nestMax: ctx.conf.nestMax,
+    heightLimit: ctx.conf.heightLimit,
+    avatarURLBuilder: ctx.conf.avatarURLBuilder,
+    scrollRelativeTo: ctx.conf.scrollRelativeTo,
+    vote: ctx.conf.vote,
+    voteDown: ctx.conf.voteDown,
+    uaBadge: ctx.conf.uaBadge,
+    // TODO: move to plugin folder and remove from core
+    getApi: () => ctx.getApi(),
+    replyComment: (c, $el) => ctx.replyComment(c, $el),
+    editComment: (c, $el) => ctx.editComment(c, $el)
   });
   instance2.render();
   return instance2;
@@ -5344,20 +5401,19 @@ class List extends Component {
   getCommentNodes() {
     return this.commentNodes;
   }
-  getListLayout() {
+  getListLayout({ forceFlatMode } = {}) {
     return new ListLayout({
       $commentsWrap: this.$commentsWrap,
       nestSortBy: this.ctx.conf.nestSort,
       nestMax: this.ctx.conf.nestMax,
-      flatMode: this.ctx.conf.flatMode,
+      flatMode: typeof forceFlatMode === "boolean" ? forceFlatMode : this.ctx.conf.flatMode,
       // flatMode must be boolean because it had been handled when Artalk.init
-      createCommentNode: (d, c) => {
-        const node = createComment(this.ctx, d, c);
+      createCommentNode: (d, r) => {
+        const node = createCommentNode(this.ctx, d, r, { forceFlatMode });
         this.commentNodes.push(node);
         return node;
       },
-      findCommentNode: (id) => this.commentNodes.find((c) => c.getID() === id),
-      getCommentDataList: () => this.ctx.getData().getComments()
+      findCommentNode: (id) => this.commentNodes.find((c) => c.getID() === id)
     });
   }
   initCrudEvents() {
@@ -5365,8 +5421,10 @@ class List extends Component {
       this.getListLayout().import(comments);
     });
     this.ctx.on("list-loaded", (comments) => {
-      if (comments.length === 0)
+      if (comments.length === 0) {
+        this.commentNodes = [];
         this.$commentsWrap.innerHTML = "";
+      }
     });
     this.ctx.on("comment-inserted", (comment) => {
       this.getListLayout().insert(comment);
@@ -5377,7 +5435,7 @@ class List extends Component {
         console.error(`comment node id=${comment.id} not found`);
         return;
       }
-      node.getEl().remove();
+      node.remove();
       this.commentNodes = this.commentNodes.filter((c) => c.getID() !== comment.id);
     });
     this.ctx.on("comment-updated", (comment) => {
@@ -6862,62 +6920,50 @@ const UnreadBadge = (ctx) => {
     showUnreadBadge(notifies.length || 0);
   });
 };
-const Goto = (ctx) => {
-  let delayGoto = true;
-  const check2 = () => {
+const GotoDispatcher = (ctx) => {
+  let lastID = 0;
+  const check2 = ({ locker }) => {
     const commentID = extractCommentID();
     if (!commentID)
       return;
+    if (locker && lastID === commentID)
+      return;
+    lastID = commentID;
     ctx.trigger("list-goto", commentID);
-    delayGoto = true;
-  };
-  const hashChangeHandler = () => {
-    delayGoto = false;
-    check2();
   };
+  const hashChangeHandler = () => check2({ locker: false });
+  const listLoadedHandler = () => check2({ locker: true });
   ctx.on("mounted", () => {
     window.addEventListener("hashchange", hashChangeHandler);
-    ctx.on("list-loaded", check2);
+    ctx.on("list-loaded", listLoadedHandler);
   });
   ctx.on("unmounted", () => {
     window.removeEventListener("hashchange", hashChangeHandler);
-    ctx.off("list-loaded", check2);
-  });
-  let foundID = 0;
-  ctx.on("list-goto", (commentID) => {
-    if (foundID === commentID)
-      return;
-    const comment = ctx.get("list").getCommentNodes().find((c) => c.getID() === commentID);
-    if (!comment)
-      return;
-    foundID = commentID;
-    comment.getParents().forEach((p) => {
-      p.getRender().heightLimitRemoveForChildren();
-    });
-    const goTo = () => {
-      scrollIntoView(comment.getEl(), false);
-      comment.getEl().classList.remove("atk-flash-once");
-      window.setTimeout(() => {
-        comment.getEl().classList.add("atk-flash-once");
-      }, 150);
-    };
-    if (!delayGoto)
-      goTo();
-    else
-      window.setTimeout(() => goTo(), 350);
+    ctx.off("list-loaded", listLoadedHandler);
   });
 };
 function extractCommentID() {
-  let commentId = Number(getQueryParam("atk_comment"));
+  const match = window.location.hash.match(/#atk-comment-([0-9]+)/);
+  let commentId = match && match[1] && !Number.isNaN(parseFloat(match[1])) ? parseFloat(match[1]) : null;
   if (!commentId) {
-    const match = window.location.hash.match(/#atk-comment-([0-9]+)/);
-    if (!match || !match[1] || Number.isNaN(Number(match[1])))
-      return null;
-    commentId = Number(match[1]);
+    commentId = Number(getQueryParam("atk_comment"));
   }
   return commentId || null;
 }
-const version = "2.8.0";
+const GotoFocus = (ctx) => {
+  ctx.on("list-goto", (commentID) => __async(void 0, null, function* () {
+    let comment = ctx.getCommentNodes().find((c) => c.getID() === commentID);
+    if (!comment) {
+      const data = (yield ctx.getApi().comments.getComment(commentID)).data;
+      ctx.get("list").getListLayout({ forceFlatMode: true }).insert(data.comment, data.reply_comment);
+      comment = ctx.getCommentNodes().find((c) => c.getID() === commentID);
+    }
+    if (!comment)
+      return;
+    comment.focus();
+  }));
+};
+const version = "2.8.1";
 const Copyright = (ctx) => {
   ctx.on("mounted", () => {
     const list = ctx.get("list");
@@ -6928,14 +6974,7 @@ const Copyright = (ctx) => {
   });
 };
 const NoComment = (ctx) => {
-  let isFetching = false;
-  ctx.on("list-fetch", (params) => {
-    isFetching = true;
-  });
   ctx.on("list-loaded", (comments) => {
-    if (!isFetching)
-      return;
-    isFetching = false;
     const list = ctx.get("list");
     const isNoComment = comments.length <= 0;
     let $noComment = list.getCommentsWrapEl().querySelector(".atk-list-no-comment");
@@ -7187,7 +7226,8 @@ const ListPlugins = [
   SidebarBtn,
   UnreadBadge,
   Dropdown,
-  Goto,
+  GotoDispatcher,
+  GotoFocus,
   NoComment,
   Copyright,
   TimeTicking,
@@ -7211,6 +7251,7 @@ const PvCountWidget = (ctx) => {
   ctx.watchConf([
     "site",
     "pageKey",
+    "pageTitle",
     "countEl",
     "pvEl"
   ], (conf) => {
@@ -7218,6 +7259,7 @@ const PvCountWidget = (ctx) => {
       getApi: () => ctx.getApi(),
       siteName: conf.site,
       pageKey: conf.pageKey,
+      pageTitle: conf.pageTitle,
       countEl: conf.countEl,
       pvEl: conf.pvEl,
       pvAdd: typeof ctx.conf.pvAdd === "boolean" ? ctx.conf.pvAdd : true
@@ -7229,10 +7271,10 @@ function initCountWidget(opt) {
     if (opt.countEl && document.querySelector(opt.countEl)) {
       refreshStatCount(opt, { query: "page_comment", numEl: opt.countEl });
     }
-    const initialData = opt.pvAdd ? {
+    const initialData = opt.pvAdd && opt.pageKey ? {
       [opt.pageKey]: (yield opt.getApi().pages.logPv({
         page_key: opt.pageKey,
-        page_title: opt.pageKey,
+        page_title: opt.pageTitle,
         site_name: opt.siteName
       })).data.pv
       // pv+1 and get pv count
@@ -7249,7 +7291,7 @@ function initCountWidget(opt) {
 function refreshStatCount(opt, args) {
   return __async(this, null, function* () {
     let data = args.data || {};
-    let queryPageKeys = Array.from(document.querySelectorAll(args.numEl)).map((e) => e.getAttribute("data-page-key") || opt.pageKey).filter((k) => typeof data[k] !== "number");
+    let queryPageKeys = Array.from(document.querySelectorAll(args.numEl)).map((e) => e.getAttribute("data-page-key") || opt.pageKey).filter((k) => k && typeof data[k] !== "number");
     queryPageKeys = [...new Set(queryPageKeys)];
     if (queryPageKeys.length > 0) {
       const res = (yield opt.getApi().stats.getStats(args.query, {
@@ -7258,7 +7300,8 @@ function refreshStatCount(opt, args) {
       })).data.data;
       data = __spreadValues(__spreadValues({}, data), res);
     }
-    applyCountData(args.numEl, data, data[opt.pageKey]);
+    const defaultCount = opt.pageKey ? data[opt.pageKey] : 0;
+    applyCountData(args.numEl, data, defaultCount);
   });
 }
 function applyCountData(selector, data, defaultCount) {
@@ -7447,7 +7490,6 @@ class Artalk {
     initCountWidget({
       getApi: () => new Api2(convertApiOptions(conf)),
       siteName: conf.site,
-      pageKey: conf.pageKey,
       countEl: conf.countEl,
       pvEl: conf.pvEl,
       pvAdd: false