artalk 2.4.4 → 2.5.0

package/src/editor/funcs.ts

@@ -0,0 +1,96 @@
+import Editor from './editor'
+import { createMover } from './mover'
+import { createPlugManager } from './plug-manager'
+import { createReplyManager } from './reply'
+import { createEditModeManager } from './edit-mode'
+import { createSubmitManager } from './submit'
+
+const EditorFuncs = {
+  localStorage, header, textarea, submitBtn, submitManager,
+  plugs, mover, replyManager, editModeManager,
+}
+
+export default function initEditorFuncs(editor: Editor) {
+  Object.entries(EditorFuncs).forEach(([k, init]) => {
+    init(editor)
+  })
+}
+
+// ================== Editor Functions ======================
+
+function localStorage(editor: Editor) {
+  const localContent = window.localStorage.getItem('ArtalkContent') || ''
+  if (localContent.trim() !== '') {
+    editor.showNotify(editor.$t('restoredMsg'), 'i')
+    editor.setContent(localContent)
+  }
+
+  editor.getUI().$textarea.addEventListener('input', () => (editor.saveToLocalStorage()))
+}
+
+function header(editor: Editor) {
+  const $inputs = editor.getHeaderInputEls()
+  Object.entries($inputs).forEach(([key, $input]) => {
+    $input.value = editor.ctx.user.data[key] || ''
+    $input.addEventListener('input', () => onHeaderInput(editor, key, $input))
+
+    // 设置 Placeholder
+    $input.placeholder = `${editor.$t(key as any)}`
+  })
+}
+
+function onHeaderInput(editor: Editor, field: string, $input: HTMLInputElement) {
+  if (editor.isEditMode) return // 评论编辑模式，不修改个人信息
+
+  editor.ctx.user.update({
+    [field]: $input.value.trim()
+  })
+
+  editor.getPlugs()?.triggerHeaderInputEvt(field, $input)
+}
+
+function textarea(editor: Editor) {
+  // 占位符
+  editor.getUI().$textarea.placeholder = editor.ctx.conf.placeholder || editor.$t('placeholder')
+
+  // 修复按下 Tab 输入的内容
+  editor.getUI().$textarea.addEventListener('keydown', (e) => {
+    const keyCode = e.keyCode || e.which
+
+    if (keyCode === 9) {
+      e.preventDefault()
+      editor.insertContent('\t')
+    }
+  })
+
+  // 输入框高度随内容而变化
+  editor.getUI().$textarea.addEventListener('input', () => {
+    editor.adjustTextareaHeight()
+  })
+}
+
+function submitBtn(editor: Editor) {
+  editor.refreshSendBtnText()
+  editor.getUI().$submitBtn.addEventListener('click', () => (editor.submit()))
+}
+
+function plugs(editor: Editor) {
+  editor.setPlugs(createPlugManager(editor))
+}
+
+function mover(editor: Editor) {
+  if (!editor.conf.editorTravel) return
+  editor.setMover(createMover(editor))
+}
+
+function replyManager(editor: Editor) {
+  editor.setReplyManager(createReplyManager(editor))
+}
+
+function editModeManager(editor: Editor) {
+  editor.setEditModeManager(createEditModeManager(editor))
+}
+
+function submitManager(editor: Editor) {
+  editor.setSubmitManager(createSubmitManager(editor))
+}

package/src/editor/mover.ts

@@ -0,0 +1,43 @@
+import Editor from './editor'
+import * as Utils from '../lib/utils'
+
+export interface Mover {
+  editor: Editor
+  isMoved: boolean
+  move(afterEl: HTMLElement): void
+  back(): void
+}
+
+export function createMover(editor: Editor): Mover {
+  const m: Mover = {
+    editor,
+    isMoved: false,
+    move: (el) => move(m, el),
+    back: () => back(m)
+  }
+
+  return m
+}
+
+function move(m: Mover, afterEl: HTMLElement) {
+  if (m.isMoved) return
+  m.isMoved = true
+
+  const editorEl = m.editor.getUI().$el
+
+  editorEl.after(Utils.createElement('<div class="atk-editor-travel-placeholder"></div>'))
+
+  const $travelPlace = Utils.createElement('<div></div>')
+  afterEl.after($travelPlace)
+  $travelPlace.replaceWith(editorEl)
+
+  editorEl.classList.add('atk-fade-in') // 添加渐入动画
+}
+
+function back(m: Mover) {
+  if (!m.isMoved) return
+  m.isMoved = false
+  m.editor.ctx.$root.querySelector('.atk-editor-travel-placeholder')?.replaceWith(m.editor.getUI().$el)
+
+  m.editor.cancelReply()  // 取消回复
+}

package/src/editor/plug-manager.ts

@@ -0,0 +1,172 @@
+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

@@ -18,31 +18,49 @@ abstract class EditorPlug {
   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
   }
 
-  protected registerHeaderInputEvt(action: (key: string, $input: HTMLElement) => void) {
-    this.onHeaderInput = action
+  /** 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
   }

package/src/editor/plugs/{emoticons-plug.less → emoticons-plug.scss}

@@ -3,7 +3,7 @@
   width: 100%;
 
   & > .atk-grp-wrap {
-    .atk-slim-scrollbar();
+    @extend .atk-slim-scrollbar;
     overflow-y: scroll;
     overflow-x: hidden;
     height: 100%; // calc(100% - 30px);
@@ -27,9 +27,10 @@
         padding: 5px;
         cursor: pointer;
         user-select: none;
-        border-radius: (@block-radius / 2);
-        font-size: 16px;
+        border-radius: calc($block-radius / 2);
+        font-size: 15px;
         min-width: 35px;
+        margin: 2px;
 
         & > img {
           max-height: 100%;
@@ -60,7 +61,7 @@
       float: left;
       display: block;
       cursor: pointer;
-      font-size: @font-size;
+      font-size: $font-size;
 
       &:hover,
       &.active {

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

@@ -1,4 +1,4 @@
-import './emoticons-plug.less'
+import './emoticons-plug.scss'
 
 import * as Utils from '~/src/lib/utils'
 import * as Ui from '~/src/lib/ui'
@@ -29,6 +29,7 @@ export default class EmoticonsPlug extends EditorPlug {
 
     this.registerPanel(`<div class="atk-editor-plug-emoticons"></div>`)
     this.registerBtn(this.ctx.$t('emoticon'))
+    this.registerContentTransformer((raw) => this.transEmoticonImageText(raw))
 
     // 表情包预加载
     window.setTimeout(() => {

package/src/editor/plugs/header-input-plug.ts

@@ -14,11 +14,11 @@ export default class HeaderInputPlug extends EditorPlug {
     })
 
     // Link URL 自动补全协议
-    this.editor.$link.addEventListener('change', () => {
-      const link = this.editor.$link.value.trim()
+    this.editor.getUI().$link.addEventListener('change', () => {
+      const link = this.editor.getUI().$link.value.trim()
       if (!!link && !/^(http|https):\/\//.test(link)) {
-        this.editor.$link.value = `https://${link}`
-        this.ctx.user.update({ link: this.editor.$link.value })
+        this.editor.getUI().$link.value = `https://${link}`
+        this.ctx.user.update({ link: this.editor.getUI().$link.value })
       }
     })
   }
@@ -58,7 +58,7 @@ export default class HeaderInputPlug extends EditorPlug {
 
         // 自动填入 link
         if (data.user && data.user.link) {
-          this.editor.$link.value = data.user.link
+          this.editor.getUI().$link.value = data.user.link
           this.ctx.user.update({ link: data.user.link })
         }
       })

package/src/editor/plugs/{preview-plug.less → preview-plug.scss}

@@ -3,5 +3,5 @@
   overflow-x: hidden;
   height: 100%;
   width: 100%;
-  padding: 10px (10px + 5px);
+  padding: 10px calc(10px + 5px);
 }

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

@@ -1,4 +1,4 @@
-import './preview-plug.less'
+import './preview-plug.scss'
 
 import Editor from '../editor'
 import EditorPlug from './editor-plug'
@@ -15,8 +15,12 @@ export default class PreviewPlug extends EditorPlug {
     this.registerPanel(`<div class="atk-editor-plug-preview"></div>`)
 
     let btnText = this.editor.$t('preview')
-    if (this.ctx.markedInstance) 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>`
+    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() {
@@ -26,8 +30,8 @@ export default class PreviewPlug extends EditorPlug {
       const event = () => {
         this.updateContent()
       }
-      this.editor.$textarea.addEventListener('input', event)
-      this.editor.$textarea.addEventListener('change', event)
+      this.editor.getUI().$textarea.addEventListener('input', event)
+      this.editor.getUI().$textarea.addEventListener('change', event)
       this.isBind = true
     }
   }

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

@@ -33,12 +33,9 @@ export default class UploadPlug extends EditorPlug {
       $input.click() // 显示选择图片对话框
     }
 
-    this.ctx.on('conf-loaded', () => {
-      if (!this.ctx.conf.imgUpload) {
-        this.getBtn()!.setAttribute('atk-only-admin-show', '')
-        this.ctx.checkAdminShowEl()
-      }
-    })
+    if (!this.ctx.conf.imgUpload) {
+      this.getBtn()!.setAttribute('atk-only-admin-show', '')
+    }
 
     // 统一从 FileList 获取文件并上传图片方法
     const uploadFromFileList = (files?: FileList) => {
@@ -53,12 +50,12 @@ export default class UploadPlug extends EditorPlug {
     // 拖拽图片
     // @link https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop
     // 阻止浏览器的默认释放行为
-    this.editor.$textarea.addEventListener('dragover', (evt) => {
+    this.editor.getUI().$textarea.addEventListener('dragover', (evt) => {
       evt.stopPropagation()
       evt.preventDefault()
     })
 
-    this.editor.$textarea.addEventListener('drop', (evt) => {
+    this.editor.getUI().$textarea.addEventListener('drop', (evt) => {
       const files = evt.dataTransfer?.files
       if (files?.length) {
         evt.preventDefault()
@@ -67,7 +64,7 @@ export default class UploadPlug extends EditorPlug {
     })
 
     // 粘贴图片
-    this.editor.$textarea.addEventListener('paste', (evt) => {
+    this.editor.getUI().$textarea.addEventListener('paste', (evt) => {
       const files = evt.clipboardData?.files
       if (files?.length) {
         evt.preventDefault()
@@ -88,7 +85,7 @@ export default class UploadPlug extends EditorPlug {
 
     // 插入图片前换一行
     let insertPrefix = '\n'
-    if (this.editor.$textarea.value.trim() === '') insertPrefix = ''
+    if (this.editor.getUI().$textarea.value.trim() === '') insertPrefix = ''
 
     // 插入占位加载文字
     const uploadPlaceholderTxt = `${insertPrefix}![](Uploading ${file.name}...)`
@@ -98,7 +95,7 @@ export default class UploadPlug extends EditorPlug {
     let resp: any
     try {
       if (!this.ctx.conf.imgUploader) {
-        // 使用 ArtalkGo 进行图片上传
+        // 使用 Artalk 进行图片上传
         resp = await this.ctx.getApi().upload.imgUpload(file)
       } else {
         // 使用自定义的图片上传器
@@ -115,10 +112,10 @@ export default class UploadPlug extends EditorPlug {
       if (!Utils.isValidURL(imgURL)) imgURL = Utils.getURLBasedOnApi(this.ctx, imgURL)
 
       // 上传成功插入图片
-      this.editor.setContent(this.editor.$textarea.value.replace(uploadPlaceholderTxt, `${insertPrefix}![](${imgURL})`))
+      this.editor.setContent(this.editor.getUI().$textarea.value.replace(uploadPlaceholderTxt, `${insertPrefix}![](${imgURL})`))
     } else {
       // 上传失败删除加载文字
-      this.editor.setContent(this.editor.$textarea.value.replace(uploadPlaceholderTxt, ''))
+      this.editor.setContent(this.editor.getUI().$textarea.value.replace(uploadPlaceholderTxt, ''))
     }
   }
 }

package/src/editor/reply.ts

@@ -0,0 +1,62 @@
+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()
+}