refactor(editor): refactor plug kit and events (#613)

ui/packages/artalk/src/editor/core/_sample-plug.ts

@@ -1,8 +1,8 @@
-import Editor from '../editor'
 import EditorPlug from '../editor-plug'
+import PlugKit from '../plug-kit'
 
 export default class SamplePlug extends EditorPlug {
-  constructor(editor: Editor) {
-    super(editor)
+  constructor(kit: PlugKit) {
+    super(kit)
   }
 }

ui/packages/artalk/src/editor/core/closable-plug.ts

@@ -1,31 +1,32 @@
 import User from '@/lib/user'
 import * as Utils from '@/lib/utils'
-import Editor from '../editor'
+import $t from '@/i18n'
 import EditorPlug from '../editor-plug'
+import PlugKit from '../plug-kit'
 
 export default class ClosablePlug extends EditorPlug {
-  constructor(editor: Editor) {
-    super(editor)
+  constructor(kit: PlugKit) {
+    super(kit)
   }
 
   close() {
-    if (!this.editor.getUI().$textareaWrap.querySelector('.atk-comment-closed'))
-      this.editor.getUI().$textareaWrap.prepend(Utils.createElement(`<div class="atk-comment-closed">${this.editor.$t('onlyAdminCanReply')}</div>`))
+    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.editor.getUI().$textarea.style.display = 'none'
-      this.editor.getPlugs()?.closePlugPanel()
-      this.editor.getUI().$bottom.style.display = 'none'
+      this.kit.useUI().$textarea.style.display = 'none'
+      this.kit.useEvents().trigger('panel-close')
+      this.kit.useUI().$bottom.style.display = 'none'
     } else {
       // 管理员一直打开评论
-      this.editor.getUI().$textarea.style.display = ''
-      this.editor.getUI().$bottom.style.display = ''
+      this.kit.useUI().$textarea.style.display = ''
+      this.kit.useUI().$bottom.style.display = ''
     }
   }
 
   open() {
-    this.editor.getUI().$textareaWrap.querySelector('.atk-comment-closed')?.remove()
-    this.editor.getUI().$textarea.style.display = ''
-    this.editor.getUI().$bottom.style.display = ''
+    this.kit.useUI().$textareaWrap.querySelector('.atk-comment-closed')?.remove()
+    this.kit.useUI().$textarea.style.display = ''
+    this.kit.useUI().$bottom.style.display = ''
   }
 }

ui/packages/artalk/src/editor/core/edit-plug.ts

@@ -1,7 +1,8 @@
 import type { CommentData } from '~/types/artalk-data'
-import * as Utils from '../../lib/utils'
-import Editor from '../editor'
-import User from '../../lib/user'
+import $t from '@/i18n'
+import * as Utils from '@/lib/utils'
+import User from '@/lib/user'
+import PlugKit from '../plug-kit'
 import EditorPlug from '../editor-plug'
 import SubmitPlug from './submit-plug'
 import MoverPlug from './mover-plug'
@@ -17,43 +18,43 @@ export default class EditPlug extends EditorPlug {
     return !!this.comment
   }
 
-  constructor(editor: Editor) {
-    super(editor)
+  constructor(kit: PlugKit) {
+    super(kit)
 
     this.kit.useMounted(() => {
-      const submitPlug = this.editor.getPlugs()?.get(SubmitPlug)
+      const submitPlug = this.kit.useDeps(SubmitPlug)
       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.editor.getContentFinal(),
-            nick: this.editor.getUI().$nick.value,
-            email: this.editor.getUI().$email.value,
-            link: this.editor.getUI().$link.value,
+            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.editor.ctx.getApi().comment.commentEdit({
+          const nComment = await this.kit.useApi().comment.commentEdit({
             ...this.comment, ...saveData
           })
           return nComment
         },
         post: (nComment: CommentData) => {
-          this.editor.ctx.updateComment(nComment)
+          this.kit.useGlobalCtx().updateComment(nComment)
         }
       })
     })
   }
 
   edit(comment: CommentData, $comment: HTMLElement) {
     this.cancelEdit()
-    this.editor.cancelReply()
+    this.kit.useEditor().cancelReply()
 
-    const ui = this.editor.getUI()
+    const ui = this.kit.useUI()
     if (!ui.$editCancelBtn) {
       const $btn = Utils.createElement(
         `<div class="atk-send-reply">` +
-          `${this.editor.$t('editCancel')} ` +
+          `${$t('editCancel')} ` +
           `<span class="atk-cancel">×</span>` +
         `</div>`
       )
@@ -67,37 +68,37 @@ export default class EditPlug extends EditorPlug {
 
     ui.$header.style.display = 'none' // TODO support modify header information
 
-    this.editor.getPlugs()?.get(MoverPlug)?.move($comment)
+    this.kit.useDeps(MoverPlug)?.move($comment)
 
     ui.$nick.value = comment.nick || ''
     ui.$email.value = comment.email || ''
     ui.$link.value = comment.link || ''
 
-    this.editor.setContent(comment.content)
+    this.kit.useEditor().setContent(comment.content)
     ui.$textarea.focus()
 
-    this.updateSubmitBtnText(this.editor.$t('save'))
+    this.updateSubmitBtnText($t('save'))
   }
 
   cancelEdit() {
     if (!this.comment) return
 
-    const ui = this.editor.getUI()
+    const ui = this.kit.useUI()
 
     if (ui.$editCancelBtn) {
       ui.$editCancelBtn.remove()
       ui.$editCancelBtn = undefined
     }
 
     this.comment = undefined
-    this.editor.getPlugs()?.get(MoverPlug)?.back()
+    this.kit.useDeps(MoverPlug)?.back()
 
     const { nick, email, link } = User.data
     ui.$nick.value = nick
     ui.$email.value = email
     ui.$link.value = link
 
-    this.editor.setContent('')
+    this.kit.useEditor().setContent('')
     this.restoreSubmitBtnText()
 
     ui.$header.style.display = '' // TODO support modify header information
@@ -110,11 +111,11 @@ export default class EditPlug extends EditorPlug {
   private originalSubmitBtnText = 'Send'
 
   private updateSubmitBtnText(text: string) {
-    this.originalSubmitBtnText = this.editor.getUI().$submitBtn.innerText
-    this.editor.getUI().$submitBtn.innerText = text
+    this.originalSubmitBtnText = this.kit.useUI().$submitBtn.innerText
+    this.kit.useUI().$submitBtn.innerText = text
   }
 
   private restoreSubmitBtnText() {
-    this.editor.getUI().$submitBtn.innerText = this.originalSubmitBtnText
+    this.kit.useUI().$submitBtn.innerText = this.originalSubmitBtnText
   }
 }

ui/packages/artalk/src/editor/core/header-input-plug.ts

@@ -1,24 +1,23 @@
-import Editor from '../editor'
-import User from '../../lib/user'
+import User from '@/lib/user'
 import EditorPlug from '../editor-plug'
+import PlugKit from '../plug-kit'
 
 export default class HeaderInputPlug extends EditorPlug {
-  constructor(editor: Editor) {
-    super(editor)
+  constructor(kit: PlugKit) {
+    super(kit)
 
-    this.kit.useHeaderInput((key, $input) => {
-      if (key === 'nick' || key === 'email') {
+    this.kit.useEvents().on('header-input', (({ field, $input }) => {
+      if (field === 'nick' || field === 'email')
         this.fetchUserInfo()
-      }
-    })
+    }))
 
     const onLinkInputChange = () => this.onLinkInputChange()
 
     this.kit.useMounted(() => {
-      this.editor.getUI().$link.addEventListener('change', onLinkInputChange)
+      this.kit.useUI().$link.addEventListener('change', onLinkInputChange)
     })
     this.kit.useUnmounted(() => {
-      this.editor.getUI().$link.addEventListener('change', onLinkInputChange)
+      this.kit.useUI().$link.addEventListener('change', onLinkInputChange)
     })
   }
 
@@ -38,7 +37,7 @@ export default class HeaderInputPlug extends EditorPlug {
     this.queryUserInfo.timeout = window.setTimeout(() => {
       this.queryUserInfo.timeout = null // 清理
 
-      const {req, abort} = this.editor.ctx.getApi().user.userGet(
+      const {req, abort} = this.kit.useApi().user.userGet(
         User.data.nick, User.data.email
       )
       this.queryUserInfo.abortFunc = abort
@@ -48,19 +47,19 @@ export default class HeaderInputPlug extends EditorPlug {
         }
 
         // 未读消息更新
-        this.editor.ctx.updateNotifies(data.unread)
+        this.kit.useGlobalCtx().updateNotifies(data.unread)
 
         // 若用户为管理员，执行登陆操作
         if (User.checkHasBasicUserInfo() && !data.is_login && data.user?.is_admin) {
           // 显示登录窗口
-          this.editor.ctx.checkAdmin({
+          this.kit.useGlobalCtx().checkAdmin({
             onSuccess: () => {}
           })
         }
 
         // 自动填入 link
         if (data.user && data.user.link) {
-          this.editor.getUI().$link.value = data.user.link
+          this.kit.useUI().$link.value = data.user.link
           User.update({ link: data.user.link })
         }
       })
@@ -73,10 +72,10 @@ export default class HeaderInputPlug extends EditorPlug {
 
   private onLinkInputChange() {
     // Link URL 自动补全协议
-    const link = this.editor.getUI().$link.value.trim()
+    const link = this.kit.useUI().$link.value.trim()
     if (!!link && !/^(http|https):\/\//.test(link)) {
-      this.editor.getUI().$link.value = `https://${link}`
-      User.update({ link: this.editor.getUI().$link.value })
+      this.kit.useUI().$link.value = `https://${link}`
+      User.update({ link: this.kit.useUI().$link.value })
     }
   }
 }

ui/packages/artalk/src/editor/core/header-plug.ts

@@ -1,32 +1,34 @@
 import User from '@/lib/user'
+import $t from '@/i18n'
 import Editor from '../editor'
 import EditorPlug from '../editor-plug'
 import EditPlug from './edit-plug'
+import PlugKit from '../plug-kit'
 
 export default class HeaderPlug extends EditorPlug {
   private get $inputs() {
-    return this.editor.getHeaderInputEls()
+    return this.kit.useEditor().getHeaderInputEls()
   }
 
-  constructor(editor: Editor) {
-    super(editor)
+  constructor(kit: PlugKit) {
+    super(kit)
 
     const inputEventFns: {[name: string]: () => void} = {}
 
     // the input event
     const onInput = ($input: HTMLInputElement, key: string) => () => {
-      if (editor.getPlugs()?.get(EditPlug)?.getIsEditMode()) return // 评论编辑模式，不修改个人信息
+      if (this.kit.useDeps(EditPlug)?.getIsEditMode()) return // 评论编辑模式，不修改个人信息
 
       User.update({ [key]: $input.value.trim() })
 
       // trigger header input event
-      editor.getPlugs()?.triggerHeaderInputEvt(key, $input)
+      this.kit.useEvents().trigger('header-input', { field: key, $input })
     }
 
     this.kit.useMounted(() => {
       // set placeholder and sync header input value
       Object.entries(this.$inputs).forEach(([key, $input]) => {
-        $input.placeholder = `${editor.$t(key as any)}`
+        $input.placeholder = `${$t(key as any)}`
         $input.value = User.data[key] || ''
       })
 

ui/packages/artalk/src/editor/core/local-storage-plug.ts

@@ -1,31 +1,32 @@
-import Editor from '../editor'
+import $t from '@/i18n'
 import EditorPlug from '../editor-plug'
+import PlugKit from '../plug-kit'
 
 const LocalStorageKey = 'ArtalkContent'
 
 export default class LocalStoragePlug extends EditorPlug {
-  constructor(editor: Editor) {
-    super(editor)
+  constructor(kit: PlugKit) {
+    super(kit)
 
     this.kit.useMounted(() => {
       // load editor content from localStorage when init
       const localContent = window.localStorage.getItem(LocalStorageKey) || ''
       if (localContent.trim() !== '') {
-        editor.showNotify(editor.$t('restoredMsg'), 'i')
-        editor.setContent(localContent)
+        this.kit.useEditor().showNotify($t('restoredMsg'), 'i')
+        this.kit.useEditor().setContent(localContent)
       }
     })
 
     this.kit.useUnmounted(() => {
     })
 
-    this.kit.useContentUpdated(() => {
+    this.kit.useEvents().on('content-updated', () => {
       this.save()
     })
   }
 
   // Save editor content to localStorage
   public save() {
-    window.localStorage.setItem(LocalStorageKey, this.editor.getContentRaw().trim())
+    window.localStorage.setItem(LocalStorageKey, this.kit.useEditor().getContentRaw().trim())
   }
 }

ui/packages/artalk/src/editor/core/mover-plug.ts

@@ -1,19 +1,19 @@
-import Editor from '../editor'
-import * as Utils from '../../lib/utils'
+import * as Utils from '@/lib/utils'
 import EditorPlug from '../editor-plug'
+import PlugKit from '../plug-kit'
 
 export default class MoverPlug extends EditorPlug {
   private isMoved = false
 
-  constructor(editor: Editor) {
-    super(editor)
+  constructor(kit: PlugKit) {
+    super(kit)
   }
 
   move(afterEl: HTMLElement) {
     if (this.isMoved) return
     this.isMoved = true
 
-    const editorEl = this.editor.getUI().$el
+    const editorEl = this.kit.useUI().$el
 
     editorEl.after(Utils.createElement('<div class="atk-editor-travel-placeholder"></div>'))
 
@@ -27,8 +27,8 @@ export default class MoverPlug extends EditorPlug {
   back() {
     if (!this.isMoved) return
     this.isMoved = false
-    this.editor.ctx.$root.querySelector('.atk-editor-travel-placeholder')?.replaceWith(this.editor.getUI().$el)
+    this.kit.useGlobalCtx().$root.querySelector('.atk-editor-travel-placeholder')?.replaceWith(this.kit.useUI().$el)
 
-    this.editor.cancelReply()  // 取消回复
+    this.kit.useEditor().cancelReply()  // 取消回复
   }
 }