artalk 2.7.0 → 2.7.2

package/src/plugins/editor/_kit.ts

@@ -1,57 +0,0 @@
-import type { PlugManager } from '../editor-kit'
-import type EditorPlug from "./_plug"
-
-/**
- * PlugKit provides a set of methods to help you develop editor plug
- */
-export default class PlugKit {
-  constructor(
-    private plugs: PlugManager
-  ) {
-  }
-
-  /** Use the editor */
-  useEditor() {
-    return this.plugs.editor
-  }
-
-  /** Use the context of global */
-  useGlobalCtx() {
-    return this.plugs.editor.ctx
-  }
-
-  /** Use the config of Artalk */
-  useConf() {
-    return this.plugs.editor.ctx.conf
-  }
-
-  /** Use the http api client */
-  useApi() {
-    return this.plugs.editor.ctx.getApi()
-  }
-
-  /** Use the ui of editor */
-  useUI() {
-    return this.plugs.editor.getUI()
-  }
-
-  /** Use the events in editor scope */
-  useEvents() {
-    return this.plugs.getEvents()
-  }
-
-  /** Listen the event when plug is mounted */
-  useMounted(func: () => void) {
-    this.useEvents().on('mounted', func)
-  }
-
-  /** Listen the event when plug is unmounted */
-  useUnmounted(func: () => void) {
-    this.useEvents().on('unmounted', func)
-  }
-
-  /** Use the deps of other plug */
-  useDeps<T extends typeof EditorPlug>(plug: T) {
-    return this.plugs.get(plug)
-  }
-}

package/src/plugins/editor/_plug.ts

@@ -1,60 +0,0 @@
-import type { CommentData, EditorState } from '~/types'
-import * as Utils from '@/lib/utils'
-import type PlugKit from './_kit'
-
-/**
- * Editor 插件
- */
-interface EditorPlug {
-  $btn?: HTMLElement
-  $panel?: HTMLElement
-  contentTransformer?(rawContent: string): string
-  editorStateEffectWhen?: EditorState
-  editorStateEffect?(comment: CommentData): () => void
-}
-
-class EditorPlug {
-  constructor(
-    protected kit: PlugKit
-  ) {
-  }
-
-  /** Use plug btn will add a btn on the bottom of editor */
-  useBtn(html: string = '<div></div>') {
-    this.$btn = Utils.createElement(`<span class="atk-plug-btn">${html}</span>`)
-    return this.$btn
-  }
-
-  /** Use plug panel will show the panel when btn is clicked */
-  usePanel(html: string = '<div></div>') {
-    this.$panel = Utils.createElement(html)
-    return this.$panel
-  }
-
-  /** Use the content transformer to handle the content of the last submit by the editor */
-  useContentTransformer(func: (raw: string) => string) {
-    this.contentTransformer = func
-  }
-
-  /** Listen the event of panel show */
-  usePanelShow(func: () => void) {
-    this.kit.useEvents().on('panel-show', (aPlug) => {
-      if (aPlug === this) func()
-    })
-  }
-
-  /** Listen the event of panel hide */
-  usePanelHide(func: () => void) {
-    this.kit.useEvents().on('panel-hide', (aPlug) => {
-      if (aPlug === this) func()
-    })
-  }
-
-  /** Use editor state modifier */
-  useEditorStateEffect(stateName: EditorState, effectFn: (comment: CommentData) => () => void) {
-    this.editorStateEffectWhen = stateName
-    this.editorStateEffect = effectFn
-  }
-}
-
-export default EditorPlug

package/src/plugins/editor/_sample.ts

@@ -1,8 +0,0 @@
-import EditorPlug from './_plug'
-import type PlugKit from './_kit'
-
-export default class SamplePlug extends EditorPlug {
-  constructor(kit: PlugKit) {
-    super(kit)
-  }
-}

package/src/plugins/editor/closable.ts

@@ -1,44 +0,0 @@
-import User from '@/lib/user'
-import * as Utils from '@/lib/utils'
-import $t from '@/i18n'
-import EditorPlug from './_plug'
-import type PlugKit from './_kit'
-
-export default class Closable extends EditorPlug {
-  constructor(kit: PlugKit) {
-    super(kit)
-
-    const onOpen = () => this.open()
-    const onClose = () => this.close()
-
-    this.kit.useMounted(() => {
-      this.kit.useEvents().on('editor-open', onOpen)
-      this.kit.useEvents().on('editor-close', onClose)
-    })
-    this.kit.useUnmounted(() => {
-      this.kit.useEvents().off('editor-open', onOpen)
-      this.kit.useEvents().off('editor-close', onClose)
-    })
-  }
-
-  private open() {
-    this.kit.useUI().$textareaWrap.querySelector('.atk-comment-closed')?.remove()
-    this.kit.useUI().$textarea.style.display = ''
-    this.kit.useUI().$bottom.style.display = ''
-  }
-
-  private close() {
-    if (!this.kit.useUI().$textareaWrap.querySelector('.atk-comment-closed'))
-      this.kit.useUI().$textareaWrap.prepend(Utils.createElement(`<div class="atk-comment-closed">${$t('onlyAdminCanReply')}</div>`))
-
-    if (!User.data.isAdmin) {
-      this.kit.useUI().$textarea.style.display = 'none'
-      this.kit.useEvents().trigger('panel-close')
-      this.kit.useUI().$bottom.style.display = 'none'
-    } else {
-      // 管理员一直打开评论
-      this.kit.useUI().$textarea.style.display = ''
-      this.kit.useUI().$bottom.style.display = ''
-    }
-  }
-}

package/src/plugins/editor/emoticons.scss

@@ -1,72 +0,0 @@
-.atk-editor-plug-emoticons {
-  height: 100%;
-  width: 100%;
-
-  & > .atk-grp-wrap {
-    @extend .atk-slim-scrollbar;
-    overflow-y: scroll;
-    overflow-x: hidden;
-    height: 100%; // calc(100% - 30px);
-    width: 100%;
-
-    & > .atk-grp {
-      display: flex;
-      flex-wrap: wrap;
-      flex-direction: row;
-      padding: 5px 10px 35px 10px;
-
-      &[data-type="image"] > .atk-item {
-        height: 63px;
-        width: 63px;
-      }
-
-      & > .atk-item {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 5px;
-        cursor: pointer;
-        user-select: none;
-        border-radius: calc($block-radius / 2);
-        font-size: 15px;
-        min-width: 35px;
-        margin: 2px;
-
-        & > img {
-          max-height: 100%;
-          width: auto;
-        }
-
-        &:hover {
-          background: var(--at-color-bg-grey);
-        }
-      }
-    }
-  }
-
-  & > .atk-grp-switcher {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    background: var(--at-color-bg-transl);
-    height: 30px;
-    border-top: 1px solid var(--at-color-border);
-    border-bottom: 1px solid var(--at-color-border);
-
-    & > span {
-      user-select: none;
-      padding: 0 10px;
-      line-height: 30px;
-      float: left;
-      display: block;
-      cursor: pointer;
-      font-size: $font-size;
-
-      &:hover,
-      &.active {
-        background: var(--at-color-bg-grey);
-      }
-    }
-  }
-}

package/src/plugins/editor/emoticons.ts

@@ -1,293 +0,0 @@
-import './emoticons.scss'
-
-import type { EmoticonListData, EmoticonGrpData } 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'
-
-type OwOFormatType = {
-  [key: string] : {
-    type: 'emoticon'|'emoji'|'image',
-    container: {icon: string, text: string}[]
-  }
-}
-
-export default class Emoticons extends EditorPlug {
-  private emoticons: EmoticonListData = []
-  private loadingTask: Promise<void>|null = null
-
-  private $grpWrap!: HTMLElement
-  private $grpSwitcher!: HTMLElement
-
-  constructor(kit: PlugKit) {
-    super(kit)
-
-    this.kit.useMounted(() => {
-      this.usePanel(`<div class="atk-editor-plug-emoticons"></div>`)
-      this.useBtn($t('emoticon'))
-    })
-    this.kit.useUnmounted(() => {})
-
-    this.useContentTransformer((raw) => this.transEmoticonImageText(raw))
-    this.usePanelShow(() => {
-      ;(async () => {
-        await this.loadEmoticonsData()
-
-        // 初始化元素
-        if (!this.isImgLoaded) {
-          this.initEmoticonsList()
-          this.isImgLoaded = true
-        }
-
-        // 延迟执行，防止无法读取高度
-        setTimeout(() => {
-          this.changeListHeight()
-        }, 30)
-      })()
-    })
-    this.usePanelHide(() => {
-      this.$panel!.parentElement!.style.height = ''
-    })
-
-    // 表情包预加载
-    window.setTimeout(() => {
-      this.loadEmoticonsData()
-    }, 1000) // 延迟 1s 加载
-  }
-
-  private isListLoaded = false
-  private isImgLoaded = false
-
-  public async loadEmoticonsData() {
-    if (this.isListLoaded) return
-    if (this.loadingTask !== null) {
-      await this.loadingTask
-      return
-    }
-
-    // 数据处理
-    this.loadingTask = (async () => {
-      Ui.showLoading(this.$panel!)
-      this.emoticons = await this.handleData(this.kit.useConf().emoticons)
-      Ui.hideLoading(this.$panel!)
-      this.loadingTask = null
-      this.isListLoaded = true
-    })()
-    await this.loadingTask
-  }
-
-  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.$panel!, "表情包数据必须为 Array/Object/String 类型")
-      Ui.hideLoading(this.$panel!)
-      return []
-    }
-
-    const pushGrp = (grp: EmoticonGrpData) => {
-      if (typeof grp !== 'object') return
-      if (grp.name && data.find(o => o.name === grp.name)) return
-      data.push(grp)
-    }
-
-    // 加载子内容
-    const remoteLoad = async (d: any[]) => {
-      await Promise.all(d.map(async (grp, index) => {
-        if (typeof grp === 'object' && !Array.isArray(grp)) {
-          pushGrp(grp)
-        } else if (Array.isArray(grp)) {
-          await remoteLoad(grp)
-        } else if (typeof grp === "string") {
-          const grpData = await this.remoteLoad(grp)
-
-          if (Array.isArray(grpData)) await remoteLoad(grpData)
-          else if (typeof grpData === 'object') pushGrp(grpData)
-        }
-      }))
-    }
-    await remoteLoad(data)
-
-    // 处理数组数据
-    data.forEach((item: any) => {
-      if (this.isOwOFormat(item)) {
-        const c = this.convertOwO(item)
-        c.forEach((grp) => { pushGrp(grp) })
-      } else if (Array.isArray(item)) {
-        item.forEach((grp) => { pushGrp(grp) })
-      }
-    })
-
-    // 剔除非法数据
-    data = data.filter((item: any) => (typeof item === 'object' && !Array.isArray(item) && !!item && !!item.name))
-
-    // console.log(data)
-
-    this.solveNullKey(data)
-    this.solveSameKey(data)
-
-    return data
-  }
-
-  /** 远程加载 */
-  private async remoteLoad(url: string): Promise<any> {
-    if (!url) return []
-
-    try {
-      const resp = await fetch(url)
-      const json = await resp.json()
-      return json
-    } catch (err) {
-      Ui.hideLoading(this.$panel!)
-      Ui.setError(this.$panel!, `表情加载失败 ${String(err)}`)
-      return []
-    }
-  }
-
-  /** 避免表情 item.key 为 null 的情况 */
-  private solveNullKey(data: EmoticonGrpData[]) {
-    data.forEach((grp) => {
-      grp.items.forEach((item, index) => {
-        if (!item.key) item.key = `${grp.name} ${index+1}`
-      })
-    })
-  }
-
-  /** 避免相同 item.key */
-  private solveSameKey(data: EmoticonGrpData[]) {
-    const tmp: {[key: string]: number} = {}
-    data.forEach((grp) => {
-      grp.items.forEach(item => {
-        if (!item.key || String(item.key).trim() === "") return
-        if (!tmp[item.key]) tmp[item.key] = 1
-        else tmp[item.key]++
-
-        if (tmp[item.key] > 1) item.key = `${item.key} ${tmp[item.key]}`
-      })
-    })
-  }
-
-  /** 判断是否为 OwO 格式 */
-  private isOwOFormat(data: any) {
-    try {
-      return (typeof data === 'object') && !!Object.values(data).length
-        && Array.isArray(Object.keys(Object.values<any>(data)[0].container))
-        && Object.keys(Object.values<any>(data)[0].container[0]).includes('icon')
-    } catch { return false }
-  }
-
-  /** 转换 OwO 格式数据 */
-  private convertOwO(owoData: OwOFormatType): EmoticonListData {
-    const dest: EmoticonListData = []
-    Object.entries(owoData).forEach(([grpName, grp]) => {
-      const nGrp: EmoticonGrpData = { name: grpName, type: grp.type, items: [] }
-      grp.container.forEach((item, index) => {
-        // 图片标签提取 src 属性值
-        const iconStr = item.icon
-        if (/<(img|IMG)/.test(iconStr)) {
-          const find = /src=["'](.*?)["']/.exec(iconStr)
-          if (find && find.length > 1) item.icon = find[1]
-        }
-        nGrp.items.push({ key: item.text || `${grpName} ${index+1}`, val: item.icon })
-      })
-      dest.push(nGrp)
-    })
-    return dest
-  }
-
-  /** 初始化表情列表界面 */
-  private initEmoticonsList() {
-    // 表情列表
-    this.$grpWrap = Utils.createElement(`<div class="atk-grp-wrap"></div>`)
-    this.$panel!.append(this.$grpWrap)
-
-    this.emoticons.forEach((grp, index) => {
-      const $grp = Utils.createElement(`<div class="atk-grp" style="display: none;"></div>`)
-      this.$grpWrap.append($grp)
-      $grp.setAttribute('data-index', String(index))
-      $grp.setAttribute('data-grp-name', grp.name)
-      $grp.setAttribute('data-type', grp.type)
-      grp.items.forEach((item) => {
-        const $item = Utils.createElement(`<span class="atk-item"></span>`)
-        $grp.append($item)
-
-        if (!!item.key && !(new RegExp(`^(${grp.name})?\\s?[0-9]+$`).test(item.key)))
-          $item.setAttribute('title', item.key)
-
-        if (grp.type === 'image') {
-          const imgEl = document.createElement('img')
-          imgEl.src = item.val
-          imgEl.alt = item.key
-          $item.append(imgEl)
-        } else {
-          $item.innerText = item.val
-        }
-
-        $item.onclick = () => {
-          if (grp.type === 'image') {
-            this.kit.useEditor().insertContent(`:[${item.key}]`)
-          } else {
-            this.kit.useEditor().insertContent(item.val || '')
-          }
-        }
-      })
-    })
-
-    // 表情分类切换 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)
-  }
-
-  /** 打开一个表情组 */
-  public openGrp(index: number) {
-    Array.from(this.$grpWrap.children).forEach((item) => {
-      const el = item as HTMLElement
-      if (el.getAttribute('data-index') !== String(index)) {
-        el.style.display = 'none'
-      } else {
-        el.style.display = ''
-      }
-    })
-
-    this.$grpSwitcher?.querySelectorAll('span.active').forEach(item => item.classList.remove('active'))
-    this.$grpSwitcher?.querySelector(`span[data-index="${index}"]`)?.classList.add('active')
-
-    this.changeListHeight()
-  }
-
-  private changeListHeight() {
-    /* const listWrapHeight = Utils.getHeight(this.$grpWrapem)
-    this.editor.plugWrapEl.style.height = `${listWrapHeight > 150 ? listWrapHeight : 150}px` */
-  }
-
-  /** 处理评论 content 中的表情内容 */
-  public transEmoticonImageText(text: string) {
-    if (!this.emoticons || !Array.isArray(this.emoticons))
-      return text
-
-    this.emoticons.forEach((grp) => {
-      if (grp.type !== 'image') return
-      Object.entries(grp.items).forEach(([index, item]) => {
-        text = text.split(`:[${item.key}]`).join(`<img src="${item.val}" atk-emoticon="${item.key}">`) // replaceAll(...)
-      })
-    })
-
-    return text
-  }
-}

package/src/plugins/editor/header-event.ts

@@ -1,35 +0,0 @@
-import EditorPlug from './_plug'
-import type PlugKit from './_kit'
-
-export default class HeaderEvent extends EditorPlug {
-  private get $inputs() {
-    return this.kit.useEditor().getHeaderInputEls()
-  }
-
-  constructor(kit: PlugKit) {
-    super(kit)
-
-    const inputEventFns: {[name: string]: () => void} = {}
-    const changeEventFns: {[name: string]: () => void} = {}
-
-    const trigger = (evt: 'header-input'|'header-change', $input: HTMLInputElement, field: string) => () => {
-      this.kit.useEvents().trigger(evt, { field, $input })
-    }
-
-    this.kit.useMounted(() => {
-      // batch bind the events
-      Object.entries(this.$inputs).forEach(([key, $input]) => {
-        $input.addEventListener('input', inputEventFns[key] = trigger('header-input', $input, key))
-        $input.addEventListener('change', changeEventFns[key] = trigger('header-change', $input, key))
-      })
-    })
-
-    this.kit.useUnmounted(() => {
-      // unmount the event
-      Object.entries(this.$inputs).forEach(([key, $input]) => {
-        $input.removeEventListener('input', inputEventFns[key])
-        $input.removeEventListener('change', changeEventFns[key])
-      })
-    })
-  }
-}

package/src/plugins/editor/header-link.ts

@@ -1,31 +0,0 @@
-import User from '@/lib/user'
-import EditorPlug from './_plug'
-import type PlugKit from './_kit'
-
-export default class HeaderLink extends EditorPlug {
-  constructor(kit: PlugKit) {
-    super(kit)
-
-    const onLinkChange = ({ field }: { field: string }) => {
-      if (field === 'link') this.onLinkInputChange()
-    }
-
-    // bind events
-    this.kit.useMounted(() => {
-      this.kit.useEvents().on('header-change', onLinkChange)
-    })
-
-    this.kit.useUnmounted(() => {
-      this.kit.useEvents().off('header-change', onLinkChange)
-    })
-  }
-
-  private onLinkInputChange() {
-    // auto and force add protocol prefix for user input link
-    const link = this.kit.useUI().$link.value.trim()
-    if (!!link && !/^(http|https):\/\//.test(link)) {
-      this.kit.useUI().$link.value = `https://${link}`
-      User.update({ link: this.kit.useUI().$link.value })
-    }
-  }
-}

package/src/plugins/editor/header-user.ts

@@ -1,98 +0,0 @@
-import User from '@/lib/user'
-import $t from '@/i18n'
-import EditorPlug from './_plug'
-import type PlugKit from './_kit'
-
-export default class HeaderUser extends EditorPlug {
-  constructor(kit: PlugKit) {
-    super(kit)
-
-    const onInput = ({ $input, field }: { $input: HTMLInputElement, field: string }) => {
-      if (this.kit.useEditor().getState() === 'edit')
-        return // TODO prevent execute when editing, since update comment.user not support
-
-      // update user data
-      User.update({ [field]: $input.value.trim() })
-
-      // remote fetch user info
-      if (field === 'nick' || field === 'email')
-        this.fetchUserInfo() // must after update user data, since fetchUserInfo() will use User.data
-    }
-
-    this.kit.useMounted(() => {
-      Object.entries(this.kit.useEditor().getHeaderInputEls())
-        .forEach(([key, $input]) => {
-          // set placeholder
-          $input.placeholder = `${$t(key as any)}`
-
-          // sync header values from User.data
-          $input.value = User.data[key] || ''
-        })
-
-      // bind events
-      this.kit.useEvents().on('header-input', onInput)
-    })
-
-    this.kit.useUnmounted(() => {
-      this.kit.useEvents().off('header-input', onInput)
-    })
-  }
-
-  private query = {
-    timer: <number|null>null,
-    abortFn: <(() => void)|null>null
-  }
-
-  /**
-   * Fetch user info from server
-   */
-  private fetchUserInfo() {
-    User.logout() // clear login status
-
-    if (this.query.timer) window.clearTimeout(this.query.timer) // clear the not executed timeout task
-    if (this.query.abortFn) this.query.abortFn() // abort the last request (if request is pending not finished)
-
-    this.query.timer = window.setTimeout(() => {
-      this.query.timer = null // clear the timer (clarify the timer is executing)
-
-      const {req, abort} = this.kit.useApi().user.userGet(
-        User.data.nick, User.data.email
-      )
-      this.query.abortFn = abort
-      req.then(data => this.onUserInfoFetched(data))
-        .catch((err) => {})
-        .finally(() => {
-          this.query.abortFn = null // clear the abort function (clarify the request is finished)
-        })
-    }, 400) // delay to reduce request
-  }
-
-  /**
-   * Function called when user info fetched
-   *
-   * @param data The response data from server
-   */
-  private onUserInfoFetched(
-    data: any // TODO fix type
-  ) {
-    // If api response is not login, logout
-    if (!data.is_login) User.logout()
-
-    // Update unread notifies
-    this.kit.useGlobalCtx().getData().updateUnreads(data.unread)
-
-    // If user is admin and not login,
-    if (User.checkHasBasicUserInfo() && !data.is_login && data.user?.is_admin) {
-      // then show login window
-      this.kit.useGlobalCtx().checkAdmin({
-        onSuccess: () => {}
-      })
-    }
-
-    // Auto fill user link from server
-    if (data.user && data.user.link) {
-      this.kit.useUI().$link.value = data.user.link
-      User.update({ link: data.user.link })
-    }
-  }
-}