artalk 2.1.7 → 2.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "artalk",
-  "version": "2.1.7",
+  "version": "2.1.8",
   "license": "GPL-3.0",
   "description": "A Selfhosted Comment System",
   "keywords": [

package/src/api/index.ts

@@ -264,6 +264,29 @@ export default class Api {
     return p.pv as number
   }
 
+  /** 图片上传 */
+  public async imgUpload(file: File) {
+    const params: any = {
+      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: RequestInit = {
+      method: 'POST',
+      body: form
+    }
+
+    const json = await Fetch(this.ctx, `${this.baseURL}/img-upload`, init)
+    return ((json.data || {}) as any) as { img_file: string, img_url: string }
+
+  }
+
   // ============================
   //  验证码
   // ============================

package/src/artalk.ts

@@ -148,6 +148,7 @@ export default class Artalk {
   /** 暗黑模式 · 设定 */
   public setDarkMode(darkMode: boolean) {
     this.ctx.conf.darkMode = darkMode
+    this.ctx.trigger('conf-updated')
     this.initDarkMode()
   }
 

package/src/components/editor.ts

@@ -21,6 +21,7 @@ export default class Editor extends Component {
   public $plugWrap: HTMLElement
   public $bottom: HTMLElement
   public $plugBtnWrap: HTMLElement
+  public $imgUploadBtn?: HTMLElement
   public $submitBtn: HTMLButtonElement
   public $notifyWrap: HTMLElement
 
@@ -63,6 +64,7 @@ export default 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()))
   }
 
   initLocalStorage () {
@@ -200,7 +202,7 @@ export default class Editor extends Component {
     // 依次实例化 plug
     this.LOADABLE_PLUG_LIST.forEach((PlugObj) => {
       // 切换按钮
-      const btnElem = Utils.createElement(`<span class="atk-plug-btn">${PlugObj.BtnHTML}</span>`)
+      const btnElem = Utils.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]
@@ -244,6 +246,8 @@ export default class Editor extends Component {
         btnElem.classList.add('active')
       })
     })
+
+    this.initImgUploadBtn()
   }
 
   /** 关闭编辑器插件 */
@@ -253,6 +257,91 @@ export default class Editor extends Component {
     this.openedPlugName = null
   }
 
+  /** 允许的图片格式 */
+  allowImgExts = ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'svg', 'webp']
+
+  /** 初始化图片上传按钮 */
+  initImgUploadBtn() {
+    this.$imgUploadBtn = Utils.createElement(`<span class="atk-plug-btn">图片</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 () => { // 解决阻塞 UI 问题
+          if (!$input.files || $input.files.length === 0) return
+          const file = $input.files[0]
+          this.uploadImg(file)
+        })()
+      }
+      $input.click() // 显示选择图片对话框
+    }
+
+    // @link https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop
+    // 阻止浏览器的默认释放行为
+    this.$textarea.addEventListener('dragover', (evt) => {
+      evt.stopPropagation()
+      evt.preventDefault()
+    })
+
+    this.$textarea.addEventListener('drop', (evt) => {
+      if (evt.dataTransfer?.files) {
+        evt.preventDefault()
+        for (let i = 0; i < evt.dataTransfer.files.length; i++) {
+          const file = evt.dataTransfer.files[i]
+          this.uploadImg(file)
+        }
+      }
+    })
+  }
+
+  /** 刷新图片上传按钮 */
+  refreshUploadBtn() {
+    if (!this.$imgUploadBtn) return
+
+    if (!this.ctx.conf.imgUpload) {
+      this.$imgUploadBtn.setAttribute('atk-only-admin-show', '')
+      this.ctx.trigger('check-admin-show-el')
+    }
+  }
+
+  async uploadImg(file: File) {
+    const fileExt = /[^.]+$/.exec(file.name)
+    if (!fileExt || !this.allowImgExts.includes(fileExt[0])) return
+
+    // 插入占位加载文字
+    const uploadPlaceholderTxt = `\n![](Uploading ${file.name}...)`
+    this.insertContent(uploadPlaceholderTxt)
+
+    // 上传图片
+    let resp: any
+    try {
+      resp = await new Api(this.ctx).imgUpload(file)
+    } catch (err: any) {
+      console.error(err)
+      this.showNotify(`图片上传失败，${err.msg}`, 'e')
+    }
+    if (!!resp && resp.img_url) {
+      let imgURL = resp.img_url as string
+      if (imgURL.startsWith('.') || (imgURL.startsWith('/') && !imgURL.startsWith('//'))) {
+        // 若为相对路径，加上 artalk server
+        imgURL = `${this.ctx.conf.server.replace(/\/api\/?$/, '')}/${imgURL.replace(/^\//, '')}`
+      }
+
+      // 上传成功插入图片
+      this.$textarea.value = this.$textarea.value.replace(uploadPlaceholderTxt, `\n![](${imgURL})`)
+    } else {
+      // 上传失败删除加载文字
+      this.$textarea.value = this.$textarea.value.replace(uploadPlaceholderTxt, '')
+    }
+
+    // 更新内容保存到 localStorage
+    this.saveContent()
+  }
+
   insertContent (val: string) {
     if ((document as any).selection) {
       this.$textarea.focus();

package/src/components/list-lite.ts

@@ -119,6 +119,11 @@ export default class ListLite extends Component {
     // 版本检测
     if (this.ctx.conf.versionCheck && this.versionCheck(data.api_version)) return
 
+    // 图片上传功能
+    if (data.conf && typeof data.conf.img_upload === "boolean") {
+      this.ctx.conf.imgUpload = data.conf.img_upload
+    }
+
     // 导入数据
     this.importComments(data.comments)
 
@@ -130,6 +135,7 @@ export default class ListLite extends Component {
 
     this.ctx.trigger('unread-update', { notifies: data.unread || [] })
     this.ctx.trigger('comments-loaded')
+    this.ctx.trigger('conf-updated')
 
     if (this.onAfterLoad) this.onAfterLoad(data)
   }
@@ -481,6 +487,7 @@ export default class ListLite extends Component {
       ignoreBtn.onclick = () => {
         Ui.setError(this.ctx, null)
         this.ctx.conf.versionCheck = false
+        this.ctx.trigger('conf-updated')
         this.fetchComments(0)
       }
       errEl.append(ignoreBtn)

package/src/components/list.ts

@@ -184,7 +184,7 @@ export default class List extends ListLite {
     this.$commentCount.classList.add('atk-dropdown-wrap')
 
     // 插入图标
-    this.$commentsWrap.append(Utils.createElement(`<span class="atk-arrow-down-icon"></span>`))
+    this.$dropdownWrap.append(Utils.createElement(`<span class="atk-arrow-down-icon"></span>`))
 
     const reloadUseParamsEditor = (func: (p: any) => void) => {
       this.paramsEditor = (p) => { func(p) }

package/src/defaults.ts

@@ -36,6 +36,7 @@ const defaults: ArtalkConfig = {
     children: 400,
   },
 
+  imgUpload: true,
   reqTimeout: 15000,
   versionCheck: true,
 }

package/src/style/list.less

@@ -19,9 +19,9 @@
       .atk-arrow-down-icon {
         cursor: pointer;
         vertical-align: middle;
-        border-top: 6px solid var(--at-color-grey);
-        border-left: 4px solid transparent;
-        border-right: 4px solid transparent;
+        border-top: 5px solid var(--at-color-grey);
+        border-left: 3px solid transparent;
+        border-right: 3px solid transparent;
         margin-top: -1px;
         margin-left: 0.4rem;
         display: inline-block;

package/types/artalk-config.d.ts

@@ -80,6 +80,9 @@ export default interface ArtalkConfig {
   /** 显示 UA 徽标 */
   uaBadge?: boolean
 
+  /** 图片上传功能 */
+  imgUpload?: boolean
+
   /** 版本检测 */
   versionCheck?: boolean
 }

package/types/artalk-data.d.ts

@@ -87,6 +87,9 @@ export interface ListData {
 
   /** API 版本 */
   api_version: ApiVersionData
+
+  /** 后端配置 */
+  conf: any // TODO
 }
 
 export interface PageData {

package/types/event.d.ts

@@ -8,6 +8,7 @@ export interface EventPayloadMap {
   'editor-submit': undefined       // 编辑器提交时
   'editor-submitted': undefined    // 编辑器提交后
   'user-changed': LocalUser        // 本地用户数据变更时
+  'conf-updated': undefined        // Artalk 配置变更时
 
   // List 操作（外部：不建议 listen，仅 trigger）
   'list-reload': undefined         // 重新加载 List