artalk 2.2.12 → 2.3.2

package/src/{components/editor-plugs → editor/plugs}/emoticons-plug.ts

@@ -14,24 +14,53 @@ type OwOFormatType = {
 }
 
 export default class EmoticonsPlug extends EditorPlug {
-  public $el!: HTMLElement
+  public static Name = 'emoticons'
+
+  declare protected $panel: HTMLElement
+
   public emoticons: EmoticonListData = []
+  public loadingTask: Promise<void>|null = null
 
   public $grpWrap!: HTMLElement
   public $grpSwitcher!: HTMLElement
 
-  public loadingTask: Promise<void>|null = null
-
-  constructor (public editor: Editor) {
+  public constructor(public editor: Editor) {
     super(editor)
 
-    this.$el = Utils.createElement(`<div class="atk-editor-plug-emoticons"></div>`)
+    this.registerPanel(`<div class="atk-editor-plug-emoticons"></div>`)
+    this.registerBtn(this.ctx.$t('emoticon'))
+
+    // 表情包预加载
+    window.setTimeout(() => {
+      this.loadEmoticonsData()
+    }, 1000) // 延迟 1s 加载
+  }
+
+  public onPanelShow() {
+    ;(async () => {
+      await this.loadEmoticonsData()
+
+      // 初始化元素
+      if (!this.isImgLoaded) {
+        this.initEmoticonsList()
+        this.isImgLoaded = true
+      }
+
+      // 延迟执行，防止无法读取高度
+      setTimeout(() => {
+        this.changeListHeight()
+      }, 30)
+    })()
+  }
+
+  public onPanelHide() {
+    this.$panel.parentElement!.style.height = ''
   }
 
   isListLoaded = false
   isImgLoaded = false
 
-  async loadEmoticonsData() {
+  public async loadEmoticonsData() {
     if (this.isListLoaded) return
     if (this.loadingTask !== null) {
       await this.loadingTask
@@ -40,23 +69,23 @@ export default class EmoticonsPlug extends EditorPlug {
 
     // 数据处理
     this.loadingTask = (async () => {
-      Ui.showLoading(this.$el)
+      Ui.showLoading(this.$panel)
       this.emoticons = await this.handleData(this.ctx.conf.emoticons)
-      Ui.hideLoading(this.$el)
+      Ui.hideLoading(this.$panel)
       this.loadingTask = null
       this.isListLoaded = true
     })()
     await this.loadingTask
   }
 
-  async handleData(data: any): Promise<any[]> {
+  private async handleData(data: any): Promise<any[]> {
     if (!Array.isArray(data) && ['object', 'string'].includes(typeof data)) {
       data = [data]
     }
 
     if (!Array.isArray(data)) {
-      Ui.setError(this.$el, "表情包数据必须为 Array/Object/String 类型")
-      Ui.hideLoading(this.$el)
+      Ui.setError(this.$panel, "表情包数据必须为 Array/Object/String 类型")
+      Ui.hideLoading(this.$panel)
       return []
     }
 
@@ -105,7 +134,7 @@ export default class EmoticonsPlug extends EditorPlug {
   }
 
   /** 远程加载 */
-  async remoteLoad(url: string): Promise<any> {
+  private async remoteLoad(url: string): Promise<any> {
     if (!url) return []
 
     try {
@@ -113,14 +142,14 @@ export default class EmoticonsPlug extends EditorPlug {
       const json = await resp.json()
       return json
     } catch (err) {
-      Ui.hideLoading(this.$el)
-      Ui.setError(this.$el, `表情加载失败 ${String(err)}`)
+      Ui.hideLoading(this.$panel)
+      Ui.setError(this.$panel, `表情加载失败 ${String(err)}`)
       return []
     }
   }
 
   /** 避免表情 item.key 为 null 的情况 */
-  solveNullKey(data: EmoticonGrpData[]) {
+  private solveNullKey(data: EmoticonGrpData[]) {
     data.forEach((grp) => {
       grp.items.forEach((item, index) => {
         if (!item.key) item.key = `${grp.name} ${index+1}`
@@ -129,7 +158,7 @@ export default class EmoticonsPlug extends EditorPlug {
   }
 
   /** 避免相同 item.key */
-  solveSameKey(data: EmoticonGrpData[]) {
+  private solveSameKey(data: EmoticonGrpData[]) {
     const tmp: {[key: string]: number} = {}
     data.forEach((grp) => {
       grp.items.forEach(item => {
@@ -143,7 +172,7 @@ export default class EmoticonsPlug extends EditorPlug {
   }
 
   /** 判断是否为 OwO 格式 */
-  isOwOFormat(data: any) {
+  private isOwOFormat(data: any) {
     try {
       return (typeof data === 'object') && !!Object.values(data).length
         && Array.isArray(Object.keys(Object.values<any>(data)[0].container))
@@ -152,7 +181,7 @@ export default class EmoticonsPlug extends EditorPlug {
   }
 
   /** 转换 OwO 格式数据 */
-  convertOwO(owoData: OwOFormatType): EmoticonListData {
+  private convertOwO(owoData: OwOFormatType): EmoticonListData {
     const dest: EmoticonListData = []
     Object.entries(owoData).forEach(([grpName, grp]) => {
       const nGrp: EmoticonGrpData = { name: grpName, type: grp.type, items: [] }
@@ -171,10 +200,10 @@ export default class EmoticonsPlug extends EditorPlug {
   }
 
   /** 初始化表情列表界面 */
-  initEmoticonsList () {
+  private initEmoticonsList() {
     // 表情列表
     this.$grpWrap = Utils.createElement(`<div class="atk-grp-wrap"></div>`)
-    this.$el.append(this.$grpWrap)
+    this.$panel.append(this.$grpWrap)
 
     this.emoticons.forEach((grp, index) => {
       const $grp = Utils.createElement(`<div class="atk-grp" style="display: none;"></div>`)
@@ -208,24 +237,25 @@ export default class EmoticonsPlug extends EditorPlug {
       })
     })
 
-    // 表情分类
-    this.$grpSwitcher = Utils.createElement(`<div class="atk-grp-switcher"></div>`)
-    this.$el.append(this.$grpSwitcher)
-    this.emoticons.forEach((grp, index) => {
-      const $item = Utils.createElement('<span />')
-      $item.innerText = grp.name
-      $item.setAttribute('data-index', String(index))
-      $item.onclick = () => (this.openGrp(index))
-      this.$grpSwitcher.append($item)
-    })
+    // 表情分类切换 bar
+    if (this.emoticons.length > 1) {
+      this.$grpSwitcher = Utils.createElement(`<div class="atk-grp-switcher"></div>`)
+      this.$panel.append(this.$grpSwitcher)
+      this.emoticons.forEach((grp, index) => {
+        const $item = Utils.createElement('<span />')
+        $item.innerText = grp.name
+        $item.setAttribute('data-index', String(index))
+        $item.onclick = () => (this.openGrp(index))
+        this.$grpSwitcher.append($item)
+      })
+    }
 
     // 默认打开第一个分类
-    if (this.emoticons.length > 0)
-      this.openGrp(0)
+    if (this.emoticons.length > 0) this.openGrp(0)
   }
 
   /** 打开一个表情组 */
-  openGrp (index: number) {
+  public openGrp(index: number) {
     Array.from(this.$grpWrap.children).forEach((item) => {
       const el = item as HTMLElement
       if (el.getAttribute('data-index') !== String(index)) {
@@ -241,41 +271,13 @@ export default class EmoticonsPlug extends EditorPlug {
     this.changeListHeight()
   }
 
-  static Name = 'emoticons'
-  static BtnHTML = '表情'
-
-  getEl () {
-    return this.$el
-  }
-
-  changeListHeight () {
+  private changeListHeight() {
     /* const listWrapHeight = Utils.getHeight(this.$grpWrapem)
     this.editor.plugWrapEl.style.height = `${listWrapHeight > 150 ? listWrapHeight : 150}px` */
   }
 
-  onShow () {
-    ;(async () => {
-      await this.loadEmoticonsData()
-
-      // 初始化元素
-      if (!this.isImgLoaded) {
-        this.initEmoticonsList()
-        this.isImgLoaded = true
-      }
-
-      // 延迟执行，防止无法读取高度
-      setTimeout(() => {
-        this.changeListHeight()
-      }, 30)
-    })()
-  }
-
-  onHide () {
-    this.$el.parentElement!.style.height = ''
-  }
-
   /** 处理评论 content 中的表情内容 */
-  public transEmoticonImageText (text: string) {
+  public transEmoticonImageText(text: string) {
     if (!this.emoticons || !Array.isArray(this.emoticons))
       return text
 

package/src/editor/plugs/header-input-plug.ts

@@ -0,0 +1,78 @@
+import Editor from '../editor'
+import EditorPlug from './editor-plug'
+
+export default class HeaderInputPlug extends EditorPlug {
+  public static Name = 'headerInput'
+
+  public constructor(editor: Editor) {
+    super(editor)
+
+    this.registerHeaderInputEvt((key, $input) => {
+      if (key === 'nick' || key === 'email') {
+        this.fetchUserInfo()
+      }
+    })
+
+    // Link URL 自动补全协议
+    this.editor.$link.addEventListener('change', () => {
+      const link = this.editor.$link.value.trim()
+      if (!!link && !/^(http|https):\/\//.test(link)) {
+        this.editor.$link.value = `https://${link}`
+        this.ctx.user.update({ link: this.editor.$link.value })
+      }
+    })
+  }
+
+  queryUserInfo = {
+    timeout: <number|null>null,
+    abortFunc: <(() => void)|null>null
+  }
+
+  /** 远程获取用户数据 */
+  fetchUserInfo() {
+    this.ctx.user.logout()
+
+    // 获取用户信息
+    if (this.queryUserInfo.timeout) window.clearTimeout(this.queryUserInfo.timeout) // 清除待发出的请求
+    if (this.queryUserInfo.abortFunc) this.queryUserInfo.abortFunc() // 之前发出未完成的请求立刻中止
+
+    this.queryUserInfo.timeout = window.setTimeout(() => {
+      this.queryUserInfo.timeout = null // 清理
+
+      const {req, abort} = this.ctx.getApi().userGet(
+        this.ctx.user.data.nick, this.ctx.user.data.email
+      )
+      this.queryUserInfo.abortFunc = abort
+      req.then(data => {
+        if (!data.is_login) {
+          this.ctx.user.logout()
+        }
+
+        // 未读消息更新
+        this.ctx.updateNotifies(data.unread)
+
+        // 若用户为管理员，执行登陆操作
+        if (this.ctx.user.checkHasBasicUserInfo() && !data.is_login && data.user?.is_admin) {
+          this.showLoginDialog()
+        }
+
+        // 自动填入 link
+        if (data.user && data.user.link) {
+          this.editor.$link.value = data.user.link
+          this.ctx.user.update({ link: data.user.link })
+        }
+      })
+      .catch(() => {})
+      .finally(() => {
+        this.queryUserInfo.abortFunc = null // 清理
+      })
+    }, 400) // 延迟执行，减少请求次数
+  }
+
+  showLoginDialog() {
+    this.ctx.checkAdmin({
+      onSuccess: () => {
+      }
+    })
+  }
+}

package/src/editor/plugs/preview-plug.ts

@@ -0,0 +1,40 @@
+import './preview-plug.less'
+
+import Editor from '../editor'
+import EditorPlug from './editor-plug'
+
+export default class PreviewPlug extends EditorPlug {
+  public static Name = 'preview'
+  declare protected $panel: HTMLElement
+
+  private isBind = false
+
+  public constructor(editor: Editor) {
+    super(editor)
+
+    this.registerPanel(`<div class="atk-editor-plug-preview"></div>`)
+
+    let btnText = this.editor.$t('preview')
+    if (this.ctx.markedInstance) 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.registerBtn(btnText)
+  }
+
+  public onPanelShow() {
+    this.updateContent()
+
+    if (!this.isBind) {
+      const event = () => {
+        this.updateContent()
+      }
+      this.editor.$textarea.addEventListener('input', event)
+      this.editor.$textarea.addEventListener('change', event)
+      this.isBind = true
+    }
+  }
+
+  public updateContent() {
+    if (this.$panel.style.display !== 'none') {
+      this.$panel.innerHTML = this.editor.getContentMarked()
+    }
+  }
+}

package/src/editor/plugs/upload-plug.ts

@@ -0,0 +1,124 @@
+import * as Utils from '@/lib/utils'
+import Editor from '../editor'
+import EditorPlug from './editor-plug'
+
+export default class UploadPlug extends EditorPlug {
+  public static Name = 'upload'
+
+  public $imgUploadInput?: HTMLInputElement
+
+  /** 允许的图片格式 */
+  allowImgExts = ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'svg', 'webp']
+
+  public constructor(editor: Editor) {
+    super(editor)
+
+    this.$imgUploadInput = document.createElement('input')
+    this.$imgUploadInput.type = 'file'
+    this.$imgUploadInput.style.display = 'none'
+    this.$imgUploadInput.accept = this.allowImgExts.map(o => `.${o}`).join(',')
+
+    const $btn = this.registerBtn(`${this.ctx.$t('image')}`)
+    $btn.after(this.$imgUploadInput)
+    $btn.onclick = () => {
+      // 选择图片
+      const $input = this.$imgUploadInput!
+      $input.onchange = () => {
+        (async () => { // 解决阻塞 UI 问题
+          if (!$input.files || $input.files.length === 0) return
+          const file = $input.files[0]
+          this.uploadImg(file)
+        })()
+      }
+      $input.click() // 显示选择图片对话框
+    }
+
+    this.ctx.on('conf-updated', () => {
+      if (!this.ctx.conf.imgUpload) {
+        this.getBtn()!.setAttribute('atk-only-admin-show', '')
+        this.ctx.checkAdminShowEl()
+      }
+    })
+
+    // 统一从 FileList 获取文件并上传图片方法
+    const uploadFromFileList = (files?: FileList) => {
+      if (!files) return
+
+      for (let i = 0; i < files.length; i++) {
+        const file = files[i]
+        this.uploadImg(file)
+      }
+    }
+
+    // 拖拽图片
+    // @link https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop
+    // 阻止浏览器的默认释放行为
+    this.editor.$textarea.addEventListener('dragover', (evt) => {
+      evt.stopPropagation()
+      evt.preventDefault()
+    })
+
+    this.editor.$textarea.addEventListener('drop', (evt) => {
+      const files = evt.dataTransfer?.files
+      if (files?.length) {
+        evt.preventDefault()
+        uploadFromFileList(files)
+      }
+    })
+
+    // 粘贴图片
+    this.editor.$textarea.addEventListener('paste', (evt) => {
+      const files = evt.clipboardData?.files
+      if (files?.length) {
+        evt.preventDefault()
+        uploadFromFileList(files)
+      }
+    })
+  }
+
+  public async uploadImg(file: File) {
+    const fileExt = /[^.]+$/.exec(file.name)
+    if (!fileExt || !this.allowImgExts.includes(fileExt[0])) return
+
+    // 未登录提示
+    if (!this.ctx.user.checkHasBasicUserInfo()) {
+      this.editor.showNotify(this.ctx.$t('uploadLoginMsg'), 'w')
+      return
+    }
+
+    // 插入图片前换一行
+    let insertPrefix = '\n'
+    if (this.editor.$textarea.value.trim() === '') insertPrefix = ''
+
+    // 插入占位加载文字
+    const uploadPlaceholderTxt = `${insertPrefix}![](Uploading ${file.name}...)`
+    this.editor.insertContent(uploadPlaceholderTxt)
+
+    // 上传图片
+    let resp: any
+    try {
+      if (!this.ctx.conf.imgUploader) {
+        // 使用 ArtalkGo 进行图片上传
+        resp = await this.ctx.getApi().imgUpload(file)
+      } else {
+        // 使用自定义的图片上传器
+        resp = {img_url: await this.ctx.conf.imgUploader(file)}
+      }
+    } catch (err: any) {
+      console.error(err)
+      this.editor.showNotify(`${this.ctx.$t('uploadFail')}，${err.msg}`, 'e')
+    }
+    if (!!resp && resp.img_url) {
+      let imgURL = resp.img_url as string
+
+      // 若为相对路径，加上 artalk server
+      if (!Utils.isValidURL(imgURL)) imgURL = Utils.getURLBasedOnApi(this.ctx, imgURL)
+
+      // 上传成功插入图片
+      this.editor.setContent(this.editor.$textarea.value.replace(uploadPlaceholderTxt, `${insertPrefix}![](${imgURL})`))
+    } else {
+      // 上传失败删除加载文字
+      this.editor.setContent(this.editor.$textarea.value.replace(uploadPlaceholderTxt, ''))
+    }
+  }
+}

package/src/i18n/en.ts

@@ -0,0 +1,78 @@
+export default {
+  /* Editor */
+  placeholder: 'Leave a comment',
+  noComment: 'No Comment',
+  send: 'Send',
+  nick: 'Nickname',
+  email: 'Email',
+  link: 'Website',
+  emoticon: 'Emoji',
+  preview: 'Preview',
+  image: 'Image',
+  uploadFail: 'Upload Failed',
+  commentFail: 'Failed to comment',
+  restoredMsg: 'Content has been restored',
+  onlyAdminCanReply: 'Only admin can reply',
+  uploadLoginMsg: 'Please fill in your name and email to upload',
+
+  /* List */
+  counter: '{count} Comments',
+  sortLatest: 'Latest',
+  sortOldest: 'Oldest',
+  sortBest: 'Best',
+  sortAuthor: 'Author',
+  openComment: 'Open Comment',
+  closeComment: 'Close Comment',
+  listLoadFailMsg: 'Failed to load comments',
+  listRetry: 'Click to retry',
+  loadMore: 'Load More',
+
+  /* Comment */
+  admin: 'Admin',
+  reply: 'Reply',
+  voteUp: 'Up',
+  voteDown: 'Down',
+  voteFail: 'Vote Failed',
+  readMore: 'Read More',
+  actionConfirm: 'Confirm',
+  collapse: 'Collapse',
+  collapsed: 'Collapsed',
+  collapsedMsg: 'This comment has been collapsed',
+  expand: 'Expand',
+  approved: 'Approved',
+  pending: 'Pending',
+  pendingMsg: 'Pending, visible only to commenter.',
+  delete: 'Delete',
+  deleteConfirm: 'Confirm',
+  pin: 'Pin',
+  unpin: 'Unpin',
+
+  /* Time */
+  seconds: 'seconds ago',
+  minutes: 'minutes ago',
+  hours: 'hours ago',
+  days: 'days ago',
+  now: 'just now',
+
+  /* Checker */
+  adminCheck: 'Enter admin password:',
+  captchaCheck: 'Enter the CAPTCHA to continue:',
+  confirm: 'Confirm',
+  cancel: 'Cancel',
+
+  /* Sidebar */
+  msgCenter: 'Messages',
+  ctrlCenter: 'Admin',
+
+  /* General */
+  frontend: 'Frontend',
+  backend: 'Backend',
+  loading: 'Loading',
+  loadFail: 'Load Failed',
+  editing: 'Editing',
+  editFail: 'Edit Failed',
+  deleting: 'Deleting',
+  deleteFail: 'Delete Failed',
+  reqGot: 'Request got',
+  reqAborted: 'Request timed out or terminated unexpectedly',
+}

package/src/i18n/index.ts

@@ -0,0 +1,21 @@
+import en from './en'
+import zhCN from './zh-CN'
+
+export type I18n = typeof en
+
+// @note the Key name is followed by `ISO 639`
+// https://en.wikipedia.org/wiki/ISO_639
+// https://datatracker.ietf.org/doc/html/rfc5646#section-2.1
+export const internal = {
+  'en': en,
+  'en-US': en,
+  'zh-CN': zhCN,
+}
+
+export const external = {
+  'jp-JP': {},
+  'zh-TW': {},
+  'fr-FR': {},
+  'de-DE': {},
+  'bn-IN': {},
+}

package/src/i18n/zh-CN.ts

@@ -0,0 +1,82 @@
+import { I18n } from '.'
+
+const zhCN: I18n = {
+  /* Editor */
+  placeholder: '键入内容...',
+  noComment: '「此时无声胜有声」',
+  send: '发送评论',
+  nick: '昵称',
+  email: '邮件',
+  link: '网址',
+  emoticon: '表情',
+  preview: '预览',
+  image: '图片',
+  uploadFail: '上传失败',
+  commentFail: '评论失败',
+  restoredMsg: '内容已自动恢复',
+  onlyAdminCanReply: '仅管理员可评论',
+  uploadLoginMsg: '填入你的名字邮箱才能上传哦',
+
+  /* List */
+  counter: '{count} 条评论',
+  sortLatest: '最新',
+  sortOldest: '最早',
+  sortBest: '最热',
+  sortAuthor: '作者',
+  openComment: '打开评论',
+  closeComment: '关闭评论',
+  listLoadFailMsg: '无法获取评论列表数据',
+  listRetry: '点击重新获取',
+  loadMore: '加载更多',
+
+  /* Comment */
+  admin: '管理员',
+  reply: '回复',
+  voteUp: '赞同',
+  voteDown: '反对',
+  voteFail: '投票失败',
+  readMore: '阅读更多',
+  actionConfirm: '确认操作',
+  collapse: '折叠',
+  collapsed: '已折叠',
+  collapsedMsg: '该评论已被系统或管理员折叠',
+  expand: '取消折叠',
+  approved: '已审',
+  pending: '待审',
+  pendingMsg: '审核中，仅本人可见。',
+  delete: '删除',
+  deleteConfirm: '确认删除',
+  pin: '置顶',
+  unpin: '取消置顶',
+
+  /* Time */
+  seconds: '秒前',
+  minutes: '分钟前',
+  hours: '小时前',
+  days: '天前',
+  now: '刚刚',
+
+  /* Checker */
+  adminCheck: '键入密码来验证管理员身份：',
+  captchaCheck: '键入验证码继续：',
+  confirm: '确认',
+  cancel: '取消',
+
+  /* Sidebar */
+  msgCenter: '通知中心',
+  ctrlCenter: '控制中心',
+
+  /* General */
+  frontend: '前端',
+  backend: '后端',
+  loading: '加载中',
+  loadFail: '加载失败',
+  editing: '修改中',
+  editFail: '修改失败',
+  deleting: '删除中',
+  deleteFail: '删除失败',
+  reqGot: '请求响应',
+  reqAborted: '请求超时或意外终止',
+}
+
+export default zhCN

package/src/layer/index.ts

@@ -0,0 +1,4 @@
+import Layer, { GetLayerWrap } from './layer'
+
+export default Layer
+export { GetLayerWrap }