artalk 2.1.8 → 2.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "artalk",
-  "version": "2.1.8",
+  "version": "2.1.9",
   "license": "GPL-3.0",
   "description": "A Selfhosted Comment System",
   "keywords": [
@@ -22,16 +22,6 @@
   "jsdelivr": "./dist/Artalk.iife.js",
   "module": "./dist/Artalk.es.js",
   "types": "./types/index.d.ts",
-  "scripts": {
-    "dev": "vite",
-    "build": "yarn lint && vite build",
-    "build:demo": "vite build --config vite-demo.config.ts",
-    "serve": "vite preview",
-    "deploy": "gh-pages -d deploy",
-    "predeploy": "yarn run build && yarn run build:demo && yarn run copy:deploy",
-    "copy:deploy": "cp -r dist deploy && cp CNAME deploy",
-    "lint": "eslint --ext .js,.ts src"
-  },
   "devDependencies": {
     "@types/marked": "^4.0.3"
   },
@@ -39,5 +29,15 @@
     "hanabi": "^0.4.0",
     "insane": "^2.6.2",
     "marked": "^4.0.14"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "pnpm lint && vite build",
+    "build:demo": "vite build --config vite-demo.config.ts",
+    "serve": "vite preview",
+    "deploy": "gh-pages -d deploy",
+    "predeploy": "pnpm build && pnpm build:demo && pnpm copy:deploy",
+    "copy:deploy": "cp -r dist deploy && cp CNAME deploy",
+    "lint": "eslint --ext .js,.ts src"
   }
-}
+}

package/src/artalk.ts

@@ -12,6 +12,7 @@ import SidebarLayer from './components/sidebar-layer'
 import { GetLayerWrap } from './components/layer'
 import { EventPayloadMap, Handler } from '~/types/event'
 import Api from './api'
+import * as Utils from './lib/utils'
 
 /**
  * Artalk
@@ -59,6 +60,7 @@ export default class Artalk {
 
     // 组件初始化
     this.checkerLauncher = new CheckerLauncher(this.ctx)
+    Utils.initMarked(this.ctx) // 初始化 marked
 
     // 编辑器
     this.editor = new Editor(this.ctx)
@@ -80,6 +82,13 @@ export default class Artalk {
 
     // 其他
     this.initPV()
+
+    // 插件初始化
+    Artalk.Plugins.forEach(plugin => {
+      if (typeof plugin === 'function') {
+        plugin(this.ctx)
+      }
+    })
   }
 
   /** 事件绑定 · 初始化 */
@@ -180,4 +189,12 @@ export default class Artalk {
   public trigger<K extends keyof EventPayloadMap>(name: K, payload?: EventPayloadMap[K]) {
     this.ctx.trigger(name, payload, 'external')
   }
+
+  /** Plugins */
+  protected static Plugins: ((ctx: Context) => void)[] = []
+
+  /** Enable Plugin */
+  public static Use(plugin: ((ctx: Context) => void)) {
+    this.Plugins.push(plugin)
+  }
 }

package/src/components/editor.ts

@@ -247,7 +247,7 @@ export default class Editor extends Component {
       })
     })
 
-    this.initImgUploadBtn()
+    this.initImgUpload()
   }
 
   /** 关闭编辑器插件 */
@@ -260,11 +260,12 @@ export default class Editor extends Component {
   /** 允许的图片格式 */
   allowImgExts = ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'svg', 'webp']
 
-  /** 初始化图片上传按钮 */
-  initImgUploadBtn() {
+  /** 初始化图片上传功能 */
+  initImgUpload() {
     this.$imgUploadBtn = Utils.createElement(`<span class="atk-plug-btn">图片</span>`)
     this.$plugBtnWrap.querySelector('[data-plug-name="preview"]')!.before(this.$imgUploadBtn) // 显示在预览图标之前
 
+    // 按钮点击
     this.$imgUploadBtn.onclick = () => {
       // 选择图片
       const $input = document.createElement('input')
@@ -280,6 +281,17 @@ export default class Editor extends Component {
       $input.click() // 显示选择图片对话框
     }
 
+    // 统一从 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.$textarea.addEventListener('dragover', (evt) => {
@@ -288,12 +300,19 @@ export default class Editor extends Component {
     })
 
     this.$textarea.addEventListener('drop', (evt) => {
-      if (evt.dataTransfer?.files) {
+      const files = evt.dataTransfer?.files
+      if (files?.length) {
         evt.preventDefault()
-        for (let i = 0; i < evt.dataTransfer.files.length; i++) {
-          const file = evt.dataTransfer.files[i]
-          this.uploadImg(file)
-        }
+        uploadFromFileList(files)
+      }
+    })
+
+    // 粘贴图片
+    this.$textarea.addEventListener('paste', (evt) => {
+      const files = evt.clipboardData?.files
+      if (files?.length) {
+        evt.preventDefault()
+        uploadFromFileList(files)
       }
     })
   }
@@ -312,8 +331,18 @@ export default class Editor extends Component {
     const fileExt = /[^.]+$/.exec(file.name)
     if (!fileExt || !this.allowImgExts.includes(fileExt[0])) return
 
+    // 未登录提示
+    if (!this.ctx.user.checkHasBasicUserInfo()) {
+      this.showNotify('填入你的名字邮箱才能上传哦', 'w')
+      return
+    }
+
+    // 插入图片前换一行
+    let insertPrefix = '\n'
+    if (this.$textarea.value.trim() === '') insertPrefix = ''
+
     // 插入占位加载文字
-    const uploadPlaceholderTxt = `\n![](Uploading ${file.name}...)`
+    const uploadPlaceholderTxt = `${insertPrefix}![](Uploading ${file.name}...)`
     this.insertContent(uploadPlaceholderTxt)
 
     // 上传图片
@@ -326,20 +355,16 @@ export default class Editor extends Component {
     }
     if (!!resp && resp.img_url) {
       let imgURL = resp.img_url as string
-      if (imgURL.startsWith('.') || (imgURL.startsWith('/') && !imgURL.startsWith('//'))) {
-        // 若为相对路径，加上 artalk server
-        imgURL = `${this.ctx.conf.server.replace(/\/api\/?$/, '')}/${imgURL.replace(/^\//, '')}`
-      }
+
+      // 若为相对路径，加上 artalk server
+      if (!Utils.isValidURL(imgURL)) imgURL = Utils.getURLBasedOnApi(this.ctx, imgURL)
 
       // 上传成功插入图片
-      this.$textarea.value = this.$textarea.value.replace(uploadPlaceholderTxt, `\n![](${imgURL})`)
+      this.setContent(this.$textarea.value.replace(uploadPlaceholderTxt, `${insertPrefix}![](${imgURL})`))
     } else {
       // 上传失败删除加载文字
-      this.$textarea.value = this.$textarea.value.replace(uploadPlaceholderTxt, '')
+      this.setContent(this.$textarea.value.replace(uploadPlaceholderTxt, ''))
     }
-
-    // 更新内容保存到 localStorage
-    this.saveContent()
   }
 
   insertContent (val: string) {
@@ -376,7 +401,8 @@ export default class Editor extends Component {
     this.cancelReply()
   }
 
-  getContent () {
+  /** 获取最终用于 submit 的数据 */
+  getFinalContent () {
     let content = this.getContentOriginal()
 
     // 表情包处理
@@ -393,7 +419,7 @@ export default class Editor extends Component {
   }
 
   getContentMarked () {
-    return Utils.marked(this.ctx, this.getContent())
+    return Utils.marked(this.ctx, this.getFinalContent())
   }
 
   initBottomPart () {
@@ -452,7 +478,7 @@ export default class Editor extends Component {
   }
 
   async submit () {
-    if (this.getContent().trim() === '') {
+    if (this.getFinalContent().trim() === '') {
       this.$textarea.focus()
       return
     }
@@ -463,7 +489,7 @@ export default class Editor extends Component {
 
     try {
       const nComment = await new Api(this.ctx).add({
-        content: this.getContent(),
+        content: this.getFinalContent(),
         nick: this.user.data.nick,
         email: this.user.data.email,
         link: this.user.data.link,

package/src/components/list.ts

@@ -42,9 +42,12 @@ export default class List extends ListLite {
     // 操作按钮
     this.initListActionBtn()
 
-    // 下拉选择层
     this.$commentCount = this.$el.querySelector('.atk-comment-count')!
-    this.initDropdown()
+
+    // 评论列表排序 Dropdown 下拉选择层
+    if (this.ctx.conf.listSort) {
+      this.initDropdown()
+    }
 
     // copyright
     this.$el.querySelector<HTMLElement>('.atk-copyright')!.innerHTML = `Powered By <a href="https://artalk.js.org" target="_blank" title="Artalk v${ARTALK_VERSION}">Artalk</a>`

package/src/components/sidebar-layer.ts

@@ -64,14 +64,15 @@ export default class SidebarLayer extends Component {
       this.$iframe = Utils.createElement<HTMLIFrameElement>('<iframe></iframe>')
 
       const baseURL = (import.meta.env.MODE === 'development')  ? 'http://localhost:23367/'
-        : `${this.conf.server.replace(/\/$/, '')}/../sidebar/`
+        : Utils.getURLBasedOnApi(this.ctx, 'sidebar/')
       const userData = encodeURIComponent(JSON.stringify(this.ctx.user.data))
 
-      // 测试是否能访问
+      const location = window.location
       this.iframeLoad(`${baseURL}`
         + `?pageKey=${encodeURIComponent(this.conf.pageKey)}`
         + `&site=${encodeURIComponent(this.conf.site || '')}`
         + `&user=${userData}`
+        + `&referer=${encodeURIComponent(`${location.protocol}//${location.host}${location.pathname}`)}`
         + `${((this.conf.darkMode) ? `&darkMode=1` : ``)}`)
 
       this.$iframeWrap.append(this.$iframe)

package/src/context.ts

@@ -1,3 +1,4 @@
+import { marked as libMarked } from 'marked'
 import User from './lib/user'
 import ArtalkConfig from '~/types/artalk-config'
 import { EventPayloadMap, Event, EventScopeType, Handler } from '~/types/event'
@@ -39,4 +40,6 @@ export default class Context {
       .map((evt) => evt.handler)
       .forEach((handler) => handler(payload as any))
   }
+
+  public markedInstance!: typeof libMarked
 }

package/src/defaults.ts

@@ -17,6 +17,7 @@ const defaults: ArtalkConfig = {
   vote: true,
   voteDown: false,
   uaBadge: true,
+  listSort: true,
   pvEl: '#ArtalkPV',
   flatMode: 'auto',
   maxNesting: 3,

package/src/lib/utils.ts

@@ -140,43 +140,44 @@ export function versionCompare(a: string, b: string) {
   return 0
 }
 
-let markedInstance: typeof libMarked
-export function marked(ctx: Context, src: string): string {
-  if (!markedInstance) {
-    const renderer = new libMarked.Renderer()
-    const linkRenderer = renderer.link
-    renderer.link = (href, title, text) => {
-      const localLink = href?.startsWith(`${window.location.protocol}//${window.location.hostname}`);
-      const html = linkRenderer.call(renderer as any, href, title, text);
-      return html.replace(/^<a /, `<a target="_blank" ${!localLink ? `rel="noreferrer noopener nofollow"` : ''} `);
-    }
-
-    // @see https://github.com/markedjs/marked/blob/4afb228d956a415624c4e5554bb8f25d047676fe/src/Tokenizer.js#L329
-    const nMarked = libMarked
-    libMarked.setOptions({
-      renderer,
-      highlight: (code) => hanabi(code),
-      pedantic: false,
-      gfm: true,
-      breaks: true,
-      smartLists: true,
-      smartypants: true,
-      xhtml: false,
-      sanitize: true,
-      sanitizer: (html) => insane(html, {
-        ...insane.defaults,
-        allowedAttributes: {
-          ...insane.defaults.allowedAttributes,
-          img: ['src', 'atk-emoticon']
-        },
-      }),
-      silent: true,
-    })
-
-    markedInstance = nMarked
+/** 初始化 marked */
+export function initMarked(ctx: Context) {
+  const renderer = new libMarked.Renderer()
+  const linkRenderer = renderer.link
+  renderer.link = (href, title, text) => {
+    const localLink = href?.startsWith(`${window.location.protocol}//${window.location.hostname}`);
+    const html = linkRenderer.call(renderer as any, href, title, text);
+    return html.replace(/^<a /, `<a target="_blank" ${!localLink ? `rel="noreferrer noopener nofollow"` : ''} `);
   }
 
-  return markedInstance.parse(src)
+  // @see https://github.com/markedjs/marked/blob/4afb228d956a415624c4e5554bb8f25d047676fe/src/Tokenizer.js#L329
+  const nMarked = libMarked
+  libMarked.setOptions({
+    renderer,
+    highlight: (code) => hanabi(code),
+    pedantic: false,
+    gfm: true,
+    breaks: true,
+    smartLists: true,
+    smartypants: true,
+    xhtml: false,
+    sanitize: true,
+    sanitizer: (html) => insane(html, {
+      ...insane.defaults,
+      allowedAttributes: {
+        ...insane.defaults.allowedAttributes,
+        img: ['src', 'atk-emoticon']
+      },
+    }),
+    silent: true,
+  })
+
+  ctx.markedInstance = nMarked
+}
+
+/** 解析 markdown */
+export function marked(ctx: Context, src: string): string {
+  return ctx.markedInstance.parse(src)
 }
 
 /** 获取修正后的 UserAgent */
@@ -203,3 +204,23 @@ export async function getCorrectUserAgent() {
 
   return uaRaw
 }
+
+/** 是否为完整的 URL */
+export function isValidURL(urlRaw: string) {
+  // @link https://www.rfc-editor.org/rfc/rfc3986
+  let url: URL
+  try {
+    url = new URL(urlRaw)
+  } catch (_) { return false }
+  return url.protocol === "http:" || url.protocol === "https:"
+}
+
+/** 获取基于 conf.server 的 URL */
+export function getURLBasedOnApi(ctx: Context, path: string) {
+  return `${ctx.conf.server.replace(/\/api\/?$/, '')}/${path.replace(/^\//, '')}`
+}
+
+/** 获取基于某个 baseURL 的 URL */
+export function getURLBasedOn(baseURL: string, path: string) {
+  return `${baseURL.replace(/\/$/, '')}/${path.replace(/^\//, '')}`
+}

package/src/style/comment.less

@@ -212,6 +212,8 @@
         display: flex;
         flex-direction: row;
         align-items: center;
+        flex-wrap: wrap;
+        margin-bottom: -15px;
 
         & > span {
           color: var(--at-color-meta);
@@ -220,6 +222,7 @@
           display: inline-flex;
           cursor: pointer;
           user-select: none;
+          margin-bottom: 15px;
 
           &.atk-error, &.atk-error:hover {
             color: var(--at-color-red);

package/src/style/list.less

@@ -127,7 +127,10 @@
   & > .atk-list-body {
     min-height: 150px;
 
-    & > .atk-list-comments-wrap {
+    .atk-list-comments-wrap {
+      .atk-main-editor {
+        margin-top: -1px;
+      }
     }
   }
 

package/tsconfig.json

@@ -21,7 +21,8 @@
     "paths": {
       "~/*": ["./*"],
       "@/*": ["./src/*"]
-    }
+    },
+    "types": ["vite/client"]
   },
   "include": ["./src", "./types"]
 }

package/types/artalk-config.d.ts

@@ -80,6 +80,9 @@ export default interface ArtalkConfig {
   /** 显示 UA 徽标 */
   uaBadge?: boolean
 
+  /** 评论列表排序功能 (显示 Dropdown) */
+  listSort?: boolean
+
   /** 图片上传功能 */
   imgUpload?: boolean
 

package/types/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />