artalk 2.3.3 → 2.3.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "artalk",
-  "version": "2.3.3",
-  "backendMinVersion": "2.1.7",
+  "version": "2.3.4",
+  "backendMinVersion": "2.1.10",
   "license": "LGPL-3.0",
   "description": "A Selfhosted Comment System",
   "keywords": [
@@ -29,7 +29,7 @@
   "dependencies": {
     "hanabi": "^0.4.0",
     "insane": "^2.6.2",
-    "marked": "^4.0.16",
+    "marked": "^4.0.17",
     "abortcontroller-polyfill": "^1.7.3"
   },
   "scripts": {

package/src/api/index.ts

@@ -1,7 +1,7 @@
 import { CommentData, ListData, UserData, PageData, SiteData, NotifyData } from '~/types/artalk-data'
 import ArtalkConfig from '~/types/artalk-config'
 import Context from '~/types/context'
-import { Fetch, ToFormData, POST, GET } from './request'
+import { Fetch, ToFormData, POST } from './request'
 import * as Utils from '../lib/utils'
 import 'abortcontroller-polyfill/dist/polyfill-patch-fetch'
 
@@ -58,7 +58,7 @@ export default class Api {
   }
 
   /** 评论 · 修改 */
-  public async commentEdit(data: CommentData) {
+  public async commentEdit(data: Partial<CommentData>) {
     const params: any = {
       ...data,
     }
@@ -126,6 +126,11 @@ export default class Api {
     return (data || { is_login: false, is_admin: false }) as { is_login: boolean, is_admin: boolean }
   }
 
+  /** 用户 · 注销 */
+  public async logout() {
+    return POST(this.ctx, `${this.baseURL}/logout`)
+  }
+
   // ============================
   //  页面 Page
   // ============================

package/src/api/request.ts

@@ -9,6 +9,9 @@ export async function Fetch(ctx: Context, input: RequestInfo, init: RequestInit,
     init.headers = headers
   }
 
+  // 跨域请求携带 cookie (无需)
+  // init.credentials = 'include'
+
   // 请求操作
   const resp = await timeoutFetch(ctx, input, timeout || ctx.conf.reqTimeout || 15000, init)
 
@@ -60,19 +63,20 @@ export async function POST<T>(ctx: Context, url: string, data?: {[key: string]:
   const init: RequestInit = {
     method: 'POST',
   }
-  if (data) init.body = ToFormData(data)
+  data = { site_name: ctx.conf.site || '', ...(data || {}) } // 总是携带 site_name
+  init.body = ToFormData(data)
 
   const json = await Fetch(ctx, url, init)
   return ((json.data || {}) as T)
 }
 
-/** 公共 GET 请求 */
-export async function GET<T>(ctx: Context, url: string, data?: {[key: string]: any}) {
-  const json = await Fetch(ctx, url + (data ? (`?${new URLSearchParams(data)}`) : ''), {
-    method: 'GET',
-  })
-  return ((json.data || {}) as T)
-}
+/** 公共 GET 请求 (无 GET 方式 API) */
+// export async function GET<T>(ctx: Context, url: string, data?: {[key: string]: any}) {
+//   const json = await Fetch(ctx, url + (data ? (`?${new URLSearchParams(data)}`) : ''), {
+//     method: 'GET',
+//   })
+//   return ((json.data || {}) as T)
+// }
 
 /** 对象转 FormData */
 export function ToFormData(object: {[key: string]: any}): FormData {

package/src/artalk.ts

@@ -13,7 +13,7 @@ import Editor from './editor'
 import List from './list'
 import SidebarLayer from './layer/sidebar-layer'
 
-import Layer, { GetLayerWrap } from './layer'
+import Layer from './layer'
 import * as Utils from './lib/utils'
 import * as Ui from './lib/ui'
 import * as Stat from './lib/stat'
@@ -35,9 +35,11 @@ export default class Artalk {
   public list!: List
   public sidebarLayer!: SidebarLayer
 
-  protected static Plugins: ArtalkPlug[] = [
-    Stat.PvCountWidget
-  ]
+  /** Plugins (in global scope)  */
+  protected static Plugins: ArtalkPlug[] = [ Stat.PvCountWidget ]
+
+  /** Plugins (in a instance scope) */
+  protected instancePlugins: ArtalkPlug[] = []
 
   constructor(customConf: Partial<ArtalkConfig>) {
     /* 初始化基本配置 */
@@ -86,7 +88,7 @@ export default class Artalk {
     // 事件绑定初始化
     this.initEventBind()
 
-    // 插件初始化
+    // 插件初始化 (global scope)
     Artalk.Plugins.forEach(plugin => {
       if (typeof plugin === 'function')
         plugin(this.ctx)
@@ -198,30 +200,6 @@ export default class Artalk {
     }
   }
 
-  /** 设置暗黑模式 */
-  public setDarkMode(darkMode: boolean) {
-    const darkModeClassName = 'atk-dark-mode'
-
-    this.ctx.conf.darkMode = darkMode
-    this.ctx.trigger('conf-updated')
-
-    if (this.conf.darkMode) {
-      this.$root.classList.add(darkModeClassName)
-    } else {
-      this.$root.classList.remove(darkModeClassName)
-    }
-
-    // for Layer
-    const { $wrap: $layerWrap } = GetLayerWrap(this.ctx)
-    if ($layerWrap) {
-      if (this.conf.darkMode) {
-        $layerWrap.classList.add(darkModeClassName)
-      } else {
-        $layerWrap.classList.remove(darkModeClassName)
-      }
-    }
-  }
-
   /** 监听事件 */
   public on<K extends keyof EventPayloadMap>(name: K, handler: Handler<EventPayloadMap[K]>) {
     this.ctx.on(name, handler, 'external')
@@ -242,11 +220,28 @@ export default class Artalk {
     this.ctx.listReload()
   }
 
-  /** Use Plugin */
-  public static Use(plugin: ArtalkPlug) {
+  /** 设置暗黑模式 */
+  public setDarkMode(darkMode: boolean) {
+    this.ctx.setDarkMode(darkMode)
+  }
+
+  /** Use Plugin (specific instance) */
+  public use(plugin: ArtalkPlug) {
+    this.instancePlugins.push(plugin)
+    if (typeof plugin === 'function') plugin(this.ctx)
+  }
+
+  /** Use Plugin (static method for global scope) */
+  public static use(plugin: ArtalkPlug) {
     this.Plugins.push(plugin)
   }
 
+  /** @deprecated Please replace it with lowercase function name `use(...)`. */
+  public static Use(plugin: ArtalkPlug) {
+    this.use(plugin)
+    console.warn('`Use(...)` is deprecated, replace it with lowercase `use(...)`.')
+  }
+
   /** 装载数量统计元素 */
   public static LoadCountWidget(customConf: Partial<ArtalkConfig>) {
     const conf = this.HandelBaseConf(customConf)

package/src/comment/render.ts

@@ -214,7 +214,7 @@ export default class CommentRender {
       }
     }
 
-    // 绑定回复按钮事件
+    // 回复按钮
     if (this.data.is_allow_reply) {
       const replyBtn = Utils.createElement(`<span>${this.ctx.$t('reply')}</span>`)
       this.$actions.append(replyBtn)
@@ -228,7 +228,7 @@ export default class CommentRender {
       })
     }
 
-    // 绑定折叠按钮事件
+    // 折叠按钮
     const collapseBtn = new ActionBtn(this.ctx, {
       text: () => (this.data.is_collapsed ? this.ctx.$t('expand') : this.ctx.$t('collapse')),
       adminOnly: true
@@ -238,7 +238,7 @@ export default class CommentRender {
       this.comment.getActions().adminEdit('collapsed', collapseBtn)
     })
 
-    // 绑定待审核按钮事件
+    // 审核按钮
     const pendingBtn = new ActionBtn(this.ctx, {
       text: () => (this.data.is_pending ? this.ctx.$t('pending') : this.ctx.$t('approved')),
       adminOnly: true
@@ -248,7 +248,27 @@ export default class CommentRender {
       this.comment.getActions().adminEdit('pending', pendingBtn)
     })
 
-    // 绑定删除按钮事件
+    // 置顶按钮
+    const pinnedBtn = new ActionBtn(this.ctx, {
+      text: () => (this.data.is_pinned ? this.ctx.$t('unpin') : this.ctx.$t('pin')),
+      adminOnly: true
+    })
+    pinnedBtn.appendTo(this.$actions)
+    pinnedBtn.setClick(() => {
+      this.comment.getActions().adminEdit('pinned', pendingBtn)
+    })
+
+    // 编辑按钮
+    const editBtn = new ActionBtn(this.ctx, {
+      text: this.ctx.$t('edit'),
+      adminOnly: true
+    })
+    editBtn.appendTo(this.$actions)
+    editBtn.setClick(() => {
+      this.ctx.editComment(this.data, this.$el)
+    })
+
+    // 删除按钮
     const delBtn = new ActionBtn(this.ctx, {
       text: this.ctx.$t('delete'),
       confirm: true,
@@ -259,16 +279,6 @@ export default class CommentRender {
     delBtn.setClick(() => {
       this.comment.getActions().adminDelete(delBtn)
     })
-
-    // 绑定置顶按钮事件
-    const pinnedBtn = new ActionBtn(this.ctx, {
-      text: () => (this.data.is_pinned ? this.ctx.$t('unpin') : this.ctx.$t('pin')),
-      adminOnly: true
-    })
-    pinnedBtn.appendTo(this.$actions)
-    pinnedBtn.setClick(() => {
-      this.comment.getActions().adminEdit('pinned', pendingBtn)
-    })
   }
 
   /** 内容限高检测 */

package/src/context.ts

@@ -115,6 +115,10 @@ export default class Context implements ContextApi {
     this.list.insertComment(commentData)
   }
 
+  public updateComment(commentData: CommentData): void {
+    this.list.updateComment(commentData)
+  }
+
   public replyComment(commentData: CommentData, $comment: HTMLElement, scroll?: boolean): void {
     this.editor.setReply(commentData, $comment, scroll)
   }
@@ -123,6 +127,14 @@ export default class Context implements ContextApi {
     this.editor.cancelReply()
   }
 
+  public editComment(commentData: CommentData, $comment: HTMLElement): void {
+    this.editor.setEditComment(commentData, $comment)
+  }
+
+  public cancelEditComment(): void {
+    this.editor.cancelEditComment()
+  }
+
   public updateNotifies(notifies: NotifyData[]): void {
     this.list.updateUnread(notifies)
   }
@@ -132,6 +144,10 @@ export default class Context implements ContextApi {
     this.list.reload()
   }
 
+  public reload(): void {
+    this.listReload()
+  }
+
   public listRefreshUI(): void {
     this.list.refreshUI()
   }
@@ -234,4 +250,27 @@ export default class Context implements ContextApi {
 
     return str
   }
+
+  public setDarkMode(darkMode: boolean): void {
+    const darkModeClassName = 'atk-dark-mode'
+
+    this.conf.darkMode = darkMode
+    this.trigger('conf-updated')
+
+    if (this.conf.darkMode) {
+      this.$root.classList.add(darkModeClassName)
+    } else {
+      this.$root.classList.remove(darkModeClassName)
+    }
+
+    // for Layer
+    const { $wrap: $layerWrap } = GetLayerWrap(this)
+    if ($layerWrap) {
+      if (this.conf.darkMode) {
+        $layerWrap.classList.add(darkModeClassName)
+      } else {
+        $layerWrap.classList.remove(darkModeClassName)
+      }
+    }
+  }
 }

package/src/editor/editor.ts

@@ -31,10 +31,18 @@ export default class Editor extends Component {
   public $submitBtn: HTMLButtonElement
   public $notifyWrap: HTMLElement
 
+  // Editor 的不同状态
+  private isTraveling = false
+
+  /** 回复评论 */
   private replyComment: CommentData|null = null
   private $sendReply: HTMLElement|null = null
+  public get isReplyMode() { return this.replyComment !== null }
 
-  private isTraveling = false
+  /** 编辑评论 */
+  private editComment: CommentData|null = null
+  private $editCancelBtn: HTMLElement|null = null
+  public get isEditMode() { return this.editComment !== null }
 
   /** 启用的插件 */
   private readonly ENABLED_PLUGS = [ EmoticonsPlug, UploadPlug, PreviewPlug, HeaderInputPlug ]
@@ -98,6 +106,8 @@ export default class Editor extends Component {
   }
 
   private onHeaderInput(key: string, $input: HTMLInputElement) {
+    if (this.isEditMode) return // 评论编辑模式，不修改个人信息
+
     this.user.update({
       [key]: $input.value.trim()
     })
@@ -128,8 +138,13 @@ export default class Editor extends Component {
     })
   }
 
+  private refreshSendBtnText() {
+    if (this.isEditMode) this.$submitBtn.innerText = this.$t('save')
+    else this.$submitBtn.innerText = this.ctx.conf.sendBtn || this.$t('send')
+  }
+
   private initSubmitBtn() {
-    this.$submitBtn.innerText = this.ctx.conf.sendBtn || this.$t('send')
+    this.refreshSendBtnText()
     this.$submitBtn.addEventListener('click', () => (this.submit()))
   }
 
@@ -186,21 +201,16 @@ export default class Editor extends Component {
     }
   }
 
-  public clearEditor() {
-    this.setContent('')
-    this.cancelReply()
-  }
-
   private adjustTextareaHeight() {
     const diff = this.$textarea.offsetHeight - this.$textarea.clientHeight
     this.$textarea.style.height = '0px' // it's a magic. 若不加此行，内容减少，高度回不去
     this.$textarea.style.height = `${this.$textarea.scrollHeight + diff}px`
   }
 
+  /** 设置回复评论 */
   public setReply(commentData: CommentData, $comment: HTMLElement, scroll = true) {
-    if (this.replyComment !== null) {
-      this.cancelReply()
-    }
+    if (this.isEditMode) this.cancelEditComment()
+    if (this.isReplyMode) this.cancelReply()
 
     if (this.$sendReply === null) {
       this.$sendReply = Utils.createElement(`<div class="atk-send-reply">${this.$t('reply')} <span class="atk-text"></span><span class="atk-cancel">×</span></div>`);
@@ -221,6 +231,7 @@ export default class Editor extends Component {
     this.$textarea.focus()
   }
 
+  /** 取消回复评论 */
   public cancelReply() {
     if (this.$sendReply !== null) {
       this.$sendReply.remove()
@@ -233,6 +244,53 @@ export default class Editor extends Component {
     }
   }
 
+  /** 设置编辑评论 */
+  public setEditComment(commentData: CommentData, $comment: HTMLElement) {
+    if (this.isEditMode) this.cancelEditComment()
+    if (this.isReplyMode) this.cancelReply()
+
+    if (this.$editCancelBtn === null) {
+      this.$editCancelBtn = Utils.createElement(`<div class="atk-send-reply">${this.$t('editCancel')}<span class="atk-cancel">×</span></div>`);
+      this.$editCancelBtn.onclick = () => {
+        this.cancelEditComment()
+      }
+      this.$textareaWrap.append(this.$editCancelBtn)
+    }
+    this.editComment = commentData
+
+    this.$header.style.display = 'none' // TODO 暂时隐藏
+
+    this.travel($comment)
+
+    this.$nick.value = commentData.nick
+    this.$email.value = commentData.email || ''
+    this.$link.value = commentData.link
+
+    this.setContent(commentData.content)
+    this.$textarea.focus()
+
+    this.refreshSendBtnText()
+  }
+
+  /** 取消编辑评论 */
+  public cancelEditComment() {
+    if (this.$editCancelBtn !== null) {
+      this.$editCancelBtn.remove()
+      this.$editCancelBtn = null
+    }
+
+    this.editComment = null
+    this.travelBack()
+
+    this.$nick.value = this.user.data.nick
+    this.$email.value = this.user.data.email
+    this.$link.value = this.user.data.link
+
+    this.setContent('')
+    this.refreshSendBtnText()
+    this.$header.style.display = '' // TODO
+  }
+
   public showNotify(msg: string, type: "i"|"s"|"w"|"e") {
     Ui.showNotify(this.$notifyWrap, msg, type)
   }
@@ -245,7 +303,7 @@ export default class Editor extends Component {
     Ui.hideLoading(this.$el)
   }
 
-  /** 提交评论 */
+  /** 点击评论提交按钮事件 */
   public async submit() {
     if (this.getFinalContent().trim() === '') {
       this.$textarea.focus()
@@ -256,6 +314,17 @@ export default class Editor extends Component {
 
     this.showLoading()
 
+    if (!this.isEditMode) {
+      await this.submitAdd()
+    } else {
+      await this.submitEdit()
+    }
+
+    this.hideLoading()
+  }
+
+  /** 创建评论 */
+  public async submitAdd() {
     try {
       const nComment = await this.ctx.getApi().add({
         content: this.getFinalContent(),
@@ -274,14 +343,40 @@ export default class Editor extends Component {
       }
 
       this.ctx.insertComment(nComment)
-      this.clearEditor() // 清空编辑器
+
+      // 复原编辑器
+      this.setContent('')
+      this.cancelReply()
+
+      this.ctx.trigger('editor-submitted')
+    } catch (err: any) {
+      console.error(err)
+      this.showNotify(`${this.$t('commentFail')}，${err.msg || String(err)}`, 'e')
+    }
+  }
+
+  /** 修改评论 */
+  public async submitEdit() {
+    try {
+      const saveData = {
+        content: this.getFinalContent(),
+        nick: this.$nick.value,
+        email: this.$email.value,
+        link: this.$link.value,
+      }
+      const nComment = await this.ctx.getApi().commentEdit({
+        ...this.editComment, ...saveData
+      })
+      this.ctx.updateComment(nComment)
+
+      // 复原编辑器
+      this.setContent('')
+      this.cancelEditComment()
+
       this.ctx.trigger('editor-submitted')
     } catch (err: any) {
       console.error(err)
       this.showNotify(`${this.$t('commentFail')}，${err.msg || String(err)}`, 'e')
-      return
-    } finally {
-      this.hideLoading()
     }
   }
 

package/src/i18n/en.ts

@@ -3,6 +3,7 @@ export default {
   placeholder: 'Leave a comment',
   noComment: 'No Comment',
   send: 'Send',
+  save: 'Save',
   nick: 'Nickname',
   email: 'Email',
   link: 'Website',
@@ -42,6 +43,8 @@ export default {
   approved: 'Approved',
   pending: 'Pending',
   pendingMsg: 'Pending, visible only to commenter.',
+  edit: 'Edit',
+  editCancel: 'Cancel Edit',
   delete: 'Delete',
   deleteConfirm: 'Confirm',
   pin: 'Pin',

package/src/i18n/zh-CN.ts

@@ -5,6 +5,7 @@ const zhCN: I18n = {
   placeholder: '键入内容...',
   noComment: '「此时无声胜有声」',
   send: '发送评论',
+  save: '保存评论',
   nick: '昵称',
   email: '邮箱',
   link: '网址',
@@ -40,10 +41,12 @@ const zhCN: I18n = {
   collapse: '折叠',
   collapsed: '已折叠',
   collapsedMsg: '该评论已被系统或管理员折叠',
-  expand: '取消折叠',
+  expand: '展开',
   approved: '已审',
   pending: '待审',
   pendingMsg: '审核中，仅本人可见。',
+  edit: '编辑',
+  editCancel: '取消编辑',
   delete: '删除',
   deleteConfirm: '确认删除',
   pin: '置顶',

package/src/list/list-lite.ts

@@ -429,6 +429,14 @@ export default class ListLite extends Component {
     this.ctx.trigger('list-inserted', commentData)
   }
 
+  /** 更新评论 */
+  public updateComment(commentData: CommentData) {
+    const comment = this.ctx.findComment(commentData.id)
+    if (comment) {
+      comment.setData(commentData)
+    }
+  }
+
   /** 更新未读数据 */
   public updateUnread(notifies: NotifyData[]) {
     this.unread = notifies

package/src/style/comment.less

@@ -258,9 +258,8 @@
             color: var(--at-color-red);
           }
 
-          &:not(:first-child):not(.atk-hide) {
-            margin-left: 8px;
-            padding-left: 8px;
+          &:not(:last-child):not(.atk-hide) {
+            margin-right: 16px;
           }
 
           &:hover {

package/test/CSRF.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>CSRF Test</title>
+
+  <!-- 解除注释来测试当 referer 为空时的行为 -->
+  <!-- <meta name="referrer" content="never"> -->
+</head>
+<body>
+
+  <form action="http://localhost:23366/api/add" method="post">
+    <input type="text" name="name" value="admin">
+    <input type="text" name="email" value="test@example.com">
+    <input type="text" name="link" value="">
+    <input type="text" name="content" value="CSRF Success">
+    <input type="text" name="rid" value="0">
+    <input type="text" name="page_key" value="https://artalk.js.org/">
+    <input type="text" name="site_name" value="ArtalkDocs">
+    <button type="submit">Fire!</button>
+  </form>
+
+</body>
+</html>

package/types/artalk-data.d.ts

@@ -8,6 +8,9 @@ export interface CommentData {
   /** 用户昵称 */
   nick: string
 
+  /** 用户邮箱 (该字段仅管理员可见) */
+  email?: string
+
   /** 用户邮箱（已加密） */
   email_encrypted: string
 

package/types/context.d.ts

@@ -63,18 +63,30 @@ export default interface ContextApi {
   /** 插入评论 */
   insertComment(commentData: CommentData): void
 
+  /** 更新评论 */
+  updateComment(commentData: CommentData): void
+
   /** 评论回复 */
   replyComment(commentData: CommentData, $comment: HTMLElement, scroll?: boolean): void
 
   /** 取消回复评论 */
   cancelReplyComment(): void
 
+  /** 编辑评论 */
+  editComment(commentData: CommentData, $comment: HTMLElement): void
+
+  /** 取消编辑评论 */
+  cancelEditComment(): void
+
   /** 更新通知数据 */
   updateNotifies(notifies: NotifyData[]): void
 
   /** 列表 - 重新加载数据 */
   listReload(): void
 
+  /** 列表 - 重新加载数据 (别名) */
+  reload(): void
+
   /** 列表 - UI 更新 */
   listRefreshUI(): void
 
@@ -125,4 +137,7 @@ export default interface ContextApi {
 
   /** i18n 翻译 */
   $t(key: keyof I18n, args?: {[key: string]: string}): string
+
+  /** 设置暗黑模式 */
+  setDarkMode(darkMode: boolean): void
 }