artalk 2.6.4 → 2.7.1

package/src/plugins/editor/_kit.ts

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

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

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

@@ -0,0 +1,44 @@
+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/{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()
+  }
+}