artalk 2.7.1 → 2.7.2

package/src/lib/event-manager.ts

@@ -1,47 +0,0 @@
-export type EventHandler<T> = (payload: T) => void
-export interface Event<PayloadMap, K extends keyof PayloadMap = keyof PayloadMap> extends EventOptions {
-  name: K
-  handler: EventHandler<PayloadMap[K]>
-}
-export interface EventOptions {
-  once?: boolean
-}
-
-export interface EventManagerFuncs<PayloadMap> {
-  on<K extends keyof PayloadMap>(name: K, handler: EventHandler<PayloadMap[K]>, opts?: EventOptions): void
-  off<K extends keyof PayloadMap>(name: K, handler: EventHandler<PayloadMap[K]>): void
-  trigger<K extends keyof PayloadMap>(name: K, payload?: PayloadMap[K]): void
-}
-
-export default class EventManager<PayloadMap> implements EventManagerFuncs<PayloadMap> {
-  private events: Event<PayloadMap>[] = []
-
-  /**
-   * Add an event listener for a specific event name
-   */
-  public on<K extends keyof PayloadMap>(name: K, handler: EventHandler<PayloadMap[K]>, opts: EventOptions = {}) {
-    this.events.push({ name, handler: handler as EventHandler<PayloadMap[keyof PayloadMap]>, ...opts })
-  }
-
-  /**
-   * Remove an event listener for a specific event name and handler
-   */
-  public off<K extends keyof PayloadMap>(name: K, handler: EventHandler<PayloadMap[K]>) {
-    if (!handler) return // not allow remove all events with same name
-    this.events = this.events.filter((evt) =>
-      !(evt.name === name && evt.handler === handler))
-  }
-
-  /**
-   * Trigger an event with an optional payload
-   */
-  public trigger<K extends keyof PayloadMap>(name: K, payload?: PayloadMap[K]) {
-    this.events
-      .slice(0) // make a copy, in case listeners are removed while iterating
-      .filter((evt) => evt.name === name && typeof evt.handler === 'function')
-      .forEach((evt) => {
-        if (evt.once) this.off(name, evt.handler)
-        evt.handler(payload!)
-      })
-  }
-}

package/src/lib/highlight.ts

@@ -1,5 +0,0 @@
-import hanabi from 'hanabi'
-
-export function renderCode(code: string) {
-  return hanabi(code)
-}

package/src/lib/marked-renderer.ts

@@ -1,32 +0,0 @@
-import { marked as libMarked } from 'marked'
-import { renderCode } from './highlight'
-
-export function getRenderer() {
-  const renderer = new libMarked.Renderer()
-  renderer.link = markedLinkRenderer(renderer, renderer.link)
-  renderer.code = markedCodeRenderer()
-  return renderer
-}
-
-export const markedLinkRenderer = (renderer: any, orgLinkRenderer: Function) => (href: string, title: string, text: string): string => {
-  const localLink = href?.startsWith(`${window.location.protocol}//${window.location.hostname}`);
-  const html = orgLinkRenderer.call(renderer, href, title, text);
-  return html.replace(/^<a /, `<a target="_blank" ${!localLink ? `rel="noreferrer noopener nofollow"` : ''} `);
-}
-
-export const markedCodeRenderer = () => (block: string, lang: string | undefined): string => {
-  // Colorize the block only if the language is known to highlight.js
-  const realLang = (!lang ? 'plaintext' : lang)
-  let colorized = block
-  if ((window as any).hljs) {
-    if (realLang && (window as any).hljs.getLanguage(realLang)) {
-      colorized = (window as any).hljs.highlight(realLang, block).value
-    }
-  } else {
-    colorized = renderCode(block)
-  }
-
-  return `<pre rel="${realLang}">\n`
-    + `<code class="hljs language-${realLang}">${colorized.replace(/&amp;/g, '&')}</code>\n`
-    + `</pre>`
-}

package/src/lib/marked.ts

@@ -1,72 +0,0 @@
-import { marked as libMarked, MarkedOptions } from 'marked'
-
-import { sanitize } from './sanitizer'
-import { renderCode } from './highlight'
-import { getRenderer } from './marked-renderer'
-
-type Replacer = (raw: string) => string
-export type TMarked = typeof libMarked
-
-let instance: (typeof libMarked)|undefined
-let replacers: Replacer[] = []
-
-const markedOptions: MarkedOptions = {
-  pedantic: false,
-  gfm: true,
-  breaks: true,
-  smartLists: true,
-  smartypants: true,
-  xhtml: false,
-  sanitize: false,
-  silent: true,
-}
-
-/** Get Marked instance */
-export function getInstance() {
-  return instance
-}
-
-export function setReplacers(arr: Replacer[]) {
-  replacers = arr
-}
-
-/** 初始化 marked */
-export function initMarked() {
-  try { if (!libMarked.name) return } catch { return }
-
-  // @see https://github.com/markedjs/marked/blob/4afb228d956a415624c4e5554bb8f25d047676fe/src/Tokenizer.js#L329
-  libMarked.setOptions({
-    renderer: getRenderer(),
-    ...markedOptions
-  })
-
-  instance = libMarked
-}
-
-/** 解析 markdown */
-export default function marked(src: string): string {
-  let markedContent = getInstance()?.parse(src)
-  if (!markedContent) { // 无 Markdown 模式简单处理
-    markedContent = simpleMarked(src)
-  }
-
-  let dest = sanitize(markedContent)
-
-  // 内容替换器
-  replacers.forEach((replacer) => {
-    if (typeof replacer === 'function')
-      dest = replacer(dest)
-  })
-
-  return dest
-}
-
-function simpleMarked(src: string) {
-  return src
-    // .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
-    .replace(/```\s*([^]+?.*?[^]+?[^]+?)```/g, (_, code) => `<pre><code>${renderCode(code)}</code></pre>`)
-    // .replace(/`([^`]+?)`/g, '<code>$1</code>')
-    .replace(/!\[(.*?)\]\((.*?)\)/g, (_, alt, imgSrc) => `<img src="${imgSrc}" alt="${alt}" />`)
-    .replace(/\[(.*?)\]\((.*?)\)/g, (_, text, link) => `<a href="${link}" target="_blank">${text}</a>`)
-    .replace(/\n/g, '<br>')
-}

package/src/lib/sanitizer.ts

@@ -1,57 +0,0 @@
-import insane from 'insane'
-
-const insaneOptions = {
-  allowedClasses: {},
-  // @refer CVE-2018-8495
-  // @link https://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2018-8495
-  // @link https://leucosite.com/Microsoft-Edge-RCE/
-  // @link https://medium.com/@knownsec404team/analysis-of-the-security-issues-of-url-scheme-in-pc-from-cve-2018-8495-934478a36756
-  allowedSchemes: [
-    'http', 'https', 'mailto',
-    'data' // for support base64 encoded image (安全性有待考虑)
-  ],
-  allowedTags: [
-    'a', 'abbr', 'article', 'b', 'blockquote', 'br', 'caption', 'code', 'del', 'details', 'div', 'em',
-    'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'hr', 'i', 'img', 'ins', 'kbd', 'li', 'main', 'mark',
-    'ol', 'p', 'pre', 'section', 'span', 'strike', 'strong', 'sub', 'summary', 'sup', 'table',
-    'tbody', 'td', 'th', 'thead', 'tr', 'u', 'ul'
-  ],
-  allowedAttributes: {
-    '*': ['title', 'accesskey'],
-    a: ['href', 'name', 'target', 'aria-label', 'rel'],
-    img: ['src', 'alt', 'title', 'atk-emoticon', 'aria-label'],
-    // for code highlight
-    code: ['class'],
-    span: ['class', 'style'],
-  },
-  filter: node => {
-    // allow hljs style
-    const allowed = [
-      [ 'code', /^hljs\W+language-(.*)$/ ],
-      [ 'span', /^(hljs-.*)$/ ]
-    ]
-    allowed.forEach(([ tag, reg ]) => {
-      if (
-        node.tag === tag
-        && !!node.attrs.class
-        && !(reg as RegExp).test(node.attrs.class)
-      ) {
-        delete node.attrs.class
-      }
-    })
-
-    // allow <span> set color sty
-    if (node.tag === 'span' && !!node.attrs.style
-        && !/^color:(\W+)?#[0-9a-f]{3,6};?$/i.test(node.attrs.style)) {
-      delete node.attrs.style
-    }
-
-    return true
-  }
-}
-
-export function sanitize(content: string): string {
-  // @link https://github.com/markedjs/marked/discussions/1232
-  // @link https://gist.github.com/lionel-rowe/bb384465ba4e4c81a9c8dada84167225
-  return insane(content, insaneOptions)
-}

package/src/lib/ui.ts

@@ -1,193 +0,0 @@
-import type { NotifyLevel } from '~/types'
-import * as Utils from './utils'
-
-/** 显示加载 */
-export function showLoading(parentElem: HTMLElement, conf?: { transparentBg?: boolean }) {
-  // Use :scope https://developer.mozilla.org/en-US/docs/Web/CSS/:scope
-  let $loading = parentElem.querySelector<HTMLElement>(':scope > .atk-loading')
-  if (!$loading) {
-    $loading = Utils.createElement(
-    `<div class="atk-loading atk-fade-in" style="display: none;">
-      <div class="atk-loading-spinner">
-        <svg viewBox="25 25 50 50"><circle cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"></circle></svg>
-      </div>
-    </div>`)
-    if (conf?.transparentBg) $loading.style.background = 'transparent'
-    parentElem.appendChild($loading)
-  }
-  $loading.style.display = ''
-
-  // spinner 延迟显示，若加载等待时间太短，没必要显示（闪一下即可）
-  const $spinner = $loading.querySelector<HTMLElement>('.atk-loading-spinner')
-  if ($spinner) {
-    $spinner.style.display = 'none'
-    window.setTimeout(() => {
-      $spinner.style.display = ''
-    }, 500)
-  }
-}
-
-/** 隐藏加载 */
-export function hideLoading(parentElem: HTMLElement) {
-  const $loading = parentElem.querySelector<HTMLElement>(':scope > .atk-loading')
-  if ($loading) $loading.style.display = 'none'
-}
-
-/** 元素加载动画 */
-export function setLoading(val: boolean, parentElem: HTMLElement) {
-  if (val) showLoading(parentElem)
-  else hideLoading(parentElem)
-}
-
-/** 元素是否用户可见 */
-export function isVisible(el: HTMLElement, viewport: HTMLElement = document.documentElement) {
-  const viewportHeight = viewport.clientHeight
-
-  const docViewTop = viewport.scrollTop
-  const docViewBottom = docViewTop + viewportHeight
-
-  const rect = el.getBoundingClientRect()
-  const elemTop = rect.top + docViewTop
-  const elemBottom = elemTop + rect.height
-
-  return (elemBottom <= docViewBottom) //&& (elemTop >= docViewTop) 注释因为假如 el 比 viewport 还高就会失效
-}
-
-/** 滚动到元素中心 */
-export function scrollIntoView(elem: HTMLElement, enableAnim: boolean = true, relativeTo?: HTMLElement) {
-  let top: number
-
-  if (relativeTo) {
-    const containerRect = relativeTo.getBoundingClientRect()
-    const elementRect = elem.getBoundingClientRect()
-    top = elementRect.top - containerRect.top + relativeTo.scrollTop
-    top += Utils.getHeight(relativeTo) / 2 - Utils.getHeight(elem) / 2
-  } else {
-    const rect = elem.getBoundingClientRect()
-    const elemTop = rect.top + window.scrollY
-    top = elemTop - (window.innerHeight / 2 - rect.height / 2)
-  }
-
-  const scrollOptions: ScrollToOptions = {
-    top, left: 0,
-    // behavior: enableAnim ? 'smooth' : 'instant',
-    behavior: 'instant'
-  }
-
-  if (relativeTo) relativeTo.scroll(scrollOptions)
-  else window.scroll(scrollOptions)
-}
-
-/** 显示消息 */
-export function showNotify(
-  wrapElem: HTMLElement,
-  msg: string,
-  type: NotifyLevel,
-) {
-  const colors = { s: '#57d59f', e: '#ff6f6c', w: '#ffc721', i: '#2ebcfc' }
-  const timeout = 3000 // 持续显示时间 ms
-
-  const notifyElem = Utils.createElement(
-    `<div class="atk-notify atk-fade-in" style="background-color: ${colors[type]}"><span class="atk-notify-content"></span></div>`
-  )
-  const notifyContentEl = notifyElem.querySelector<HTMLElement>('.atk-notify-content')!
-  notifyContentEl.innerHTML = Utils.htmlEncode(msg).replace('\n', '<br/>')
-
-  wrapElem.appendChild(notifyElem)
-
-  const notifyRemove = () => {
-    notifyElem.classList.add('atk-fade-out')
-    setTimeout(() => {
-      notifyElem.remove()
-    }, 200)
-  }
-
-  let timeoutFn: number
-  if (timeout > 0) {
-    timeoutFn = window.setTimeout(() => {
-      notifyRemove()
-    }, timeout)
-  }
-
-  notifyElem.addEventListener('click', () => {
-    notifyRemove()
-    window.clearTimeout(timeoutFn)
-  })
-}
-
-/** fade 动画 */
-export function playFadeAnim(
-  elem: HTMLElement,
-  after?: () => void,
-  type: 'in' | 'out' = 'in'
-) {
-  elem.classList.add(`atk-fade-${type}`)
-  // 动画结束清除 class
-  const onAnimEnded = () => {
-    elem.classList.remove(`atk-fade-${type}`)
-    elem.removeEventListener('animationend', onAnimEnded)
-    if (after) after()
-  }
-  elem.addEventListener('animationend', onAnimEnded)
-}
-
-/** 渐入动画 */
-export function playFadeInAnim(elem: HTMLElement, after?: () => void) {
-  playFadeAnim(elem, after, 'in')
-}
-
-/** 渐出动画 */
-export function playFadeOutAnim(elem: HTMLElement, after?: () => void) {
-  playFadeAnim(elem, after, 'out')
-}
-
-/** 设置全局错误 */
-export function setError(parentElem: HTMLElement, html: string | HTMLElement | null, title: string = '<span class="atk-error-title">Artalk Error</span>') {
-  let elem = parentElem.querySelector<HTMLElement>('.atk-error-layer')
-  if (html === null) {
-    if (elem !== null) elem.remove()
-    return
-  }
-  if (!elem) {
-    elem = Utils.createElement(
-      `<div class="atk-error-layer">${title}<span class="atk-error-text"></span></div>`
-    )
-    parentElem.appendChild(elem)
-  }
-
-  const errorTextEl = elem.querySelector<HTMLElement>('.atk-error-text')!
-  errorTextEl.innerHTML = ''
-  if (html === null) return
-
-  if (html instanceof HTMLElement) {
-    errorTextEl.appendChild(html)
-  } else {
-    errorTextEl.innerText = html
-  }
-}
-
-export function getScrollBarWidth() {
-  const inner = document.createElement('p')
-  inner.style.width = '100%'
-  inner.style.height = '200px'
-
-  const outer = document.createElement('div')
-  outer.style.position = 'absolute'
-  outer.style.top = '0px'
-  outer.style.left = '0px'
-  outer.style.visibility = 'hidden'
-  outer.style.width = '200px'
-  outer.style.height = '150px'
-  outer.style.overflow = 'hidden'
-  outer.appendChild(inner)
-
-  document.body.appendChild(outer)
-  const w1 = inner.offsetWidth
-  outer.style.overflow = 'scroll'
-  let w2 = inner.offsetWidth
-  if (w1 === w2) w2 = outer.clientWidth
-
-  document.body.removeChild(outer)
-
-  return (w1 - w2)
-}

package/src/lib/user.ts

@@ -1,55 +0,0 @@
-import type { LocalUser } from '~/types'
-
-const LOCAL_USER_KEY = 'ArtalkUser'
-
-class User {
-  data: LocalUser
-  onUserChanged: ((user: LocalUser) => void) | null = null
-
-  constructor() {
-    // 从 localStorage 导入
-    const localUser = JSON.parse(window.localStorage.getItem(LOCAL_USER_KEY) || '{}')
-    this.data = {
-      nick: localUser.nick || '',
-      email: localUser.email || '',
-      link: localUser.link || '',
-      token: localUser.token || '',
-      isAdmin: localUser.isAdmin || false
-    }
-  }
-
-  /** 保存用户到 localStorage 中 */
-  update(obj: Partial<LocalUser> = {}) {
-    Object.entries(obj).forEach(([key, value]) => {
-      this.data[key] = value
-    })
-
-    window.localStorage.setItem(LOCAL_USER_KEY, JSON.stringify(this.data))
-    this.onUserChanged && this.onUserChanged(this.data)
-  }
-
-  public setOnUserChanged(fn: ((user: LocalUser) => void) | null) {
-    this.onUserChanged = fn
-  }
-
-  /**
-   * Logout
-   *
-   * @description Logout will clear login status, but not clear user data (nick, email, link)
-   */
-  logout() {
-    this.update({
-      token: '',
-      isAdmin: false
-    })
-  }
-
-  /** 是否已填写基本用户信息 */
-  checkHasBasicUserInfo() {
-    return !!this.data.nick && !!this.data.email
-  }
-}
-
-const UserInstance = new User()
-
-export default UserInstance