artalk 2.8.3 → 2.8.5

package/dist/ArtalkLite.mjs

@@ -1706,7 +1706,7 @@ function getDefaultExportFromCjs(x) {
 const Fetch$1 = (opts, input, init2) => __async(void 0, null, function* () {
   const apiToken = opts.getApiToken && opts.getApiToken();
   const headers = new Headers(__spreadValues({
-    "Authorization": apiToken ? `Bearer ${apiToken}` : ""
+    Authorization: apiToken ? `Bearer ${apiToken}` : ""
   }, init2 == null ? void 0 : init2.headers));
   if (!headers.get("Authorization"))
     headers.delete("Authorization");
@@ -2322,7 +2322,10 @@ function getRenderer() {
 const markedLinkRenderer = (renderer, orgLinkRenderer) => (href, title, text) => {
   const localLink = href == null ? void 0 : href.startsWith(`${window.location.protocol}//${window.location.hostname}`);
   const html = orgLinkRenderer.call(renderer, href, title, text);
-  return html.replace(/^<a /, `<a target="_blank" ${!localLink ? `rel="noreferrer noopener nofollow"` : ""} `);
+  return html.replace(
+    /^<a /,
+    `<a target="_blank" ${!localLink ? `rel="noreferrer noopener nofollow"` : ""} `
+  );
 };
 const markedCodeRenderer = () => (block, lang) => {
   const realLang = !lang ? "plaintext" : lang;
@@ -2377,7 +2380,13 @@ function marked(src) {
   return dest;
 }
 function simpleMarked(src) {
-  return src.replace(/```\s*([^]+?.*?[^]+?[^]+?)```/g, (_, code) => `<pre><code>${renderCode(code)}</code></pre>`).replace(/!\[(.*?)\]\((.*?)\)/g, (_, alt, imgSrc) => `<img src="${imgSrc}" alt="${alt}" />`).replace(/\[(.*?)\]\((.*?)\)/g, (_, text, link) => `<a href="${link}" target="_blank">${text}</a>`).replace(/\n/g, "<br>");
+  return src.replace(
+    /```\s*([^]+?.*?[^]+?[^]+?)```/g,
+    (_, code) => `<pre><code>${renderCode(code)}</code></pre>`
+  ).replace(/!\[(.*?)\]\((.*?)\)/g, (_, alt, imgSrc) => `<img src="${imgSrc}" alt="${alt}" />`).replace(
+    /\[(.*?)\]\((.*?)\)/g,
+    (_, text, link) => `<a href="${link}" target="_blank">${text}</a>`
+  ).replace(/\n/g, "<br>");
 }
 function mergeDeep(...objects) {
   const isObject = (obj) => obj && typeof obj === "object" && obj.constructor === Object;
@@ -2560,7 +2569,7 @@ const en = {
   deleteFail: "Delete Failed",
   reqGot: "Request got",
   reqAborted: "Request timed out or terminated unexpectedly",
-  updateMsg: "Please update Artalk {name} to get the full experience",
+  updateMsg: "Please update Artalk {name} to get the best experience!",
   currentVersion: "Current Version",
   ignore: "Ignore",
   open: "Open",
@@ -2641,7 +2650,7 @@ const zhCN = {
   deleteFail: "删除失败",
   reqGot: "请求响应",
   reqAborted: "请求超时或意外终止",
-  updateMsg: "请更新 Artalk {name} 以获得完整体验",
+  updateMsg: "请更新 Artalk {name} 以获得更好的体验！",
   currentVersion: "当前版本",
   ignore: "忽略",
   open: "打开",
@@ -2795,7 +2804,10 @@ function getCorrectUserAgent() {
     }
     if (uaData.platform === "macOS") {
       if (majorPlatformVersion >= 11) {
-        return uaRaw.replace(/(Mac OS X \d+_\d+_\d+|Mac OS X)/, `Mac OS X ${uaGot.platformVersion.replace(/\./g, "_")}`);
+        return uaRaw.replace(
+          /(Mac OS X \d+_\d+_\d+|Mac OS X)/,
+          `Mac OS X ${uaGot.platformVersion.replace(/\./g, "_")}`
+        );
       }
     }
     return uaRaw;
@@ -2817,7 +2829,7 @@ function getURLBasedOn(baseURL, path) {
   return `${baseURL.replace(/\/$/, "")}/${path.replace(/^\//, "")}`;
 }
 const internal = {
-  "en": en,
+  en,
   "en-US": en,
   "zh-CN": zhCN
 };
@@ -2855,7 +2867,10 @@ class EventManager {
    * Add an event listener for a specific event name
    */
   on(name, handler, opts = {}) {
-    this.events.push(__spreadValues({ name, handler }, opts));
+    this.events.push(__spreadValues({
+      name,
+      handler
+    }, opts));
   }
   /**
    * Remove an event listener for a specific event name and handler
@@ -3333,7 +3348,9 @@ function imgBody(checker) {
 }
 function iframeBody(checker) {
   const $iframeWrap = createElement(`<div class="atk-checker-iframe-wrap"></div>`);
-  const $iframe = createElement(`<iframe class="atk-fade-in" referrerpolicy="strict-origin-when-cross-origin"></iframe>`);
+  const $iframe = createElement(
+    `<iframe class="atk-fade-in" referrerpolicy="strict-origin-when-cross-origin"></iframe>`
+  );
   $iframe.style.display = "none";
   showLoading($iframeWrap, { transparentBg: true });
   $iframe.src = checker.getOpts().getCaptchaIframeURL();
@@ -3342,7 +3359,9 @@ function iframeBody(checker) {
     hideLoading($iframeWrap);
   };
   $iframeWrap.append($iframe);
-  const $closeBtn = createElement(`<div class="atk-close-btn"><i class="atk-icon atk-icon-close"></i></div>`);
+  const $closeBtn = createElement(
+    `<div class="atk-close-btn"><i class="atk-icon atk-icon-close"></i></div>`
+  );
   $iframeWrap.append($closeBtn);
   checker.hideInteractInput();
   let stop = false;
@@ -3554,7 +3573,7 @@ class Component {
     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-bottom-left">\n      <span class="atk-state-wrap"></span>\n      <span class="atk-plug-btn-wrap"></span>\n    </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 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-bottom-left">\n      <span class="atk-state-wrap"></span>\n      <span class="atk-plug-btn-wrap"></span>\n    </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 = {
   $header: ".atk-header",
   $nick: '.atk-header [name="nick"]',
@@ -3728,7 +3747,9 @@ class Editor extends Component {
       const sStart = this.ui.$textarea.selectionStart;
       const sEnd = this.ui.$textarea.selectionEnd;
       const sT = this.ui.$textarea.scrollTop;
-      this.setContent(this.ui.$textarea.value.substring(0, sStart) + val + this.ui.$textarea.value.substring(sEnd, this.ui.$textarea.value.length));
+      this.setContent(
+        this.ui.$textarea.value.substring(0, sStart) + val + this.ui.$textarea.value.substring(sEnd, this.ui.$textarea.value.length)
+      );
       this.ui.$textarea.focus();
       this.ui.$textarea.selectionStart = sStart + val.length;
       this.ui.$textarea.selectionEnd = sStart + val.length;
@@ -3772,7 +3793,7 @@ class Editor extends Component {
     }
   }
 }
-const SidebarHTML = '<div class="atk-sidebar-layer">\n  <div class="atk-sidebar-inner">\n    <div class="atk-sidebar-header">\n      <div class="atk-sidebar-close"><i class="atk-icon atk-icon-close-slim"></i></div>\n    </div>\n    <div class="atk-sidebar-iframe-wrap"></div>\n  </div>\n</div>\n';
+const SidebarHTML = '<div class="atk-sidebar-layer">\n  <div class="atk-sidebar-inner">\n    <div class="atk-sidebar-header">\n      <div class="atk-sidebar-close">\n        <i class="atk-icon atk-icon-close-slim"></i>\n      </div>\n    </div>\n    <div class="atk-sidebar-iframe-wrap"></div>\n  </div>\n</div>\n';
 class SidebarLayer extends Component {
   constructor(ctx) {
     super(ctx);
@@ -3811,7 +3832,10 @@ class SidebarLayer extends Component {
         const $iframe = this.$iframe;
         const iFrameSrc = $iframe.src;
         if (this.conf.darkMode !== iFrameSrc.includes("darkMode=1")) {
-          this.iframeLoad($iframe, this.conf.darkMode ? iFrameSrc.concat("&darkMode=1") : iFrameSrc.replace("&darkMode=1", ""));
+          this.iframeLoad(
+            $iframe,
+            this.conf.darkMode ? iFrameSrc.concat("&darkMode=1") : iFrameSrc.replace("&darkMode=1", "")
+          );
         }
       }
       this.authCheck({
@@ -3865,7 +3889,9 @@ class SidebarLayer extends Component {
     });
   }
   createIframe(view) {
-    const $iframe = createElement('<iframe referrerpolicy="strict-origin-when-cross-origin"></iframe>');
+    const $iframe = createElement(
+      '<iframe referrerpolicy="strict-origin-when-cross-origin"></iframe>'
+    );
     const baseURL = getURLBasedOnApi({
       base: this.ctx.conf.server,
       path: "/sidebar/"
@@ -3892,7 +3918,7 @@ class SidebarLayer extends Component {
     };
   }
 }
-const ListHTML = '<div class="atk-list">\n  <div class="atk-list-header">\n    <div class="atk-comment-count">\n      <div class="atk-text"></div>\n    </div>\n    <div class="atk-right-action">\n      <span data-action="admin-close-comment" class="atk-hide" atk-only-admin-show></span>\n      <span data-action="open-sidebar" class="atk-hide atk-on">\n        <span class="atk-unread-badge" style="display: none;"></span>\n        <div class="atk-text"></div>\n      </span>\n    </div>\n  </div>\n  <div class="atk-list-body">\n    <div class="atk-list-comments-wrap"></div>\n  </div>\n  <div class="atk-list-footer">\n    <div class="atk-copyright"></div>\n  </div>\n</div>\n';
+const ListHTML = '<div class="atk-list">\n  <div class="atk-list-header">\n    <div class="atk-comment-count">\n      <div class="atk-text"></div>\n    </div>\n    <div class="atk-right-action">\n      <span data-action="admin-close-comment" class="atk-hide" atk-only-admin-show></span>\n      <span data-action="open-sidebar" class="atk-hide atk-on">\n        <span class="atk-unread-badge" style="display: none"></span>\n        <div class="atk-text"></div>\n      </span>\n    </div>\n  </div>\n  <div class="atk-list-body">\n    <div class="atk-list-comments-wrap"></div>\n  </div>\n  <div class="atk-list-footer">\n    <div class="atk-copyright"></div>\n  </div>\n</div>\n';
 function makeNestCommentNodeList(srcData, sortBy = "DATE_DESC", nestMax = 2) {
   const nodeList = [];
   const roots = srcData.filter((o) => o.rid === 0);
@@ -3954,8 +3980,9 @@ const createNestStrategy = (opts) => ({
       rootC.getRender().playFadeAnim();
       const loadChildren = (parentC, parentNode) => {
         parentNode.children.forEach((node) => {
+          const replyD = comments.find((c) => c.id === node.comment.rid);
           const childD = node.comment;
-          const childC = opts.createCommentNode(childD, parentC.getData());
+          const childC = opts.createCommentNode(childD, replyD);
           parentC.putChild(childC);
           loadChildren(childC, node);
         });
@@ -4217,16 +4244,16 @@ function Detect(userAgent) {
   return dest;
 }
 function check(conf, rules) {
-  rules.forEach(({
-    el,
-    max: maxHeight,
-    imgContains
-  }) => {
+  rules.forEach(({ el, max: maxHeight, imgContains }) => {
     const _apply = () => {
       if (!el)
         return;
       if (!conf.scrollable)
-        applyHeightLimit({ el, maxHeight, postBtnClick: conf.postExpandBtnClick });
+        applyHeightLimit({
+          el,
+          maxHeight,
+          postBtnClick: conf.postExpandBtnClick
+        });
       else
         applyScrollableHeightLimit({ el, maxHeight });
     };
@@ -4250,7 +4277,9 @@ function applyHeightLimit(obj) {
   obj.el.classList.add(HEIGHT_LIMIT_CSS);
   obj.el.style.height = `${obj.maxHeight}px`;
   obj.el.style.overflow = "hidden";
-  const $expandBtn = createElement(`<div class="atk-height-limit-btn">${t("readMore")}</span>`);
+  const $expandBtn = createElement(
+    `<div class="atk-height-limit-btn">${t("readMore")}</span>`
+  );
   $expandBtn.onclick = (e) => {
     e.stopPropagation();
     disposeHeightLimit(obj.el);
@@ -4288,7 +4317,9 @@ function renderAvatar(r) {
   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>');
+    const $avatarA = createElement(
+      '<a target="_blank" rel="noreferrer noopener nofollow"></a>'
+    );
     $avatarA.href = isValidURL(r.data.link) ? r.data.link : `https://${r.data.link}`;
     $avatarA.append($avatarImg);
     $avatar.append($avatarA);
@@ -4309,7 +4340,9 @@ function renderHeader(r) {
 function renderNick(r) {
   r.$headerNick = r.$el.querySelector(".atk-nick");
   if (r.data.link) {
-    const $nickA = createElement('<a target="_blank" rel="noreferrer noopener nofollow"></a>');
+    const $nickA = createElement(
+      '<a target="_blank" rel="noreferrer noopener nofollow"></a>'
+    );
     $nickA.innerText = r.data.nick;
     $nickA.href = isValidURL(r.data.link) ? r.data.link : `https://${r.data.link}`;
     r.$headerNick.append($nickA);
@@ -4328,7 +4361,9 @@ function renderVerifyBadge(ctx) {
     $badge.style.backgroundColor = badgeColor || "";
     ctx.$headerBadgeWrap.append($badge);
   } else if (ctx.data.is_verified) {
-    const $verifiedBadge = createElement(`<span class="atk-verified-icon" title="${t("emailVerified")}"></span>`);
+    const $verifiedBadge = createElement(
+      `<span class="atk-verified-icon" title="${t("emailVerified")}"></span>`
+    );
     ctx.$headerBadgeWrap.append($verifiedBadge);
   }
   if (ctx.data.is_pinned) {
@@ -4402,7 +4437,9 @@ function renderReplyAt(r) {
     return;
   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 = 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.opts.replyTo.nick}`;
   r.$replyAt.onclick = () => {
     r.comment.getActions().goToReplyComment();
@@ -4593,7 +4630,9 @@ function renderVote(r) {
     r.comment.getActions().vote("up");
   });
   if (r.opts.voteDown) {
-    r.voteBtnDown = new ActionBtn(() => `${t("voteDown")} (${r.data.vote_down || 0})`).appendTo(r.$actions);
+    r.voteBtnDown = new ActionBtn(() => `${t("voteDown")} (${r.data.vote_down || 0})`).appendTo(
+      r.$actions
+    );
     r.voteBtnDown.setClick(() => {
       r.comment.getActions().vote("down");
     });
@@ -4731,20 +4770,23 @@ class Render {
       return;
     const contentMaxH = conf.content;
     const childrenMaxH = conf.children;
-    check({
-      postExpandBtnClick: () => {
-        const children = this.comment.getChildren();
-        if (children.length === 1)
-          disposeHeightLimit(children[0].getRender().$content);
+    check(
+      {
+        postExpandBtnClick: () => {
+          const children = this.comment.getChildren();
+          if (children.length === 1)
+            disposeHeightLimit(children[0].getRender().$content);
+        },
+        scrollable: conf.scrollable
       },
-      scrollable: conf.scrollable
-    }, [
-      // 评论内容限高
-      { el: this.$content, max: contentMaxH, imgContains: true },
-      { el: this.$replyTo, max: contentMaxH, imgContains: true },
-      // 子评论区域限高（仅嵌套模式）
-      { el: this.$childrenWrap, max: childrenMaxH, imgContains: false }
-    ]);
+      [
+        // 评论内容限高
+        { el: this.$content, max: contentMaxH, imgContains: true },
+        { el: this.$replyTo, max: contentMaxH, imgContains: true },
+        // 子评论区域限高（仅嵌套模式）
+        { el: this.$childrenWrap, max: childrenMaxH, imgContains: false }
+      ]
+    );
   }
   /** 子评论区域移除限高 */
   heightLimitRemoveForChildren() {
@@ -5463,7 +5505,9 @@ class List extends Component {
       }
     });
     this.ctx.on("comment-inserted", (comment) => {
-      this.getListLayout().insert(comment);
+      var _a;
+      const replyComment = comment.rid ? (_a = this.commentNodes.find((c) => c.getID() === comment.rid)) == null ? void 0 : _a.getData() : void 0;
+      this.getListLayout().insert(comment, replyComment);
     });
     this.ctx.on("comment-deleted", (comment) => {
       const node = this.commentNodes.find((c) => c.getID() === comment.id);
@@ -5494,7 +5538,10 @@ function getScrollbarHelper() {
     },
     lock() {
       document.body.style.overflow = "hidden";
-      const barPaddingRight = parseInt(window.getComputedStyle(document.body, null).getPropertyValue("padding-right"), 10);
+      const barPaddingRight = parseInt(
+        window.getComputedStyle(document.body, null).getPropertyValue("padding-right"),
+        10
+      );
       document.body.style.paddingRight = `${getScrollBarWidth() + barPaddingRight || 0}px`;
     }
   };
@@ -5705,13 +5752,7 @@ const services = {
   }
 };
 const PvCountWidget = (ctx) => {
-  ctx.watchConf([
-    "site",
-    "pageKey",
-    "pageTitle",
-    "countEl",
-    "pvEl"
-  ], (conf) => {
+  ctx.watchConf(["site", "pageKey", "pageTitle", "countEl", "pvEl"], (conf) => {
     initCountWidget({
       getApi: () => ctx.getApi(),
       siteName: conf.site,
@@ -5778,7 +5819,9 @@ ${opts.errMsg}`;
     errEl.appendChild($retryBtn);
   }
   if (opts.onOpenSidebar) {
-    const $openSidebar = createElement(`<span atk-only-admin-show> | <span style="cursor:pointer;">${t("openName", { name: t("ctrlCenter") })}</span></span>`);
+    const $openSidebar = createElement(
+      `<span atk-only-admin-show> | <span style="cursor:pointer;">${t("openName", { name: t("ctrlCenter") })}</span></span>`
+    );
     errEl.appendChild($openSidebar);
     $openSidebar.onclick = () => opts.onOpenSidebar && opts.onOpenSidebar();
   }
@@ -6121,7 +6164,9 @@ class Closable extends EditorPlug {
   }
   close() {
     if (!this.kit.useUI().$textareaWrap.querySelector(".atk-comment-closed"))
-      this.kit.useUI().$textareaWrap.prepend(createElement(`<div class="atk-comment-closed">${t("onlyAdminCanReply")}</div>`));
+      this.kit.useUI().$textareaWrap.prepend(
+        createElement(`<div class="atk-comment-closed">${t("onlyAdminCanReply")}</div>`)
+      );
     if (!this.kit.useUser().getData().isAdmin) {
       this.kit.useUI().$textarea.style.display = "none";
       this.kit.useEvents().trigger("panel-close");
@@ -6145,8 +6190,14 @@ class HeaderEvent extends EditorPlug {
     };
     this.kit.useMounted(() => {
       Object.entries(this.$inputs).forEach(([key, $input]) => {
-        $input.addEventListener("input", inputEventFns[key] = trigger("header-input", $input, key));
-        $input.addEventListener("change", changeEventFns[key] = trigger("header-change", $input, key));
+        $input.addEventListener(
+          "input",
+          inputEventFns[key] = trigger("header-input", $input, key)
+        );
+        $input.addEventListener(
+          "change",
+          changeEventFns[key] = trigger("header-change", $input, key)
+        );
       });
     });
     this.kit.useUnmounted(() => {
@@ -6196,9 +6247,12 @@ class HeaderUser extends EditorPlug {
       const api = this.kit.useApi();
       const CANCEL_TOKEN = "getUserCancelToken";
       this.query.abortFn = () => api.abortRequest(CANCEL_TOKEN);
-      api.user.getUser(__spreadValues({}, api.getUserFields()), {
-        cancelToken: CANCEL_TOKEN
-      }).then((res) => this.onUserInfoFetched(res.data)).catch((err) => {
+      api.user.getUser(
+        __spreadValues({}, api.getUserFields()),
+        {
+          cancelToken: CANCEL_TOKEN
+        }
+      ).then((res) => this.onUserInfoFetched(res.data)).catch((err) => {
       }).finally(() => {
         this.query.abortFn = null;
       });
@@ -6259,7 +6313,9 @@ class Emoticons extends EditorPlug {
     __publicField(this, "isImgLoaded", false);
     this.kit.useMounted(() => {
       this.usePanel(`<div class="atk-editor-plug-emoticons"></div>`);
-      this.useBtn(`<i aria-label="${t("emoticon")}"><svg fill="currentColor" aria-hidden="true" height="14" viewBox="0 0 14 14" width="14"><path d="m4.26829 5.29294c0-.94317.45893-1.7074 1.02439-1.7074.56547 0 1.02439.76423 1.02439 1.7074s-.45892 1.7074-1.02439 1.7074c-.56546 0-1.02439-.76423-1.02439-1.7074zm4.43903 1.7074c.56546 0 1.02439-.76423 1.02439-1.7074s-.45893-1.7074-1.02439-1.7074c-.56547 0-1.02439.76423-1.02439 1.7074s.45892 1.7074 1.02439 1.7074zm-1.70732 2.73184c-1.51883 0-2.06312-1.52095-2.08361-1.58173l-1.29551.43231c.03414.10244.868 2.51604 3.3798 2.51604 2.51181 0 3.34502-2.41291 3.37982-2.51604l-1.29484-.43573c-.02254.06488-.56683 1.58583-2.08498 1.58583zm7-2.73252c0 3.86004-3.1401 7.00034-7 7.00034s-7-3.1396-7-6.99966c0-3.86009 3.1401-7.00034 7-7.00034s7 3.14025 7 7.00034zm-1.3659 0c0-3.10679-2.5275-5.63442-5.6341-5.63442-3.10663 0-5.63415 2.52832-5.63415 5.6351 0 3.10676 2.52752 5.63446 5.63415 5.63446 3.1066 0 5.6341-2.5277 5.6341-5.63446z"/></svg></i>`);
+      this.useBtn(
+        `<i aria-label="${t("emoticon")}"><svg fill="currentColor" aria-hidden="true" height="14" viewBox="0 0 14 14" width="14"><path d="m4.26829 5.29294c0-.94317.45893-1.7074 1.02439-1.7074.56547 0 1.02439.76423 1.02439 1.7074s-.45892 1.7074-1.02439 1.7074c-.56546 0-1.02439-.76423-1.02439-1.7074zm4.43903 1.7074c.56546 0 1.02439-.76423 1.02439-1.7074s-.45893-1.7074-1.02439-1.7074c-.56547 0-1.02439.76423-1.02439 1.7074s.45892 1.7074 1.02439 1.7074zm-1.70732 2.73184c-1.51883 0-2.06312-1.52095-2.08361-1.58173l-1.29551.43231c.03414.10244.868 2.51604 3.3798 2.51604 2.51181 0 3.34502-2.41291 3.37982-2.51604l-1.29484-.43573c-.02254.06488-.56683 1.58583-2.08498 1.58583zm7-2.73252c0 3.86004-3.1401 7.00034-7 7.00034s-7-3.1396-7-6.99966c0-3.86009 3.1401-7.00034 7-7.00034s7 3.14025 7 7.00034zm-1.3659 0c0-3.10679-2.5275-5.63442-5.6341-5.63442-3.10663 0-5.63415 2.52832-5.63415 5.6351 0 3.10676 2.52752 5.63446 5.63415 5.63446 3.1066 0 5.6341-2.5277 5.6341-5.63446z"/></svg></i>`
+      );
     });
     this.kit.useUnmounted(() => {
     });
@@ -6319,19 +6375,21 @@ class Emoticons extends EditorPlug {
         data.push(grp);
       };
       const remoteLoad = (d) => __async(this, null, function* () {
-        yield Promise.all(d.map((grp, index) => __async(this, null, function* () {
-          if (typeof grp === "object" && !Array.isArray(grp)) {
-            pushGrp(grp);
-          } else if (Array.isArray(grp)) {
-            yield remoteLoad(grp);
-          } else if (typeof grp === "string") {
-            const grpData = yield this.remoteLoad(grp);
-            if (Array.isArray(grpData))
-              yield remoteLoad(grpData);
-            else if (typeof grpData === "object")
-              pushGrp(grpData);
-          }
-        })));
+        yield Promise.all(
+          d.map((grp, index) => __async(this, null, function* () {
+            if (typeof grp === "object" && !Array.isArray(grp)) {
+              pushGrp(grp);
+            } else if (Array.isArray(grp)) {
+              yield remoteLoad(grp);
+            } else if (typeof grp === "string") {
+              const grpData = yield this.remoteLoad(grp);
+              if (Array.isArray(grpData))
+                yield remoteLoad(grpData);
+              else if (typeof grpData === "object")
+                pushGrp(grpData);
+            }
+          }))
+        );
       });
       yield remoteLoad(data);
       data.forEach((item) => {
@@ -6346,7 +6404,9 @@ class Emoticons extends EditorPlug {
           });
         }
       });
-      data = data.filter((item) => typeof item === "object" && !Array.isArray(item) && !!item && !!item.name);
+      data = data.filter(
+        (item) => typeof item === "object" && !Array.isArray(item) && !!item && !!item.name
+      );
       this.solveNullKey(data);
       this.solveSameKey(data);
       return data;
@@ -6414,7 +6474,10 @@ class Emoticons extends EditorPlug {
           if (find && find.length > 1)
             item.icon = find[1];
         }
-        nGrp.items.push({ key: item.text || `${grpName} ${index + 1}`, val: item.icon });
+        nGrp.items.push({
+          key: item.text || `${grpName} ${index + 1}`,
+          val: item.icon
+        });
       });
       dest.push(nGrp);
     });
@@ -6510,7 +6573,9 @@ class Upload extends EditorPlug {
     this.$imgUploadInput.type = "file";
     this.$imgUploadInput.style.display = "none";
     this.$imgUploadInput.accept = AllowImgExts.map((o) => `.${o}`).join(",");
-    const $btn = this.useBtn(`<i aria-label="${t("uploadImage")}"><svg fill="currentColor" aria-hidden="true" height="14" viewBox="0 0 14 14" width="14"><path d="m0 1.94444c0-1.074107.870333-1.94444 1.94444-1.94444h10.11116c1.0741 0 1.9444.870333 1.9444 1.94444v10.11116c0 1.0741-.8703 1.9444-1.9444 1.9444h-10.11116c-1.074107 0-1.94444-.8703-1.94444-1.9444zm1.94444-.38888c-.21466 0-.38888.17422-.38888.38888v7.06689l2.33333-2.33333 2.33333 2.33333 3.88888-3.88889 2.3333 2.33334v-5.51134c0-.21466-.1742-.38888-.3888-.38888zm10.49996 8.09977-2.3333-2.33333-3.88888 3.8889-2.33333-2.33334-2.33333 2.33334v.8447c0 .2146.17422.3888.38888.3888h10.11116c.2146 0 .3888-.1742.3888-.3888zm-7.1944-6.54422c-.75133 0-1.36111.60978-1.36111 1.36111 0 .75134.60978 1.36111 1.36111 1.36111s1.36111-.60977 1.36111-1.36111c0-.75133-.60978-1.36111-1.36111-1.36111z"/></svg></i>`);
+    const $btn = this.useBtn(
+      `<i aria-label="${t("uploadImage")}"><svg fill="currentColor" aria-hidden="true" height="14" viewBox="0 0 14 14" width="14"><path d="m0 1.94444c0-1.074107.870333-1.94444 1.94444-1.94444h10.11116c1.0741 0 1.9444.870333 1.9444 1.94444v10.11116c0 1.0741-.8703 1.9444-1.9444 1.9444h-10.11116c-1.074107 0-1.94444-.8703-1.94444-1.9444zm1.94444-.38888c-.21466 0-.38888.17422-.38888.38888v7.06689l2.33333-2.33333 2.33333 2.33333 3.88888-3.88889 2.3333 2.33334v-5.51134c0-.21466-.1742-.38888-.3888-.38888zm10.49996 8.09977-2.3333-2.33333-3.88888 3.8889-2.33333-2.33334-2.33333 2.33334v.8447c0 .2146.17422.3888.38888.3888h10.11116c.2146 0 .3888-.1742.3888-.3888zm-7.1944-6.54422c-.75133 0-1.36111.60978-1.36111 1.36111 0 .75134.60978 1.36111 1.36111 1.36111s1.36111-.60977 1.36111-1.36111c0-.75133-.60978-1.36111-1.36111-1.36111z"/></svg></i>`
+    );
     $btn.after(this.$imgUploadInput);
     $btn.onclick = () => {
       const $input = this.$imgUploadInput;
@@ -6571,7 +6636,7 @@ class Upload extends EditorPlug {
   uploadImg(file) {
     return __async(this, null, function* () {
       const fileExt = /[^.]+$/.exec(file.name);
-      if (!fileExt || !AllowImgExts.includes(fileExt[0]))
+      if (!fileExt || !AllowImgExts.includes(String(fileExt[0]).toLowerCase()))
         return;
       if (!this.kit.useUser().checkHasBasicUserInfo()) {
         this.kit.useEditor().showNotify(t("uploadLoginMsg"), "w");
@@ -6601,7 +6666,9 @@ class Upload extends EditorPlug {
             base: this.kit.useConf().server,
             path: imgURL
           });
-        this.kit.useEditor().setContent(this.kit.useUI().$textarea.value.replace(uploadPlaceholderTxt, `${insertPrefix}![](${imgURL})`));
+        this.kit.useEditor().setContent(
+          this.kit.useUI().$textarea.value.replace(uploadPlaceholderTxt, `${insertPrefix}![](${imgURL})`)
+        );
       } else {
         this.kit.useEditor().setContent(this.kit.useUI().$textarea.value.replace(uploadPlaceholderTxt, ""));
       }
@@ -6614,7 +6681,9 @@ class Preview extends EditorPlug {
     __publicField(this, "isPlugPanelShow", false);
     this.kit.useMounted(() => {
       this.usePanel(`<div class="atk-editor-plug-preview"></div>`);
-      this.useBtn(`<i aria-label="${t("preview")}"><svg fill="currentColor" aria-hidden="true" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M14.85 3H1.15C.52 3 0 3.52 0 4.15v7.69C0 12.48.52 13 1.15 13h13.69c.64 0 1.15-.52 1.15-1.15v-7.7C16 3.52 15.48 3 14.85 3zM9 11H7V8L5.5 9.92 4 8v3H2V5h2l1.5 2L7 5h2v6zm2.99.5L9.5 8H11V5h2v3h1.5l-2.51 3.5z"></path></svg></i>`);
+      this.useBtn(
+        `<i aria-label="${t("preview")}"><svg fill="currentColor" aria-hidden="true" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M14.85 3H1.15C.52 3 0 3.52 0 4.15v7.69C0 12.48.52 13 1.15 13h13.69c.64 0 1.15-.52 1.15-1.15v-7.7C16 3.52 15.48 3 14.85 3zM9 11H7V8L5.5 9.92 4 8v3H2V5h2l1.5 2L7 5h2v6zm2.99.5L9.5 8H11V5h2v3h1.5l-2.51 3.5z"></path></svg></i>`
+      );
     });
     this.kit.useUnmounted(() => {
     });
@@ -6720,23 +6789,20 @@ class PlugManager {
     __publicField(this, "events", new EventManager());
     this.editor = editor;
     let confLoaded = false;
-    this.editor.ctx.watchConf([
-      "imgUpload",
-      "emoticons",
-      "preview",
-      "editorTravel",
-      "locale"
-    ], (conf) => {
-      confLoaded && this.getEvents().trigger("unmounted");
-      this.clear();
-      getEnabledPlugs(conf).forEach((Plug) => {
-        const kit = new PlugKit(this);
-        this.plugs.push(new Plug(kit));
-      });
-      this.getEvents().trigger("mounted");
-      confLoaded = true;
-      this.loadPluginUI();
-    });
+    this.editor.ctx.watchConf(
+      ["imgUpload", "emoticons", "preview", "editorTravel", "locale"],
+      (conf) => {
+        confLoaded && this.getEvents().trigger("unmounted");
+        this.clear();
+        getEnabledPlugs(conf).forEach((Plug) => {
+          const kit = new PlugKit(this);
+          this.plugs.push(new Plug(kit));
+        });
+        this.getEvents().trigger("mounted");
+        confLoaded = true;
+        this.loadPluginUI();
+      }
+    );
     this.events.on("panel-close", () => this.closePlugPanel());
   }
   getPlugs() {
@@ -6875,7 +6941,9 @@ const Unread = (ctx) => {
     const notifyKey = getQueryParam("atk_notify_key");
     if (notifyKey) {
       ctx.getApi().notifies.markNotifyRead(commentID, notifyKey).then(() => {
-        ctx.getData().updateNotifies(ctx.getData().getNotifies().filter((o) => o.comment_id !== commentID));
+        ctx.getData().updateNotifies(
+          ctx.getData().getNotifies().filter((o) => o.comment_id !== commentID)
+        );
       });
     }
   });
@@ -6887,7 +6955,11 @@ const Count = (ctx) => {
     const $count = list.$el.querySelector(".atk-comment-count .atk-text");
     if (!$count)
       return;
-    const text = htmlEncode(t("counter", { count: `${Number((_b = (_a = ctx.getData().getListLastFetch()) == null ? void 0 : _a.data) == null ? void 0 : _b.count) || 0}` }));
+    const text = htmlEncode(
+      t("counter", {
+        count: `${Number((_b = (_a = ctx.getData().getListLastFetch()) == null ? void 0 : _a.data) == null ? void 0 : _b.count) || 0}`
+      })
+    );
     $count.innerHTML = text.replace(/(\d+)/, '<span class="atk-comment-count-num">$1</span>');
   };
   ctx.on("list-loaded", () => {
@@ -6996,7 +7068,7 @@ const GotoFocus = (ctx) => {
     comment.focus();
   }));
 };
-const version = "2.8.3";
+const version = "2.8.5";
 const Copyright = (ctx) => {
   ctx.on("mounted", () => {
     const list = ctx.get("list");
@@ -7031,26 +7103,38 @@ const Dropdown = (ctx) => {
     renderDropdown({
       $dropdownWrap: $dropdownOn,
       dropdownList: [
-        [t("sortLatest"), () => {
-          reloadUseParamsEditor((p) => {
-            p.sort_by = "date_desc";
-          });
-        }],
-        [t("sortBest"), () => {
-          reloadUseParamsEditor((p) => {
-            p.sort_by = "vote";
-          });
-        }],
-        [t("sortOldest"), () => {
-          reloadUseParamsEditor((p) => {
-            p.sort_by = "date_asc";
-          });
-        }],
-        [t("sortAuthor"), () => {
-          reloadUseParamsEditor((p) => {
-            p.view_only_admin = true;
-          });
-        }]
+        [
+          t("sortLatest"),
+          () => {
+            reloadUseParamsEditor((p) => {
+              p.sort_by = "date_desc";
+            });
+          }
+        ],
+        [
+          t("sortBest"),
+          () => {
+            reloadUseParamsEditor((p) => {
+              p.sort_by = "vote";
+            });
+          }
+        ],
+        [
+          t("sortOldest"),
+          () => {
+            reloadUseParamsEditor((p) => {
+              p.sort_by = "date_asc";
+            });
+          }
+        ],
+        [
+          t("sortAuthor"),
+          () => {
+            reloadUseParamsEditor((p) => {
+              p.view_only_admin = true;
+            });
+          }
+        ]
       ]
     });
   };
@@ -7199,18 +7283,21 @@ const ReachBottom = (ctx) => {
   let observer = null;
   const setupObserver = ($target) => {
     const scrollEvtAt = ctx.conf.scrollRelativeTo && ctx.conf.scrollRelativeTo() || null;
-    observer = new IntersectionObserver(([entries]) => {
-      if (entries.isIntersecting) {
-        clearObserver();
-        ctx.trigger("list-reach-bottom");
+    observer = new IntersectionObserver(
+      ([entries]) => {
+        if (entries.isIntersecting) {
+          clearObserver();
+          ctx.trigger("list-reach-bottom");
+        }
+      },
+      {
+        threshold: 0.9,
+        // when the target is 90% visible
+        // @see https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/root
+        // If the root is null, then the bounds of the actual document viewport are used.
+        root: scrollEvtAt
       }
-    }, {
-      threshold: 0.9,
-      // when the target is 90% visible
-      // @see https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/root
-      // If the root is null, then the bounds of the actual document viewport are used.
-      root: scrollEvtAt
-    });
+    );
     observer.observe($target);
   };
   const clearObserver = () => {
@@ -7294,22 +7381,26 @@ function versionCheck(list, feVer, beVer) {
   if (sameVer)
     return;
   const errEl = createElement(
-    `<div>${t("updateMsg", { name: comp < 0 ? t("frontend") : t("backend") })}<br/><br/><span style="color: var(--at-color-meta);">${t("currentVersion")}: ${t("frontend")} ${feVer} / ${t("backend")} ${beVer}</span><br/><br/></div>`
+    `<div class="atk-version-check-notice">${t("updateMsg", {
+      name: comp < 0 ? t("frontend") : t("backend")
+    })} <span class="atk-info">${t("currentVersion")}: ${t("frontend")} ${feVer} / ${t("backend")} ${beVer}</span></div>`
   );
-  const ignoreBtn = createElement(`<span style="cursor:pointer">${t("ignore")}</span>`);
+  const ignoreBtn = createElement(`<span class="atk-ignore-btn">${t("ignore")}</span>`);
   ignoreBtn.onclick = () => {
-    setError(list.$el.parentElement, null);
+    errEl.remove();
     IgnoreVersionCheck = true;
-    list.ctx.fetch({ offset: 0 });
   };
   errEl.append(ignoreBtn);
-  setError(list.$el.parentElement, errEl, '<span class="atk-warn-title">Artalk Warn</span>');
+  list.$el.parentElement.prepend(errEl);
 }
 const AdminOnlyElem = (ctx) => {
   const scanApply = () => {
-    applyAdminOnlyEls(ctx.get("user").getData().isAdmin, getAdminOnlyEls({
-      $root: ctx.$root
-    }));
+    applyAdminOnlyEls(
+      ctx.get("user").getData().isAdmin,
+      getAdminOnlyEls({
+        $root: ctx.$root
+      })
+    );
   };
   ctx.on("list-loaded", () => {
     scanApply();
@@ -7406,7 +7497,9 @@ function load(ctx) {
     };
     if (ctx.conf.useBackendConf) {
       if (!data.frontend_conf)
-        throw new Error("The remote backend does not respond to the frontend conf, but `useBackendConf` conf is enabled");
+        throw new Error(
+          "The remote backend does not respond to the frontend conf, but `useBackendConf` conf is enabled"
+        );
       conf = __spreadValues(__spreadValues({}, conf), handleConfFormServer(data.frontend_conf));
     }
     ctx.conf.remoteConfModifier && ctx.conf.remoteConfModifier(conf);
@@ -7431,17 +7524,19 @@ function loadNetworkPlugins(scripts, apiBase) {
     scripts.forEach((url) => {
       if (!/^(http|https):\/\//.test(url))
         url = `${apiBase.replace(/\/$/, "")}/${url.replace(/^\//, "")}`;
-      tasks.push(new Promise((resolve, reject) => {
-        if (document.querySelector(`script[src="${url}"]`)) {
-          resolve();
-          return;
-        }
-        const script = document.createElement("script");
-        script.src = url;
-        document.head.appendChild(script);
-        script.onload = () => resolve();
-        script.onerror = (err) => reject(err);
-      }));
+      tasks.push(
+        new Promise((resolve, reject) => {
+          if (document.querySelector(`script[src="${url}"]`)) {
+            resolve();
+            return;
+          }
+          const script = document.createElement("script");
+          script.src = url;
+          document.head.appendChild(script);
+          script.onload = () => resolve();
+          script.onerror = (err) => reject(err);
+        })
+      );
     });
     yield Promise.all(tasks);
     return Object.values(window.ArtalkPlugins || {});
@@ -7451,7 +7546,10 @@ function onLoadErr(ctx, err) {
   var _a;
   let sidebarOpenView = "";
   if ((_a = err.data) == null ? void 0 : _a.err_no_site) {
-    const viewLoadParam = { create_name: ctx.conf.site, create_urls: `${window.location.protocol}//${window.location.host}` };
+    const viewLoadParam = {
+      create_name: ctx.conf.site,
+      create_urls: `${window.location.protocol}//${window.location.host}`
+    };
     sidebarOpenView = `sites|${JSON.stringify(viewLoadParam)}`;
   }
   showErrorDialog({
@@ -7474,7 +7572,9 @@ class Artalk {
       const obj = initService(this.ctx);
       obj && this.ctx.inject(name, obj);
     });
-    load(this.ctx);
+    {
+      load(this.ctx);
+    }
   }
   /** Get the config of Artalk */
   getConf() {
@@ -7496,7 +7596,9 @@ class Artalk {
   /** Destroy instance of Artalk */
   destroy() {
     this.ctx.trigger("unmounted");
-    this.ctx.$root.remove();
+    while (this.ctx.$root.firstChild) {
+      this.ctx.$root.removeChild(this.ctx.$root.firstChild);
+    }
   }
   /** Add an event listener */
   on(name, handler) {