artalk 2.6.4 → 2.7.1

package/src/lib/marked.ts

@@ -1,133 +1,72 @@
-import { marked as libMarked } from 'marked'
-import insane from 'insane'
-import hanabi from 'hanabi'
-import Context from '~/types/context'
+import { marked as libMarked, MarkedOptions } from 'marked'
 
-let instance: (typeof libMarked)|undefined
+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 }
 
-  const renderer = new libMarked.Renderer()
-  const orgLinkRenderer = renderer.link
-  renderer.link = (href, title, text) => {
-    const localLink = href?.startsWith(`${window.location.protocol}//${window.location.hostname}`);
-    const html = orgLinkRenderer.call(renderer as any, href, title, text);
-    return html.replace(/^<a /, `<a target="_blank" ${!localLink ? `rel="noreferrer noopener nofollow"` : ''} `);
-  }
-
-  renderer.code = (block, lang) => {
-    // 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 = hanabi(block)
-    }
-
-    return `<pre rel="${realLang}">\n`
-      + `<code class="hljs language-${realLang}">${colorized.replace(/&amp;/g, '&')}</code>\n`
-      + `</pre>`
-  }
-
   // @see https://github.com/markedjs/marked/blob/4afb228d956a415624c4e5554bb8f25d047676fe/src/Tokenizer.js#L329
-  const nMarked = libMarked
   libMarked.setOptions({
-    renderer,
-    pedantic: false,
-    gfm: true,
-    breaks: true,
-    smartLists: true,
-    smartypants: true,
-    xhtml: false,
-    sanitize: false,
-    silent: true,
+    renderer: getRenderer(),
+    ...markedOptions
   })
 
-  instance = nMarked
+  instance = libMarked
 }
 
 /** 解析 markdown */
-export default function marked(ctx: Context, src: string): string {
+export default function marked(src: string): string {
   let markedContent = getInstance()?.parse(src)
-  if (!markedContent) {
-    // 无 Markdown 模式简单处理
-    markedContent = src
-      // .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
-      .replace(/```\s*([^]+?.*?[^]+?[^]+?)```/g, (_, code) => `<pre><code>${hanabi(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>')
+  if (!markedContent) { // 无 Markdown 模式简单处理
+    markedContent = simpleMarked(src)
   }
 
-  // @link https://github.com/markedjs/marked/discussions/1232
-  // @link https://gist.github.com/lionel-rowe/bb384465ba4e4c81a9c8dada84167225
-  let dest = insane(markedContent, {
-    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
-    }
-  })
+  let dest = sanitize(markedContent)
 
   // 内容替换器
-  ctx.markedReplacers.forEach((replacer) => {
-    if (typeof replacer === 'function') dest = replacer(dest)
+  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

@@ -0,0 +1,57 @@
+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,3 +1,4 @@
+import type { NotifyLevel } from '~/types'
 import * as Utils from './utils'
 
 /** 显示加载 */
@@ -53,29 +54,35 @@ export function isVisible(el: HTMLElement, viewport: HTMLElement = document.docu
 }
 
 /** 滚动到元素中心 */
-export function scrollIntoView(elem: HTMLElement, enableAnim: boolean = true) {
-  const top =
-    Utils.getOffset(elem).top +
-    Utils.getHeight(elem) / 2 -
-    document.documentElement.clientHeight / 2
-
-  if (enableAnim) {
-    window.scroll({
-      top: top > 0 ? top : 0,
-      left: 0,
-      // behavior: 'smooth',
-    })
+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 {
-    // 无动画
-    window.scroll(0, top > 0 ? top : 0)
+    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: 's' | 'e' | 'w' | 'i',
+  type: NotifyLevel,
 ) {
   const colors = { s: '#57d59f', e: '#ff6f6c', w: '#ffc721', i: '#2ebcfc' }
   const timeout = 3000 // 持续显示时间 ms

package/src/lib/user.ts

@@ -1,13 +1,14 @@
-import { LocalUser } from "~/types/artalk-config"
-import Context from '~/types/context'
+import type { LocalUser } from '~/types'
+
+const LOCAL_USER_KEY = 'ArtalkUser'
 
 class User {
-  public ctx?: Context
-  public data: LocalUser
+  data: LocalUser
+  onUserChanged: ((user: LocalUser) => void) | null = null
 
-  public constructor() {
+  constructor() {
     // 从 localStorage 导入
-    const localUser = JSON.parse(window.localStorage.getItem('ArtalkUser') || '{}')
+    const localUser = JSON.parse(window.localStorage.getItem(LOCAL_USER_KEY) || '{}')
     this.data = {
       nick: localUser.nick || '',
       email: localUser.email || '',
@@ -17,22 +18,26 @@ class User {
     }
   }
 
-  public setContext(ctx: Context) {
-    this.ctx = ctx
-  }
-
   /** 保存用户到 localStorage 中 */
-  public update(obj: Partial<LocalUser> = {}) {
+  update(obj: Partial<LocalUser> = {}) {
     Object.entries(obj).forEach(([key, value]) => {
       this.data[key] = value
     })
 
-    window.localStorage.setItem('ArtalkUser', JSON.stringify(this.data))
-    this.ctx?.trigger('user-changed', this.data)
+    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
   }
 
-  /** 注销，清除用户登录状态 */
-  public logout() {
+  /**
+   * Logout
+   *
+   * @description Logout will clear login status, but not clear user data (nick, email, link)
+   */
+  logout() {
     this.update({
       token: '',
       isAdmin: false
@@ -40,7 +45,7 @@ class User {
   }
 
   /** 是否已填写基本用户信息 */
-  public checkHasBasicUserInfo() {
+  checkHasBasicUserInfo() {
     return !!this.data.nick && !!this.data.email
   }
 }

package/src/lib/utils.ts

@@ -1,5 +1,3 @@
-import Context from '~/types/context'
-
 export function createElement<E extends HTMLElement = HTMLElement>(htmlStr: string = ''): E {
   const div = document.createElement('div')
   div.innerHTML = htmlStr.trim()
@@ -29,11 +27,25 @@ export function getQueryParam(name: string) {
   return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
 }
 
-export function getOffset(el: HTMLElement) {
-  const rect = el.getBoundingClientRect()
+export function getOffset(el: HTMLElement, relativeTo?: HTMLElement) {
+  const getOffsetRecursive = (element: HTMLElement): { top: number, left: number } => {
+    const rect = element.getBoundingClientRect()
+    const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft
+    const scrollTop = window.pageYOffset || document.documentElement.scrollTop
+    return {
+      top: rect.top + scrollTop,
+      left: rect.left + scrollLeft
+    }
+  }
+
+  const elOffset = getOffsetRecursive(el)
+  if (!relativeTo) return elOffset
+
+  const relativeToOffset = getOffsetRecursive(relativeTo)
+
   return {
-    top: rect.top + window.scrollY,
-    left: rect.left + window.scrollX
+    top: elOffset.top - relativeToOffset.top,
+    left: elOffset.left - relativeToOffset.left
   }
 }
 
@@ -55,7 +67,7 @@ export function dateFormat(date: Date) {
   return `${vYear}-${vMonth}-${vDay}`
 }
 
-export function timeAgo(date: Date, ctx: Context) {
+export function timeAgo(date: Date, $t: Function = (n: string) => n) {
   try {
     const oldTime = date.getTime()
     const currTime = new Date().getTime()
@@ -74,17 +86,17 @@ export function timeAgo(date: Date, ctx: Context) {
           // 计算相差秒数
           const leave3 = leave2 % (60 * 1000) // 计算分钟数后剩余的毫秒数
           const seconds = Math.round(leave3 / 1000)
-          if (seconds < 10) return ctx.$t('now')
-          return `${seconds} ${ctx.$t('seconds')}`
+          if (seconds < 10) return $t('now')
+          return `${seconds} ${$t('seconds')}`
         }
-        return `${minutes} ${ctx.$t('minutes')}`
+        return `${minutes} ${$t('minutes')}`
       }
-      return `${hours} ${ctx.$t('hours')}`
+      return `${hours} ${$t('hours')}`
     }
-    if (days < 0) return ctx.$t('now')
+    if (days < 0) return $t('now')
 
     if (days < 8) {
-      return `${days} ${ctx.$t('days')}`
+      return `${days} ${$t('days')}`
     }
 
     return dateFormat(date)
@@ -115,9 +127,8 @@ export function onImagesLoaded($container: HTMLElement, event: Function) {
   }
 }
 
-export function getGravatarURL(ctx: Context, emailMD5: string) {
-  const { mirror, params } = ctx.conf.gravatar
-  return `${mirror.replace(/\/$/, '')}/${emailMD5}?${params.replace(/^\?/, '')}`
+export function getGravatarURL(opts: { params: string, mirror: string, emailMD5: string }) {
+  return `${opts.mirror.replace(/\/$/, '')}/${opts.emailMD5}?${opts.params.replace(/^\?/, '')}`
 }
 
 export function sleep(ms: number) {
@@ -185,8 +196,8 @@ export function isValidURL(urlRaw: string) {
 }
 
 /** 获取基于 conf.server 的 URL */
-export function getURLBasedOnApi(ctx: Context, path: string) {
-  return getURLBasedOn(ctx.conf.server, path)
+export function getURLBasedOnApi(opts: { base: string, path: string }) {
+  return getURLBasedOn(opts.base, opts.path)
 }
 
 /** 获取基于某个 baseURL 的 URL */

package/src/list/comment.ts

@@ -0,0 +1,20 @@
+import type { ContextApi, CommentData } from '~/types'
+import Comment from '../comment/comment'
+
+export function createComment(ctx: ContextApi, comment: CommentData, ctxComments: CommentData[]): Comment {
+  const instance = new Comment(ctx, comment, {
+    isFlatMode: ctx.getData().getListLastFetch()?.params.flatMode!,
+    afterRender: () => {
+      ctx.trigger('comment-rendered', instance)
+    },
+    onDelete: (c: Comment) => {
+      ctx.getData().deleteComment(c.getID())
+    },
+    replyTo: (comment.rid ? ctxComments.find(c => c.id === comment.rid) : undefined)
+  })
+
+  // 渲染元素
+  instance.render()
+
+  return instance
+}

package/src/list/layout.ts

@@ -0,0 +1,120 @@
+import type { CommentData } from '~/types'
+import * as Ui from '@/lib/ui'
+import Comment from '../comment/comment'
+import * as ListNest from './nest'
+
+export interface LayoutOptions {
+  $commentsWrap: HTMLElement
+  nestSortBy: ListNest.SortByType
+  nestMax: number
+  flatMode: boolean
+
+  createCommentNode(comment: CommentData, ctxComments: CommentData[]): Comment
+  findCommentNode(id: number): Comment|undefined
+  getCommentDataList(): CommentData[]
+}
+
+export default class ListLayout {
+  constructor(private options: LayoutOptions) {}
+
+  // TODO refactor `if syntax` to strategy pattern
+  import(comments: CommentData[]) {
+    if (this.options.flatMode) {
+      comments.forEach((commentData: CommentData) => {
+        this.putCommentFlatMode(commentData, comments, 'append')
+      })
+    } else {
+      this.importCommentsNestMode(comments)
+    }
+  }
+
+  insert(comment: CommentData) {
+    if (!this.options.flatMode) {
+      this.insertCommentNest(comment)
+    } else {
+      this.insertCommentFlatMode(comment)
+    }
+  }
+
+  // 导入评论 · 嵌套模式
+  private importCommentsNestMode(srcData: CommentData[]) {
+    // 遍历 root 评论
+    const rootNodes = ListNest.makeNestCommentNodeList(srcData, this.options.nestSortBy, this.options.nestMax)
+    rootNodes.forEach((rootNode: ListNest.CommentNode) => {
+      const rootC = this.options.createCommentNode(rootNode.comment, srcData)
+
+      // 显示并播放渐入动画
+      this.options.$commentsWrap?.appendChild(rootC.getEl())
+      rootC.getRender().playFadeAnim()
+
+      // 加载子评论
+      const loadChildren = (parentC: Comment, parentNode: ListNest.CommentNode) => {
+        parentNode.children.forEach((node: ListNest.CommentNode) => {
+          const childD = node.comment
+          const childC = this.options.createCommentNode(childD, srcData)
+
+          // 插入到父评论中
+          parentC.putChild(childC)
+
+          // 递归加载子评论
+          loadChildren(childC, node)
+        })
+      }
+      loadChildren(rootC, rootNode)
+
+      // 限高检测
+      rootC.getRender().checkHeightLimit()
+    })
+  }
+
+  /** 导入评论 · 平铺模式 */
+  private putCommentFlatMode(cData: CommentData, ctxData: CommentData[], insertMode: 'append'|'prepend') {
+    if (cData.is_collapsed) cData.is_allow_reply = false
+    const comment = this.options.createCommentNode(cData, ctxData)
+
+    // 可见评论添加到界面
+    // 注：不可见评论用于显示 “引用内容”
+    if (cData.visible) {
+      if (insertMode === 'append') this.options.$commentsWrap?.append(comment.getEl())
+      if (insertMode === 'prepend') this.options.$commentsWrap?.prepend(comment.getEl())
+      comment.getRender().playFadeAnim()
+    }
+
+    // 平铺评论插入后 · 内容限高检测
+    comment.getRender().checkHeightLimit()
+
+    return comment
+  }
+
+  private insertCommentNest(commentData: CommentData) {
+    // 嵌套模式
+    const comment = this.options.createCommentNode(commentData, this.options.getCommentDataList())
+
+    if (commentData.rid === 0) {
+      // root评论 新增
+      this.options.$commentsWrap?.prepend(comment.getEl())
+    } else {
+      // 子评论 新增
+      const parent = this.options.findCommentNode(commentData.rid)
+      if (parent) {
+        parent.putChild(comment, (this.options.nestSortBy === 'DATE_ASC' ? 'append' : 'prepend'))
+
+        // 若父评论存在 “子评论部分” 限高，取消限高
+        comment.getParents().forEach((p) => {
+          p.getRender().heightLimitRemoveForChildren()
+        })
+      }
+    }
+
+    comment.getRender().checkHeightLimit()
+
+    Ui.scrollIntoView(comment.getEl()) // 滚动到可以见
+    comment.getRender().playFadeAnim() // 播放评论渐出动画
+  }
+
+  private insertCommentFlatMode(commentData: CommentData) {
+    // 平铺模式
+    const comment = this.putCommentFlatMode(commentData, this.options.getCommentDataList(), 'prepend')
+    Ui.scrollIntoView(comment.getEl()) // 滚动到可见
+  }
+}

package/src/list/list.html

@@ -11,7 +11,9 @@
       </span>
     </div>
   </div>
-  <div class="atk-list-body"></div>
+  <div class="atk-list-body">
+    <div class="atk-list-comments-wrap"></div>
+  </div>
   <div class="atk-list-footer">
     <div class="atk-copyright"></div>
   </div>