artalk 2.7.1 → 2.7.2

package/src/plugins/editor/state-edit.ts

@@ -1,116 +0,0 @@
-import type { CommentData } from '~/types'
-import $t from '@/i18n'
-import * as Utils from '@/lib/utils'
-import User from '@/lib/user'
-import type PlugKit from './_kit'
-import EditorPlug from './_plug'
-import Submit from './submit'
-
-export default class StateEdit extends EditorPlug {
-  private comment?: CommentData
-
-  constructor(kit: PlugKit) {
-    super(kit)
-
-    // add effect when state switch to `edit`
-    this.useEditorStateEffect('edit', (comment) => {
-      this.edit(comment)
-
-      return () => {
-        this.cancelEdit()
-      }
-    })
-
-    // register submit preset
-    this.kit.useMounted(() => {
-      const submitPlug = this.kit.useDeps(Submit)
-      if (!submitPlug) throw Error("SubmitPlug not initialized")
-
-      submitPlug.registerCustom({
-        activeCond: () => !!this.comment, // active this custom submit when edit mode
-        req: async () => {
-          const saveData = {
-            content: this.kit.useEditor().getContentFinal(),
-            nick: this.kit.useUI().$nick.value,
-            email: this.kit.useUI().$email.value,
-            link: this.kit.useUI().$link.value,
-          }
-          const nComment = await this.kit.useApi().comment.commentEdit({
-            ...this.comment, ...saveData
-          })
-          return nComment
-        },
-        post: (nComment: CommentData) => {
-          this.kit.useGlobalCtx().getData().updateComment(nComment)
-        }
-      })
-    })
-  }
-
-  private edit(comment: CommentData) {
-    const ui = this.kit.useUI()
-    if (!ui.$editCancelBtn) {
-      const $btn = Utils.createElement(
-        `<div class="atk-send-reply">` +
-          `${$t('editCancel')} ` +
-          `<span class="atk-cancel">×</span>` +
-        `</div>`
-      )
-      $btn.onclick = () => {
-        this.kit.useEditor().resetState()
-      }
-      ui.$textareaWrap.append($btn)
-      ui.$editCancelBtn = $btn
-    }
-    this.comment = comment
-
-    ui.$header.style.display = 'none' // TODO support modify header information
-
-    ui.$nick.value = comment.nick || ''
-    ui.$email.value = comment.email || ''
-    ui.$link.value = comment.link || ''
-
-    this.kit.useEditor().setContent(comment.content)
-    ui.$textarea.focus()
-
-    this.updateSubmitBtnText($t('save'))
-  }
-
-  private cancelEdit() {
-    if (!this.comment) return
-
-    const ui = this.kit.useUI()
-
-    if (ui.$editCancelBtn) {
-      ui.$editCancelBtn.remove()
-      ui.$editCancelBtn = undefined
-    }
-
-    this.comment = undefined
-
-    const { nick, email, link } = User.data
-    ui.$nick.value = nick
-    ui.$email.value = email
-    ui.$link.value = link
-
-    this.kit.useEditor().setContent('')
-    this.restoreSubmitBtnText()
-
-    ui.$header.style.display = '' // TODO support modify header information
-  }
-
-  // -------------------------------------------------------------------
-  //  Submit Btn Text Modifier
-  // -------------------------------------------------------------------
-
-  private originalSubmitBtnText = 'Send'
-
-  private updateSubmitBtnText(text: string) {
-    this.originalSubmitBtnText = this.kit.useUI().$submitBtn.innerText
-    this.kit.useUI().$submitBtn.innerText = text
-  }
-
-  private restoreSubmitBtnText() {
-    this.kit.useUI().$submitBtn.innerText = this.originalSubmitBtnText
-  }
-}

package/src/plugins/editor/state-reply.ts

@@ -1,91 +0,0 @@
-import type { CommentData } from '~/types'
-import * as Utils from '@/lib/utils'
-import * as Ui from '@/lib/ui'
-import $t from '@/i18n'
-import EditorPlug from './_plug'
-import type PlugKit from './_kit'
-import Submit from './submit'
-import SubmitAddPreset from './submit-add'
-
-export default class StateReply extends EditorPlug {
-  private comment?: CommentData
-
-  constructor(kit: PlugKit) {
-    super(kit)
-
-    // add effect when state switch to `reply`
-    this.useEditorStateEffect('reply', (commentData) => {
-      this.setReply(commentData)
-
-      return () => {
-        this.cancelReply()
-      }
-    })
-
-    // register submit preset
-    this.kit.useEvents().on('mounted', () => {
-      const submitPlug = this.kit.useDeps(Submit)
-      if (!submitPlug) throw Error("SubmitPlug not initialized")
-
-      const defaultPreset = new SubmitAddPreset(this.kit)
-
-      submitPlug.registerCustom({
-        activeCond: () => !!this.comment, // active this custom submit when reply mode
-        req: async () => {
-          if (!this.comment) throw new Error('reply comment cannot be empty')
-
-          const nComment = await this.kit.useApi().comment.add({
-            ...defaultPreset.getSubmitAddParams(),
-            rid: this.comment.id,
-            page_key: this.comment.page_key,
-            page_title: undefined,
-            site_name: this.comment.site_name
-          })
-
-          return nComment
-        },
-        post: (nComment: CommentData) => {
-          // open another page when reply comment is not the same pageKey
-          const conf = this.kit.useConf()
-          if (nComment.page_key !== conf.pageKey) {
-            window.open(`${nComment.page_url}#atk-comment-${nComment.id}`)
-          }
-
-          defaultPreset.postSubmitAdd(nComment)
-        }
-      })
-    })
-  }
-
-  private setReply(commentData: CommentData) {
-    const ui = this.kit.useUI()
-    if (!ui.$sendReply) {
-      ui.$sendReply = Utils.createElement(
-        `<div class="atk-send-reply">` +
-          `${$t('reply')} ` +
-          `<span class="atk-text"></span><span class="atk-cancel">×</span>` +
-        `</div>`
-      )
-      ui.$sendReply.querySelector<HTMLElement>('.atk-text')!.innerText = `@${commentData.nick}`
-      ui.$sendReply.addEventListener('click', () => {
-        this.kit.useEditor().resetState()
-      })
-      ui.$textareaWrap.append(ui.$sendReply)
-    }
-
-    this.comment = commentData
-
-    ui.$textarea.focus()
-  }
-
-  private cancelReply() {
-    if (!this.comment) return
-
-    const ui = this.kit.useUI()
-    if (ui.$sendReply) {
-      ui.$sendReply.remove()
-      ui.$sendReply = undefined
-    }
-    this.comment = undefined
-  }
-}

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

@@ -1,33 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,73 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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

@@ -1,145 +0,0 @@
-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

@@ -1,161 +0,0 @@
-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
-  }
-}