artalk 2.7.1 → 2.7.3

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 })
-    }
-  }
-}

package/src/plugins/editor/index.ts

@@ -1,40 +0,0 @@
-import type { ArtalkConfig } from '~/types'
-import type EditorPlug from './_plug'
-import LocalStorage from './local-storage'
-import Textarea from './textarea'
-import SubmitBtn from './submit-btn'
-import Submit from './submit'
-import StateReply from './state-reply'
-import StateEdit from './state-edit'
-import Closable from './closable'
-import HeaderEvent from './header-event'
-import HeaderUser from './header-user'
-import HeaderLink from './header-link'
-import Mover from './mover'
-import Emoticons from './emoticons'
-import Upload from './upload'
-import Preview from './preview'
-
-/** The default enabled plugs */
-export const ENABLED_PLUGS: (typeof EditorPlug)[] = [
-  // Core
-  LocalStorage,
-  HeaderEvent, HeaderUser, HeaderLink,
-  Textarea,
-  Submit, SubmitBtn,
-  Mover, StateReply, StateEdit,
-  Closable,
-
-  // Extensions
-  Emoticons, Upload, Preview
-]
-
-/** Get the name list of disabled plugs */
-export function getDisabledPlugByConf(conf: ArtalkConfig): (typeof EditorPlug)[] {
-  return [
-    {k: Upload, v: conf.imgUpload},
-    {k: Emoticons, v: conf.emoticons},
-    {k: Preview, v: conf.preview},
-    {k: Mover, v: conf.editorTravel},
-  ].filter(n => !n.v).flatMap(n => n.k)
-}

package/src/plugins/editor/local-storage.ts

@@ -1,36 +0,0 @@
-import $t from '@/i18n'
-import type PlugKit from './_kit'
-import EditorPlug from './_plug'
-
-const LocalStorageKey = 'ArtalkContent'
-
-export default class LocalStorage extends EditorPlug {
-  constructor(kit: PlugKit) {
-    super(kit)
-
-    const onContentUpdated = () => {
-      this.save()
-    }
-
-    this.kit.useMounted(() => {
-      // load editor content from localStorage when init
-      const localContent = window.localStorage.getItem(LocalStorageKey) || ''
-      if (localContent.trim() !== '') {
-        this.kit.useEditor().showNotify($t('restoredMsg'), 'i')
-        this.kit.useEditor().setContent(localContent)
-      }
-
-      // bind event
-      this.kit.useEvents().on('content-updated', onContentUpdated)
-    })
-
-    this.kit.useUnmounted(() => {
-      this.kit.useEvents().off('content-updated', onContentUpdated)
-    })
-  }
-
-  // Save editor content to localStorage
-  public save() {
-    window.localStorage.setItem(LocalStorageKey, this.kit.useEditor().getContentRaw().trim())
-  }
-}

package/src/plugins/editor/mover.ts

@@ -1,29 +0,0 @@
-import * as Utils from '@/lib/utils'
-import EditorPlug from './_plug'
-
-export default class Mover extends EditorPlug {
-  private isMoved = false
-
-  move(afterEl: HTMLElement) {
-    if (this.isMoved) return
-    this.isMoved = true
-
-    const editorEl = this.kit.useUI().$el
-
-    editorEl.after(Utils.createElement('<div class="atk-editor-travel-placeholder"></div>'))
-
-    const $travelPlace = Utils.createElement('<div></div>')
-    afterEl.after($travelPlace)
-    $travelPlace.replaceWith(editorEl)
-
-    editorEl.classList.add('atk-fade-in') // 添加渐入动画
-    editorEl.classList.add('editor-traveling')
-  }
-
-  back() {
-    if (!this.isMoved) return
-    this.isMoved = false
-    this.kit.useGlobalCtx().$root.querySelector('.atk-editor-travel-placeholder')?.replaceWith(this.kit.useUI().$el)
-    this.kit.useUI().$el.classList.remove('editor-traveling')
-  }
-}

package/src/plugins/editor/preview.scss

@@ -1,7 +0,0 @@
-.atk-editor-plug-preview {
-  overflow-y: scroll;
-  overflow-x: hidden;
-  height: 100%;
-  width: 100%;
-  padding: 10px calc(10px + 5px);
-}

package/src/plugins/editor/preview.ts

@@ -1,41 +0,0 @@
-import './preview.scss'
-
-import * as marked from '@/lib/marked'
-import $t from '@/i18n'
-import EditorPlug from './_plug'
-import type PlugKit from './_kit'
-
-export default class Preview extends EditorPlug {
-  private isPlugPanelShow = false
-
-  constructor(kit: PlugKit) {
-    super(kit)
-
-    this.kit.useMounted(() => {
-      this.usePanel(`<div class="atk-editor-plug-preview"></div>`)
-
-      // initialize plug button
-      let btnText = $t('preview')
-      if (marked.getInstance()) 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.useBtn(btnText)
-    })
-    this.kit.useUnmounted(() => {})
-
-    // function to update content
-    this.kit.useEvents().on('content-updated', (content) => {
-      this.isPlugPanelShow && this.updateContent()
-    })
-
-    this.usePanelShow(() => {
-      this.isPlugPanelShow = true
-      this.updateContent()
-    })
-    this.usePanelHide(() => {
-      this.isPlugPanelShow = false
-    })
-  }
-
-  updateContent() {
-    this.$panel!.innerHTML = this.kit.useEditor().getContentMarked()
-  }
-}