artalk 2.6.4 → 2.7.0

package/src/editor/edit-mode.ts

@@ -1,105 +0,0 @@
-import type { CommentData } from '~/types/artalk-data'
-import * as Utils from '../lib/utils'
-import Editor from './editor'
-import User from '../lib/user'
-
-export interface EditModeManager {
-  editor: Editor
-  comment?: CommentData
-  setEdit: (comment: CommentData, $comment: HTMLElement) => void
-  cancelEdit: () => void
-}
-
-export function createEditModeManager(editor: Editor) {
-  const m: EditModeManager = {
-    editor,
-    comment: undefined,
-    setEdit: (c, e) => edit(m, c, e),
-    cancelEdit: () => cancelEdit(m)
-  }
-
-  initEditModeSubmit(m)
-
-  return m
-}
-
-function edit(m: EditModeManager, comment: CommentData, $comment: HTMLElement) {
-  cancelEdit(m)
-  m.editor.cancelReply()
-
-  const ui = m.editor.getUI()
-  if (!ui.$editCancelBtn) {
-    const $btn = Utils.createElement(
-      `<div class="atk-send-reply">` +
-        `${m.editor.$t('editCancel')} ` +
-        `<span class="atk-cancel">×</span>` +
-      `</div>`
-    )
-    $btn.onclick = () => {
-      cancelEdit(m)
-    }
-    ui.$textareaWrap.append($btn)
-    ui.$editCancelBtn = $btn
-  }
-  m.comment = comment
-
-  ui.$header.style.display = 'none' // TODO support modify header information
-
-  m.editor.travel($comment)
-
-  ui.$nick.value = comment.nick || ''
-  ui.$email.value = comment.email || ''
-  ui.$link.value = comment.link || ''
-
-  m.editor.setContent(comment.content)
-  ui.$textarea.focus()
-
-  m.editor.refreshSendBtnText()
-}
-
-function cancelEdit(m: EditModeManager) {
-  if (!m.comment) return
-
-  const ui = m.editor.getUI()
-
-  if (ui.$editCancelBtn) {
-    ui.$editCancelBtn.remove()
-    ui.$editCancelBtn = undefined
-  }
-
-  m.comment = undefined
-  m.editor.travelBack()
-
-  const { nick, email, link } = User.data
-  ui.$nick.value = nick
-  ui.$email.value = email
-  ui.$link.value = link
-
-  m.editor.setContent('')
-  m.editor.refreshSendBtnText()
-
-  ui.$header.style.display = '' // TODO support modify header information
-}
-
-function initEditModeSubmit(m: EditModeManager) {
-  const submitManger = m.editor.getSubmitManager()
-  if (!submitManger) throw Error("submitManager not initialized")
-  submitManger.registerCustom({
-    activeCond: () => !!m.comment, // active this custom submit when edit mode
-    req: async () => {
-      const saveData = {
-        content: m.editor.getFinalContent(),
-        nick: m.editor.getUI().$nick.value,
-        email: m.editor.getUI().$email.value,
-        link: m.editor.getUI().$link.value,
-      }
-      const nComment = await m.editor.ctx.getApi().comment.commentEdit({
-        ...m.comment, ...saveData
-      })
-      return nComment
-    },
-    post: (nComment: CommentData) => {
-      m.editor.ctx.updateComment(nComment)
-    }
-  })
-}

package/src/editor/funcs.ts

@@ -1,150 +0,0 @@
-import Editor from './editor'
-import User from '../lib/user'
-import { createMover } from './mover'
-import { createPlugManager } from './plug-manager'
-import { createReplyManager } from './reply'
-import { createEditModeManager } from './edit-mode'
-import { createSubmitManager } from './submit'
-
-/** Editor Enabled Functions */
-const EditorFuncs = {
-  localStorage, header, textarea,
-  submitBtn, submitManager,
-  mover, reply,
-  plugs,
-}
-
-export default function initEditorFuncs(editor: Editor) {
-  // storage the unmount funcs
-  const unmountFuncs: (() => void)[] = []
-
-  Object.entries(EditorFuncs).forEach(([k, init]) => {
-    const unmountFunc = init(editor)
-    if (unmountFunc) unmountFuncs.push(unmountFunc)
-  })
-
-  return unmountFuncs
-}
-
-// ================== Editor Functions ======================
-
-function localStorage(editor: Editor) {
-  // load editor content from localStorage when init
-  const localContent = window.localStorage.getItem('ArtalkContent') || ''
-  if (localContent.trim() !== '') {
-    editor.showNotify(editor.$t('restoredMsg'), 'i')
-    editor.setContent(localContent)
-  }
-
-  // save editor content to localStorage when input
-  const onEditorInput = () => {
-    editor.saveToLocalStorage()
-  }
-
-  // bind the event
-  editor.getUI().$textarea.addEventListener('input', onEditorInput)
-
-  return () => {
-    // unmount the event
-    editor.getUI().$textarea.removeEventListener('input', onEditorInput)
-  }
-}
-
-function header(editor: Editor) {
-  const $inputs = editor.getHeaderInputEls()
-  const inputFuncs: {[name: string]: () => void} = {}
-
-  // the input event
-  const onInput = ($input: HTMLInputElement, key: string) => () => {
-    if (editor.isEditMode) return // 评论编辑模式，不修改个人信息
-
-    User.update({ [key]: $input.value.trim() })
-    editor.getPlugs()?.triggerHeaderInputEvt(key, $input)
-  }
-
-  // set placeholder and sync header input value
-  Object.entries($inputs).forEach(([key, $input]) => {
-    $input.placeholder = `${editor.$t(key as any)}`
-    $input.value = User.data[key] || ''
-  })
-
-  // bind the event
-  Object.entries($inputs).forEach(([key, $input]) => {
-    $input.addEventListener('input', inputFuncs[key] = onInput($input, key))
-  })
-
-  return () => {
-    // unmount the event
-    Object.entries($inputs).forEach(([key, $input]) => {
-      $input.removeEventListener('input', inputFuncs[key])
-    })
-  }
-}
-
-function textarea(editor: Editor) {
-  // 占位符
-  editor.getUI().$textarea.placeholder = editor.ctx.conf.placeholder || editor.$t('placeholder')
-
-  // 按下 Tab 输入内容，而不是失去焦距
-  const onKeydown = (e: KeyboardEvent) => {
-    const keyCode = e.keyCode || e.which
-
-    if (keyCode === 9) {
-      e.preventDefault()
-      editor.insertContent('\t')
-    }
-  }
-
-  // 输入框高度随内容而变化
-  const onInput = () => {
-    editor.adjustTextareaHeight()
-  }
-
-  // bind the event
-  editor.getUI().$textarea.addEventListener('keydown', onKeydown)
-  editor.getUI().$textarea.addEventListener('input', onInput)
-
-  return () => {
-    // unmount the event
-    editor.getUI().$textarea.removeEventListener('keydown', onKeydown)
-    editor.getUI().$textarea.removeEventListener('input', onInput)
-  }
-}
-
-function submitBtn(editor: Editor) {
-  editor.refreshSendBtnText()
-
-  const onClick = () => {
-    editor.submit()
-  }
-
-  editor.getUI().$submitBtn.addEventListener('click', onClick)
-
-  return () => {
-    editor.getUI().$submitBtn.removeEventListener('click', onClick)
-  }
-}
-
-function submitManager(editor: Editor) {
-  editor.setSubmitManager(createSubmitManager(editor))
-
-  // Note:
-  // the EditModeManger depends on the submitManager,
-  // so must init the submitManager first.
-  // createEditModeManager will make a side-effect on submitManager (call `submitManger.registerCustom`)
-  // side-effect is not a good practice, to be improved.
-  editor.setEditModeManager(createEditModeManager(editor))
-}
-
-function mover(editor: Editor) {
-  if (!editor.conf.editorTravel) return
-  editor.setMover(createMover(editor))
-}
-
-function reply(editor: Editor) {
-  editor.setReplyManager(createReplyManager(editor))
-}
-
-function plugs(editor: Editor) {
-  editor.setPlugs(createPlugManager(editor))
-}

package/src/editor/index.ts

@@ -1,3 +0,0 @@
-import Editor from './editor'
-
-export default Editor

package/src/editor/mover.ts

@@ -1,43 +0,0 @@
-import Editor from './editor'
-import * as Utils from '../lib/utils'
-
-export interface Mover {
-  editor: Editor
-  isMoved: boolean
-  move(afterEl: HTMLElement): void
-  back(): void
-}
-
-export function createMover(editor: Editor): Mover {
-  const m: Mover = {
-    editor,
-    isMoved: false,
-    move: (el) => move(m, el),
-    back: () => back(m)
-  }
-
-  return m
-}
-
-function move(m: Mover, afterEl: HTMLElement) {
-  if (m.isMoved) return
-  m.isMoved = true
-
-  const editorEl = m.editor.getUI().$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') // 添加渐入动画
-}
-
-function back(m: Mover) {
-  if (!m.isMoved) return
-  m.isMoved = false
-  m.editor.ctx.$root.querySelector('.atk-editor-travel-placeholder')?.replaceWith(m.editor.getUI().$el)
-
-  m.editor.cancelReply()  // 取消回复
-}

package/src/editor/plug-manager.ts

@@ -1,172 +0,0 @@
-import type ArtalkConfig from '~/types/artalk-config'
-import EmoticonsPlug from './plugs/emoticons-plug'
-import UploadPlug from './plugs/upload-plug'
-import PreviewPlug from './plugs/preview-plug'
-import HeaderInputPlug from './plugs/header-input-plug'
-import EditorPlug from './plugs/editor-plug'
-import Editor from './editor'
-
-/** The default enabled plugs */
-const ENABLED_PLUGS = [ EmoticonsPlug, UploadPlug, PreviewPlug, HeaderInputPlug ]
-
-/** Context of an editor plug manager */
-export interface PlugManager {
-  editor: Editor
-  plugList: { [name: string]: EditorPlug }
-  openedPlugName: string|null
-
-  openPlugPanel(plugName: string): void
-  closePlugPanel(): void
-
-  triggerHeaderInputEvt(field: string, $input: HTMLInputElement): void
-  triggerContentUpdatedEvt(content: string): void
-  getTransformedContent(raw: string): string
-}
-
-/** Create an editor plug manager */
-export function createPlugManager(editor: Editor): PlugManager {
-  const ctx: PlugManager = {
-    editor,
-    plugList: {},
-    openedPlugName: null,
-    openPlugPanel: (p: string) => openPlugPanel(ctx, p),
-    closePlugPanel: () => closePlugPanel(ctx),
-
-    triggerHeaderInputEvt: (f, $) => triggerHeaderInputEvt(ctx, f, $),
-    triggerContentUpdatedEvt: (c) => triggerContentUpdatedEvt(ctx, c),
-    getTransformedContent: (r) => getTransformedContent(ctx, r),
-  }
-
-  // handle ui, clear and reset the plug btns and plug panels
-  editor.getUI().$plugPanelWrap.innerHTML = ''
-  editor.getUI().$plugPanelWrap.style.display = 'none'
-  editor.getUI().$plugBtnWrap.innerHTML = ''
-
-  // init the all enabled plugs
-  const DISABLED = getDisabledPlugNames(editor.conf)
-
-  ENABLED_PLUGS
-    .filter(p => !DISABLED.includes(p.Name)) // 禁用的插件
-    .forEach((Plug) => {
-      initPlugItem(ctx, Plug)
-    })
-
-  return ctx
-}
-
-/** Get the name list of disabled plugs */
-function getDisabledPlugNames(conf: ArtalkConfig) {
-  return [
-    {k: 'upload', v: conf.imgUpload},
-    {k: 'emoticons', v: conf.emoticons},
-    {k: 'preview', v: conf.preview}
-  ].filter(n => !n.v).flatMap(n => n.k)
-}
-
-/** Initialization of a plug item */
-function initPlugItem(ctx: PlugManager, Plug: typeof ENABLED_PLUGS[number]) {
-  const plugName = Plug.Name
-
-  // create the plug instance
-  const plug = new Plug(ctx.editor)
-  ctx.plugList[plugName] = plug
-
-  // gen plug ui
-  genPlugBtn(ctx, plugName, plug)
-}
-
-/** Gen the plug btn (and plug panel) on editor ui */
-function genPlugBtn(ctx: PlugManager, plugName: string, plug: EditorPlug) {
-  const $btn = plug.getBtn()
-  if (!$btn) return
-  ctx.editor.getUI().$plugBtnWrap.appendChild($btn)
-  $btn.onclick = $btn.onclick || (() => {
-    // the event when click plug btn
-
-    // removing the active class from all the buttons
-    ctx.editor.getUI().$plugBtnWrap
-      .querySelectorAll('.active')
-      .forEach(item => item.classList.remove('active'))
-
-
-    // if the plugName is the same as the openedPlugName, then close the plugPanel
-    if (plugName === ctx.openedPlugName) {
-      closePlugPanel(ctx)
-      return
-    }
-
-    // open the plug current clicked plug panel
-    openPlugPanel(ctx, plugName)
-
-    // add active class for current plug panel
-    $btn.classList.add('active')
-  })
-
-  // initialization of plug panel
-  const $panel = plug.getPanel()
-  if ($panel) {
-    $panel.setAttribute('data-plug-name', plugName)
-    $panel.style.display = 'none'
-    ctx.editor.getUI().$plugPanelWrap.appendChild($panel)
-  }
-}
-
-/** Open the editor plug panel */
-function openPlugPanel(ctx: PlugManager, plugName: string) {
-  Object.entries(ctx.plugList).forEach(([aPlugName, plug]) => {
-    const plugPanel = plug.getPanel()
-    if (!plugPanel) return
-
-    if (aPlugName === plugName) {
-      plugPanel.style.display = ''
-      if (plug.onPanelShow) plug.onPanelShow()
-    } else {
-      plugPanel.style.display = 'none'
-      if (plug.onPanelHide) plug.onPanelHide()
-    }
-  })
-
-  ctx.editor.getUI().$plugPanelWrap.style.display = ''
-  ctx.openedPlugName = plugName
-}
-
-/** Close the editor plug panel */
-function closePlugPanel(ctx: PlugManager) {
-  if (!ctx.openedPlugName) return
-
-  const plug = ctx.plugList[ctx.openedPlugName]
-  if (!plug) return
-
-  if (plug.onPanelHide) plug.onPanelHide()
-
-  ctx.editor.getUI().$plugPanelWrap.style.display = 'none'
-  ctx.openedPlugName = null
-}
-
-// ============== Events ====================
-
-/** Trigger event when editor header input changed */
-function triggerHeaderInputEvt(ctx: PlugManager, field: string, $input: HTMLInputElement) {
-  Object.entries(ctx.plugList).forEach(([plugName, plug]) => {
-    if (!plug.onHeaderInput) return
-    plug.onHeaderInput(field, $input)
-  })
-}
-
-/** Trigger event when editor content updated */
-function triggerContentUpdatedEvt(ctx: PlugManager, content: string) {
-  Object.entries(ctx.plugList).forEach(([plugName, plug]) => {
-    if (!plug.onContentUpdated) return
-    plug.onContentUpdated(content)
-  })
-}
-
-/** Get the content which is transformed by plugs */
-function getTransformedContent(ctx: PlugManager, rawContent: string) {
-  let result = rawContent
-  Object.entries(ctx.plugList).forEach(([plugName, plug]) => {
-    if (!plug.contentTransformer) return
-    result = plug.contentTransformer(result)
-  })
-  return result
-}

package/src/editor/plugs/editor-plug.ts

@@ -1,69 +0,0 @@
-import * as Utils from '@/lib/utils'
-import Editor from '../editor'
-
-/**
- * Editor 插件
- *
- * @desc 使用 Interface x Abstract 合并声明
- * @see https://www.typescriptlang.org/docs/handbook/declaration-merging.html#merging-interfaces
- */
-interface EditorPlug {
-  onPanelShow?(): void
-  onPanelHide?(): void
-}
-
-abstract class EditorPlug {
-  protected editor: Editor
-  protected get ctx() { return this.editor.ctx }
-  protected $panel?: HTMLElement
-  protected $btn?: HTMLElement
-  public onHeaderInput?: (key: string, $input: HTMLElement) => void
-  public contentTransformer?: (rawContent: string) => string
-  public onContentUpdated?: (content: string) => void
-
-  public constructor(editor: Editor) {
-    this.editor = editor
-  }
-
-  /** Name of plug */
-  public static Name: string
-
-  /** Register plug panel will provide a plug el */
-  protected registerPanel(html: string = '<div></div>') {
-    this.$panel = Utils.createElement(html)
-    return this.$panel
-  }
-
-  /** Register plug btn will add a btn on the bottom of editor */
-  protected registerBtn(html: string) {
-    this.$btn = Utils.createElement(`<span class="atk-plug-btn" data-plug-name="${this.constructor.name}">${html}</span>`)
-    return this.$btn
-  }
-
-  /** Register the event of header input is changed */
-  protected registerHeaderInputEvt(func: (key: string, $input: HTMLElement) => void) {
-    this.onHeaderInput = func
-  }
-
-  /** Register the content transformer to handle the content of the last submit by the editor */
-  protected registerContentTransformer(func: (raw: string) => string) {
-    this.contentTransformer = func
-  }
-
-  /** Register the event of editor content is updated */
-  protected registerContentUpdatedEvt(func: (content: string) => void) {
-    this.onContentUpdated = func
-  }
-
-  /** Get panel element of plug */
-  public getPanel() {
-    return this.$panel
-  }
-
-  /** Get btn element of plug */
-  public getBtn() {
-    return this.$btn
-  }
-}
-
-export default EditorPlug

package/src/editor/plugs/header-input-plug.ts

@@ -1,79 +0,0 @@
-import Editor from '../editor'
-import User from '../../lib/user'
-import EditorPlug from './editor-plug'
-
-export default class HeaderInputPlug extends EditorPlug {
-  public static Name = 'headerInput'
-
-  public constructor(editor: Editor) {
-    super(editor)
-
-    this.registerHeaderInputEvt((key, $input) => {
-      if (key === 'nick' || key === 'email') {
-        this.fetchUserInfo()
-      }
-    })
-
-    // Link URL 自动补全协议
-    this.editor.getUI().$link.addEventListener('change', () => {
-      const link = this.editor.getUI().$link.value.trim()
-      if (!!link && !/^(http|https):\/\//.test(link)) {
-        this.editor.getUI().$link.value = `https://${link}`
-        User.update({ link: this.editor.getUI().$link.value })
-      }
-    })
-  }
-
-  queryUserInfo = {
-    timeout: <number|null>null,
-    abortFunc: <(() => void)|null>null
-  }
-
-  /** 远程获取用户数据 */
-  fetchUserInfo() {
-    User.logout()
-
-    // 获取用户信息
-    if (this.queryUserInfo.timeout) window.clearTimeout(this.queryUserInfo.timeout) // 清除待发出的请求
-    if (this.queryUserInfo.abortFunc) this.queryUserInfo.abortFunc() // 之前发出未完成的请求立刻中止
-
-    this.queryUserInfo.timeout = window.setTimeout(() => {
-      this.queryUserInfo.timeout = null // 清理
-
-      const {req, abort} = this.ctx.getApi().user.userGet(
-        User.data.nick, User.data.email
-      )
-      this.queryUserInfo.abortFunc = abort
-      req.then(data => {
-        if (!data.is_login) {
-          User.logout()
-        }
-
-        // 未读消息更新
-        this.ctx.updateNotifies(data.unread)
-
-        // 若用户为管理员，执行登陆操作
-        if (User.checkHasBasicUserInfo() && !data.is_login && data.user?.is_admin) {
-          this.showLoginDialog()
-        }
-
-        // 自动填入 link
-        if (data.user && data.user.link) {
-          this.editor.getUI().$link.value = data.user.link
-          User.update({ link: data.user.link })
-        }
-      })
-      .catch(() => {})
-      .finally(() => {
-        this.queryUserInfo.abortFunc = null // 清理
-      })
-    }, 400) // 延迟执行，减少请求次数
-  }
-
-  showLoginDialog() {
-    this.ctx.checkAdmin({
-      onSuccess: () => {
-      }
-    })
-  }
-}

package/src/editor/plugs/preview-plug.ts

@@ -1,44 +0,0 @@
-import './preview-plug.scss'
-
-import Editor from '../editor'
-import EditorPlug from './editor-plug'
-
-export default class PreviewPlug extends EditorPlug {
-  public static Name = 'preview'
-  declare protected $panel: HTMLElement
-
-  private isBind = false
-
-  public constructor(editor: Editor) {
-    super(editor)
-
-    this.registerPanel(`<div class="atk-editor-plug-preview"></div>`)
-
-    let btnText = this.editor.$t('preview')
-    if (this.ctx.getMarkedInstance()) 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.registerBtn(btnText)
-
-    this.registerContentUpdatedEvt((content) => {
-      this.updateContent()
-    })
-  }
-
-  public onPanelShow() {
-    this.updateContent()
-
-    if (!this.isBind) {
-      const event = () => {
-        this.updateContent()
-      }
-      this.editor.getUI().$textarea.addEventListener('input', event)
-      this.editor.getUI().$textarea.addEventListener('change', event)
-      this.isBind = true
-    }
-  }
-
-  public updateContent() {
-    if (this.$panel.style.display !== 'none') {
-      this.$panel.innerHTML = this.editor.getContentMarked()
-    }
-  }
-}