artalk 2.4.3 → 2.5.0

package/dist/src/editor/plugs/editor-plug.d.ts

@@ -15,12 +15,24 @@ declare abstract class EditorPlug {
     protected $panel?: HTMLElement;
     protected $btn?: HTMLElement;
     onHeaderInput?: (key: string, $input: HTMLElement) => void;
+    contentTransformer?: (rawContent: string) => string;
+    onContentUpdated?: (content: string) => void;
     constructor(editor: Editor);
+    /** Name of plug */
     static Name: string;
+    /** Register plug panel will provide a plug el */
     protected registerPanel(html?: string): HTMLElement;
+    /** Register plug btn will add a btn on the bottom of editor */
     protected registerBtn(html: string): HTMLElement;
-    protected registerHeaderInputEvt(action: (key: string, $input: HTMLElement) => void): void;
+    /** Register the event of header input is changed */
+    protected registerHeaderInputEvt(func: (key: string, $input: HTMLElement) => void): void;
+    /** Register the content transformer to handle the content of the last submit by the editor */
+    protected registerContentTransformer(func: (raw: string) => string): void;
+    /** Register the event of editor content is updated */
+    protected registerContentUpdatedEvt(func: (content: string) => void): void;
+    /** Get panel element of plug */
     getPanel(): HTMLElement | undefined;
+    /** Get btn element of plug */
     getBtn(): HTMLElement | undefined;
 }
 export default EditorPlug;

package/dist/src/editor/reply.d.ts

@@ -0,0 +1,9 @@
+import type { CommentData } from '../../types/artalk-data';
+import Editor from './editor';
+export interface ReplyManager {
+    editor: Editor;
+    comment?: CommentData;
+    setReply(comment: CommentData, $comment: HTMLElement, scroll?: boolean): void;
+    cancelReply(): void;
+}
+export declare function createReplyManager(editor: Editor): ReplyManager;

package/dist/src/editor/submit.d.ts

@@ -0,0 +1,16 @@
+import type { CommentData } from '../../types/artalk-data';
+import Editor from './editor';
+export interface SubmitManager {
+    editor: Editor;
+    do: () => Promise<void>;
+    customs: CustomSubmit[];
+    registerCustom(c: CustomSubmit): void;
+}
+export declare function createSubmitManager(editor: Editor): SubmitManager;
+interface CustomSubmit {
+    activeCond: () => void;
+    pre?: () => void;
+    req?: () => Promise<CommentData>;
+    post?: (nComment: CommentData) => void;
+}
+export {};

package/dist/src/editor/ui.d.ts

@@ -0,0 +1,25 @@
+declare const Sel: {
+    $header: string;
+    $nick: string;
+    $email: string;
+    $link: string;
+    $textareaWrap: string;
+    $textarea: string;
+    $bottom: string;
+    $submitBtn: string;
+    $notifyWrap: string;
+    $plugBtnWrap: string;
+    $plugPanelWrap: string;
+};
+export interface EditorUI extends Record<keyof typeof Sel, HTMLElement> {
+    $el: HTMLElement;
+    $nick: HTMLInputElement;
+    $email: HTMLInputElement;
+    $link: HTMLInputElement;
+    $textarea: HTMLTextAreaElement;
+    $submitBtn: HTMLButtonElement;
+    $sendReply?: HTMLElement;
+    $editCancelBtn?: HTMLElement;
+}
+export declare function render(): EditorUI;
+export {};

package/dist/src/i18n/index.d.ts

@@ -1,5 +1,6 @@
 import en from './en';
-export declare type I18n = typeof en;
+export type I18n = typeof en;
+export type I18nKeys = keyof I18n;
 export declare const internal: {
     en: {
         placeholder: string;
@@ -275,14 +276,17 @@ export declare function defineLocaleExternal(lang: string, locale: I18n, aliases
     reqAborted: string;
 };
 /**
- * get a locale object by language name
+ * find a locale object by language name
  */
-declare function getLocaleSet(lang: string): I18n;
+export declare function findLocaleSet(lang: string): I18n;
 /**
- * get a i18n message by key
+ * Set system locale
  */
-declare function getI18n(locale: I18n | string, key: keyof I18n, args?: {
+export declare function setLocale(locale: I18n | string): void;
+/**
+ * Get an i18n message by key
+ */
+export declare function t(key: I18nKeys, args?: {
     [key: string]: string;
 }): string;
-export { getLocaleSet };
-export default getI18n;
+export default t;

package/dist/src/layer/index.d.ts

@@ -1,3 +1,3 @@
-import Layer, { GetLayerWrap } from './layer';
+import Layer, { getLayerWrap } from './layer';
 export default Layer;
-export { GetLayerWrap };
+export { getLayerWrap };

package/dist/src/layer/layer.d.ts

@@ -26,7 +26,7 @@ export default class Layer extends Component {
     dispose(): void;
     checkCleanLayer(): void;
 }
-export declare function GetLayerWrap(ctx: Context): {
+export declare function getLayerWrap(): {
     $wrap: HTMLElement;
     $mask: HTMLElement;
 };

package/dist/src/lib/checker/captcha-renders.d.ts

@@ -0,0 +1,5 @@
+import { CheckerCtx } from '.';
+/** 图片验证码 */
+export declare function imgBody(checker: CheckerCtx): HTMLElement;
+/** iframe 形式的通用验证服务 */
+export declare function iframeBody(checker: CheckerCtx): HTMLElement;

package/dist/src/lib/checker/index.d.ts

@@ -1,5 +1,7 @@
 import Context from '../../../types/context';
 import Layer from '../../layer';
+import type Api from '../../api';
+import type User from '../user';
 export interface CheckerCaptchaPayload extends CheckerPayload {
     imgData?: string;
     iframe?: string;
@@ -15,28 +17,34 @@ export interface CheckerPayload {
 export default class CheckerLauncher {
     ctx: Context;
     launched: Checker[];
-    captchaConf: {
-        val?: string;
-        imgData?: string;
-        iframe?: string;
-    };
     constructor(ctx: Context);
     checkCaptcha(payload: CheckerCaptchaPayload): void;
     checkAdmin(payload: CheckerPayload): void;
-    fire(checker: Checker, payload: CheckerPayload): void;
+    fire(checker: Checker, payload: CheckerPayload, postFire?: (c: CheckerCtx) => void): void;
     private close;
 }
 export interface Checker {
     el?: HTMLElement;
     inputType?: 'password' | 'text';
-    body: (launcher: CheckerLauncher, ctx: CheckerCtx) => HTMLElement;
-    request: (launcher: CheckerLauncher, ctx: CheckerCtx, inputVal: string) => Promise<string>;
-    onSuccess?: (launcher: CheckerLauncher, ctx: CheckerCtx, data: string, inputVal: string, formEl: HTMLElement) => void;
-    onError?: (launcher: CheckerLauncher, ctx: CheckerCtx, err: any, inputVal: string, formEl: HTMLElement) => void;
+    body: (checker: CheckerCtx) => HTMLElement;
+    request: (checker: CheckerCtx, inputVal: string) => Promise<string>;
+    onSuccess?: (checker: CheckerCtx, respData: string, inputVal: string, formEl: HTMLElement) => void;
+    onError?: (checker: CheckerCtx, err: any, inputVal: string, formEl: HTMLElement) => void;
+}
+interface CheckerStore {
+    val?: string;
+    img_data?: string;
+    iframe?: string;
 }
 export interface CheckerCtx {
+    get<K extends keyof CheckerStore>(key: K): CheckerStore[K];
+    set<K extends keyof CheckerStore>(key: K, val: CheckerStore[K]): void;
+    getCtx(): Context;
+    getApi(): Api;
+    getUser(): User;
     getLayer(): Layer;
     hideInteractInput(): void;
     triggerSuccess(): void;
     cancel(): void;
 }
+export {};

package/dist/src/lib/dark-mode.d.ts

@@ -0,0 +1,4 @@
+import type Context from '../../types/context';
+export declare function syncDarkModeConf(ctx: Context): void;
+export declare function setDarkMode(ctx: Context, darkMode: boolean | 'auto', alterConf?: boolean): void;
+export declare function updateClassName(ctx: Context, darkMode: boolean): void;

package/dist/src/lib/marked.d.ts

@@ -0,0 +1,9 @@
+import { marked as libMarked } from 'marked';
+import Context from '../../types/context';
+export type TMarked = typeof libMarked;
+/** Get Marked instance */
+export declare function getInstance(): typeof libMarked | undefined;
+/** 初始化 marked */
+export declare function initMarked(): void;
+/** 解析 markdown */
+export default function marked(ctx: Context, src: string): string;

package/dist/src/lib/utils.d.ts

@@ -16,11 +16,7 @@ export declare function onImagesLoaded($container: HTMLElement, event: Function)
 export declare function getGravatarURL(ctx: Context, emailMD5: string): string;
 export declare function sleep(ms: number): Promise<unknown>;
 /** 版本号比较（a < b :-1 | 0 | b < a :1） */
-export declare function versionCompare(a: string, b: string): 0 | 1 | -1;
-/** 初始化 marked */
-export declare function initMarked(ctx: Context): void;
-/** 解析 markdown */
-export declare function marked(ctx: Context, src: string): string;
+export declare function versionCompare(a: string, b: string): 1 | 0 | -1;
 /** 获取修正后的 UserAgent */
 export declare function getCorrectUserAgent(): Promise<string>;
 /** 是否为完整的 URL */

package/dist/src/list/list-lite.d.ts

@@ -2,13 +2,18 @@ import { ListData, CommentData, NotifyData } from '../../types/artalk-data';
 import Context from '../../types/context';
 import Component from '../lib/component';
 import Comment from '../comment';
-import Pagination from '../components/pagination';
-import ReadMoreBtn from '../components/read-more-btn';
+import PgHolder, { TPgMode } from './paginator';
 import * as ListNest from './list-nest';
 export default class ListLite extends Component {
+    /** 列表评论集区域元素 */
     protected $commentsWrap: HTMLElement;
+    /** 最后一次请求得到的列表数据 */
     protected data?: ListData;
+    /** 是否处于加载中状态 */
     protected isLoading: boolean;
+    /** 配置是否已加载 */
+    private confLoaded;
+    /** 无评论显示文字 */
     noCommentText?: string;
     /** 嵌套模式下的排序方式 */
     private _nestSortBy?;
@@ -19,36 +24,37 @@ export default class ListLite extends Component {
     get flatMode(): boolean;
     set flatMode(val: boolean);
     /** 分页方式 */
-    _pageMode?: 'pagination' | 'read-more';
+    _pageMode?: TPgMode;
     get pageMode(): 'pagination' | 'read-more';
     set pageMode(val: 'pagination' | 'read-more');
+    /** 分页方式持有者 */
+    pgHolder?: PgHolder;
     /** 每页数量 (每次请求获取量) */
     private _pageSize?;
     get pageSize(): number;
     set pageSize(val: number);
+    /** 监听指定元素上的滚动 */
     scrollListenerAt?: HTMLElement;
+    /** 翻页归位到指定元素 */
     repositionAt?: HTMLElement;
-    protected pagination?: Pagination;
-    protected readMoreBtn?: ReadMoreBtn;
-    protected autoLoadScrollEvent?: any;
     renderComment?: (comment: Comment) => void;
     paramsEditor?: (params: any) => void;
     onAfterLoad?: (data: ListData) => void;
+    /** 未读标记 */
     protected unread: NotifyData[];
     unreadHighlight?: boolean;
     constructor(ctx: Context);
     getData(): ListData | undefined;
     clearData(): void;
+    getLoading(): boolean;
     getCommentsWrapEl(): HTMLElement;
-    /** 加载动画 */
+    /** 设置加载状态 */
     setLoading(val: boolean, isFirstLoad?: boolean): void;
     /** 评论获取 */
     fetchComments(offset: number): Promise<void>;
-    private confLoaded;
     protected onLoad(data: ListData, offset: number): void;
     /** 分页模式 */
     private refreshPagination;
-    private initPagination;
     /** 错误处理 */
     protected onError(msg: any, offset: number, errData?: any): void;
     /** 刷新界面 */
@@ -68,6 +74,4 @@ export default class ListLite extends Component {
     updateComment(commentData: CommentData): void;
     /** 更新未读数据 */
     updateUnread(notifies: NotifyData[]): void;
-    /** 版本检测 */
-    versionCheck(name: 'frontend' | 'backend', needVersion: string, curtVersion: string): boolean;
 }

package/dist/src/list/list-nest.d.ts

@@ -1,10 +1,10 @@
 import { CommentData } from '../../types/artalk-data';
-export declare type CommentNode = {
+export type CommentNode = {
     id: number;
     comment: CommentData;
     children: CommentNode[];
     parent?: CommentNode;
     level: number;
 };
-export declare type SortByType = 'DATE_DESC' | 'DATE_ASC' | 'SRC_INDEX' | 'VOTE_UP_DESC';
+export type SortByType = 'DATE_DESC' | 'DATE_ASC' | 'SRC_INDEX' | 'VOTE_UP_DESC';
 export declare function makeNestCommentNodeList(srcData: CommentData[], sortBy?: SortByType, nestMax?: number): CommentNode[];

package/dist/src/list/list-ui.d.ts

@@ -0,0 +1,7 @@
+import ListLite from './list-lite';
+/** 界面刷新 */
+export declare function refreshUI(list: ListLite): void;
+/** 构建错误提示界面 */
+export declare function renderErrorDialog(list: ListLite, errMsg: string, errData?: any): HTMLElement;
+/** 版本检测弹窗 */
+export declare function versionCheckDialog(list: ListLite, feVer: string, beVer: string): boolean;

package/dist/src/list/paginator/adaptors/index.d.ts

@@ -0,0 +1,12 @@
+import { IPgHolderConf, TPgMode } from '../index';
+declare const Adaptors: Record<TPgMode, IPgAdaptor<any>>;
+export default Adaptors;
+export interface IPgAdaptor<T> {
+    instance: T;
+    el: HTMLElement;
+    createInstance(conf: IPgHolderConf): [T, HTMLElement];
+    setLoading(val: boolean): void;
+    update(offset: number, total: number): void;
+    next(): void;
+    showErr?(msg: string): void;
+}

package/dist/src/list/paginator/adaptors/pagination.d.ts

@@ -0,0 +1,9 @@
+import Pagination from '../../../components/pagination';
+import { IPgAdaptor } from '.';
+interface IPaginationAdaptor extends IPgAdaptor<Pagination> {
+}
+/**
+ * 翻页形式的分页
+ */
+declare const _default: IPaginationAdaptor;
+export default _default;

package/dist/src/list/paginator/adaptors/read-more.d.ts

@@ -0,0 +1,10 @@
+import ReadMoreBtn from '../../../components/read-more-btn';
+import { IPgAdaptor } from '.';
+interface IReadMoreAdaptor extends IPgAdaptor<ReadMoreBtn> {
+    autoLoadScrollEvent?: () => void;
+}
+/**
+ * 阅读更多形式的分页
+ */
+declare const _default: IReadMoreAdaptor;
+export default _default;

package/dist/src/list/paginator/holder.d.ts

@@ -0,0 +1,16 @@
+import { IPgHolderConf, TPgMode } from '.';
+/**
+ * 分页方式持有者（调度器）
+ */
+export default class PgHolder {
+    private conf;
+    constructor(conf: IPgHolderConf);
+    getAdaptor(): import("./adaptors").IPgAdaptor<any>;
+    init(): void;
+    setLoading(val: boolean): void;
+    update(offset: number, total: number): void;
+    getEl(): HTMLElement;
+    showErr(msg: string): void;
+    setMode(val: TPgMode): void;
+    next(): void;
+}

package/dist/src/list/paginator/index.d.ts

@@ -0,0 +1,10 @@
+import ListLite from '../list-lite';
+import PgHolder from './holder';
+export type TPgMode = 'pagination' | 'read-more';
+export interface IPgHolderConf {
+    list: ListLite;
+    mode: TPgMode;
+    total: number;
+    pageSize: number;
+}
+export default PgHolder;

package/dist/src/service.d.ts

@@ -0,0 +1,40 @@
+import Context from '../types/context';
+import CheckerLauncher from './lib/checker';
+import Api from './api';
+import Editor from './editor';
+import SidebarLayer from './layer/sidebar-layer';
+import User from './lib/user';
+import ListLite from './list/list-lite';
+/**
+ * Services
+ *
+ * @description
+ * 当函数有返回值时，该值将自动添加到 Context 类作为一个 private 成员的值，
+ * 这个成员的名称与函数名对应。可在 Context 类中访问该对象（同事类）。
+ */
+declare const services: {
+    i18n(ctx: Context): void;
+    markdown(): void;
+    user(ctx: Context): User;
+    api(ctx: Context): Api;
+    checkerLauncher(ctx: Context): CheckerLauncher;
+    editor(ctx: Context): Editor;
+    list(ctx: Context): ListLite | undefined;
+    layer(ctx: Context): void;
+    sidebarLayer(ctx: Context): SidebarLayer;
+    eventsDefault(ctx: Context): void;
+    darkMode(ctx: Context): void;
+};
+export default services;
+type TServiceImps = typeof services;
+type TObjectWithFuncs = {
+    [k: string]: (...args: any) => any;
+};
+type TKeysOnlyReturn<T extends TObjectWithFuncs, V> = {
+    [K in keyof T]: ReturnType<T[K]> extends V ? K : never;
+}[keyof T];
+type TOmitConditions = TKeysOnlyReturn<TServiceImps, void>;
+type TServiceInjectors = Omit<TServiceImps, TOmitConditions>;
+export type TInjectedServices = {
+    [K in keyof TServiceInjectors]: ReturnType<TServiceInjectors[K]>;
+};

package/dist/types/artalk-config.d.ts

@@ -26,7 +26,7 @@ export default interface ArtalkConfig {
   /** 发送按钮文字 */
   sendBtn: string
 
-  /** 评论框旅行（显示在待回复评论后面） */
+  /** 评论框穿梭（显示在待回复评论后面） */
   editorTravel: boolean
 
   /** 表情包 */
@@ -60,6 +60,9 @@ export default interface ArtalkConfig {
 
     /** 子评论区域限高 */
     children: number
+
+    /** 滚动限高 */
+    scrollable: boolean
   }
 
   /** 评论投票按钮 */
@@ -77,7 +80,7 @@ export default interface ArtalkConfig {
   /** PV 数绑定元素 Selector */
   pvEl: string
 
-  /** 暗黑模式 */
+  /** 夜间模式 */
   darkMode: boolean|'auto'
 
   /** 请求超时（单位：秒） */

package/dist/types/artalk-data.d.ts

@@ -44,6 +44,9 @@ export interface CommentData {
   /** 徽章颜色 */
   badge_color?: string
 
+  /** IP 归属地 */
+  ip_region?: string
+
   /** 是否允许回复 */
   is_allow_reply?: boolean
 
@@ -221,7 +224,4 @@ export interface ApiVersionData {
 
   /** API 程序 CommitHash */
   commit_hash: string
-
-    /** API 程序要求前端最小版本 */
-  fe_min_version: string
 }

package/dist/types/context.d.ts

@@ -1,15 +1,14 @@
-import { marked as libMarked } from 'marked'
 import ArtalkConfig from './artalk-config'
 import { CommentData, NotifyData } from './artalk-data'
 import { EventPayloadMap, Event, EventScopeType, Handler } from './event'
 import { internal as internalLocales, I18n } from '../src/i18n'
 import Api from '../src/api'
 import User from '../src/lib/user'
-import Editor from '../src/editor'
 import Comment from '../src/comment'
-import ListLite from '../src/list/list-lite'
-import SidebarLayer, { SidebarShowPayload } from '../src/layer/sidebar-layer'
-import CheckerLauncher, { CheckerCaptchaPayload, CheckerPayload } from '../src/lib/checker'
+import { SidebarShowPayload } from '../src/layer/sidebar-layer'
+import { CheckerCaptchaPayload, CheckerPayload } from '../src/lib/checker'
+import type { TMarked } from '../src/lib/marked'
+import type { TInjectedServices } from '../src/service'
 
 /**
  * Context 接口
@@ -17,31 +16,26 @@ import CheckerLauncher, { CheckerCaptchaPayload, CheckerPayload } from '../src/l
  * (面向接口的编程)
  */
 export default interface ContextApi {
-  /** Context 唯一标识 */
-  cid: number
-
   /** Artalk 根元素对象 */
   $root: HTMLElement
 
+  /** 依赖注入函数 */
+  inject<K extends keyof TInjectedServices>(depName: K, obj: TInjectedServices[K]): void
+
   /** 配置对象 */
+  // TODO 修改为 getConf() 和 setConf()
   conf: ArtalkConfig
 
   /** 用户对象 */
+  // TODO 修改为 getUser()
   user: User
 
   /** marked 依赖对象 */
-  markedInstance?: typeof libMarked
+  getMarkedInstance(): TMarked | undefined
 
   /** marked 内容替换器 */
   markedReplacers: ((raw: string) => string)[]
 
-  /* 设置持有的同事类 (中介者模式) */
-  setApi(api: Api): void
-  setEditor(editor: Editor): void
-  setList(list?: ListLite): void
-  setSidebarLayer(list: SidebarLayer): void
-  setCheckerLauncher(checkerLauncher: CheckerLauncher): void
-
   /** 获取 API 以供 HTTP 请求 */
   getApi(): Api
 
@@ -141,7 +135,7 @@ export default interface ContextApi {
   /** i18n 翻译 */
   $t(key: keyof I18n, args?: {[key: string]: string}): string
 
-  /** 设置暗黑模式 */
+  /** 设置夜间模式 */
   setDarkMode(darkMode: boolean): void
 
   /** 更新配置 */

package/dist/types/global.d.ts

@@ -0,0 +1 @@
+declare const ARTALK_LITE: boolean

package/package.json

@@ -1,7 +1,6 @@
 {
   "name": "artalk",
-  "version": "2.4.3",
-  "backendMinVersion": "2.3.0",
+  "version": "2.5.0",
   "license": "LGPL-3.0",
   "description": "A Selfhosted Comment System",
   "keywords": [
@@ -14,7 +13,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/ArtalkJS/Artalk.git",
-    "directory": "packages/artalk"
+    "directory": "ui/packages/artalk"
   },
   "homepage": "https://artalk.js.org",
   "bugs": "https://github.com/ArtalkJS/Artalk/issue",
@@ -24,17 +23,17 @@
   "module": "./dist/Artalk.es.js",
   "types": "./dist/src/main.d.ts",
   "devDependencies": {
-    "@types/marked": "4.0.6"
+    "@types/marked": "4.0.8"
   },
   "dependencies": {
+    "abortcontroller-polyfill": "^1.7.5",
     "hanabi": "^0.4.0",
     "insane": "^2.6.2",
-    "marked": "^4.0.19",
-    "abortcontroller-polyfill": "^1.7.3"
+    "marked": "^4.2.12"
   },
   "scripts": {
     "dev": "vite",
-    "build": "pnpm lint && vite build && pnpm build:lite && pnpm build:i18n",
+    "build": "vite build && pnpm build:lite && pnpm build:i18n",
     "build:lite": "vite build --config vite-lite.config.ts",
     "build:i18n": "node scripts/build-i18n.mjs",
     "build:demo": "vite build --config vite-demo.config.ts",

package/src/api/system.ts

@@ -1,5 +1,6 @@
 import ArtalkConfig from '~/types/artalk-config'
 import ApiBase from './api-base'
+import { handleBackendRefConf } from '../config'
 
 /**
  * 系统 API
@@ -10,22 +11,12 @@ export default class SystemApi extends ApiBase {
     const data = await this.POST<any>(`/conf`)
     const conf = (data.frontend_conf || {}) as ArtalkConfig
 
-    // Patch: `emoticons` config string to json
-    if (conf.emoticons && typeof conf.emoticons === "string") {
-      conf.emoticons = conf.emoticons.trim()
-      if (conf.emoticons.startsWith("[") || conf.emoticons.startsWith("{")) {
-        conf.emoticons = JSON.parse(conf.emoticons) // pase json
-      } else if (conf.emoticons === "false") {
-        conf.emoticons = false
-      }
-    }
-
-    return conf
+    return handleBackendRefConf(conf)
   }
 
   /** 获取配置数据 */
   public async getSettings() {
-    const data = await this.POST<string>('/admin/setting-get')
+    const data = await this.POST<{custom: string, template: string}>('/admin/setting-get')
     return data
   }