artalk 2.8.1 → 2.8.2

package/dist/ArtalkLite.mjs

@@ -2472,7 +2472,7 @@ const en = {
   link: "Website",
   emoticon: "Emoji",
   preview: "Preview",
-  image: "Image",
+  uploadImage: "Upload Image",
   uploadFail: "Upload Failed",
   commentFail: "Failed to comment",
   restoredMsg: "Content has been restored",
@@ -2545,14 +2545,14 @@ const zhCN = {
   /* Editor */
   placeholder: "键入内容...",
   noComment: "「此时无声胜有声」",
-  send: "发送评论",
-  save: "保存评论",
+  send: "发送",
+  save: "保存",
   nick: "昵称",
   email: "邮箱",
   link: "网址",
   emoticon: "表情",
   preview: "预览",
-  image: "图片",
+  uploadImage: "上传图片",
   uploadFail: "上传失败",
   commentFail: "评论失败",
   restoredMsg: "内容已自动恢复",
@@ -3528,7 +3528,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-plug-btn-wrap"></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"]',
@@ -3539,6 +3539,8 @@ const Sel = {
   $bottom: ".atk-bottom",
   $submitBtn: ".atk-send-btn",
   $notifyWrap: ".atk-notify-wrap",
+  $bottomLeft: ".atk-bottom-left",
+  $stateWrap: ".atk-state-wrap",
   $plugBtnWrap: ".atk-plug-btn-wrap",
   $plugPanelWrap: ".atk-plug-panel-wrap"
 };
@@ -5952,15 +5954,16 @@ class StateReply extends EditorPlug {
   }
   setReply(commentData) {
     const ui = this.kit.useUI();
-    if (!ui.$sendReply) {
-      ui.$sendReply = createElement(
-        `<div class="atk-send-reply">${t("reply")} <span class="atk-text"></span><span class="atk-cancel">×</span></div>`
+    if (!ui.$sendReplyBtn) {
+      const $btn = createElement(
+        `<span class="atk-state-btn"><span class="atk-text-wrap">${t("reply")} <span class="atk-text"></span></span><span class="atk-cancel">×</span></span>`
       );
-      ui.$sendReply.querySelector(".atk-text").innerText = `@${commentData.nick}`;
-      ui.$sendReply.addEventListener("click", () => {
+      $btn.querySelector(".atk-text").innerText = `@${commentData.nick}`;
+      $btn.addEventListener("click", () => {
         this.kit.useEditor().resetState();
       });
-      ui.$textareaWrap.append(ui.$sendReply);
+      ui.$stateWrap.append($btn);
+      ui.$sendReplyBtn = $btn;
     }
     this.comment = commentData;
     ui.$textarea.focus();
@@ -5969,9 +5972,9 @@ class StateReply extends EditorPlug {
     if (!this.comment)
       return;
     const ui = this.kit.useUI();
-    if (ui.$sendReply) {
-      ui.$sendReply.remove();
-      ui.$sendReply = void 0;
+    if (ui.$sendReplyBtn) {
+      ui.$sendReplyBtn.remove();
+      ui.$sendReplyBtn = void 0;
     }
     this.comment = void 0;
   }
@@ -6018,12 +6021,12 @@ class StateEdit extends EditorPlug {
     const ui = this.kit.useUI();
     if (!ui.$editCancelBtn) {
       const $btn = createElement(
-        `<div class="atk-send-reply">${t("editCancel")} <span class="atk-cancel">×</span></div>`
+        `<span class="atk-state-btn"><span class="atk-text-wrap">${t("editCancel")}</span><span class="atk-cancel">×</span></span>`
       );
       $btn.onclick = () => {
         this.kit.useEditor().resetState();
       };
-      ui.$textareaWrap.append($btn);
+      ui.$stateWrap.append($btn);
       ui.$editCancelBtn = $btn;
     }
     this.comment = comment;
@@ -6220,7 +6223,7 @@ class Emoticons extends EditorPlug {
     __publicField(this, "isImgLoaded", false);
     this.kit.useMounted(() => {
       this.usePanel(`<div class="atk-editor-plug-emoticons"></div>`);
-      this.useBtn(t("emoticon"));
+      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(() => {
     });
@@ -6471,7 +6474,7 @@ 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(`${t("image")}`);
+    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;
@@ -6575,10 +6578,7 @@ class Preview extends EditorPlug {
     __publicField(this, "isPlugPanelShow", false);
     this.kit.useMounted(() => {
       this.usePanel(`<div class="atk-editor-plug-preview"></div>`);
-      let btnText = t("preview");
-      if (getInstance())
-        btnText += ` <i title="Markdown is supported"><svg class="markdown" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><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(btnText);
+      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(() => {
     });
@@ -6963,7 +6963,7 @@ const GotoFocus = (ctx) => {
     comment.focus();
   }));
 };
-const version = "2.8.1";
+const version = "2.8.2";
 const Copyright = (ctx) => {
   ctx.on("mounted", () => {
     const list = ctx.get("list");