artalk 2.6.4 → 2.7.0

package/src/{editor/plugs/emoticons-plug.ts → plugins/editor/emoticons.ts}

@@ -1,10 +1,11 @@
-import './emoticons-plug.scss'
+import './emoticons.scss'
 
-import * as Utils from '~/src/lib/utils'
-import * as Ui from '~/src/lib/ui'
-import { EmoticonListData, EmoticonGrpData } from '~/types/artalk-data'
-import EditorPlug from './editor-plug'
-import Editor from '../editor'
+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] : {
@@ -13,23 +14,42 @@ type OwOFormatType = {
   }
 }
 
-export default class EmoticonsPlug extends EditorPlug {
-  public static Name = 'emoticons'
+export default class Emoticons extends EditorPlug {
+  private emoticons: EmoticonListData = []
+  private loadingTask: Promise<void>|null = null
 
-  declare protected $panel: HTMLElement
+  private $grpWrap!: HTMLElement
+  private $grpSwitcher!: HTMLElement
 
-  public emoticons: EmoticonListData = []
-  public loadingTask: Promise<void>|null = null
+  constructor(kit: PlugKit) {
+    super(kit)
 
-  public $grpWrap!: HTMLElement
-  public $grpSwitcher!: HTMLElement
+    this.kit.useMounted(() => {
+      this.usePanel(`<div class="atk-editor-plug-emoticons"></div>`)
+      this.useBtn($t('emoticon'))
+    })
+    this.kit.useUnmounted(() => {})
 
-  public constructor(public editor: Editor) {
-    super(editor)
+    this.useContentTransformer((raw) => this.transEmoticonImageText(raw))
+    this.usePanelShow(() => {
+      ;(async () => {
+        await this.loadEmoticonsData()
 
-    this.registerPanel(`<div class="atk-editor-plug-emoticons"></div>`)
-    this.registerBtn(this.ctx.$t('emoticon'))
-    this.registerContentTransformer((raw) => this.transEmoticonImageText(raw))
+        // 初始化元素
+        if (!this.isImgLoaded) {
+          this.initEmoticonsList()
+          this.isImgLoaded = true
+        }
+
+        // 延迟执行，防止无法读取高度
+        setTimeout(() => {
+          this.changeListHeight()
+        }, 30)
+      })()
+    })
+    this.usePanelHide(() => {
+      this.$panel!.parentElement!.style.height = ''
+    })
 
     // 表情包预加载
     window.setTimeout(() => {
@@ -37,29 +57,8 @@ export default class EmoticonsPlug extends EditorPlug {
     }, 1000) // 延迟 1s 加载
   }
 
-  public onPanelShow() {
-    ;(async () => {
-      await this.loadEmoticonsData()
-
-      // 初始化元素
-      if (!this.isImgLoaded) {
-        this.initEmoticonsList()
-        this.isImgLoaded = true
-      }
-
-      // 延迟执行，防止无法读取高度
-      setTimeout(() => {
-        this.changeListHeight()
-      }, 30)
-    })()
-  }
-
-  public onPanelHide() {
-    this.$panel.parentElement!.style.height = ''
-  }
-
-  isListLoaded = false
-  isImgLoaded = false
+  private isListLoaded = false
+  private isImgLoaded = false
 
   public async loadEmoticonsData() {
     if (this.isListLoaded) return
@@ -70,9 +69,9 @@ export default class EmoticonsPlug extends EditorPlug {
 
     // 数据处理
     this.loadingTask = (async () => {
-      Ui.showLoading(this.$panel)
-      this.emoticons = await this.handleData(this.ctx.conf.emoticons)
-      Ui.hideLoading(this.$panel)
+      Ui.showLoading(this.$panel!)
+      this.emoticons = await this.handleData(this.kit.useConf().emoticons)
+      Ui.hideLoading(this.$panel!)
       this.loadingTask = null
       this.isListLoaded = true
     })()
@@ -85,8 +84,8 @@ export default class EmoticonsPlug extends EditorPlug {
     }
 
     if (!Array.isArray(data)) {
-      Ui.setError(this.$panel, "表情包数据必须为 Array/Object/String 类型")
-      Ui.hideLoading(this.$panel)
+      Ui.setError(this.$panel!, "表情包数据必须为 Array/Object/String 类型")
+      Ui.hideLoading(this.$panel!)
       return []
     }
 
@@ -143,8 +142,8 @@ export default class EmoticonsPlug extends EditorPlug {
       const json = await resp.json()
       return json
     } catch (err) {
-      Ui.hideLoading(this.$panel)
-      Ui.setError(this.$panel, `表情加载失败 ${String(err)}`)
+      Ui.hideLoading(this.$panel!)
+      Ui.setError(this.$panel!, `表情加载失败 ${String(err)}`)
       return []
     }
   }
@@ -204,7 +203,7 @@ export default class EmoticonsPlug extends EditorPlug {
   private initEmoticonsList() {
     // 表情列表
     this.$grpWrap = Utils.createElement(`<div class="atk-grp-wrap"></div>`)
-    this.$panel.append(this.$grpWrap)
+    this.$panel!.append(this.$grpWrap)
 
     this.emoticons.forEach((grp, index) => {
       const $grp = Utils.createElement(`<div class="atk-grp" style="display: none;"></div>`)
@@ -230,9 +229,9 @@ export default class EmoticonsPlug extends EditorPlug {
 
         $item.onclick = () => {
           if (grp.type === 'image') {
-            this.editor.insertContent(`:[${item.key}]`)
+            this.kit.useEditor().insertContent(`:[${item.key}]`)
           } else {
-            this.editor.insertContent(item.val || '')
+            this.kit.useEditor().insertContent(item.val || '')
           }
         }
       })
@@ -241,7 +240,7 @@ export default class EmoticonsPlug extends EditorPlug {
     // 表情分类切换 bar
     if (this.emoticons.length > 1) {
       this.$grpSwitcher = Utils.createElement(`<div class="atk-grp-switcher"></div>`)
-      this.$panel.append(this.$grpSwitcher)
+      this.$panel!.append(this.$grpSwitcher)
       this.emoticons.forEach((grp, index) => {
         const $item = Utils.createElement('<span />')
         $item.innerText = grp.name

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

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

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

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

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

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

@@ -0,0 +1,29 @@
+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.ts

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

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

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