artalk 2.7.1 → 2.7.3

package/dist/{ArtalkLite.es.js → ArtalkLite.mjs}

@@ -42,7 +42,6 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 import { marked as marked$1 } from "marked";
-const main = "";
 function createElement(htmlStr = "") {
   const div = document.createElement("div");
   div.innerHTML = htmlStr.trim();
@@ -211,24 +210,6 @@ function getURLBasedOnApi(opts) {
 function getURLBasedOn(baseURL, path) {
   return `${baseURL.replace(/\/$/, "")}/${path.replace(/^\//, "")}`;
 }
-function mergeDeep(target, source) {
-  const isObject = (obj) => obj && typeof obj === "object";
-  if (!isObject(target) || !isObject(source)) {
-    return source;
-  }
-  Object.keys(source).forEach((key) => {
-    const targetValue = target[key];
-    const sourceValue = source[key];
-    if (Array.isArray(targetValue) && Array.isArray(sourceValue)) {
-      target[key] = targetValue.concat(sourceValue);
-    } else if (isObject(targetValue) && isObject(sourceValue)) {
-      target[key] = mergeDeep(__spreadValues({}, targetValue), sourceValue);
-    } else {
-      target[key] = sourceValue;
-    }
-  });
-  return target;
-}
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
@@ -629,48 +610,6 @@ function getDefaultExportFromCjs(x) {
     });
   })(typeof self !== "undefined" ? self : commonjsGlobal);
 });
-const LOCAL_USER_KEY = "ArtalkUser";
-class User {
-  constructor() {
-    __publicField(this, "data");
-    __publicField(this, "onUserChanged", null);
-    const localUser = JSON.parse(window.localStorage.getItem(LOCAL_USER_KEY) || "{}");
-    this.data = {
-      nick: localUser.nick || "",
-      email: localUser.email || "",
-      link: localUser.link || "",
-      token: localUser.token || "",
-      isAdmin: localUser.isAdmin || false
-    };
-  }
-  /** 保存用户到 localStorage 中 */
-  update(obj = {}) {
-    Object.entries(obj).forEach(([key, value]) => {
-      this.data[key] = value;
-    });
-    window.localStorage.setItem(LOCAL_USER_KEY, JSON.stringify(this.data));
-    this.onUserChanged && this.onUserChanged(this.data);
-  }
-  setOnUserChanged(fn) {
-    this.onUserChanged = fn;
-  }
-  /**
-   * Logout
-   *
-   * @description Logout will clear login status, but not clear user data (nick, email, link)
-   */
-  logout() {
-    this.update({
-      token: "",
-      isAdmin: false
-    });
-  }
-  /** 是否已填写基本用户信息 */
-  checkHasBasicUserInfo() {
-    return !!this.data.nick && !!this.data.email;
-  }
-}
-const UserInstance = new User();
 const en = {
   /* Editor */
   placeholder: "Leave a comment",
@@ -747,7 +686,8 @@ const en = {
   reqAborted: "Request timed out or terminated unexpectedly",
   updateMsg: "Please update Artalk {name} to get the full experience",
   currentVersion: "Current Version",
-  ignore: "Ignore"
+  ignore: "Ignore",
+  open: "Open"
 };
 const zhCN = {
   /* Editor */
@@ -825,7 +765,8 @@ const zhCN = {
   reqAborted: "请求超时或意外终止",
   updateMsg: "请更新 Artalk {name} 以获得完整体验",
   currentVersion: "当前版本",
-  ignore: "忽略"
+  ignore: "忽略",
+  open: "打开"
 };
 const GLOBAL_LOCALES_KEY = "ArtalkI18n";
 const internal = {
@@ -862,9 +803,9 @@ function t(key, args = {}) {
 function Fetch$1(opts, input, init2, timeout) {
   return __async(this, null, function* () {
     var _a, _b;
-    if (UserInstance.data.token) {
+    if (opts.apiToken) {
       const headers = new Headers(init2.headers);
-      headers.set("Authorization", `Bearer ${UserInstance.data.token}`);
+      headers.set("Authorization", `Bearer ${opts.apiToken}`);
       init2.headers = headers;
     }
     const resp = yield timeoutFetch(input, timeout || opts.timeout || 15e3, init2);
@@ -956,6 +897,20 @@ class ApiBase {
       return Fetch$1(this.options, this.options.baseURL + path, init2, timeout);
     });
   }
+  /**
+   * Carry user info to request params
+   *
+   * @param params Request params
+   * @returns Request params with user info
+   */
+  withUserInfo(params) {
+    const user = this.options.userInfo;
+    if (user == null ? void 0 : user.name)
+      params.name = user.name;
+    if (user == null ? void 0 : user.email)
+      params.email = user.email;
+    return params;
+  }
 }
 class CommentApi extends ApiBase {
   /** 评论 · 获取 */
@@ -968,10 +923,7 @@ class CommentApi extends ApiBase {
     };
     if (flatMode)
       params.flat_mode = flatMode;
-    if (UserInstance.checkHasBasicUserInfo()) {
-      params.name = UserInstance.data.nick;
-      params.email = UserInstance.data.email;
-    }
+    this.withUserInfo(params);
     if (paramsEditor)
       paramsEditor(params);
     return this.POST("/get", params);
@@ -1020,10 +972,7 @@ class CommentApi extends ApiBase {
         target_id: targetID,
         type
       };
-      if (UserInstance.checkHasBasicUserInfo()) {
-        params.name = UserInstance.data.nick;
-        params.email = UserInstance.data.email;
-      }
+      this.withUserInfo(params);
       const data = yield this.POST("/vote", params);
       return data;
     });
@@ -1192,10 +1141,7 @@ class UserApi extends ApiBase {
   /** 用户 · 登录状态 */
   loginStatus() {
     return __async(this, null, function* () {
-      const data = yield this.POST("/login-status", {
-        name: UserInstance.data.nick,
-        email: UserInstance.data.email
-      });
+      const data = yield this.POST("/login-status", this.withUserInfo({}));
       return data || { is_login: false, is_admin: false };
     });
   }
@@ -1215,8 +1161,7 @@ class UserApi extends ApiBase {
       delete params.comment_id;
       delete params.notify_key;
       params.read_all = true;
-      params.name = UserInstance.data.nick;
-      params.email = UserInstance.data.email;
+      this.withUserInfo(params);
     }
     return this.POST(`/mark-read`, params);
   }
@@ -1353,10 +1298,9 @@ class UploadApi extends ApiBase {
   imgUpload(file) {
     return __async(this, null, function* () {
       const params = {
-        name: UserInstance.data.nick,
-        email: UserInstance.data.email,
         page_key: this.options.pageKey
       };
+      this.withUserInfo(params);
       const form = ToFormData(params);
       form.set("file", file);
       const init2 = {
@@ -1513,12 +1457,12 @@ function parser$1(html, handler) {
     }
   }
   function parseComment() {
-    var index2 = html.indexOf("-->");
-    if (index2 >= 0) {
+    var index = html.indexOf("-->");
+    if (index >= 0) {
       if (handler.comment) {
-        handler.comment(html.substring(4, index2));
+        handler.comment(html.substring(4, index));
       }
-      html = html.substring(index2 + 3);
+      html = html.substring(index + 3);
       chars = false;
     }
   }
@@ -1527,10 +1471,10 @@ function parser$1(html, handler) {
       return;
     }
     var text;
-    var index2 = html.indexOf("<");
-    if (index2 >= 0) {
-      text = html.substring(0, index2);
-      html = html.substring(index2);
+    var index = html.indexOf("<");
+    if (index >= 0) {
+      text = html.substring(0, index);
+      html = html.substring(index);
     } else {
       text = html;
       html = "";
@@ -1881,13 +1825,13 @@ var hanabi$1 = { exports: {} };
       };
     });
     var defaultColors = ["23AC69", "91C132", "F19726", "E8552D", "1AAB8E", "E1147F", "2980C1", "1BA1E6", "9FA0A0", "F19726", "E30B20", "E30B20", "A3338B"];
-    var index2 = function(input, ref) {
+    var index = function(input, ref) {
       if (ref === void 0)
         ref = {};
       var colors = ref.colors;
       if (colors === void 0)
         colors = defaultColors;
-      var index3 = 0;
+      var index2 = 0;
       var cache = {};
       var wordRe = /[\u4E00-\u9FFF\u3400-\u4dbf\uf900-\ufaff\u3040-\u309f\uac00-\ud7af\u0400-\u04FF]+|\w+/;
       var leftAngleRe = /</;
@@ -1903,18 +1847,18 @@ var hanabi$1 = { exports: {} };
         if (cache[word]) {
           color = cache[word];
         } else {
-          color = colors[index3];
+          color = colors[index2];
           cache[word] = color;
         }
         var out = '<span style="color: #' + color + '">' + word + "</span>";
-        index3 = ++index3 % colors.length;
+        index2 = ++index2 % colors.length;
         return out;
       });
     };
     function toComment(cm) {
       return '<span style="color: slategray">' + cm + "</span>";
     }
-    return index2;
+    return index;
   });
 })(hanabi$1);
 var hanabiExports = hanabi$1.exports;
@@ -1993,6 +1937,26 @@ function marked(src) {
 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>");
 }
+function mergeDeep(...objects) {
+  const isObject = (obj) => obj && typeof obj === "object" && obj.constructor === Object;
+  return objects.reduce((prev, obj) => {
+    Object.keys(obj != null ? obj : {}).forEach((key) => {
+      if (key === "__proto__" || key === "constructor" || key === "prototype") {
+        return;
+      }
+      const pVal = prev[key];
+      const oVal = obj[key];
+      if (Array.isArray(pVal) && Array.isArray(oVal)) {
+        prev[key] = pVal.concat(...oVal);
+      } else if (isObject(pVal) && isObject(oVal)) {
+        prev[key] = mergeDeep(pVal, oVal);
+      } else {
+        prev[key] = oVal;
+      }
+    });
+    return prev;
+  }, {});
+}
 class DataManager {
   constructor(events) {
     __publicField(this, "loading", false);
@@ -2150,16 +2114,9 @@ const defaults = {
   useBackendConf: true,
   locale: "zh-CN"
 };
-{
-  defaults.vote = false;
-  defaults.uaBadge = false;
-  defaults.emoticons = false;
-}
-function handelCustomConf(customConf) {
-  const conf = mergeDeep(defaults, customConf);
-  if (customConf.el)
-    conf.el = customConf.el;
-  if (typeof conf.el === "string" && !!conf.el) {
+function handelCustomConf(customConf, full = false) {
+  const conf = full ? mergeDeep(defaults, customConf) : customConf;
+  if (conf.el && typeof conf.el === "string") {
     try {
       const findEl = document.querySelector(conf.el);
       if (!findEl)
@@ -2170,20 +2127,18 @@ function handelCustomConf(customConf) {
       throw new Error("Please check your Artalk `el` config.");
     }
   }
-  conf.server = conf.server.replace(/\/$/, "").replace(/\/api\/?$/, "");
-  if (!conf.pageKey) {
+  if (conf.pageKey === "")
     conf.pageKey = `${window.location.pathname}`;
-  }
-  if (!conf.pageTitle) {
+  if (conf.pageTitle === "")
     conf.pageTitle = `${document.title}`;
-  }
-  if (conf.locale === "auto") {
+  if (conf.server)
+    conf.server = conf.server.replace(/\/$/, "").replace(/\/api\/?$/, "");
+  if (conf.locale === "auto")
     conf.locale = navigator.language;
-  }
-  if (conf.flatMode === true || Number(conf.nestMax) <= 1)
-    conf.flatMode = true;
   if (conf.flatMode === "auto")
     conf.flatMode = window.matchMedia("(max-width: 768px)").matches;
+  if (typeof conf.nestMax === "number" && Number(conf.nestMax) <= 1)
+    conf.flatMode = true;
   return conf;
 }
 function handleConfFormServer(conf) {
@@ -2216,6 +2171,11 @@ function convertApiOptions(conf, ctx) {
     pageKey: conf.pageKey || "",
     pageTitle: conf.pageTitle || "",
     timeout: conf.reqTimeout,
+    apiToken: ctx == null ? void 0 : ctx.get("user").getData().token,
+    userInfo: (ctx == null ? void 0 : ctx.get("user").checkHasBasicUserInfo()) ? {
+      name: ctx == null ? void 0 : ctx.get("user").getData().nick,
+      email: ctx == null ? void 0 : ctx.get("user").getData().email
+    } : void 0,
     onNeedCheckAdmin(payload) {
       ctx == null ? void 0 : ctx.checkAdmin({
         onSuccess: () => {
@@ -2241,7 +2201,7 @@ function convertApiOptions(conf, ctx) {
   };
 }
 class Context {
-  constructor(conf, $root) {
+  constructor(conf) {
     /* 运行参数 */
     __publicField(this, "conf");
     __publicField(this, "data");
@@ -2249,7 +2209,7 @@ class Context {
     /* Event Manager */
     __publicField(this, "events", new EventManager());
     this.conf = conf;
-    this.$root = $root || document.createElement("div");
+    this.$root = conf.el;
     this.$root.classList.add("artalk");
     this.$root.innerHTML = "";
     this.data = new DataManager(this.events);
@@ -2279,7 +2239,7 @@ class Context {
     this.data.fetchComments({ offset: 0 });
   }
   listGotoFirst() {
-    this.trigger("list-goto-first");
+    this.events.trigger("list-goto-first");
   }
   /* 编辑器 */
   editorShowLoading() {
@@ -2324,11 +2284,17 @@ class Context {
   }
   setDarkMode(darkMode) {
     this.conf.darkMode = darkMode;
-    this.trigger("dark-mode-changed", darkMode);
+    this.events.trigger("dark-mode-changed", darkMode);
   }
   updateConf(nConf) {
-    this.conf = mergeDeep(this.conf, handelCustomConf(nConf));
-    this.trigger("conf-loaded", this.conf);
+    this.conf = mergeDeep(this.conf, handelCustomConf(nConf, false));
+    this.events.trigger("conf-loaded", this.conf);
+  }
+  getConf() {
+    return this.conf;
+  }
+  getEl() {
+    return this.$root;
   }
   getMarked() {
     return getInstance();
@@ -2535,7 +2501,7 @@ function imgBody(checker) {
 }
 function iframeBody(checker) {
   const $iframeWrap = createElement(`<div class="atk-checker-iframe-wrap"></div>`);
-  const $iframe = createElement(`<iframe class="atk-fade-in"></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().getIframeURLBase() || ""}/api/captcha/get?t=${+/* @__PURE__ */ new Date()}`;
@@ -2599,8 +2565,8 @@ const AdminChecker = {
   inputType: "password",
   request(checker, inputVal) {
     const data = {
-      name: UserInstance.data.nick,
-      email: UserInstance.data.email,
+      name: checker.getUser().getData().nick,
+      email: checker.getUser().getData().email,
       password: inputVal
     };
     return (() => __async(this, null, function* () {
@@ -2612,7 +2578,7 @@ const AdminChecker = {
     return createElement(`<span>${t("adminCheck")}</span>`);
   },
   onSuccess(checker, userToken, inputVal, formEl) {
-    UserInstance.update({
+    checker.getUser().update({
       isAdmin: true,
       token: userToken
     });
@@ -2645,6 +2611,7 @@ class CheckerLauncher {
       },
       get: (key) => checkerStore[key],
       getOpts: () => this.opts,
+      getUser: () => this.opts.getCtx().get("user"),
       getApi: () => this.opts.getApi(),
       hideInteractInput: () => {
         hideInteractInput = true;
@@ -3036,7 +3003,7 @@ class SidebarLayer extends Component {
     });
   }
   createIframe(view) {
-    const $iframe = createElement("<iframe></iframe>");
+    const $iframe = createElement('<iframe referrerpolicy="strict-origin-when-cross-origin"></iframe>');
     const baseURL = getURLBasedOnApi({
       base: this.ctx.conf.server,
       path: "/sidebar/"
@@ -3044,7 +3011,7 @@ class SidebarLayer extends Component {
     const query = {
       pageKey: this.conf.pageKey,
       site: this.conf.site || "",
-      user: JSON.stringify(UserInstance.data),
+      user: JSON.stringify(this.ctx.get("user").getData()),
       time: +/* @__PURE__ */ new Date()
     };
     if (view)
@@ -3121,7 +3088,7 @@ class ListLayout {
   constructor(options) {
     this.options = options;
   }
-  // TODO refactor `if syntax` to strategy pattern
+  // TODO: refactor `if syntax` to strategy pattern
   import(comments) {
     if (this.options.flatMode) {
       comments.forEach((commentData) => {
@@ -3197,9 +3164,9 @@ class ListLayout {
     scrollIntoView(comment.getEl());
   }
 }
-const win = window || {};
-const nav = navigator || {};
 function Detect(userAgent) {
+  const win = window || {};
+  const nav = navigator || {};
   const u = String(userAgent || nav.userAgent);
   const dest = {
     os: "",
@@ -4548,20 +4515,6 @@ const initListPaginatorFunc = (ctx) => {
     var _a;
     (_a = paginator == null ? void 0 : paginator.showErr) == null ? void 0 : _a.call(paginator, t("loadFail"));
   });
-  const autoSwitchPageForFindComment = (commentID) => {
-    const comment = ctx.getData().findComment(commentID);
-    if (!!comment || !(paginator == null ? void 0 : paginator.getHasMore()))
-      return;
-    ctx.on("list-loaded", () => {
-      autoSwitchPageForFindComment(commentID);
-    }, { once: true });
-    setTimeout(() => {
-      paginator == null ? void 0 : paginator.next();
-    }, 80);
-  };
-  ctx.on("list-goto", (commentID) => {
-    autoSwitchPageForFindComment(commentID);
-  });
   ctx.on("list-fetch", (params) => {
     paginator == null ? void 0 : paginator.setLoading(true);
   });
@@ -4759,6 +4712,47 @@ class LayerManager {
     return layer;
   }
 }
+const LOCAL_USER_KEY = "ArtalkUser";
+class User {
+  constructor(opts) {
+    __publicField(this, "data");
+    this.opts = opts;
+    const localUser = JSON.parse(window.localStorage.getItem(LOCAL_USER_KEY) || "{}");
+    this.data = {
+      nick: localUser.nick || "",
+      email: localUser.email || "",
+      link: localUser.link || "",
+      token: localUser.token || "",
+      isAdmin: localUser.isAdmin || false
+    };
+  }
+  getData() {
+    return this.data;
+  }
+  /** 保存用户到 localStorage 中 */
+  update(obj = {}) {
+    Object.entries(obj).forEach(([key, value]) => {
+      this.data[key] = value;
+    });
+    window.localStorage.setItem(LOCAL_USER_KEY, JSON.stringify(this.data));
+    this.opts.onUserChanged && this.opts.onUserChanged(this.data);
+  }
+  /**
+   * Logout
+   *
+   * @description Logout will clear login status, but not clear user data (nick, email, link)
+   */
+  logout() {
+    this.update({
+      token: "",
+      isAdmin: false
+    });
+  }
+  /** 是否已填写基本用户信息 */
+  checkHasBasicUserInfo() {
+    return !!this.data.nick && !!this.data.email;
+  }
+}
 const services = {
   // I18n
   i18n(ctx) {
@@ -4769,10 +4763,12 @@ const services = {
   },
   // User Store
   user(ctx) {
-    UserInstance.setOnUserChanged((user) => {
-      ctx == null ? void 0 : ctx.trigger("user-changed", user);
+    const user = new User({
+      onUserChanged: (data) => {
+        ctx.trigger("user-changed", data);
+      }
     });
-    return UserInstance;
+    return user;
   },
   // 弹出层
   layerManager(ctx) {
@@ -4822,17 +4818,19 @@ function showErrorDialog(opts) {
     errEl.appendChild($retryBtn);
   }
   if (opts.onOpenSidebar) {
-    const $openSidebar = createElement('<span atk-only-admin-show> | <span style="cursor:pointer;">打开控制台</span></span>');
+    const $openSidebar = createElement(`<span atk-only-admin-show> | <span style="cursor:pointer;">${t("open") + t("ctrlCenter")}</span></span>`);
     errEl.appendChild($openSidebar);
-    if (!UserInstance.data.isAdmin) {
-      $openSidebar.classList.add("atk-hide");
-    }
     $openSidebar.onclick = () => opts.onOpenSidebar && opts.onOpenSidebar();
   }
   setError(opts.$err, errEl);
 }
 const ConfRemoter = (ctx) => {
   ctx.on("inited", () => {
+    if (ctx.conf.immediateFetch === false)
+      return;
+    ctx.trigger("conf-fetch");
+  });
+  ctx.on("conf-fetch", () => {
     loadConf(ctx);
   });
 };
@@ -4862,9 +4860,10 @@ function loadConf(ctx) {
       errMsg: err.msg || String(err),
       errData: err.data,
       retryFn: () => loadConf(ctx),
-      onOpenSidebar: () => ctx.showSidebar({
+      onOpenSidebar: ctx.get("user").getData().isAdmin ? () => ctx.showSidebar({
         view: sidebarOpenView
-      })
+      }) : void 0
+      // only show open sidebar button when user is admin
     });
     throw err;
   }).then(() => {
@@ -4969,7 +4968,7 @@ class SubmitAddPreset {
     });
   }
   getSubmitAddParams() {
-    const { nick, email, link } = UserInstance.data;
+    const { nick, email, link } = this.kit.useUser().getData();
     const conf = this.kit.useConf();
     return {
       content: this.kit.useEditor().getContentFinal(),
@@ -5167,7 +5166,7 @@ class StateEdit extends EditorPlug {
       ui.$editCancelBtn = void 0;
     }
     this.comment = void 0;
-    const { nick, email, link } = UserInstance.data;
+    const { nick, email, link } = this.kit.useUser().getData();
     ui.$nick.value = nick;
     ui.$email.value = email;
     ui.$link.value = link;
@@ -5206,7 +5205,7 @@ 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>`));
-    if (!UserInstance.data.isAdmin) {
+    if (!this.kit.useUser().getData().isAdmin) {
       this.kit.useUI().$textarea.style.display = "none";
       this.kit.useEvents().trigger("panel-close");
       this.kit.useUI().$bottom.style.display = "none";
@@ -5251,14 +5250,14 @@ class HeaderUser extends EditorPlug {
     const onInput = ({ $input, field }) => {
       if (this.kit.useEditor().getState() === "edit")
         return;
-      UserInstance.update({ [field]: $input.value.trim() });
+      this.kit.useUser().update({ [field]: $input.value.trim() });
       if (field === "nick" || field === "email")
         this.fetchUserInfo();
     };
     this.kit.useMounted(() => {
       Object.entries(this.kit.useEditor().getHeaderInputEls()).forEach(([key, $input]) => {
         $input.placeholder = `${t(key)}`;
-        $input.value = UserInstance.data[key] || "";
+        $input.value = this.kit.useUser().getData()[key] || "";
       });
       this.kit.useEvents().on("header-input", onInput);
     });
@@ -5270,7 +5269,7 @@ class HeaderUser extends EditorPlug {
    * Fetch user info from server
    */
   fetchUserInfo() {
-    UserInstance.logout();
+    this.kit.useUser().logout();
     if (this.query.timer)
       window.clearTimeout(this.query.timer);
     if (this.query.abortFn)
@@ -5278,8 +5277,8 @@ class HeaderUser extends EditorPlug {
     this.query.timer = window.setTimeout(() => {
       this.query.timer = null;
       const { req, abort } = this.kit.useApi().user.userGet(
-        UserInstance.data.nick,
-        UserInstance.data.email
+        this.kit.useUser().getData().nick,
+        this.kit.useUser().getData().email
       );
       this.query.abortFn = abort;
       req.then((data) => this.onUserInfoFetched(data)).catch((err) => {
@@ -5296,9 +5295,9 @@ class HeaderUser extends EditorPlug {
   onUserInfoFetched(data) {
     var _a;
     if (!data.is_login)
-      UserInstance.logout();
+      this.kit.useUser().logout();
     this.kit.useGlobalCtx().getData().updateUnreads(data.unread);
-    if (UserInstance.checkHasBasicUserInfo() && !data.is_login && ((_a = data.user) == null ? void 0 : _a.is_admin)) {
+    if (this.kit.useUser().checkHasBasicUserInfo() && !data.is_login && ((_a = data.user) == null ? void 0 : _a.is_admin)) {
       this.kit.useGlobalCtx().checkAdmin({
         onSuccess: () => {
         }
@@ -5306,7 +5305,7 @@ class HeaderUser extends EditorPlug {
     }
     if (data.user && data.user.link) {
       this.kit.useUI().$link.value = data.user.link;
-      UserInstance.update({ link: data.user.link });
+      this.kit.useUser().update({ link: data.user.link });
     }
   }
 }
@@ -5328,11 +5327,10 @@ class HeaderLink extends EditorPlug {
     const link = this.kit.useUI().$link.value.trim();
     if (!!link && !/^(http|https):\/\//.test(link)) {
       this.kit.useUI().$link.value = `https://${link}`;
-      UserInstance.update({ link: this.kit.useUI().$link.value });
+      this.kit.useUser().update({ link: this.kit.useUI().$link.value });
     }
   }
 }
-const emoticons = "";
 class Emoticons extends EditorPlug {
   constructor(kit) {
     super(kit);
@@ -5404,7 +5402,7 @@ class Emoticons extends EditorPlug {
         data.push(grp);
       };
       const remoteLoad = (d) => __async(this, null, function* () {
-        yield Promise.all(d.map((grp, index2) => __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)) {
@@ -5448,7 +5446,8 @@ class Emoticons extends EditorPlug {
         return json;
       } catch (err) {
         hideLoading(this.$panel);
-        setError(this.$panel, `表情加载失败 ${String(err)}`);
+        console.error("[Emoticons] Load Failed:", err);
+        setError(this.$panel, `${t("emoticon")}${t("loadFail")} ${String(err)}`);
         return [];
       }
     });
@@ -5456,9 +5455,9 @@ class Emoticons extends EditorPlug {
   /** 避免表情 item.key 为 null 的情况 */
   solveNullKey(data) {
     data.forEach((grp) => {
-      grp.items.forEach((item, index2) => {
+      grp.items.forEach((item, index) => {
         if (!item.key)
-          item.key = `${grp.name} ${index2 + 1}`;
+          item.key = `${grp.name} ${index + 1}`;
       });
     });
   }
@@ -5491,14 +5490,14 @@ class Emoticons extends EditorPlug {
     const dest = [];
     Object.entries(owoData).forEach(([grpName, grp]) => {
       const nGrp = { name: grpName, type: grp.type, items: [] };
-      grp.container.forEach((item, index2) => {
+      grp.container.forEach((item, index) => {
         const iconStr = item.icon;
         if (/<(img|IMG)/.test(iconStr)) {
           const find = /src=["'](.*?)["']/.exec(iconStr);
           if (find && find.length > 1)
             item.icon = find[1];
         }
-        nGrp.items.push({ key: item.text || `${grpName} ${index2 + 1}`, val: item.icon });
+        nGrp.items.push({ key: item.text || `${grpName} ${index + 1}`, val: item.icon });
       });
       dest.push(nGrp);
     });
@@ -5508,10 +5507,10 @@ class Emoticons extends EditorPlug {
   initEmoticonsList() {
     this.$grpWrap = createElement(`<div class="atk-grp-wrap"></div>`);
     this.$panel.append(this.$grpWrap);
-    this.emoticons.forEach((grp, index2) => {
+    this.emoticons.forEach((grp, index) => {
       const $grp = createElement(`<div class="atk-grp" style="display: none;"></div>`);
       this.$grpWrap.append($grp);
-      $grp.setAttribute("data-index", String(index2));
+      $grp.setAttribute("data-index", String(index));
       $grp.setAttribute("data-grp-name", grp.name);
       $grp.setAttribute("data-type", grp.type);
       grp.items.forEach((item) => {
@@ -5539,11 +5538,11 @@ class Emoticons extends EditorPlug {
     if (this.emoticons.length > 1) {
       this.$grpSwitcher = createElement(`<div class="atk-grp-switcher"></div>`);
       this.$panel.append(this.$grpSwitcher);
-      this.emoticons.forEach((grp, index2) => {
+      this.emoticons.forEach((grp, index) => {
         const $item = createElement("<span />");
         $item.innerText = grp.name;
-        $item.setAttribute("data-index", String(index2));
-        $item.onclick = () => this.openGrp(index2);
+        $item.setAttribute("data-index", String(index));
+        $item.onclick = () => this.openGrp(index);
         this.$grpSwitcher.append($item);
       });
     }
@@ -5551,18 +5550,18 @@ class Emoticons extends EditorPlug {
       this.openGrp(0);
   }
   /** 打开一个表情组 */
-  openGrp(index2) {
+  openGrp(index) {
     var _a, _b, _c;
     Array.from(this.$grpWrap.children).forEach((item) => {
       const el = item;
-      if (el.getAttribute("data-index") !== String(index2)) {
+      if (el.getAttribute("data-index") !== String(index)) {
         el.style.display = "none";
       } else {
         el.style.display = "";
       }
     });
     (_a = this.$grpSwitcher) == null ? void 0 : _a.querySelectorAll("span.active").forEach((item) => item.classList.remove("active"));
-    (_c = (_b = this.$grpSwitcher) == null ? void 0 : _b.querySelector(`span[data-index="${index2}"]`)) == null ? void 0 : _c.classList.add("active");
+    (_c = (_b = this.$grpSwitcher) == null ? void 0 : _b.querySelector(`span[data-index="${index}"]`)) == null ? void 0 : _c.classList.add("active");
     this.changeListHeight();
   }
   changeListHeight() {
@@ -5574,7 +5573,7 @@ class Emoticons extends EditorPlug {
     this.emoticons.forEach((grp) => {
       if (grp.type !== "image")
         return;
-      Object.entries(grp.items).forEach(([index2, item]) => {
+      Object.entries(grp.items).forEach(([index, item]) => {
         text = text.split(`:[${item.key}]`).join(`<img src="${item.val}" atk-emoticon="${item.key}">`);
       });
     });
@@ -5657,7 +5656,7 @@ class Upload extends EditorPlug {
       const fileExt = /[^.]+$/.exec(file.name);
       if (!fileExt || !AllowImgExts.includes(fileExt[0]))
         return;
-      if (!UserInstance.checkHasBasicUserInfo()) {
+      if (!this.kit.useUser().checkHasBasicUserInfo()) {
         this.kit.useEditor().showNotify(t("uploadLoginMsg"), "w");
         return;
       }
@@ -5692,7 +5691,6 @@ class Upload extends EditorPlug {
     });
   }
 }
-const preview = "";
 class Preview extends EditorPlug {
   constructor(kit) {
     super(kit);
@@ -5755,7 +5753,11 @@ class PlugKit {
   useEditor() {
     return this.plugs.editor;
   }
-  /** Use the context of global */
+  /**
+   * Use the context of global
+   *
+   * @deprecated The calls to this function should be reduced as much as possible
+   */
   useGlobalCtx() {
     return this.plugs.editor.ctx;
   }
@@ -5767,6 +5769,10 @@ class PlugKit {
   useApi() {
     return this.plugs.editor.ctx.getApi();
   }
+  /** Use the user manager */
+  useUser() {
+    return this.plugs.editor.ctx.get("user");
+  }
   /** Use the ui of editor */
   useUI() {
     return this.plugs.editor.getUI();
@@ -5984,7 +5990,7 @@ const SidebarBtn = (ctx) => {
   const syncByUser = () => {
     if (!$openSidebarBtn)
       return;
-    const user = ctx.get("user").data;
+    const user = ctx.get("user").getData();
     if (!!user.nick && !!user.email) {
       $openSidebarBtn.classList.remove("atk-hide");
       const $btnText = $openSidebarBtn.querySelector(".atk-text");
@@ -6083,7 +6089,7 @@ function extractCommentID() {
   }
   return commentId || null;
 }
-const version = "2.7.1";
+const version = "2.7.3";
 const Copyright = (ctx) => {
   ctx.on("conf-loaded", () => {
     const list = ctx.get("list");
@@ -6416,7 +6422,7 @@ function versionCheck(list, feVer, beVer) {
 }
 const AdminOnlyElem = (ctx) => {
   const scanApply = () => {
-    applyAdminOnlyEls(ctx.get("user").data.isAdmin, getAdminOnlyEls({
+    applyAdminOnlyEls(ctx.get("user").getData().isAdmin, getAdminOnlyEls({
       $root: ctx.$root
     }));
   };
@@ -6443,38 +6449,44 @@ function applyAdminOnlyEls(isAdmin, els) {
       $item.classList.add("atk-hide");
   });
 }
-const darkModeMedia = window.matchMedia("(prefers-color-scheme: dark)");
-let darkModeAutoFunc;
-function applyDarkMode($els, darkMode) {
-  const apply = (d) => {
-    $els.forEach(($el) => updateClassName($el, d));
-  };
-  if (darkMode === "auto") {
-    if (!darkModeAutoFunc) {
-      darkModeAutoFunc = (evt) => apply(evt.matches);
-      darkModeMedia.addEventListener("change", darkModeAutoFunc);
-    }
-    apply(darkModeMedia.matches);
-  } else {
-    if (darkModeAutoFunc)
-      darkModeMedia.removeEventListener("change", darkModeAutoFunc);
-    apply(darkMode);
-  }
-}
-const DarkModeClassName = "atk-dark-mode";
-function updateClassName($el, darkMode) {
-  if (darkMode)
-    $el.classList.add(DarkModeClassName);
-  else
-    $el.classList.remove(DarkModeClassName);
+let darkModeMedia;
+function updateClassnames($els, darkMode) {
+  const DarkModeClassName = "atk-dark-mode";
+  $els.forEach(($el) => {
+    if (darkMode)
+      $el.classList.add(DarkModeClassName);
+    else
+      $el.classList.remove(DarkModeClassName);
+  });
 }
 const DarkMode = (ctx) => {
-  const sync = () => {
-    applyDarkMode([ctx.$root, ctx.get("layerManager").getEl()], ctx.conf.darkMode);
+  let darkModeAutoHandler;
+  const sync = (darkMode) => {
+    const $els = [ctx.$root, ctx.get("layerManager").getEl()];
+    if (!darkModeMedia) {
+      darkModeMedia = window.matchMedia("(prefers-color-scheme: dark)");
+    }
+    if (darkMode === "auto") {
+      if (!darkModeAutoHandler) {
+        darkModeAutoHandler = (evt) => updateClassnames($els, evt.matches);
+        darkModeMedia.addEventListener("change", darkModeAutoHandler);
+      }
+      updateClassnames($els, darkModeMedia.matches);
+    } else {
+      if (darkModeAutoHandler) {
+        darkModeMedia.removeEventListener("change", darkModeAutoHandler);
+        darkModeAutoHandler = void 0;
+      }
+      updateClassnames($els, darkMode);
+    }
   };
-  ctx.on("inited", () => sync());
-  ctx.on("conf-loaded", () => sync());
-  ctx.on("dark-mode-changed", () => sync());
+  ctx.on("inited", () => sync(ctx.conf.darkMode));
+  ctx.on("conf-loaded", (conf) => sync(conf.darkMode));
+  ctx.on("dark-mode-changed", (darkMode) => sync(darkMode));
+  ctx.on("destroy", () => {
+    darkModeAutoHandler && (darkModeMedia == null ? void 0 : darkModeMedia.removeEventListener("change", darkModeAutoHandler));
+    darkModeAutoHandler = void 0;
+  });
 };
 const DefaultPlugins = [
   ConfRemoter,
@@ -6489,15 +6501,11 @@ const DefaultPlugins = [
 const GlobalPlugins = [...DefaultPlugins];
 class Artalk {
   constructor(conf) {
-    __publicField(this, "conf");
     __publicField(this, "ctx");
-    __publicField(this, "$root");
     /** Plugins */
     __publicField(this, "plugins", [...GlobalPlugins]);
-    this.conf = handelCustomConf(conf);
-    if (this.conf.el instanceof HTMLElement)
-      this.$root = this.conf.el;
-    this.ctx = new Context(this.conf, this.$root);
+    const handledConf = handelCustomConf(conf, true);
+    this.ctx = new Context(handledConf);
     Object.entries(services).forEach(([name, initService]) => {
       const obj = initService(this.ctx);
       if (obj)
@@ -6509,6 +6517,14 @@ class Artalk {
     });
     this.ctx.trigger("inited");
   }
+  /** Get the config of Artalk */
+  getConf() {
+    return this.ctx.getConf();
+  }
+  /** Get the root element of Artalk */
+  getEl() {
+    return this.ctx.$root;
+  }
   /** Update config of Artalk */
   update(conf) {
     this.ctx.updateConf(conf);
@@ -6521,7 +6537,7 @@ class Artalk {
   /** Destroy instance of Artalk */
   destroy() {
     this.ctx.trigger("destroy");
-    this.$root.remove();
+    this.ctx.$root.remove();
   }
   /** Add an event listener */
   on(name, handler) {
@@ -6554,7 +6570,7 @@ class Artalk {
   }
   /** Load count widget */
   static loadCountWidget(c) {
-    const conf = handelCustomConf(c);
+    const conf = handelCustomConf(c, true);
     initCountWidget({
       getApi: () => new Api(convertApiOptions(conf)),
       pageKey: conf.pageKey,
@@ -6563,18 +6579,25 @@ class Artalk {
       pvAdd: false
     });
   }
+  // ===========================
+  //         Deprecated
+  // ===========================
+  /** @deprecated Please use `getEl()` instead */
+  get $root() {
+    return this.ctx.$root;
+  }
+  /** @description Please use `getConf()` instead */
+  get conf() {
+    return this.ctx.getConf();
+  }
 }
-const index = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null
-}, Symbol.toStringTag, { value: "Module" }));
 const init = Artalk.init;
 const use = Artalk.use;
 const loadCountWidget = Artalk.loadCountWidget;
 export {
-  index as ArtalkType,
   Artalk as default,
   init,
   loadCountWidget,
   use
 };
-//# sourceMappingURL=ArtalkLite.es.js.map
+//# sourceMappingURL=ArtalkLite.mjs.map