artalk 2.8.4 → 2.8.6

package/dist/Artalk.mjs

@@ -155,11 +155,14 @@ class HttpClient {
         /* Json */
       ];
       const responseFormat = format || requestParams.format;
-      return this.customFetch(`${baseUrl || this.baseUrl || ""}${path}${queryString ? `?${queryString}` : ""}`, __spreadProps(__spreadValues({}, requestParams), {
-        headers: __spreadValues(__spreadValues({}, requestParams.headers || {}), type && type !== "multipart/form-data" ? { "Content-Type": type } : {}),
-        signal: (cancelToken ? this.createAbortSignal(cancelToken) : requestParams.signal) || null,
-        body: typeof body === "undefined" || body === null ? null : payloadFormatter(body)
-      })).then((response) => __async(this, null, function* () {
+      return this.customFetch(
+        `${baseUrl || this.baseUrl || ""}${path}${queryString ? `?${queryString}` : ""}`,
+        __spreadProps(__spreadValues({}, requestParams), {
+          headers: __spreadValues(__spreadValues({}, requestParams.headers || {}), type && type !== "multipart/form-data" ? { "Content-Type": type } : {}),
+          signal: (cancelToken ? this.createAbortSignal(cancelToken) : requestParams.signal) || null,
+          body: typeof body === "undefined" || body === null ? null : payloadFormatter(body)
+        })
+      ).then((response) => __async(this, null, function* () {
         const r = response;
         r.data = null;
         r.error = null;
@@ -198,7 +201,9 @@ class HttpClient {
   toQueryString(rawQuery) {
     const query = rawQuery || {};
     const keys = Object.keys(query).filter((key) => "undefined" !== typeof query[key]);
-    return keys.map((key) => Array.isArray(query[key]) ? this.addArrayQueryParam(query, key) : this.addQueryParam(query, key)).join("&");
+    return keys.map(
+      (key) => Array.isArray(query[key]) ? this.addArrayQueryParam(query, key) : this.addQueryParam(query, key)
+    ).join("&");
   }
   addQueryParams(rawQuery) {
     const queryString = this.toQueryString(rawQuery);
@@ -222,6 +227,133 @@ class HttpClient {
 let Api$1 = class Api extends HttpClient {
   constructor() {
     super(...arguments);
+    __publicField(this, "auth", {
+      /**
+       * @description Login by email with verify code (Need send email verify code first) or password
+       *
+       * @tags Auth
+       * @name LoginByEmail
+       * @summary Login by email
+       * @request POST:/auth/email/login
+       * @response `200` `HandlerResponseUserLogin` OK
+       * @response `400` `(HandlerMap & {
+          msg?: string,
+      
+      })` Bad Request
+       * @response `500` `(HandlerMap & {
+          msg?: string,
+      
+      })` Internal Server Error
+       */
+      loginByEmail: (data, params = {}) => this.request(__spreadValues({
+        path: `/auth/email/login`,
+        method: "POST",
+        body: data,
+        type: "application/json",
+        format: "json"
+      }, params)),
+      /**
+       * @description Register by email and verify code (if user exists, will update user, like forget password. Need send email verify code first)
+       *
+       * @tags Auth
+       * @name RegisterByEmail
+       * @summary Register by email
+       * @request POST:/auth/email/register
+       * @response `200` `HandlerResponseUserLogin` OK
+       * @response `400` `(HandlerMap & {
+          msg?: string,
+      
+      })` Bad Request
+       * @response `500` `(HandlerMap & {
+          msg?: string,
+      
+      })` Internal Server Error
+       */
+      registerByEmail: (data, params = {}) => this.request(__spreadValues({
+        path: `/auth/email/register`,
+        method: "POST",
+        body: data,
+        type: "application/json",
+        format: "json"
+      }, params)),
+      /**
+       * @description Send email including verify code to user
+       *
+       * @tags Auth
+       * @name SendVerifyEmail
+       * @summary Send verify email
+       * @request POST:/auth/email/send
+       * @response `200` `(HandlerMap & {
+          msg?: string,
+      
+      })` OK
+       * @response `400` `(HandlerMap & {
+          msg?: string,
+      
+      })` Bad Request
+       * @response `500` `(HandlerMap & {
+          msg?: string,
+      
+      })` Internal Server Error
+       */
+      sendVerifyEmail: (data, params = {}) => this.request(__spreadValues({
+        path: `/auth/email/send`,
+        method: "POST",
+        body: data,
+        type: "application/json",
+        format: "json"
+      }, params)),
+      /**
+       * @description Get all users with same email, if there are more than one user with same email, need merge
+       *
+       * @tags Auth
+       * @name CheckDataMerge
+       * @summary Check data merge
+       * @request GET:/auth/merge
+       * @secure
+       * @response `200` `HandlerResponseAuthDataMergeCheck` OK
+       * @response `400` `(HandlerMap & {
+          msg?: string,
+      
+      })` Bad Request
+       * @response `500` `(HandlerMap & {
+          msg?: string,
+      
+      })` Internal Server Error
+       */
+      checkDataMerge: (params = {}) => this.request(__spreadValues({
+        path: `/auth/merge`,
+        method: "GET",
+        secure: true,
+        format: "json"
+      }, params)),
+      /**
+       * @description This function is to solve the problem of multiple users with the same email address, should be called after user login and then check, and perform data merge.
+       *
+       * @tags Auth
+       * @name ApplyDataMerge
+       * @summary Apply data merge
+       * @request POST:/auth/merge
+       * @secure
+       * @response `200` `HandlerResponseAuthDataMergeApply` OK
+       * @response `400` `(HandlerMap & {
+          msg?: string,
+      
+      })` Bad Request
+       * @response `500` `(HandlerMap & {
+          msg?: string,
+      
+      })` Internal Server Error
+       */
+      applyDataMerge: (data, params = {}) => this.request(__spreadValues({
+        path: `/auth/merge`,
+        method: "POST",
+        body: data,
+        secure: true,
+        type: "application/json",
+        format: "json"
+      }, params))
+    });
     __publicField(this, "cache", {
       /**
        * @description Flush all cache on the server
@@ -482,6 +614,24 @@ let Api$1 = class Api extends HttpClient {
         method: "GET",
         format: "json"
       }, params)),
+      /**
+       * @description Get social login providers
+       *
+       * @tags System
+       * @name GetSocialLoginProviders
+       * @summary Get Social Login Providers
+       * @request GET:/conf/auth/providers
+       * @response `200` `HandlerResponseConfAuthProviders` OK
+       * @response `404` `(HandlerMap & {
+          msg?: string,
+      
+      })` Not Found
+       */
+      getSocialLoginProviders: (params = {}) => this.request(__spreadValues({
+        path: `/conf/auth/providers`,
+        method: "GET",
+        format: "json"
+      }, params)),
       /**
        * @description Get Domain Info
        *
@@ -1341,8 +1491,6 @@ function getDefaultExportFromCjs(x) {
   function _createClass(Constructor, protoProps, staticProps) {
     if (protoProps)
       _defineProperties(Constructor.prototype, protoProps);
-    if (staticProps)
-      _defineProperties(Constructor, staticProps);
     Object.defineProperty(Constructor, "prototype", {
       writable: false
     });
@@ -1719,7 +1867,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");
@@ -2057,7 +2205,8 @@ class _Tokenizer {
   blockquote(src) {
     const cap = this.rules.block.blockquote.exec(src);
     if (cap) {
-      const text = rtrim(cap[0].replace(/^ *>[ \t]?/gm, ""), "\n");
+      let text = cap[0].replace(/\n {0,3}((?:=+|-+) *)(?=\n|$)/g, "\n    $1");
+      text = rtrim(text.replace(/^ *>[ \t]?/gm, ""), "\n");
       const top = this.lexer.state.top;
       this.lexer.state.top = true;
       const tokens = this.lexer.blockTokens(text);
@@ -4249,7 +4398,7 @@ const insaneOptions = {
   allowedAttributes: {
     "*": ["title", "accesskey"],
     a: ["href", "name", "target", "aria-label", "rel"],
-    img: ["src", "alt", "title", "atk-emoticon", "aria-label"],
+    img: ["src", "alt", "title", "atk-emoticon", "aria-label", "data-src", "class", "loading"],
     // for code highlight
     code: ["class"],
     span: ["class", "style"]
@@ -4257,7 +4406,8 @@ const insaneOptions = {
   filter: (node) => {
     const allowed = [
       ["code", /^hljs\W+language-(.*)$/],
-      ["span", /^(hljs-.*)$/]
+      ["span", /^(hljs-.*)$/],
+      ["img", /^lazyload$/]
     ];
     allowed.forEach(([tag2, reg]) => {
       if (node.tag === tag2 && !!node.attrs.class && !reg.test(node.attrs.class)) {
@@ -4334,16 +4484,27 @@ const hanabi = /* @__PURE__ */ getDefaultExportFromCjs(hanabiExports);
 function renderCode(code) {
   return hanabi(code);
 }
-function getRenderer() {
+function getRenderer(options) {
   const renderer = new marked$1.Renderer();
   renderer.link = markedLinkRenderer(renderer, renderer.link);
   renderer.code = markedCodeRenderer();
+  renderer.image = markedImageRenderer(renderer, renderer.image, options);
   return renderer;
 }
 const markedLinkRenderer = (renderer, orgLinkRenderer) => (href, title, text) => {
-  const localLink = href == null ? void 0 : href.startsWith(`${window.location.protocol}//${window.location.hostname}`);
+  const getLinkOrigin = (link2) => {
+    try {
+      return new URL(link2).origin;
+    } catch (e) {
+      return "";
+    }
+  };
+  const isSameOriginLink = getLinkOrigin(href) === window.location.origin;
   const html2 = orgLinkRenderer.call(renderer, href, title, text);
-  return html2.replace(/^<a /, `<a target="_blank" ${!localLink ? `rel="noreferrer noopener nofollow"` : ""} `);
+  return html2.replace(
+    /^<a /,
+    `<a target="_blank" ${!isSameOriginLink ? `rel="noreferrer noopener nofollow"` : ""} `
+  );
 };
 const markedCodeRenderer = () => (block2, lang) => {
   const realLang = !lang ? "plaintext" : lang;
@@ -4359,6 +4520,16 @@ const markedCodeRenderer = () => (block2, lang) => {
 <code class="hljs language-${realLang}">${colorized.replace(/&amp;/g, "&")}</code>
 </pre>`;
 };
+const markedImageRenderer = (renderer, orgImageRenderer, { imgLazyLoad }) => (href, title, text) => {
+  const html2 = orgImageRenderer.call(renderer, href, title, text);
+  if (!imgLazyLoad)
+    return html2;
+  if (imgLazyLoad === "native" || imgLazyLoad === true)
+    return html2.replace(/^<img /, '<img class="lazyload" loading="lazy" ');
+  if (imgLazyLoad === "data-src")
+    return html2.replace(/^<img /, '<img class="lazyload" ').replace("src=", "data-src=");
+  return html2;
+};
 let instance;
 let replacers = [];
 const markedOptions = {
@@ -4372,16 +4543,18 @@ function getInstance() {
 function setReplacers(arr) {
   replacers = arr;
 }
-function initMarked() {
+function initMarked(options) {
   try {
     if (!marked$1.name)
       return;
   } catch (e) {
     return;
   }
-  marked$1.setOptions(__spreadValues({
-    renderer: getRenderer()
-  }, markedOptions));
+  marked$1.setOptions(__spreadValues(__spreadValues({
+    renderer: getRenderer({
+      imgLazyLoad: options.imgLazyLoad
+    })
+  }, markedOptions), options.markedOptions));
   instance = marked$1;
 }
 function marked(src) {
@@ -4398,7 +4571,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, link2) => `<a href="${link2}" 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, link2) => `<a href="${link2}" target="_blank">${text}</a>`
+  ).replace(/\n/g, "<br>");
 }
 function mergeDeep(...objects) {
   const isObject = (obj) => obj && typeof obj === "object" && obj.constructor === Object;
@@ -4511,6 +4690,8 @@ const en = {
   placeholder: "Leave a comment",
   noComment: "No Comment",
   send: "Send",
+  signIn: "Sign in",
+  signUp: "Sign up",
   save: "Save",
   nick: "Nickname",
   email: "Email",
@@ -4569,7 +4750,26 @@ const en = {
   /* Sidebar */
   msgCenter: "Messages",
   ctrlCenter: "Admin",
+  /* Auth */
+  noAccountPrompt: "Don't have an account?",
+  haveAccountPrompt: "Already have an account?",
+  forgetPassword: "Forget Password",
+  resetPassword: "Reset Password",
+  verificationCode: "Verification Code",
+  verifySend: "Verify",
+  verifyResend: "Resend",
+  waitSeconds: "Wait {seconds}s",
   emailVerified: "Email has been verified",
+  password: "Password",
+  username: "Username",
+  nextStep: "Next Step",
+  skipNotVerify: "Skip, do not verify",
+  logoutConfirm: "Are you sure to logout?",
+  accountMergeNotice: "Your email has multiple accounts with different id.",
+  accountMergeSelectOne: "Please select one you want to merge all the data into it.",
+  accountMergeConfirm: "All data will be merged into one account, the id is {id}.",
+  dismiss: "Dismiss",
+  merge: "Merge",
   /* General */
   frontend: "Frontend",
   backend: "Backend",
@@ -4581,7 +4781,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",
@@ -4592,6 +4792,8 @@ const zhCN = {
   placeholder: "键入内容...",
   noComment: "「此时无声胜有声」",
   send: "发送",
+  signIn: "登录",
+  signUp: "注册",
   save: "保存",
   nick: "昵称",
   email: "邮箱",
@@ -4650,7 +4852,26 @@ const zhCN = {
   /* Sidebar */
   msgCenter: "通知中心",
   ctrlCenter: "控制中心",
+  /* Auth */
+  noAccountPrompt: "没有账号？",
+  haveAccountPrompt: "已有账号？",
+  forgetPassword: "忘记密码",
+  resetPassword: "重置密码",
+  verificationCode: "验证码",
+  verifySend: "发送验证码",
+  verifyResend: "重新发送",
+  waitSeconds: "等待 {seconds}秒",
   emailVerified: "邮箱已验证",
+  password: "密码",
+  username: "用户名",
+  nextStep: "下一步",
+  skipNotVerify: "跳过，不验证",
+  logoutConfirm: "确定要退出登录吗？",
+  accountMergeNotice: "您的电子邮件下有多个不同 ID 的账户。",
+  accountMergeSelectOne: "请选择将所有数据合并到其中的一个。",
+  accountMergeConfirm: "所有数据将合并到 ID 为 {id} 的账户中。",
+  dismiss: "忽略",
+  merge: "合并",
   /* General */
   frontend: "前端",
   backend: "后端",
@@ -4662,7 +4883,7 @@ const zhCN = {
   deleteFail: "删除失败",
   reqGot: "请求响应",
   reqAborted: "请求超时或意外终止",
-  updateMsg: "请更新 Artalk {name} 以获得完整体验",
+  updateMsg: "请更新 Artalk {name} 以获得更好的体验！",
   currentVersion: "当前版本",
   ignore: "忽略",
   open: "打开",
@@ -4753,27 +4974,6 @@ function timeAgo(date, $t = (n) => n) {
     return " - ";
   }
 }
-function onImagesLoaded($container, event) {
-  if (!$container)
-    return;
-  const images = $container.getElementsByTagName("img");
-  if (!images.length)
-    return;
-  let loaded = images.length;
-  for (let i = 0; i < images.length; i++) {
-    if (images[i].complete) {
-      loaded--;
-    } else {
-      images[i].addEventListener("load", () => {
-        loaded--;
-        if (loaded === 0)
-          event();
-      });
-    }
-    if (loaded === 0)
-      event();
-  }
-}
 function getGravatarURL(opts) {
   return `${opts.mirror.replace(/\/$/, "")}/${opts.emailMD5}?${opts.params.replace(/^\?/, "")}`;
 }
@@ -4816,7 +5016,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;
@@ -4838,7 +5041,7 @@ function getURLBasedOn(baseURL, path) {
   return `${baseURL.replace(/\/$/, "")}/${path.replace(/^\//, "")}`;
 }
 const internal = {
-  "en": en,
+  en,
   "en-US": en,
   "zh-CN": zhCN
 };
@@ -4876,7 +5079,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
@@ -4967,17 +5173,12 @@ function handelCustomConf(customConf, full = false) {
   return conf;
 }
 function handleConfFormServer(conf) {
-  const DisabledKeys = [
-    "el",
-    "pageKey",
-    "pageTitle",
-    "server",
-    "site",
-    "darkMode"
-  ];
+  const DisabledKeys = ["el", "pageKey", "pageTitle", "server", "site"];
   Object.keys(conf).forEach((k) => {
     if (DisabledKeys.includes(k))
       delete conf[k];
+    if (k === "darkMode" && conf[k] !== "auto")
+      delete conf[k];
   });
   if (conf.emoticons && typeof conf.emoticons === "string") {
     conf.emoticons = conf.emoticons.trim();
@@ -5285,8 +5486,6 @@ function playFadeAnim(elem, after, type = "in") {
   const onAnimEnded = () => {
     elem.classList.remove(`atk-fade-${type}`);
     elem.removeEventListener("animationend", onAnimEnded);
-    if (after)
-      after();
   };
   elem.addEventListener("animationend", onAnimEnded);
 }
@@ -5354,7 +5553,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();
@@ -5363,7 +5564,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;
@@ -5575,7 +5778,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"]',
@@ -5749,7 +5952,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;
@@ -5793,7 +5998,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);
@@ -5831,8 +6036,11 @@ class SidebarLayer extends Component {
       } else {
         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", ""));
+        if (this.getDarkMode() !== iFrameSrc.includes("&darkMode=1")) {
+          this.iframeLoad(
+            $iframe,
+            this.getDarkMode() ? iFrameSrc.concat("&darkMode=1") : iFrameSrc.replace("&darkMode=1", "")
+          );
         }
       }
       this.authCheck({
@@ -5886,7 +6094,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/"
@@ -5899,12 +6109,15 @@ class SidebarLayer extends Component {
     };
     if (view)
       query.view = view;
-    if (this.conf.darkMode)
+    if (this.getDarkMode())
       query.darkMode = "1";
     const urlParams = new URLSearchParams(query);
     this.iframeLoad($iframe, `${baseURL}?${urlParams.toString()}`);
     return $iframe;
   }
+  getDarkMode() {
+    return this.conf.darkMode === "auto" ? window.matchMedia("(prefers-color-scheme: dark)").matches : this.conf.darkMode;
+  }
   iframeLoad($iframe, src) {
     $iframe.src = src;
     showLoading(this.$iframeWrap);
@@ -5913,7 +6126,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);
@@ -5975,8 +6188,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);
         });
@@ -6238,45 +6452,51 @@ function Detect(userAgent) {
   return dest;
 }
 function check(conf, rules) {
-  rules.forEach(({
-    el,
-    max: maxHeight,
-    imgContains
-  }) => {
-    const _apply = () => {
-      if (!el)
-        return;
-      if (!conf.scrollable)
-        applyHeightLimit({ el, maxHeight, postBtnClick: conf.postExpandBtnClick });
-      else
-        applyScrollableHeightLimit({ el, maxHeight });
-    };
+  rules.forEach(({ el, max, imgCheck }) => {
+    if (!el)
+      return;
+    if (imgCheck)
+      el.style.maxHeight = `${max + 1}px`;
+    let lock = false;
     const _check = () => {
-      if (el && getHeight(el) > maxHeight)
-        _apply();
+      if (lock)
+        return;
+      if (getHeight(el) <= max)
+        return;
+      const afterExpandBtnClick = () => {
+        var _a;
+        lock = true;
+        (_a = conf.afterExpandBtnClick) == null ? void 0 : _a.call(conf);
+      };
+      !conf.scrollable ? applyHeightLimit({ el, max, afterExpandBtnClick }) : applyScrollableHeightLimit({ el, max });
     };
     _check();
-    if (imgContains && el)
-      onImagesLoaded(el, () => _check());
+    if (imgCheck) {
+      el.querySelectorAll(".atk-content img").forEach((img) => {
+        img.onload = () => _check();
+      });
+    }
   });
 }
 const HEIGHT_LIMIT_CSS = "atk-height-limit";
 function applyHeightLimit(obj) {
   if (!obj.el)
     return;
-  if (!obj.maxHeight)
+  if (!obj.max)
     return;
   if (obj.el.classList.contains(HEIGHT_LIMIT_CSS))
     return;
   obj.el.classList.add(HEIGHT_LIMIT_CSS);
-  obj.el.style.height = `${obj.maxHeight}px`;
+  obj.el.style.height = `${obj.max}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);
-    if (obj.postBtnClick)
-      obj.postBtnClick(e);
+    if (obj.afterExpandBtnClick)
+      obj.afterExpandBtnClick(e);
   };
   obj.el.append($expandBtn);
 }
@@ -6291,16 +6511,17 @@ function disposeHeightLimit($el) {
       e.remove();
   });
   $el.style.height = "";
+  $el.style.maxHeight = "";
   $el.style.overflow = "";
 }
 const HEIGHT_LIMIT_SCROLL_CSS = "atk-height-limit-scroll";
-function applyScrollableHeightLimit(obj) {
-  if (!obj.el)
+function applyScrollableHeightLimit(opt) {
+  if (!opt.el)
     return;
-  if (obj.el.classList.contains(HEIGHT_LIMIT_SCROLL_CSS))
+  if (opt.el.classList.contains(HEIGHT_LIMIT_SCROLL_CSS))
     return;
-  obj.el.classList.add(HEIGHT_LIMIT_SCROLL_CSS);
-  obj.el.style.height = `${obj.maxHeight}px`;
+  opt.el.classList.add(HEIGHT_LIMIT_SCROLL_CSS);
+  opt.el.style.height = `${opt.max}px`;
 }
 const CommentHTML = '<div class="atk-comment-wrap">\n  <div class="atk-comment">\n    <div class="atk-avatar"></div>\n    <div class="atk-main">\n      <div class="atk-header">\n        <span class="atk-item atk-nick"></span>\n        <span class="atk-badge-wrap"></span>\n        <span class="atk-item atk-date"></span>\n      </div>\n      <div class="atk-body">\n        <div class="atk-content"></div>\n      </div>\n      <div class="atk-footer">\n        <div class="atk-actions"></div>\n      </div>\n    </div>\n  </div>\n</div>\n';
 function renderAvatar(r) {
@@ -6309,7 +6530,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);
@@ -6330,7 +6553,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);
@@ -6349,7 +6574,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) {
@@ -6423,7 +6650,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();
@@ -6614,7 +6843,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");
     });
@@ -6752,20 +6983,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(
+      {
+        afterExpandBtnClick: () => {
+          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, imgCheck: true },
+        { el: this.$replyTo, max: contentMaxH, imgCheck: true },
+        // 子评论区域限高（仅嵌套模式）
+        { el: this.$childrenWrap, max: childrenMaxH, imgCheck: false }
+      ]
+    );
   }
   /** 子评论区域移除限高 */
   heightLimitRemoveForChildren() {
@@ -6852,7 +7086,7 @@ class CommentActions {
       (_b = this.comment.getRender().voteBtnDown) == null ? void 0 : _b.updateText();
     }).catch((err) => {
       actionBtn == null ? void 0 : actionBtn.setError(t("voteFail"));
-      console.log(err);
+      console.error(err);
     });
   }
   /** 管理员 - 评论状态修改 */
@@ -7484,7 +7718,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);
@@ -7515,7 +7751,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`;
     }
   };
@@ -7726,13 +7965,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,
@@ -7799,15 +8032,20 @@ ${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();
   }
   setError(opts.$err, errEl);
 }
 const Markdown = (ctx) => {
-  initMarked();
-  ctx.on("updated", (conf) => {
+  ctx.watchConf(["markedReplacers", "imgLazyLoad", "markedOptions"], (conf) => {
+    initMarked({
+      markedOptions: ctx.getConf().markedOptions,
+      imgLazyLoad: ctx.getConf().imgLazyLoad
+    });
     if (conf.markedReplacers)
       setReplacers(conf.markedReplacers);
   });
@@ -8142,7 +8380,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");
@@ -8166,8 +8406,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(() => {
@@ -8217,9 +8463,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;
       });
@@ -8280,7 +8529,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(() => {
     });
@@ -8340,19 +8591,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) => {
@@ -8367,7 +8620,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;
@@ -8435,7 +8690,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);
     });
@@ -8531,7 +8789,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;
@@ -8592,7 +8852,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");
@@ -8622,7 +8882,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, ""));
       }
@@ -8635,7 +8897,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(() => {
     });
@@ -8741,23 +9005,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() {
@@ -8896,7 +9157,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)
+        );
       });
     }
   });
@@ -8908,7 +9171,11 @@ const Count = (ctx) => {
     const $count = list2.$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", () => {
@@ -9017,7 +9284,7 @@ const GotoFocus = (ctx) => {
     comment.focus();
   }));
 };
-const version = "2.8.4";
+const version = "2.8.6";
 const Copyright = (ctx) => {
   ctx.on("mounted", () => {
     const list2 = ctx.get("list");
@@ -9052,26 +9319,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;
+            });
+          }
+        ]
       ]
     });
   };
@@ -9220,18 +9499,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 = () => {
@@ -9315,22 +9597,26 @@ function versionCheck(list2, 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(list2.$el.parentElement, null);
+    errEl.remove();
     IgnoreVersionCheck = true;
-    list2.ctx.fetch({ offset: 0 });
   };
   errEl.append(ignoreBtn);
-  setError(list2.$el.parentElement, errEl, '<span class="atk-warn-title">Artalk Warn</span>');
+  list2.$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();
@@ -9427,7 +9713,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);
@@ -9452,17 +9740,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 || {});
@@ -9472,7 +9762,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({