artalk 2.7.1 → 2.7.2

package/dist/ArtalkLite.es.js

@@ -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();
@@ -629,48 +628,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 +704,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 +783,8 @@ const zhCN = {
   reqAborted: "请求超时或意外终止",
   updateMsg: "请更新 Artalk {name} 以获得完整体验",
   currentVersion: "当前版本",
-  ignore: "忽略"
+  ignore: "忽略",
+  open: "打开"
 };
 const GLOBAL_LOCALES_KEY = "ArtalkI18n";
 const internal = {
@@ -862,9 +821,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 +915,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 +941,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 +990,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 +1159,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 +1179,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 +1316,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 = {
@@ -2216,6 +2178,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: () => {
@@ -2279,7 +2246,7 @@ class Context {
     this.data.fetchComments({ offset: 0 });
   }
   listGotoFirst() {
-    this.trigger("list-goto-first");
+    this.events.trigger("list-goto-first");
   }
   /* 编辑器 */
   editorShowLoading() {
@@ -2324,11 +2291,11 @@ 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.events.trigger("conf-loaded", this.conf);
   }
   getMarked() {
     return getInstance();
@@ -2535,7 +2502,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 +2566,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 +2579,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 +2612,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 +3004,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 +3012,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 +3089,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 +3165,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 +4516,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 +4713,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 +4764,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,11 +4819,8 @@ 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);
@@ -4862,9 +4856,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 +4964,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 +5162,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 +5201,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 +5246,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 +5265,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 +5273,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 +5291,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 +5301,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 +5323,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);
@@ -5448,7 +5442,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 [];
       }
     });
@@ -5657,7 +5652,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 +5687,6 @@ class Upload extends EditorPlug {
     });
   }
 }
-const preview = "";
 class Preview extends EditorPlug {
   constructor(kit) {
     super(kit);
@@ -5755,7 +5749,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 +5765,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 +5986,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 +6085,7 @@ function extractCommentID() {
   }
   return commentId || null;
 }
-const version = "2.7.1";
+const version = "2.7.2";
 const Copyright = (ctx) => {
   ctx.on("conf-loaded", () => {
     const list = ctx.get("list");
@@ -6416,7 +6418,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 +6445,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,