artalk 2.7.0 → 2.7.2

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

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