artalk 2.6.3 → 2.7.0

package/src/plugins/editor/submit-add.ts

@@ -0,0 +1,33 @@
+import type { CommentData } from '~/types'
+import User from '@/lib/user'
+import type PlugKit from './_kit'
+
+export default class SubmitAddPreset {
+  constructor(private kit: PlugKit) {}
+
+  async reqAdd() {
+    const nComment = await this.kit.useApi().comment.add({
+      ...this.getSubmitAddParams()
+    })
+    return nComment
+  }
+
+  getSubmitAddParams() {
+    const { nick, email, link } = User.data
+    const conf = this.kit.useConf()
+
+    return {
+      content: this.kit.useEditor().getContentFinal(),
+      nick, email, link,
+      rid: 0,
+      page_key: conf.pageKey,
+      page_title: conf.pageTitle,
+      site_name: conf.site
+    }
+  }
+
+  postSubmitAdd(commentNew: CommentData) {
+    // insert the new comment to list
+    this.kit.useGlobalCtx().getData().insertComment(commentNew)
+  }
+}

package/src/plugins/editor/submit-btn.ts

@@ -0,0 +1,25 @@
+import $t from '@/i18n'
+import EditorPlug from './_plug'
+import type PlugKit from './_kit'
+
+export default class SubmitBtn extends EditorPlug {
+  constructor(kit: PlugKit) {
+    super(kit)
+
+    const onClick = () => {
+      this.kit.useEditor().submit()
+    }
+
+    this.kit.useMounted(() => {
+      // apply the submit button text from user custom config
+      this.kit.useUI().$submitBtn.innerText = this.kit.useConf().sendBtn || $t('send')
+
+      // bind the event when click the submit button
+      this.kit.useUI().$submitBtn.addEventListener('click', onClick)
+    })
+
+    this.kit.useUnmounted(() => {
+      this.kit.useUI().$submitBtn.removeEventListener('click', onClick)
+    })
+  }
+}

package/src/plugins/editor/submit.ts

@@ -0,0 +1,73 @@
+import type { CommentData } from '~/types'
+import $t from '@/i18n'
+import EditorPlug from './_plug'
+import type PlugKit from './_kit'
+import SubmitAddPreset from './submit-add'
+
+interface CustomSubmit {
+  activeCond: () => void
+  pre?: () => void
+  req?: () => Promise<CommentData>
+  post?: (nComment: CommentData) => void
+}
+
+export default class Submit extends EditorPlug {
+  private customs: CustomSubmit[] = []
+  private defaultPreset: SubmitAddPreset
+
+  constructor(kit: PlugKit) {
+    super(kit)
+
+    this.defaultPreset = new SubmitAddPreset(this.kit)
+
+    const onEditorSubmit = () => this.do()
+
+    this.kit.useMounted(() => {
+      // invoke `do()` when event `editor-submit` is triggered
+      this.kit.useGlobalCtx().on('editor-submit', onEditorSubmit)
+    })
+    this.kit.useUnmounted(() => {
+      this.kit.useGlobalCtx().off('editor-submit', onEditorSubmit)
+    })
+  }
+
+  registerCustom(c: CustomSubmit) {
+    this.customs.push(c)
+  }
+
+  private async do() {
+    if (this.kit.useEditor().getContentFinal().trim() === '') {
+      this.kit.useEditor().focus()
+      return
+    }
+
+    const custom = this.customs.find(o => o.activeCond())
+
+    this.kit.useEditor().showLoading()
+
+    try {
+      // pre submit
+      if (custom?.pre) custom.pre()
+
+      let nComment: CommentData
+
+      // submit request
+      if (custom?.req) nComment = await custom.req()
+      else nComment = await this.defaultPreset.reqAdd()
+
+      // post submit
+      if (custom?.post) custom.post(nComment)
+      else this.defaultPreset.postSubmitAdd(nComment)
+    } catch (err: any) {
+      // submit error
+      console.error(err)
+      this.kit.useEditor().showNotify(`${$t('commentFail')}，${err.msg || String(err)}`, 'e')
+      return
+    } finally {
+      this.kit.useEditor().hideLoading()
+    }
+
+    this.kit.useEditor().reset() // 复原编辑器
+    this.kit.useGlobalCtx().trigger('editor-submitted')
+  }
+}

package/src/plugins/editor/textarea.ts

@@ -0,0 +1,55 @@
+import $t from '@/i18n'
+import EditorPlug from './_plug'
+import type PlugKit from './_kit'
+
+export default class Textarea extends EditorPlug {
+  constructor(kit: PlugKit) {
+    super(kit)
+
+    const onKeydown = (e: KeyboardEvent) => this.onKeydown(e)
+    const onInput = () => this.onInput()
+
+    this.kit.useMounted(() => {
+      // 占位符
+      this.kit.useUI().$textarea.placeholder = this.kit.useConf().placeholder || $t('placeholder')
+
+      // bind the event
+      this.kit.useUI().$textarea.addEventListener('keydown', onKeydown)
+      this.kit.useUI().$textarea.addEventListener('input', onInput)
+    })
+
+    this.kit.useUnmounted(() => {
+      // unmount the event
+      this.kit.useUI().$textarea.removeEventListener('keydown', onKeydown)
+      this.kit.useUI().$textarea.removeEventListener('input', onInput)
+    })
+
+    this.kit.useEvents().on('content-updated', () => {
+      // delay 80ms to prevent invalid execution
+      window.setTimeout(() => {
+        this.adaptiveHeightByContent()
+      }, 80)
+    })
+  }
+
+  // 按下 Tab 输入内容，而不是失去焦距
+  private onKeydown(e: KeyboardEvent) {
+    const keyCode = e.keyCode || e.which
+
+    if (keyCode === 9) {
+      e.preventDefault()
+      this.kit.useEditor().insertContent('\t')
+    }
+  }
+
+  private onInput() {
+    this.kit.useEvents().trigger('content-updated', this.kit.useEditor().getContentRaw())
+  }
+
+  // Resize the textarea height by content
+  public adaptiveHeightByContent() {
+    const diff = this.kit.useUI().$textarea.offsetHeight - this.kit.useUI().$textarea.clientHeight
+    this.kit.useUI().$textarea.style.height = '0px' // it's a magic. 若不加此行，内容减少，高度回不去
+    this.kit.useUI().$textarea.style.height = `${this.kit.useUI().$textarea.scrollHeight + diff}px`
+  }
+}

package/src/plugins/editor/upload.ts

@@ -0,0 +1,145 @@
+import * as Utils from '@/lib/utils'
+import User from '@/lib/user'
+import $t from '@/i18n'
+import type PlugKit from './_kit'
+import EditorPlug from './_plug'
+
+/** 允许的图片格式 */
+const AllowImgExts = ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'svg', 'webp']
+
+export default class Upload extends EditorPlug {
+  private $imgUploadInput?: HTMLInputElement
+
+  constructor(kit: PlugKit) {
+    super(kit)
+
+    this.kit.useMounted(() => this.init())
+
+    this.initDragImg()
+  }
+
+  private init() {
+    this.$imgUploadInput = document.createElement('input')
+    this.$imgUploadInput.type = 'file'
+    this.$imgUploadInput.style.display = 'none'
+    this.$imgUploadInput.accept = AllowImgExts.map(o => `.${o}`).join(',')
+
+    // TODO Use btn cannot refresh when mounted event is triggered
+    const $btn = this.useBtn(`${$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() // 显示选择图片对话框
+    }
+
+    if (!this.kit.useConf().imgUpload) {
+      this.$btn!.setAttribute('atk-only-admin-show', '')
+    }
+  }
+
+  private initDragImg() {
+    // 统一从 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
+    // 阻止浏览器的默认释放行为
+    const onDragover = (evt: Event) => {
+      evt.stopPropagation()
+      evt.preventDefault()
+    }
+
+    const onDrop = (evt: DragEvent) => {
+      const files = evt.dataTransfer?.files
+      if (files?.length) {
+        evt.preventDefault()
+        uploadFromFileList(files)
+      }
+    }
+
+    // 粘贴图片
+    const onPaste = (evt: ClipboardEvent) => {
+      const files = evt.clipboardData?.files
+      if (files?.length) {
+        evt.preventDefault()
+        uploadFromFileList(files)
+      }
+    }
+
+    this.kit.useMounted(() => {
+      this.kit.useUI().$textarea.addEventListener('dragover', onDragover)
+      this.kit.useUI().$textarea.addEventListener('drop', onDrop)
+      this.kit.useUI().$textarea.addEventListener('paste', onPaste)
+    })
+    this.kit.useUnmounted(() => {
+      this.kit.useUI().$textarea.removeEventListener('dragover', onDragover)
+      this.kit.useUI().$textarea.removeEventListener('drop', onDrop)
+      this.kit.useUI().$textarea.removeEventListener('paste', onPaste)
+    })
+  }
+
+  async uploadImg(file: File) {
+    const fileExt = /[^.]+$/.exec(file.name)
+    if (!fileExt || !AllowImgExts.includes(fileExt[0])) return
+
+    // 未登录提示
+    if (!User.checkHasBasicUserInfo()) {
+      this.kit.useEditor().showNotify($t('uploadLoginMsg'), 'w')
+      return
+    }
+
+    // 插入图片前换一行
+    let insertPrefix = '\n'
+    if (this.kit.useUI().$textarea.value.trim() === '') insertPrefix = ''
+
+    // 插入占位加载文字
+    const uploadPlaceholderTxt = `${insertPrefix}![](Uploading ${file.name}...)`
+    this.kit.useEditor().insertContent(uploadPlaceholderTxt)
+
+    // 上传图片
+    let resp: any
+    try {
+      const customUploaderFn = this.kit.useConf().imgUploader
+      if (!customUploaderFn) {
+        // 使用 Artalk 进行图片上传
+        resp = await this.kit.useApi().upload.imgUpload(file)
+      } else {
+        // 使用自定义的图片上传器
+        resp = {img_url: await customUploaderFn(file)}
+      }
+    } catch (err: any) {
+      console.error(err)
+      this.kit.useEditor().showNotify(`${$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({
+        base: this.kit.useConf().server,
+        path: imgURL,
+      })
+
+      // 上传成功插入图片
+      this.kit.useEditor().setContent(this.kit.useUI().$textarea.value.replace(uploadPlaceholderTxt, `${insertPrefix}![](${imgURL})`))
+    } else {
+      // 上传失败删除加载文字
+      this.kit.useEditor().setContent(this.kit.useUI().$textarea.value.replace(uploadPlaceholderTxt, ''))
+    }
+  }
+}

package/src/plugins/editor-kit.ts

@@ -0,0 +1,161 @@
+import type { EditorApi, ArtalkPlugin } from '~/types'
+import EventManager from '@/lib/event-manager'
+import { ENABLED_PLUGS, getDisabledPlugByConf } from './editor'
+import EditorPlug from './editor/_plug'
+import PlugKit from './editor/_kit'
+
+export interface EditorEventPayloadMap {
+  'mounted': undefined
+  'unmounted': undefined
+  'header-input': { field: string, $input: HTMLInputElement }
+  'header-change': { field: string, $input: HTMLInputElement }
+  'content-updated': string
+  'panel-show': EditorPlug
+  'panel-hide': EditorPlug
+  'panel-close': undefined
+
+  'editor-close': undefined
+  'editor-open': undefined
+}
+
+export const EditorKit: ArtalkPlugin = (ctx) => {
+  const editor = ctx.get('editor')
+
+  const editorPlugs = new PlugManager(editor)
+  ctx.inject('editorPlugs', editorPlugs)
+}
+
+export class PlugManager {
+  private plugs: EditorPlug[] = []
+  private openedPlug: EditorPlug|null = null
+  private events = new EventManager<EditorEventPayloadMap>()
+
+  getPlugs() { return this.plugs }
+  getEvents() { return this.events }
+
+  private clear() {
+    this.plugs = []
+    this.events = new EventManager()
+    if (this.openedPlug) this.closePlugPanel()
+  }
+
+  constructor(
+    public editor: EditorApi
+  ) {
+    let confLoaded = false // config not loaded at first time
+    this.editor.ctx.on('conf-loaded', () => {
+      // trigger unmount event will call all plugs' unmount function
+      // (this will only be called while conf reloaded, not be called at first time)
+      confLoaded && this.getEvents().trigger('unmounted')
+
+      // reset the plugs
+      this.clear()
+
+      // init the all enabled plugs
+      const DISABLED = getDisabledPlugByConf(this.editor.ctx.conf)
+
+      ENABLED_PLUGS
+        .filter(p => !DISABLED.includes(p)) // 禁用的插件
+        .forEach((Plug) => {
+          // create the plug instance
+          const kit = new PlugKit(this)
+          this.plugs.push(new Plug(kit))
+        })
+
+      // trigger event for plug initialization
+      this.getEvents().trigger('mounted')
+      confLoaded = true
+
+      // refresh the plug UI
+      this.loadPluginUI()
+    })
+
+    this.events.on('panel-close', () => this.closePlugPanel())
+  }
+
+  private loadPluginUI() {
+    // handle ui, clear and reset the plug btns and plug panels
+    this.editor.getUI().$plugPanelWrap.innerHTML = ''
+    this.editor.getUI().$plugPanelWrap.style.display = 'none'
+    this.editor.getUI().$plugBtnWrap.innerHTML = ''
+
+    // load the plug UI
+    this.plugs.forEach((plug) => this.loadPluginItem(plug))
+  }
+
+  /** Load the plug btn and plug panel on editor ui */
+  private loadPluginItem(plug: EditorPlug) {
+    const $btn = plug.$btn
+    if (!$btn) return
+    this.editor.getUI().$plugBtnWrap.appendChild($btn)
+
+    // bind the event when click plug btn
+    !$btn.onclick && ($btn.onclick = () => {
+      // removing the active class from all the buttons
+      this.editor.getUI().$plugBtnWrap
+        .querySelectorAll('.active')
+        .forEach(item => item.classList.remove('active'))
+
+      // if the plug is not the same as the openedPlug,
+      if (plug !== this.openedPlug) {
+        // then open the plug current clicked plug panel
+        this.openPlugPanel(plug)
+
+        // add active class for current plug panel
+        $btn.classList.add('active')
+      } else {
+        // then close the plug
+        this.closePlugPanel()
+      }
+    })
+
+    // initialization of plug panel
+    const $panel = plug.$panel
+    if ($panel) {
+      $panel.style.display = 'none'
+      this.editor.getUI().$plugPanelWrap.appendChild($panel)
+    }
+  }
+
+  get<T extends typeof EditorPlug>(plug: T) {
+    return this.plugs.find(p => p instanceof plug) as InstanceType<T> | undefined;
+  }
+
+  /** Open the editor plug panel */
+  openPlugPanel(plug: EditorPlug) {
+    this.plugs.forEach((aPlug) => {
+      const plugPanel = aPlug.$panel
+      if (!plugPanel) return
+
+      if (aPlug === plug) {
+        plugPanel.style.display = ''
+        this.events.trigger('panel-show', plug)
+      } else {
+        plugPanel.style.display = 'none'
+        this.events.trigger('panel-hide', plug)
+      }
+    })
+
+    this.editor.getUI().$plugPanelWrap.style.display = ''
+    this.openedPlug = plug
+  }
+
+  /** Close the editor plug panel */
+  closePlugPanel() {
+    if (!this.openedPlug) return
+
+    this.editor.getUI().$plugPanelWrap.style.display = 'none'
+    this.events.trigger('panel-hide', this.openedPlug)
+    this.openedPlug = null
+  }
+
+  /** Get the content which is transformed by plugs */
+  getTransformedContent(rawContent: string) {
+    let result = rawContent
+    this.plugs.forEach((aPlug) => {
+      if (!aPlug.contentTransformer) return
+      result = aPlug.contentTransformer(result)
+    })
+    return result
+  }
+}

package/src/plugins/index.ts

@@ -0,0 +1,16 @@
+import type { ArtalkPlugin } from '~/types'
+import { ConfRemoter } from './conf-remoter'
+import { Markdown } from './markdown'
+import { EditorKit } from './editor-kit'
+import { ListPlugins } from './list'
+import { PvCountWidget } from './stat'
+import { VersionCheck } from './version-check'
+import { AdminOnlyElem } from './admin-only-elem'
+import { DarkMode } from './dark-mode'
+
+export const DefaultPlugins: ArtalkPlugin[] = [
+  ConfRemoter,
+  Markdown, EditorKit, AdminOnlyElem,
+  ...ListPlugins,
+  PvCountWidget, VersionCheck, DarkMode,
+]

package/src/plugins/list/copyright.ts

@@ -0,0 +1,16 @@
+import type { ArtalkPlugin } from '~/types'
+import { version as ARTALK_VERSION } from '~/package.json'
+
+export const Copyright: ArtalkPlugin = (ctx) => {
+  ctx.on('conf-loaded', () => {
+    const list = ctx.get('list')
+
+    const $copyright = list.$el.querySelector<HTMLElement>('.atk-copyright')
+    if (!$copyright) return
+
+    $copyright.innerHTML = (
+      `Powered By <a href="https://artalk.js.org" ` +
+      `target="_blank" title="Artalk v${ARTALK_VERSION}">` +
+      `Artalk</a>`)
+  })
+}

package/src/plugins/list/count.ts

@@ -0,0 +1,31 @@
+import type { ArtalkPlugin } from '~/types'
+import * as Utils from '@/lib/utils'
+import $t from '@/i18n'
+
+export const Count: ArtalkPlugin = (ctx) => {
+  const refreshCountNumEl = () => {
+    const list = ctx.get('list')
+
+    const $count = list.$el.querySelector('.atk-comment-count .atk-text')
+    if (!$count) return
+
+    const text = Utils.htmlEncode($t('counter', { count: `${Number(ctx.getData().getListLastFetch()?.data?.total) || 0}` }))
+    $count.innerHTML = text.replace(/(\d+)/, '<span class="atk-comment-count-num">$1</span>')
+  }
+
+  ctx.on('list-loaded', () => {
+    refreshCountNumEl()
+  })
+
+  ctx.on('comment-inserted', () => {
+    // 评论数增加 1
+    const last = ctx.getData().getListLastFetch()
+    if (last?.data) last.data.total += 1
+  })
+
+  ctx.on('comment-deleted', () => {
+    // 评论数减 1
+    const last = ctx.getData().getListLastFetch()
+    if (last?.data) last.data.total -= 1
+  })
+}

package/src/plugins/list/dropdown.ts

@@ -0,0 +1,95 @@
+import type { ArtalkPlugin } from '~/types'
+import * as Utils from '@/lib/utils'
+import $t from '@/i18n'
+
+export const Dropdown: ArtalkPlugin = (ctx) => {
+  const reloadUseParamsEditor = (func: (p: any) => void) => {
+    ctx.conf.listFetchParamsModifier = func
+    ctx.reload()
+  }
+
+  const initDropdown = ($dropdownOn: HTMLElement) => {
+    renderDropdown({
+      $dropdownWrap: $dropdownOn,
+      dropdownList: [
+        [$t('sortLatest'), () => { reloadUseParamsEditor(p => { p.sort_by = 'date_desc' }) }],
+        [$t('sortBest'), () => { reloadUseParamsEditor(p => { p.sort_by = 'vote' }) }],
+        [$t('sortOldest'), () => { reloadUseParamsEditor(p => { p.sort_by = 'date_asc' }) }],
+        [$t('sortAuthor'), () => { reloadUseParamsEditor(p => { p.view_only_admin = true }) }],
+      ]
+    })
+  }
+
+  ctx.on('conf-loaded', () => {
+    const list = ctx.get('list')
+
+    const $count = list.$el.querySelector<HTMLElement>('.atk-comment-count')
+    if (!$count) return
+
+    // 评论列表排序 Dropdown 下拉选择层
+    if (ctx.conf.listSort) {
+      initDropdown($count)
+    } else {
+      removeDropdown({
+        $dropdownWrap: $count
+      })
+    }
+  })
+}
+
+/** 评论排序方式选择下拉菜单 */
+function renderDropdown(conf: {
+  $dropdownWrap: HTMLElement,
+  dropdownList: [string, () => void][]
+}) {
+  const { $dropdownWrap, dropdownList } = conf
+  if ($dropdownWrap.querySelector('.atk-dropdown')) return
+
+  // 修改 class
+  $dropdownWrap.classList.add('atk-dropdown-wrap')
+
+  // 插入图标
+  $dropdownWrap.append(Utils.createElement(`<span class="atk-arrow-down-icon"></span>`))
+
+  // 列表项点击事件
+  let curtActive = 0 // 当前选中
+  const onItemClick = (i: number, $item: HTMLElement, name: string, action: Function) => {
+    action()
+
+    // set active
+    curtActive = i
+    $dropdown.querySelectorAll('.active').forEach((e) => { e.classList.remove('active') })
+    $item.classList.add('active')
+
+    // 关闭层 (临时消失，取消 :hover)
+    $dropdown.style.display = 'none'
+    setTimeout(() => { $dropdown.style.display = '' }, 80)
+  }
+
+  // 生成列表元素
+  const $dropdown = Utils.createElement(`<ul class="atk-dropdown atk-fade-in"></ul>`)
+  dropdownList.forEach((item, i) => {
+    const name = item[0] as string
+    const action = item[1] as Function
+
+    const $item = Utils.createElement(`<li class="atk-dropdown-item"><span></span></li>`)
+    const $link = $item.querySelector<HTMLElement>('span')!
+    $link.innerText = name
+    $link.onclick = () => { onItemClick(i, $item, name, action) }
+    $dropdown.append($item)
+
+    if (i === curtActive) $item.classList.add('active') // 默认选中项
+  })
+
+  $dropdownWrap.append($dropdown)
+}
+
+/** 删除评论排序方式选择下拉菜单 */
+function removeDropdown(conf: {
+  $dropdownWrap: HTMLElement
+}) {
+  const { $dropdownWrap } = conf
+  $dropdownWrap.classList.remove('atk-dropdown-wrap')
+  $dropdownWrap.querySelector('.atk-arrow-down-icon')?.remove()
+  $dropdownWrap.querySelector('.atk-dropdown')?.remove()
+}

package/src/plugins/list/error-dialog.ts

@@ -0,0 +1,22 @@
+import type { ArtalkPlugin, ContextApi } from '~/types'
+import { showErrorDialog } from '@/components/error-dialog'
+import * as Ui from '../../lib/ui'
+
+export const ErrorDialog: ArtalkPlugin = (ctx) => {
+  ctx.on('list-fetch', () => {
+    const list = ctx.get('list')
+
+    // clear the original error when a new fetch is triggered
+    Ui.setError(list.$el, null)
+  })
+
+  ctx.on('list-error', (err) => {
+    showErrorDialog({
+      $err: ctx.get('list').$el,
+      errMsg: err.msg,
+      errData: err.data,
+      retryFn: () => ctx.fetch({ offset: 0 })
+    })
+  })
+}
+