artalk 2.1.7 → 2.2.0

package/dist/Artalk.es.js

@@ -68,6 +68,7 @@ class Context {
     __publicField(this, "conf");
     __publicField(this, "user");
     __publicField(this, "eventList", []);
+    __publicField(this, "markedInstance");
     this.cid = +new Date();
     this.$root = rootEl;
     this.conf = conf;
@@ -102,6 +103,7 @@ const defaults$3 = {
   vote: true,
   voteDown: false,
   uaBadge: true,
+  listSort: true,
   pvEl: "#ArtalkPV",
   flatMode: "auto",
   maxNesting: 3,
@@ -118,6 +120,7 @@ const defaults$3 = {
     content: 300,
     children: 400
   },
+  imgUpload: true,
   reqTimeout: 15e3,
   versionCheck: true
 };
@@ -2654,37 +2657,36 @@ function versionCompare(a, b) {
   }
   return 0;
 }
-let markedInstance;
+function initMarked(ctx) {
+  const renderer = new marked$1.Renderer();
+  const linkRenderer = renderer.link;
+  renderer.link = (href, title, text) => {
+    const localLink = href == null ? void 0 : href.startsWith(`${window.location.protocol}//${window.location.hostname}`);
+    const html = linkRenderer.call(renderer, href, title, text);
+    return html.replace(/^<a /, `<a target="_blank" ${!localLink ? `rel="noreferrer noopener nofollow"` : ""} `);
+  };
+  const nMarked = marked$1;
+  marked$1.setOptions({
+    renderer,
+    highlight: (code) => hanabi(code),
+    pedantic: false,
+    gfm: true,
+    breaks: true,
+    smartLists: true,
+    smartypants: true,
+    xhtml: false,
+    sanitize: true,
+    sanitizer: (html) => insane_1(html, __spreadProps(__spreadValues({}, insane_1.defaults), {
+      allowedAttributes: __spreadProps(__spreadValues({}, insane_1.defaults.allowedAttributes), {
+        img: ["src", "atk-emoticon"]
+      })
+    })),
+    silent: true
+  });
+  ctx.markedInstance = nMarked;
+}
 function marked(ctx, src) {
-  if (!markedInstance) {
-    const renderer = new marked$1.Renderer();
-    const linkRenderer = renderer.link;
-    renderer.link = (href, title, text) => {
-      const localLink = href == null ? void 0 : href.startsWith(`${window.location.protocol}//${window.location.hostname}`);
-      const html = linkRenderer.call(renderer, href, title, text);
-      return html.replace(/^<a /, `<a target="_blank" ${!localLink ? `rel="noreferrer noopener nofollow"` : ""} `);
-    };
-    const nMarked = marked$1;
-    marked$1.setOptions({
-      renderer,
-      highlight: (code) => hanabi(code),
-      pedantic: false,
-      gfm: true,
-      breaks: true,
-      smartLists: true,
-      smartypants: true,
-      xhtml: false,
-      sanitize: true,
-      sanitizer: (html) => insane_1(html, __spreadProps(__spreadValues({}, insane_1.defaults), {
-        allowedAttributes: __spreadProps(__spreadValues({}, insane_1.defaults.allowedAttributes), {
-          img: ["src", "atk-emoticon"]
-        })
-      })),
-      silent: true
-    });
-    markedInstance = nMarked;
-  }
-  return markedInstance.parse(src);
+  return ctx.markedInstance.parse(src);
 }
 function getCorrectUserAgent() {
   return __async(this, null, function* () {
@@ -2710,7 +2712,19 @@ function getCorrectUserAgent() {
     return uaRaw;
   });
 }
-function showLoading(parentElem) {
+function isValidURL(urlRaw) {
+  let url;
+  try {
+    url = new URL(urlRaw);
+  } catch (_) {
+    return false;
+  }
+  return url.protocol === "http:" || url.protocol === "https:";
+}
+function getURLBasedOnApi(ctx, path) {
+  return `${ctx.conf.server.replace(/\/api\/?$/, "")}/${path.replace(/^\//, "")}`;
+}
+function showLoading(parentElem, conf) {
   if (parentElem instanceof Context)
     parentElem = parentElem.$root;
   let $loading = parentElem.querySelector(".atk-loading");
@@ -2720,6 +2734,8 @@ function showLoading(parentElem) {
         <svg viewBox="25 25 50 50"><circle cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"></circle></svg>
       </div>
     </div>`);
+    if (conf == null ? void 0 : conf.transparentBg)
+      $loading.style.background = "transparent";
     parentElem.appendChild($loading);
   }
   $loading.style.display = "";
@@ -2886,11 +2902,7 @@ const _Layer = class extends Component {
       if (this.maskClickHideEnable)
         this.hide();
     };
-    this.bodyStyleOrgOverflow = document.body.style.overflow;
-    this.bodyStyleOrgPaddingRight = document.body.style.paddingRight;
-    document.body.style.overflow = "hidden";
-    const bpr = parseInt(window.getComputedStyle(document.body, null).getPropertyValue("padding-right"), 10);
-    document.body.style.paddingRight = `${getScrollBarWidth() + bpr || 0}px`;
+    this.pageBodyScrollBarHide();
   }
   hide() {
     if (this.afterHide)
@@ -2899,8 +2911,7 @@ const _Layer = class extends Component {
     this.$el.style.display = "none";
     this.newActionTimer(() => {
       this.$wrap.style.display = "none";
-      document.body.style.overflow = this.bodyStyleOrgOverflow;
-      document.body.style.paddingRight = this.bodyStyleOrgPaddingRight;
+      this.pageBodyScrollBarShow();
       this.checkCleanLayer();
     }, 450);
     this.newActionTimer(() => {
@@ -2911,6 +2922,17 @@ const _Layer = class extends Component {
   setMaskClickHide(enable) {
     this.maskClickHideEnable = enable;
   }
+  pageBodyScrollBarHide() {
+    this.bodyStyleOrgOverflow = document.body.style.overflow;
+    this.bodyStyleOrgPaddingRight = document.body.style.paddingRight;
+    document.body.style.overflow = "hidden";
+    const bpr = parseInt(window.getComputedStyle(document.body, null).getPropertyValue("padding-right"), 10);
+    document.body.style.paddingRight = `${getScrollBarWidth() + bpr || 0}px`;
+  }
+  pageBodyScrollBarShow() {
+    document.body.style.overflow = this.bodyStyleOrgOverflow;
+    document.body.style.paddingRight = this.bodyStyleOrgPaddingRight;
+  }
   newActionTimer(func, delay) {
     const act = () => {
       func();
@@ -2928,6 +2950,7 @@ const _Layer = class extends Component {
   disposeNow() {
     document.body.style.overflow = "";
     this.$el.remove();
+    this.pageBodyScrollBarShow();
     this.checkCleanLayer();
   }
   dispose() {
@@ -3018,6 +3041,7 @@ function Fetch(ctx, input, init, timeout) {
         json = yield new Promise((resolve, reject) => {
           ctx.trigger("checker-captcha", {
             imgData: json.data.img_data,
+            iframe: json.data.iframe,
             onSuccess: () => {
               recall(resolve, reject);
             },
@@ -3182,6 +3206,12 @@ class Api {
       }
     };
   }
+  loginStatus() {
+    return __async(this, null, function* () {
+      const data = yield GET(this.ctx, `${this.baseURL}/login-status`);
+      return data || { is_login: false };
+    });
+  }
   pageGet(siteName, offset, limit) {
     return __async(this, null, function* () {
       const params = {
@@ -3300,6 +3330,25 @@ class Api {
       return p.pv;
     });
   }
+  imgUpload(file) {
+    return __async(this, null, function* () {
+      const params = {
+        name: this.ctx.user.data.nick,
+        email: this.ctx.user.data.email,
+        page_key: this.ctx.conf.pageKey
+      };
+      if (this.ctx.conf.site)
+        params.site_name = this.ctx.conf.site;
+      const form = ToFormData(params);
+      form.set("file", file);
+      const init = {
+        method: "POST",
+        body: form
+      };
+      const json = yield Fetch(this.ctx, `${this.baseURL}/img-upload`, init);
+      return json.data || {};
+    });
+  }
   captchaGet() {
     return __async(this, null, function* () {
       const data = yield GET(this.ctx, `${this.baseURL}/captcha/refresh`);
@@ -3312,13 +3361,64 @@ class Api {
       return data.img_data || "";
     });
   }
+  captchaStatus() {
+    return __async(this, null, function* () {
+      const data = yield GET(this.ctx, `${this.baseURL}/captcha/status`);
+      return data || { is_pass: false };
+    });
+  }
 }
 const CaptchaChecker = {
-  request(that, inputVal) {
+  request(that, ctx, inputVal) {
     return new Api(that.ctx).captchaCheck(inputVal);
   },
-  body(that) {
-    const elem = createElement(`<span><img class="atk-captcha-img" src="${that.submitCaptchaImgData || ""}" alt="\u9A8C\u8BC1\u7801">\u6572\u5165\u9A8C\u8BC1\u7801\u7EE7\u7EED\uFF1A</span>`);
+  body(that, ctx) {
+    if (that.captchaConf.iframe) {
+      const $iframeWrap = createElement(`<div class="atk-checker-iframe-wrap"></div>`);
+      const $iframe = createElement(`<iframe class="atk-fade-in"></iframe>`);
+      $iframe.style.display = "none";
+      showLoading($iframeWrap, { transparentBg: true });
+      $iframe.src = `${that.ctx.conf.server}/captcha/get`;
+      $iframe.onload = () => {
+        $iframe.style.display = "";
+        hideLoading($iframeWrap);
+      };
+      $iframeWrap.append($iframe);
+      const $closeBtn = createElement(`<div class="atk-close-btn"><i class="atk-icon atk-icon-close"></i></div>`);
+      $iframeWrap.append($closeBtn);
+      ctx.hideInteractInput();
+      let stop = false;
+      const sleep = (ms) => new Promise((resolve) => {
+        window.setTimeout(() => {
+          resolve(null);
+        }, ms);
+      });
+      (function queryStatus() {
+        return __async(this, null, function* () {
+          yield sleep(1e3);
+          if (stop)
+            return;
+          let isPass = false;
+          try {
+            const resp = yield new Api(that.ctx).captchaStatus();
+            isPass = resp.is_pass;
+          } catch (e) {
+            isPass = false;
+          }
+          if (isPass) {
+            ctx.triggerSuccess();
+          } else {
+            queryStatus();
+          }
+        });
+      })();
+      $closeBtn.onclick = () => {
+        stop = true;
+        ctx.cancel();
+      };
+      return $iframeWrap;
+    }
+    const elem = createElement(`<span><img class="atk-captcha-img" src="${that.captchaConf.imgData || ""}" alt="\u9A8C\u8BC1\u7801">\u6572\u5165\u9A8C\u8BC1\u7801\u7EE7\u7EED\uFF1A</span>`);
     elem.querySelector(".atk-captcha-img").onclick = () => {
       const imgEl = elem.querySelector(".atk-captcha-img");
       new Api(that.ctx).captchaGet().then((imgData) => {
@@ -3329,16 +3429,16 @@ const CaptchaChecker = {
     };
     return elem;
   },
-  onSuccess(that, data, inputVal, formEl) {
-    that.submitCaptchaVal = inputVal;
+  onSuccess(that, ctx, data, inputVal, formEl) {
+    that.captchaConf.val = inputVal;
   },
-  onError(that, err, inputVal, formEl) {
+  onError(that, ctx, err, inputVal, formEl) {
     formEl.querySelector(".atk-captcha-img").click();
   }
 };
 const AdminChecker = {
   inputType: "password",
-  request(that, inputVal) {
+  request(that, ctx, inputVal) {
     const data = {
       name: that.ctx.user.data.nick,
       email: that.ctx.user.data.email,
@@ -3346,33 +3446,33 @@ const AdminChecker = {
     };
     return new Api(that.ctx).login(data.name, data.email, data.password);
   },
-  body() {
+  body(that, ctx) {
     return createElement("<span>\u6572\u5165\u5BC6\u7801\u6765\u9A8C\u8BC1\u7BA1\u7406\u5458\u8EAB\u4EFD\uFF1A</span>");
   },
-  onSuccess(that, userToken, inputVal, formEl) {
+  onSuccess(that, ctx, userToken, inputVal, formEl) {
     that.ctx.user.data.isAdmin = true;
     that.ctx.user.data.token = userToken;
     that.ctx.user.save();
     that.ctx.trigger("user-changed", that.ctx.user.data);
     that.ctx.trigger("list-reload");
   },
-  onError(that, err, inputVal, formEl) {
+  onError(that, ctx, err, inputVal, formEl) {
   }
 };
 class CheckerLauncher {
   constructor(ctx) {
     __publicField(this, "ctx");
     __publicField(this, "launched", []);
-    __publicField(this, "submitCaptchaVal");
-    __publicField(this, "submitCaptchaImgData");
+    __publicField(this, "captchaConf", {});
     this.ctx = ctx;
     this.initEventBind();
   }
   initEventBind() {
     this.ctx.on("checker-captcha", (conf) => {
-      if (conf.imgData) {
-        this.submitCaptchaImgData = conf.imgData;
-      }
+      if (conf.imgData)
+        this.captchaConf.imgData = conf.imgData;
+      if (conf.iframe)
+        this.captchaConf.iframe = conf.iframe;
       this.fire(CaptchaChecker, conf);
     });
     this.ctx.on("checker-admin", (conf) => {
@@ -3386,12 +3486,31 @@ class CheckerLauncher {
     const layer = new Layer(this.ctx, `checker-${new Date().getTime()}`);
     layer.setMaskClickHide(false);
     layer.show();
+    let hideInteractInput = false;
+    const checkerCtx = {
+      getLayer: () => layer,
+      hideInteractInput: () => {
+        hideInteractInput = true;
+      },
+      triggerSuccess: () => {
+        this.close(checker, layer);
+        if (checker.onSuccess)
+          checker.onSuccess(this, checkerCtx, "", "", formEl);
+        if (payload.onSuccess)
+          payload.onSuccess("", dialog.$el);
+      },
+      cancel: () => {
+        this.close(checker, layer);
+        if (payload.onCancel)
+          payload.onCancel();
+      }
+    };
     const formEl = createElement();
-    formEl.appendChild(checker.body(this));
-    const input = createElement(`<input id="check" type="${checker.inputType || "text"}" autocomplete="off" required placeholder="">`);
-    formEl.appendChild(input);
-    setTimeout(() => input.focus(), 80);
-    input.onkeyup = (evt) => {
+    formEl.appendChild(checker.body(this, checkerCtx));
+    const $input = createElement(`<input id="check" type="${checker.inputType || "text"}" autocomplete="off" required placeholder="">`);
+    formEl.appendChild($input);
+    setTimeout(() => $input.focus(), 80);
+    $input.onkeyup = (evt) => {
       if (evt.key === "Enter" || evt.keyCode === 13) {
         evt.preventDefault();
         layer.getEl().querySelector('button[data-action="confirm"]').click();
@@ -3400,7 +3519,7 @@ class CheckerLauncher {
     let btnTextOrg;
     const dialog = new Dialog(formEl);
     dialog.setYes((btnEl) => {
-      const inputVal = input.value.trim();
+      const inputVal = $input.value.trim();
       if (!btnTextOrg)
         btnTextOrg = btnEl.innerText;
       const btnTextSet = (btnText) => {
@@ -3412,18 +3531,18 @@ class CheckerLauncher {
         btnEl.classList.remove("error");
       };
       btnEl.innerText = "\u52A0\u8F7D\u4E2D...";
-      checker.request(this, inputVal).then((data) => {
-        this.done(checker, layer);
+      checker.request(this, checkerCtx, inputVal).then((data) => {
+        this.close(checker, layer);
         if (checker.onSuccess)
-          checker.onSuccess(this, data, inputVal, formEl);
+          checker.onSuccess(this, checkerCtx, data, inputVal, formEl);
         if (payload.onSuccess)
           payload.onSuccess(inputVal, dialog.$el);
       }).catch((err) => {
         btnTextSet(String(err.msg || String(err)));
         if (checker.onError)
-          checker.onError(this, err, inputVal, formEl);
+          checker.onError(this, checkerCtx, err, inputVal, formEl);
         const tf = setTimeout(() => btnTextRestore(), 3e3);
-        input.onfocus = () => {
+        $input.onfocus = () => {
           btnTextRestore();
           clearTimeout(tf);
         };
@@ -3431,16 +3550,20 @@ class CheckerLauncher {
       return false;
     });
     dialog.setNo(() => {
-      this.done(checker, layer);
+      this.close(checker, layer);
       if (payload.onCancel)
         payload.onCancel();
       return false;
     });
+    if (hideInteractInput) {
+      $input.style.display = "none";
+      dialog.$el.querySelector(".atk-layer-dialog-actions").style.display = "none";
+    }
     layer.getEl().append(dialog.$el);
     if (payload.onMount)
       payload.onMount(dialog.$el);
   }
-  done(checker, layer) {
+  close(checker, layer) {
     layer.disposeNow();
     this.launched = this.launched.filter((c) => c !== checker);
   }
@@ -3723,6 +3846,7 @@ class Editor extends Component {
     __publicField(this, "$plugWrap");
     __publicField(this, "$bottom");
     __publicField(this, "$plugBtnWrap");
+    __publicField(this, "$imgUploadBtn");
     __publicField(this, "$submitBtn");
     __publicField(this, "$notifyWrap");
     __publicField(this, "replyComment", null);
@@ -3733,6 +3857,7 @@ class Editor extends Component {
       abortFunc: null
     });
     __publicField(this, "openedPlugName", null);
+    __publicField(this, "allowImgExts", ["png", "jpg", "jpeg", "gif", "bmp", "svg", "webp"]);
     this.$el = createElement(EditorHTML);
     this.$header = this.$el.querySelector(".atk-header");
     this.$textareaWrap = this.$el.querySelector(".atk-textarea-wrap");
@@ -3756,6 +3881,7 @@ class Editor extends Component {
     this.ctx.on("editor-notify", (f) => this.showNotify(f.msg, f.type));
     this.ctx.on("editor-travel", ($el) => this.travel($el));
     this.ctx.on("editor-travel-back", () => this.travelBack());
+    this.ctx.on("conf-updated", () => this.refreshUploadBtn());
   }
   get user() {
     return this.ctx.user;
@@ -3854,7 +3980,7 @@ class Editor extends Component {
     this.openedPlugName = null;
     this.$plugBtnWrap.innerHTML = "";
     this.LOADABLE_PLUG_LIST.forEach((PlugObj) => {
-      const btnElem = createElement(`<span class="atk-plug-btn">${PlugObj.BtnHTML}</span>`);
+      const btnElem = createElement(`<span class="atk-plug-btn" data-plug-name="${PlugObj.Name}">${PlugObj.BtnHTML}</span>`);
       this.$plugBtnWrap.appendChild(btnElem);
       btnElem.addEventListener("click", () => {
         let plug = this.plugList[PlugObj.Name];
@@ -3890,12 +4016,98 @@ class Editor extends Component {
         btnElem.classList.add("active");
       });
     });
+    this.initImgUpload();
   }
   closePlug() {
     this.$plugWrap.innerHTML = "";
     this.$plugWrap.style.display = "none";
     this.openedPlugName = null;
   }
+  initImgUpload() {
+    this.$imgUploadBtn = createElement(`<span class="atk-plug-btn">\u56FE\u7247</span>`);
+    this.$plugBtnWrap.querySelector('[data-plug-name="preview"]').before(this.$imgUploadBtn);
+    this.$imgUploadBtn.onclick = () => {
+      const $input = document.createElement("input");
+      $input.type = "file";
+      $input.accept = this.allowImgExts.map((o) => `.${o}`).join(",");
+      $input.onchange = () => {
+        (() => __async(this, null, function* () {
+          if (!$input.files || $input.files.length === 0)
+            return;
+          const file = $input.files[0];
+          this.uploadImg(file);
+        }))();
+      };
+      $input.click();
+    };
+    const uploadFromFileList = (files) => {
+      if (!files)
+        return;
+      for (let i = 0; i < files.length; i++) {
+        const file = files[i];
+        this.uploadImg(file);
+      }
+    };
+    this.$textarea.addEventListener("dragover", (evt) => {
+      evt.stopPropagation();
+      evt.preventDefault();
+    });
+    this.$textarea.addEventListener("drop", (evt) => {
+      var _a;
+      const files = (_a = evt.dataTransfer) == null ? void 0 : _a.files;
+      if (files == null ? void 0 : files.length) {
+        evt.preventDefault();
+        uploadFromFileList(files);
+      }
+    });
+    this.$textarea.addEventListener("paste", (evt) => {
+      var _a;
+      const files = (_a = evt.clipboardData) == null ? void 0 : _a.files;
+      if (files == null ? void 0 : files.length) {
+        evt.preventDefault();
+        uploadFromFileList(files);
+      }
+    });
+  }
+  refreshUploadBtn() {
+    if (!this.$imgUploadBtn)
+      return;
+    if (!this.ctx.conf.imgUpload) {
+      this.$imgUploadBtn.setAttribute("atk-only-admin-show", "");
+      this.ctx.trigger("check-admin-show-el");
+    }
+  }
+  uploadImg(file) {
+    return __async(this, null, function* () {
+      const fileExt = /[^.]+$/.exec(file.name);
+      if (!fileExt || !this.allowImgExts.includes(fileExt[0]))
+        return;
+      if (!this.ctx.user.checkHasBasicUserInfo()) {
+        this.showNotify("\u586B\u5165\u4F60\u7684\u540D\u5B57\u90AE\u7BB1\u624D\u80FD\u4E0A\u4F20\u54E6", "w");
+        return;
+      }
+      let insertPrefix = "\n";
+      if (this.$textarea.value.trim() === "")
+        insertPrefix = "";
+      const uploadPlaceholderTxt = `${insertPrefix}![](Uploading ${file.name}...)`;
+      this.insertContent(uploadPlaceholderTxt);
+      let resp;
+      try {
+        resp = yield new Api(this.ctx).imgUpload(file);
+      } catch (err) {
+        console.error(err);
+        this.showNotify(`\u56FE\u7247\u4E0A\u4F20\u5931\u8D25\uFF0C${err.msg}`, "e");
+      }
+      if (!!resp && resp.img_url) {
+        let imgURL = resp.img_url;
+        if (!isValidURL(imgURL))
+          imgURL = getURLBasedOnApi(this.ctx, imgURL);
+        this.setContent(this.$textarea.value.replace(uploadPlaceholderTxt, `${insertPrefix}![](${imgURL})`));
+      } else {
+        this.setContent(this.$textarea.value.replace(uploadPlaceholderTxt, ""));
+      }
+    });
+  }
   insertContent(val) {
     if (document.selection) {
       this.$textarea.focus();
@@ -3927,7 +4139,7 @@ class Editor extends Component {
     this.setContent("");
     this.cancelReply();
   }
-  getContent() {
+  getFinalContent() {
     let content = this.getContentOriginal();
     if (this.plugList && this.plugList.emoticons) {
       const emoticonsPlug2 = this.plugList.emoticons;
@@ -3939,7 +4151,7 @@ class Editor extends Component {
     return this.$textarea.value || "";
   }
   getContentMarked() {
-    return marked(this.ctx, this.getContent());
+    return marked(this.ctx, this.getFinalContent());
   }
   initBottomPart() {
     this.initReply();
@@ -3988,7 +4200,7 @@ class Editor extends Component {
   }
   submit() {
     return __async(this, null, function* () {
-      if (this.getContent().trim() === "") {
+      if (this.getFinalContent().trim() === "") {
         this.$textarea.focus();
         return;
       }
@@ -3996,7 +4208,7 @@ class Editor extends Component {
       showLoading(this.$el);
       try {
         const nComment = yield new Api(this.ctx).add({
-          content: this.getContent(),
+          content: this.getFinalContent(),
           nick: this.user.data.nick,
           email: this.user.data.email,
           link: this.user.data.link,
@@ -5071,6 +5283,7 @@ class ReadMoreBtn {
       this.hide();
   }
 }
+const backendMinVersion = "2.1.1";
 class ListLite extends Component {
   constructor(ctx) {
     super(ctx);
@@ -5152,17 +5365,25 @@ class ListLite extends Component {
     });
   }
   onLoad(data, offset) {
+    var _a, _b;
     if (this.pageMode === "pagination") {
       this.clearAllComments();
     }
     this.data = data;
-    if (this.ctx.conf.versionCheck && this.versionCheck(data.api_version))
+    const feMinVersion = ((_a = data.api_version) == null ? void 0 : _a.fe_min_version) || "0.0.0";
+    if (this.ctx.conf.versionCheck && this.versionCheck("\u524D\u7AEF", feMinVersion, "2.2.0"))
+      return;
+    if (this.ctx.conf.versionCheck && this.versionCheck("\u540E\u7AEF", backendMinVersion, (_b = data.api_version) == null ? void 0 : _b.version))
       return;
+    if (data.conf && typeof data.conf.img_upload === "boolean") {
+      this.ctx.conf.imgUpload = data.conf.img_upload;
+    }
     this.importComments(data.comments);
     this.refreshPagination(offset, this.flatMode ? data.total : data.total_roots);
     this.refreshUI();
     this.ctx.trigger("unread-update", { notifies: data.unread || [] });
     this.ctx.trigger("comments-loaded");
+    this.ctx.trigger("conf-updated");
     if (this.onAfterLoad)
       this.onAfterLoad(data);
   }
@@ -5427,19 +5648,19 @@ class ListLite extends Component {
       });
     }
   }
-  versionCheck(versionData) {
-    const needVersion = (versionData == null ? void 0 : versionData.fe_min_version) || "0.0.0";
-    const needUpdate = versionCompare(needVersion, "2.1.7") === 1;
+  versionCheck(name, needVersion, curtVersion) {
+    const needUpdate = versionCompare(needVersion, curtVersion) === 1;
     if (needUpdate) {
-      const errEl = createElement(`<div>\u524D\u7AEF Artalk \u7248\u672C\u5DF2\u8FC7\u65F6\uFF0C\u8BF7\u66F4\u65B0\u4EE5\u83B7\u5F97\u5B8C\u6574\u4F53\u9A8C<br/>\u82E5\u60A8\u662F\u7AD9\u70B9\u7BA1\u7406\u5458\uFF0C\u8BF7\u524D\u5F80 \u201C<a href="https://artalk.js.org/" target="_blank">\u5B98\u65B9\u6587\u6863</a>\u201D \u83B7\u53D6\u5E2E\u52A9<br/><br/><span style="color: var(--at-color-meta);">\u524D\u7AEF\u7248\u672C ${"2.1.7"}\uFF0C\u9700\u6C42\u7248\u672C >= ${needVersion}</span><br/><br/></div>`);
+      const errEl = createElement(`<div>Artalk ${name}\u7248\u672C\u5DF2\u8FC7\u65F6\uFF0C\u8BF7\u66F4\u65B0\u4EE5\u83B7\u5F97\u5B8C\u6574\u4F53\u9A8C<br/>\u5982\u679C\u4F60\u662F\u7BA1\u7406\u5458\uFF0C\u8BF7\u524D\u5F80 \u201C<a href="https://artalk.js.org/" target="_blank">\u5B98\u65B9\u6587\u6863</a>\u201D \u83B7\u5F97\u5E2E\u52A9<br/><br/><span style="color: var(--at-color-meta);">\u5F53\u524D${name}\u7248\u672C ${curtVersion}\uFF0C\u9700\u6C42\u7248\u672C >= ${needVersion}</span><br/><br/></div>`);
       const ignoreBtn = createElement('<span style="cursor:pointer;">\u5FFD\u7565</span>');
       ignoreBtn.onclick = () => {
-        setError(this.ctx, null);
+        setError(this.$el.parentElement, null);
         this.ctx.conf.versionCheck = false;
+        this.ctx.trigger("conf-updated");
         this.fetchComments(0);
       };
       errEl.append(ignoreBtn);
-      setError(this.ctx, errEl, '<span class="atk-warn-title">Artalk Warn</span>');
+      setError(this.$el.parentElement, errEl, '<span class="atk-warn-title">Artalk Warn</span>');
     }
     return needUpdate;
   }
@@ -5469,8 +5690,10 @@ class List extends ListLite {
     this.repositionAt = this.$el;
     this.initListActionBtn();
     this.$commentCount = this.$el.querySelector(".atk-comment-count");
-    this.initDropdown();
-    this.$el.querySelector(".atk-copyright").innerHTML = `Powered By <a href="https://artalk.js.org" target="_blank" title="Artalk v${"2.1.7"}">Artalk</a>`;
+    if (this.ctx.conf.listSort) {
+      this.initDropdown();
+    }
+    this.$el.querySelector(".atk-copyright").innerHTML = `Powered By <a href="https://artalk.js.org" target="_blank" title="Artalk v${"2.2.0"}">Artalk</a>`;
     this.ctx.on("list-reload", () => this.fetchComments(0));
     this.ctx.on("list-refresh-ui", () => this.refreshUI());
     this.ctx.on("list-import", (data) => this.importComments(data));
@@ -5576,7 +5799,7 @@ class List extends ListLite {
   initDropdown() {
     this.$dropdownWrap = this.$commentCount;
     this.$commentCount.classList.add("atk-dropdown-wrap");
-    this.$commentsWrap.append(createElement(`<span class="atk-arrow-down-icon"></span>`));
+    this.$dropdownWrap.append(createElement(`<span class="atk-arrow-down-icon"></span>`));
     const reloadUseParamsEditor = (func) => {
       this.paramsEditor = (p) => {
         func(p);
@@ -5676,11 +5899,31 @@ class SidebarLayer extends Component {
         this.$el.style.transform = "translate(0, 0)";
       }, 20);
       if (this.firstShow) {
+        if (this.ctx.user.data.isAdmin) {
+          const resp = yield new Api(this.ctx).loginStatus();
+          if (!resp.is_login) {
+            yield new Promise((resolve, reject) => {
+              this.ctx.trigger("checker-admin", {
+                onSuccess: () => {
+                  resolve(null);
+                  setTimeout(() => {
+                    this.show();
+                  }, 500);
+                },
+                onCancel: () => {
+                  var _a;
+                  (_a = this.layer) == null ? void 0 : _a.hide();
+                }
+              });
+            });
+          }
+        }
         this.$iframeWrap.innerHTML = "";
         this.$iframe = createElement("<iframe></iframe>");
-        const baseURL = `${this.conf.server.replace(/\/$/, "")}/../sidebar/`;
+        const baseURL = getURLBasedOnApi(this.ctx, "sidebar/");
         const userData = encodeURIComponent(JSON.stringify(this.ctx.user.data));
-        this.iframeLoad(`${baseURL}?pageKey=${encodeURIComponent(this.conf.pageKey)}&site=${encodeURIComponent(this.conf.site || "")}&user=${userData}${this.conf.darkMode ? `&darkMode=1` : ``}`);
+        const location = window.location;
+        this.iframeLoad(`${baseURL}?pageKey=${encodeURIComponent(this.conf.pageKey)}&site=${encodeURIComponent(this.conf.site || "")}&user=${userData}&referer=${encodeURIComponent(`${location.protocol}//${location.host}${location.pathname}`)}${this.conf.darkMode ? `&darkMode=1` : ``}`);
         this.$iframeWrap.append(this.$iframe);
         this.firstShow = false;
       } else {
@@ -5760,6 +6003,7 @@ const _Artalk = class {
     this.$root.innerHTML = "";
     this.initDarkMode();
     this.checkerLauncher = new CheckerLauncher(this.ctx);
+    initMarked(this.ctx);
     this.editor = new Editor(this.ctx);
     this.$root.appendChild(this.editor.$el);
     this.list = new List(this.ctx);
@@ -5769,6 +6013,11 @@ const _Artalk = class {
     this.list.fetchComments(0);
     this.initEventBind();
     this.initPV();
+    _Artalk.Plugins.forEach((plugin) => {
+      if (typeof plugin === "function") {
+        plugin(this.ctx);
+      }
+    });
   }
   initEventBind() {
     window.addEventListener("hashchange", () => {
@@ -5816,6 +6065,7 @@ const _Artalk = class {
   }
   setDarkMode(darkMode) {
     this.ctx.conf.darkMode = darkMode;
+    this.ctx.trigger("conf-updated");
     this.initDarkMode();
   }
   initPV() {
@@ -5838,7 +6088,11 @@ const _Artalk = class {
   trigger(name, payload) {
     this.ctx.trigger(name, payload, "external");
   }
+  static Use(plugin) {
+    this.Plugins.push(plugin);
+  }
 };
 let Artalk = _Artalk;
 __publicField(Artalk, "defaults", defaults$3);
+__publicField(Artalk, "Plugins", []);
 export { Artalk as default };