artalk 2.6.4 → 2.7.1

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

package/src/lib/stat.ts

@@ -1,71 +0,0 @@
-import ContextApi from '~/types/context'
-import ArtalkPlug from '~/types/plug'
-
-export interface CountConf {
-  ctx: ContextApi
-
-  /** 是否增加当前页面 PV 数 */
-  pvAdd?: boolean
-}
-
-export const PvCountWidget: ArtalkPlug = (ctx: ContextApi) => {
-  if (!ctx.conf.useBackendConf) {
-    // 不使用后端配置，在 Artalk 实例被创建后，立刻初始化
-    initCountWidget({ ctx, pvAdd: true })
-  } else {
-    // 若使用后端配置，需待配置成功获取后 (来自后端设定的 pvEl 等)，再初始化
-    ctx.on('list-loaded', () => {
-      initCountWidget({ ctx, pvAdd: true })
-    })
-  }
-}
-
-/** 初始化评论数和 PV 数量展示元素 */
-export async function initCountWidget(p: CountConf) {
-  // 评论数
-  const countEl = p.ctx.conf.countEl
-  if (countEl && document.querySelector(countEl)) {
-    handleStatCount(p, { api: 'page_comment', countEl })
-  }
-
-  // PV
-  const curtPagePvNum = p.pvAdd ? await p.ctx.getApi().page.pv() : undefined
-  const pvEl = p.ctx.conf.pvEl
-  if (pvEl && document.querySelector(pvEl)) {
-    handleStatCount(p, {
-      api: 'page_pv',
-      countEl: pvEl,
-      curtPageCount: curtPagePvNum,
-    })
-  }
-}
-
-export async function handleStatCount(
-  p: CountConf,
-  args: {
-    api: 'page_pv' | 'page_comment'
-    countEl: string
-    curtPageCount?: number
-  }
-) {
-  let pageCounts: { [key: string]: number } = {}
-
-  // 当前页面的统计数
-  const curtPageKey = p.ctx.conf.pageKey
-  if (args.curtPageCount) pageCounts[curtPageKey] = args.curtPageCount
-
-  // 查询其他页面的统计数
-  let queryPageKeys = Array.from(document.querySelectorAll(args.countEl))
-    .map((e) => e.getAttribute('data-page-key') || curtPageKey)
-    .filter((pageKey) => pageCounts[pageKey] === undefined)
-  queryPageKeys = [...new Set(queryPageKeys)] // 去重
-  if (queryPageKeys.length > 0) {
-    const counts: any = await p.ctx.getApi().page.stat(args.api, queryPageKeys)
-    pageCounts = { ...pageCounts, ...counts }
-  }
-
-  document.querySelectorAll(args.countEl).forEach((el) => {
-    const pageKey = el.getAttribute('data-page-key') || curtPageKey
-    el.innerHTML = `${Number(pageCounts[pageKey] || 0)}`
-  })
-}

package/src/list/index.ts

@@ -1,3 +0,0 @@
-import List from './list'
-
-export default List