artalk 2.6.3 → 2.7.0

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

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

@@ -1,122 +0,0 @@
-import * as Utils from '@/lib/utils'
-import Editor from '../editor'
-import User from '../../lib/user'
-import EditorPlug from './editor-plug'
-
-export default class UploadPlug extends EditorPlug {
-  public static Name = 'upload'
-
-  public $imgUploadInput?: HTMLInputElement
-
-  /** 允许的图片格式 */
-  allowImgExts = ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'svg', 'webp']
-
-  public constructor(editor: Editor) {
-    super(editor)
-
-    this.$imgUploadInput = document.createElement('input')
-    this.$imgUploadInput.type = 'file'
-    this.$imgUploadInput.style.display = 'none'
-    this.$imgUploadInput.accept = this.allowImgExts.map(o => `.${o}`).join(',')
-
-    const $btn = this.registerBtn(`${this.ctx.$t('image')}`)
-    $btn.after(this.$imgUploadInput)
-    $btn.onclick = () => {
-      // 选择图片
-      const $input = this.$imgUploadInput!
-      $input.onchange = () => {
-        (async () => { // 解决阻塞 UI 问题
-          if (!$input.files || $input.files.length === 0) return
-          const file = $input.files[0]
-          this.uploadImg(file)
-        })()
-      }
-      $input.click() // 显示选择图片对话框
-    }
-
-    if (!this.ctx.conf.imgUpload) {
-      this.getBtn()!.setAttribute('atk-only-admin-show', '')
-    }
-
-    // 统一从 FileList 获取文件并上传图片方法
-    const uploadFromFileList = (files?: FileList) => {
-      if (!files) return
-
-      for (let i = 0; i < files.length; i++) {
-        const file = files[i]
-        this.uploadImg(file)
-      }
-    }
-
-    // 拖拽图片
-    // @link https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop
-    // 阻止浏览器的默认释放行为
-    this.editor.getUI().$textarea.addEventListener('dragover', (evt) => {
-      evt.stopPropagation()
-      evt.preventDefault()
-    })
-
-    this.editor.getUI().$textarea.addEventListener('drop', (evt) => {
-      const files = evt.dataTransfer?.files
-      if (files?.length) {
-        evt.preventDefault()
-        uploadFromFileList(files)
-      }
-    })
-
-    // 粘贴图片
-    this.editor.getUI().$textarea.addEventListener('paste', (evt) => {
-      const files = evt.clipboardData?.files
-      if (files?.length) {
-        evt.preventDefault()
-        uploadFromFileList(files)
-      }
-    })
-  }
-
-  public async uploadImg(file: File) {
-    const fileExt = /[^.]+$/.exec(file.name)
-    if (!fileExt || !this.allowImgExts.includes(fileExt[0])) return
-
-    // 未登录提示
-    if (!User.checkHasBasicUserInfo()) {
-      this.editor.showNotify(this.ctx.$t('uploadLoginMsg'), 'w')
-      return
-    }
-
-    // 插入图片前换一行
-    let insertPrefix = '\n'
-    if (this.editor.getUI().$textarea.value.trim() === '') insertPrefix = ''
-
-    // 插入占位加载文字
-    const uploadPlaceholderTxt = `${insertPrefix}![](Uploading ${file.name}...)`
-    this.editor.insertContent(uploadPlaceholderTxt)
-
-    // 上传图片
-    let resp: any
-    try {
-      if (!this.ctx.conf.imgUploader) {
-        // 使用 Artalk 进行图片上传
-        resp = await this.ctx.getApi().upload.imgUpload(file)
-      } else {
-        // 使用自定义的图片上传器
-        resp = {img_url: await this.ctx.conf.imgUploader(file)}
-      }
-    } catch (err: any) {
-      console.error(err)
-      this.editor.showNotify(`${this.ctx.$t('uploadFail')}，${err.msg}`, 'e')
-    }
-    if (!!resp && resp.img_url) {
-      let imgURL = resp.img_url as string
-
-      // 若为相对路径，加上 artalk server
-      if (!Utils.isValidURL(imgURL)) imgURL = Utils.getURLBasedOnApi(this.ctx, imgURL)
-
-      // 上传成功插入图片
-      this.editor.setContent(this.editor.getUI().$textarea.value.replace(uploadPlaceholderTxt, `${insertPrefix}![](${imgURL})`))
-    } else {
-      // 上传失败删除加载文字
-      this.editor.setContent(this.editor.getUI().$textarea.value.replace(uploadPlaceholderTxt, ''))
-    }
-  }
-}

package/src/editor/reply.ts

@@ -1,62 +0,0 @@
-import type { CommentData } from '~/types/artalk-data'
-import Editor from './editor'
-import * as Utils from '../lib/utils'
-import * as Ui from '../lib/ui'
-
-export interface ReplyManager {
-  editor: Editor
-  comment?: CommentData
-  setReply(comment: CommentData, $comment: HTMLElement, scroll?: boolean): void
-  cancelReply(): void
-}
-
-export function createReplyManager(editor: Editor): ReplyManager {
-  const m: ReplyManager = {
-    editor,
-    comment: undefined,
-    setReply: (c, $, s) => setReply(m, c, $, s),
-    cancelReply: () => cancelReply(m)
-  }
-
-  return m
-}
-
-function setReply(m: ReplyManager, commentData: CommentData, $comment: HTMLElement, scroll = true) {
-  m.editor.cancelEditComment()
-  cancelReply(m)
-
-  const ui = m.editor.getUI()
-  if (!ui.$sendReply) {
-    ui.$sendReply = Utils.createElement(
-      `<div class="atk-send-reply">` +
-        `${m.editor.$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', () => {
-      m.editor.cancelReply()
-    })
-    ui.$textareaWrap.append(ui.$sendReply)
-  }
-
-  m.comment = commentData
-  m.editor.travel($comment)
-
-  if (scroll) Ui.scrollIntoView(ui.$el)
-
-  ui.$textarea.focus()
-}
-
-function cancelReply(m: ReplyManager) {
-  if (!m.comment) return
-
-  const ui = m.editor.getUI()
-  if (ui.$sendReply) {
-    ui.$sendReply.remove()
-    ui.$sendReply = undefined
-  }
-  m.comment = undefined
-
-  m.editor.travelBack()
-}

package/src/editor/submit.ts

@@ -1,99 +0,0 @@
-import type { CommentData } from '~/types/artalk-data'
-import Editor from './editor'
-import User from '../lib/user'
-
-export interface SubmitManager {
-  editor: Editor
-  do: () => Promise<void>
-  customs: CustomSubmit[]
-  registerCustom(c: CustomSubmit): void
-}
-
-export function createSubmitManager(editor: Editor) {
-  const m: SubmitManager = {
-    editor,
-    do: () => Do(m),
-    customs: [],
-    registerCustom: (c) => { m.customs.push(c) }
-  }
-
-  return m
-}
-
-async function Do(m: SubmitManager) {
-  if (m.editor.getFinalContent().trim() === '') {
-    m.editor.focus()
-    return
-  }
-
-  const custom = m.customs.find(o => o.activeCond())
-
-  m.editor.ctx.trigger('editor-submit')
-  m.editor.showLoading()
-
-  try {
-    // pre submit
-    if (custom?.pre) custom.pre()
-
-    let nComment: CommentData
-
-    // submit request
-    if (custom?.req) nComment = await custom.req()
-    else nComment = await reqAdd(m)
-
-    // post submit
-    if (custom?.post) custom.post(nComment)
-    else postSubmitAdd(m, nComment)
-  } catch (err: any) {
-    // submit error
-    console.error(err)
-    m.editor.showNotify(`${m.editor.$t('commentFail')}，${err.msg || String(err)}`, 'e')
-    return
-  } finally {
-    m.editor.hideLoading()
-  }
-
-  m.editor.reset() // 复原编辑器
-  m.editor.ctx.trigger('editor-submitted')
-}
-
-interface CustomSubmit {
-  activeCond: () => void
-  pre?: () => void
-  req?: () => Promise<CommentData>
-  post?: (nComment: CommentData) => void
-}
-
-// ================== Submit Add =======================
-function getSubmitAddParams(m: SubmitManager) {
-  const { nick, email, link } = User.data
-  const conf = m.editor.ctx.conf
-  const reply = m.editor.getReplyManager()?.comment
-
-  return {
-    content: m.editor.getFinalContent(),
-    nick, email, link,
-    rid: (!reply) ? 0 : reply.id,
-    page_key: (!reply) ? conf.pageKey : reply.page_key,
-    page_title: (!reply) ? conf.pageTitle : undefined,
-    site_name: (!reply) ? conf.site : reply.site_name
-  }
-}
-
-async function reqAdd(m: SubmitManager) {
-  const nComment = await m.editor.ctx.getApi().comment.add({
-    ...getSubmitAddParams(m)
-  })
-  return nComment
-}
-
-function postSubmitAdd(m: SubmitManager, commentNew: CommentData) {
-  // 回复不同页面的评论，跳转到新页面
-  const reply = m.editor.getReplyManager()
-  const conf = m.editor.ctx.conf
-  if (!!reply?.comment && reply.comment.page_key !== conf.pageKey) {
-    window.open(`${reply.comment.page_url}#atk-comment-${commentNew.id}`)
-  }
-
-  m.editor.ctx.insertComment(commentNew)
-}

package/src/lib/dark-mode.ts

@@ -1,48 +0,0 @@
-import type Context from '~/types/context'
-import { getLayerWrap } from '../layer'
-
-const darkModeMedia = window.matchMedia('(prefers-color-scheme: dark)')
-let darkModeAutoFunc: (evt: MediaQueryListEvent) => void
-
-export function syncDarkModeConf(ctx: Context) {
-  setDarkMode(ctx, ctx.conf.darkMode, false) // ref `conf.darkMode` data, so no need to `alterConf`
-}
-
-export function setDarkMode(ctx: Context, darkMode: boolean|'auto', alterConf = true) {
-  const apply = (d: boolean) => {
-    updateClassName(ctx, d)
-    if (alterConf) alterCtxConf(ctx, d)
-  }
-
-  if (darkMode === 'auto') {
-    if (!darkModeAutoFunc) { // 自动切换夜间模式，事件监听
-      darkModeAutoFunc = (evt) => apply(evt.matches)
-      darkModeMedia.addEventListener('change', darkModeAutoFunc)
-    }
-
-    apply(darkModeMedia.matches)
-  } else {
-    // if the type of darkMode is boolean
-    if (darkModeAutoFunc) // 解除事件监听绑定
-      darkModeMedia.removeEventListener('change', darkModeAutoFunc)
-
-    apply(darkMode)
-  }
-}
-
-function alterCtxConf(ctx: Context, darkMode: boolean) {
-  ctx.conf.darkMode = darkMode
-}
-
-const DarkModeClassName = 'atk-dark-mode'
-export function updateClassName(ctx: Context, darkMode: boolean) {
-  if (darkMode) ctx.$root.classList.add(DarkModeClassName)
-  else ctx.$root.classList.remove(DarkModeClassName)
-
-  // for Layer
-  const { $wrap: $layerWrap } = getLayerWrap()
-  if ($layerWrap) {
-    if (darkMode) $layerWrap.classList.add(DarkModeClassName)
-    else $layerWrap.classList.remove(DarkModeClassName)
-  }
-}