artalk 2.6.4 → 2.7.0

package/dist/src/main.d.ts

@@ -1,2 +1,4 @@
 import Artalk from './artalk';
+import * as ArtalkType from '../types';
+export { ArtalkType };
 export default Artalk;

package/dist/src/plugins/admin-only-elem.d.ts

@@ -0,0 +1,2 @@
+import type { ArtalkPlugin } from '../../types';
+export declare const AdminOnlyElem: ArtalkPlugin;

package/dist/src/plugins/conf-remoter.d.ts

@@ -0,0 +1,2 @@
+import type { ArtalkPlugin } from '../../types';
+export declare const ConfRemoter: ArtalkPlugin;

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

@@ -0,0 +1,2 @@
+import type { ArtalkPlugin } from '../../types';
+export declare const DarkMode: ArtalkPlugin;

package/dist/src/plugins/editor/_kit.d.ts

@@ -0,0 +1,27 @@
+import type { PlugManager } from '../editor-kit';
+import type EditorPlug from "./_plug";
+/**
+ * PlugKit provides a set of methods to help you develop editor plug
+ */
+export default class PlugKit {
+    private plugs;
+    constructor(plugs: PlugManager);
+    /** Use the editor */
+    useEditor(): import("../../../types").EditorApi;
+    /** Use the context of global */
+    useGlobalCtx(): import("../../../types").ContextApi;
+    /** Use the config of Artalk */
+    useConf(): import("../../../types").ArtalkConfig;
+    /** Use the http api client */
+    useApi(): import("../../api").default;
+    /** Use the ui of editor */
+    useUI(): import("../../editor/ui").EditorUI;
+    /** Use the events in editor scope */
+    useEvents(): import("../../lib/event-manager").default<import("../editor-kit").EditorEventPayloadMap>;
+    /** Listen the event when plug is mounted */
+    useMounted(func: () => void): void;
+    /** Listen the event when plug is unmounted */
+    useUnmounted(func: () => void): void;
+    /** Use the deps of other plug */
+    useDeps<T extends typeof EditorPlug>(plug: T): InstanceType<T> | undefined;
+}

package/dist/src/plugins/editor/_plug.d.ts

@@ -0,0 +1,29 @@
+import type { CommentData, EditorState } from '../../../types';
+import type PlugKit from './_kit';
+/**
+ * Editor 插件
+ */
+interface EditorPlug {
+    $btn?: HTMLElement;
+    $panel?: HTMLElement;
+    contentTransformer?(rawContent: string): string;
+    editorStateEffectWhen?: EditorState;
+    editorStateEffect?(comment: CommentData): () => void;
+}
+declare class EditorPlug {
+    protected kit: PlugKit;
+    constructor(kit: PlugKit);
+    /** Use plug btn will add a btn on the bottom of editor */
+    useBtn(html?: string): HTMLElement;
+    /** Use plug panel will show the panel when btn is clicked */
+    usePanel(html?: string): HTMLElement;
+    /** Use the content transformer to handle the content of the last submit by the editor */
+    useContentTransformer(func: (raw: string) => string): void;
+    /** Listen the event of panel show */
+    usePanelShow(func: () => void): void;
+    /** Listen the event of panel hide */
+    usePanelHide(func: () => void): void;
+    /** Use editor state modifier */
+    useEditorStateEffect(stateName: EditorState, effectFn: (comment: CommentData) => () => void): void;
+}
+export default EditorPlug;

package/dist/src/plugins/editor/_sample.d.ts

@@ -0,0 +1,5 @@
+import EditorPlug from './_plug';
+import type PlugKit from './_kit';
+export default class SamplePlug extends EditorPlug {
+    constructor(kit: PlugKit);
+}

package/dist/src/plugins/editor/closable.d.ts

@@ -0,0 +1,7 @@
+import EditorPlug from './_plug';
+import type PlugKit from './_kit';
+export default class Closable extends EditorPlug {
+    constructor(kit: PlugKit);
+    private open;
+    private close;
+}

package/dist/src/{editor/plugs/emoticons-plug.d.ts → plugins/editor/emoticons.d.ts}

@@ -1,19 +1,13 @@
-import { EmoticonListData } from '../../../types/artalk-data';
-import EditorPlug from './editor-plug';
-import Editor from '../editor';
-export default class EmoticonsPlug extends EditorPlug {
-    editor: Editor;
-    static Name: string;
-    protected $panel: HTMLElement;
-    emoticons: EmoticonListData;
-    loadingTask: Promise<void> | null;
-    $grpWrap: HTMLElement;
-    $grpSwitcher: HTMLElement;
-    constructor(editor: Editor);
-    onPanelShow(): void;
-    onPanelHide(): void;
-    isListLoaded: boolean;
-    isImgLoaded: boolean;
+import EditorPlug from './_plug';
+import type PlugKit from './_kit';
+export default class Emoticons extends EditorPlug {
+    private emoticons;
+    private loadingTask;
+    private $grpWrap;
+    private $grpSwitcher;
+    constructor(kit: PlugKit);
+    private isListLoaded;
+    private isImgLoaded;
     loadEmoticonsData(): Promise<void>;
     private handleData;
     /** 远程加载 */

package/dist/src/plugins/editor/header-event.d.ts

@@ -0,0 +1,6 @@
+import EditorPlug from './_plug';
+import type PlugKit from './_kit';
+export default class HeaderEvent extends EditorPlug {
+    private get $inputs();
+    constructor(kit: PlugKit);
+}

package/dist/src/plugins/editor/header-link.d.ts

@@ -0,0 +1,6 @@
+import EditorPlug from './_plug';
+import type PlugKit from './_kit';
+export default class HeaderLink extends EditorPlug {
+    constructor(kit: PlugKit);
+    private onLinkInputChange;
+}

package/dist/src/plugins/editor/header-user.d.ts

@@ -0,0 +1,16 @@
+import EditorPlug from './_plug';
+import type PlugKit from './_kit';
+export default class HeaderUser extends EditorPlug {
+    constructor(kit: PlugKit);
+    private query;
+    /**
+     * Fetch user info from server
+     */
+    private fetchUserInfo;
+    /**
+     * Function called when user info fetched
+     *
+     * @param data The response data from server
+     */
+    private onUserInfoFetched;
+}

package/dist/src/plugins/editor/index.d.ts

@@ -0,0 +1,6 @@
+import type { ArtalkConfig } from '../../../types';
+import type EditorPlug from './_plug';
+/** The default enabled plugs */
+export declare const ENABLED_PLUGS: (typeof EditorPlug)[];
+/** Get the name list of disabled plugs */
+export declare function getDisabledPlugByConf(conf: ArtalkConfig): (typeof EditorPlug)[];

package/dist/src/plugins/editor/local-storage.d.ts

@@ -0,0 +1,6 @@
+import type PlugKit from './_kit';
+import EditorPlug from './_plug';
+export default class LocalStorage extends EditorPlug {
+    constructor(kit: PlugKit);
+    save(): void;
+}

package/dist/src/plugins/editor/mover.d.ts

@@ -0,0 +1,6 @@
+import EditorPlug from './_plug';
+export default class Mover extends EditorPlug {
+    private isMoved;
+    move(afterEl: HTMLElement): void;
+    back(): void;
+}

package/dist/src/plugins/editor/preview.d.ts

@@ -0,0 +1,7 @@
+import EditorPlug from './_plug';
+import type PlugKit from './_kit';
+export default class Preview extends EditorPlug {
+    private isPlugPanelShow;
+    constructor(kit: PlugKit);
+    updateContent(): void;
+}

package/dist/src/plugins/editor/state-edit.d.ts

@@ -0,0 +1,11 @@
+import type PlugKit from './_kit';
+import EditorPlug from './_plug';
+export default class StateEdit extends EditorPlug {
+    private comment?;
+    constructor(kit: PlugKit);
+    private edit;
+    private cancelEdit;
+    private originalSubmitBtnText;
+    private updateSubmitBtnText;
+    private restoreSubmitBtnText;
+}

package/dist/src/plugins/editor/state-reply.d.ts

@@ -0,0 +1,8 @@
+import EditorPlug from './_plug';
+import type PlugKit from './_kit';
+export default class StateReply extends EditorPlug {
+    private comment?;
+    constructor(kit: PlugKit);
+    private setReply;
+    private cancelReply;
+}

package/dist/src/plugins/editor/submit-add.d.ts

@@ -0,0 +1,18 @@
+import type { CommentData } from '../../../types';
+import type PlugKit from './_kit';
+export default class SubmitAddPreset {
+    private kit;
+    constructor(kit: PlugKit);
+    reqAdd(): Promise<CommentData>;
+    getSubmitAddParams(): {
+        content: string;
+        nick: string;
+        email: string;
+        link: string;
+        rid: number;
+        page_key: string;
+        page_title: string;
+        site_name: string;
+    };
+    postSubmitAdd(commentNew: CommentData): void;
+}

package/dist/src/plugins/editor/submit-btn.d.ts

@@ -0,0 +1,5 @@
+import EditorPlug from './_plug';
+import type PlugKit from './_kit';
+export default class SubmitBtn extends EditorPlug {
+    constructor(kit: PlugKit);
+}

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

@@ -0,0 +1,17 @@
+import type { CommentData } from '../../../types';
+import EditorPlug from './_plug';
+import type PlugKit from './_kit';
+interface CustomSubmit {
+    activeCond: () => void;
+    pre?: () => void;
+    req?: () => Promise<CommentData>;
+    post?: (nComment: CommentData) => void;
+}
+export default class Submit extends EditorPlug {
+    private customs;
+    private defaultPreset;
+    constructor(kit: PlugKit);
+    registerCustom(c: CustomSubmit): void;
+    private do;
+}
+export {};

package/dist/src/plugins/editor/textarea.d.ts

@@ -0,0 +1,8 @@
+import EditorPlug from './_plug';
+import type PlugKit from './_kit';
+export default class Textarea extends EditorPlug {
+    constructor(kit: PlugKit);
+    private onKeydown;
+    private onInput;
+    adaptiveHeightByContent(): void;
+}

package/dist/src/plugins/editor/upload.d.ts

@@ -0,0 +1,9 @@
+import type PlugKit from './_kit';
+import EditorPlug from './_plug';
+export default class Upload extends EditorPlug {
+    private $imgUploadInput?;
+    constructor(kit: PlugKit);
+    private init;
+    private initDragImg;
+    uploadImg(file: File): Promise<void>;
+}

package/dist/src/plugins/editor-kit.d.ts

@@ -0,0 +1,42 @@
+import type { EditorApi, ArtalkPlugin } from '../../types';
+import EventManager from '../lib/event-manager';
+import EditorPlug from './editor/_plug';
+export interface EditorEventPayloadMap {
+    'mounted': undefined;
+    'unmounted': undefined;
+    'header-input': {
+        field: string;
+        $input: HTMLInputElement;
+    };
+    'header-change': {
+        field: string;
+        $input: HTMLInputElement;
+    };
+    'content-updated': string;
+    'panel-show': EditorPlug;
+    'panel-hide': EditorPlug;
+    'panel-close': undefined;
+    'editor-close': undefined;
+    'editor-open': undefined;
+}
+export declare const EditorKit: ArtalkPlugin;
+export declare class PlugManager {
+    editor: EditorApi;
+    private plugs;
+    private openedPlug;
+    private events;
+    getPlugs(): EditorPlug[];
+    getEvents(): EventManager<EditorEventPayloadMap>;
+    private clear;
+    constructor(editor: EditorApi);
+    private loadPluginUI;
+    /** Load the plug btn and plug panel on editor ui */
+    private loadPluginItem;
+    get<T extends typeof EditorPlug>(plug: T): InstanceType<T> | undefined;
+    /** Open the editor plug panel */
+    openPlugPanel(plug: EditorPlug): void;
+    /** Close the editor plug panel */
+    closePlugPanel(): void;
+    /** Get the content which is transformed by plugs */
+    getTransformedContent(rawContent: string): string;
+}

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

@@ -0,0 +1,2 @@
+import type { ArtalkPlugin } from '../../types';
+export declare const DefaultPlugins: ArtalkPlugin[];

package/dist/src/plugins/list/copyright.d.ts

@@ -0,0 +1,2 @@
+import type { ArtalkPlugin } from '../../../types';
+export declare const Copyright: ArtalkPlugin;

package/dist/src/plugins/list/count.d.ts

@@ -0,0 +1,2 @@
+import type { ArtalkPlugin } from '../../../types';
+export declare const Count: ArtalkPlugin;

package/dist/src/plugins/list/dropdown.d.ts

@@ -0,0 +1,2 @@
+import type { ArtalkPlugin } from '../../../types';
+export declare const Dropdown: ArtalkPlugin;

package/dist/src/plugins/list/error-dialog.d.ts

@@ -0,0 +1,2 @@
+import type { ArtalkPlugin } from '../../../types';
+export declare const ErrorDialog: ArtalkPlugin;

package/dist/src/plugins/list/fetch.d.ts

@@ -0,0 +1,2 @@
+import type { ArtalkPlugin } from '../../../types';
+export declare const Fetch: ArtalkPlugin;

package/dist/src/plugins/list/goto-first.d.ts

@@ -0,0 +1,3 @@
+import type { ArtalkPlugin } from '../../../types';
+/** List scroll to the first comment */
+export declare const GotoFirst: ArtalkPlugin;

package/dist/src/plugins/list/goto.d.ts

@@ -0,0 +1,2 @@
+import type { ArtalkPlugin } from '../../../types';
+export declare const Goto: ArtalkPlugin;

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

@@ -0,0 +1,3 @@
+import type { ArtalkPlugin } from '../../../types';
+declare const ListPlugins: ArtalkPlugin[];
+export { ListPlugins };

package/dist/src/plugins/list/loading.d.ts

@@ -0,0 +1,2 @@
+import type { ArtalkPlugin } from '../../../types';
+export declare const Loading: ArtalkPlugin;

package/dist/src/plugins/list/no-comment.d.ts

@@ -0,0 +1,2 @@
+import type { ArtalkPlugin } from '../../../types';
+export declare const NoComment: ArtalkPlugin;

package/dist/src/plugins/list/reach-bottom.d.ts

@@ -0,0 +1,2 @@
+import type { ArtalkPlugin } from '../../../types';
+export declare const ReachBottom: ArtalkPlugin;

package/dist/src/plugins/list/sidebar-btn.d.ts

@@ -0,0 +1,2 @@
+import type { ArtalkPlugin } from '../../../types';
+export declare const SidebarBtn: ArtalkPlugin;

package/dist/src/plugins/list/time-ticking.d.ts

@@ -0,0 +1,3 @@
+import type { ArtalkPlugin } from '../../../types';
+/** 评论时间自动更新 */
+export declare const TimeTicking: ArtalkPlugin;

package/dist/src/plugins/list/unread-badge.d.ts

@@ -0,0 +1,2 @@
+import type { ArtalkPlugin } from '../../../types';
+export declare const UnreadBadge: ArtalkPlugin;

package/dist/src/plugins/list/unread.d.ts

@@ -0,0 +1,2 @@
+import type { ArtalkPlugin } from '../../../types';
+export declare const Unread: ArtalkPlugin;

package/dist/src/plugins/list/with-editor.d.ts

@@ -0,0 +1,2 @@
+import type { ArtalkPlugin } from '../../../types';
+export declare const WithEditor: ArtalkPlugin;

package/dist/src/plugins/markdown.d.ts

@@ -0,0 +1,2 @@
+import type { ArtalkPlugin } from '../../types';
+export declare const Markdown: ArtalkPlugin;

package/dist/src/plugins/stat.d.ts

@@ -0,0 +1,13 @@
+import type { ArtalkPlugin } from '../../types';
+import Api from '../api';
+export interface CountOptions {
+    getApi(): Api;
+    pageKey: string;
+    countEl: string;
+    pvEl: string;
+    /** 是否增加当前页面 PV 数 */
+    pvAdd?: boolean;
+}
+export declare const PvCountWidget: ArtalkPlugin;
+/** 初始化评论数和 PV 数量展示元素 */
+export declare function initCountWidget(opt: CountOptions): Promise<void>;

package/dist/src/plugins/version-check.d.ts

@@ -0,0 +1,2 @@
+import type { ArtalkPlugin } from '../../types';
+export declare const VersionCheck: ArtalkPlugin;

package/dist/src/service.d.ts

@@ -1,35 +1,31 @@
-import Context from '../types/context';
-import CheckerLauncher from './lib/checker';
-import Api from './api';
-import Editor from './editor';
+import type { ContextApi } from '../types';
+import CheckerLauncher from './components/checker';
+import Editor from './editor/editor';
 import SidebarLayer from './layer/sidebar-layer';
-import ListLite from './list/list-lite';
+import List from './list/list';
+import { PlugManager } from './plugins/editor-kit';
+import { LayerManager } from './layer/layer-manager';
 /**
  * Services
  *
- * @description
- * 当函数有返回值时，该值将自动添加到 Context 类作为一个 private 成员的值，
- * 这个成员的名称与函数名对应。可在 Context 类中访问该对象（同事类）。
+ * @description Call these services by `ctx.get('serviceName')` or `ctx.serviceName`
  */
 declare const services: {
-    i18n(ctx: Context): void;
-    markdown(): void;
-    user(ctx: Context): {
-        ctx?: Context | undefined;
-        data: import("../types/artalk-config").LocalUser;
-        setContext(ctx: Context): void;
-        update(obj?: Partial<import("../types/artalk-config").LocalUser>): void;
+    i18n(ctx: ContextApi): void;
+    user(ctx: ContextApi): {
+        data: import('../types').LocalUser;
+        onUserChanged: ((user: import('../types').LocalUser) => void) | null;
+        update(obj?: Partial<import('../types').LocalUser>): void;
+        setOnUserChanged(fn: ((user: import('../types').LocalUser) => void) | null): void;
         logout(): void;
         checkHasBasicUserInfo(): boolean;
     };
-    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;
+    layerManager(ctx: ContextApi): LayerManager;
+    checkerLauncher(ctx: ContextApi): CheckerLauncher;
+    editor(ctx: ContextApi): Editor;
+    list(ctx: ContextApi): List;
+    sidebarLayer(ctx: ContextApi): SidebarLayer;
+    editorPlugs(): PlugManager | undefined;
 };
 export default services;
 type TServiceImps = typeof services;

package/dist/tests/e2e/comment-add.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/config.d.ts

@@ -0,0 +1,110 @@
+import { I18n } from '../src/i18n';
+import { CommentData } from './data';
+export interface ArtalkConfig {
+    /** 装载元素 */
+    el: string | HTMLElement;
+    /** 页面唯一标识（完整 URL） */
+    pageKey: string;
+    /** 页面标题 */
+    pageTitle: string;
+    /** 服务器地址 */
+    server: string;
+    /** 站点名 */
+    site: string;
+    /** 评论框占位字符 */
+    placeholder: string;
+    /** 评论为空时显示字符 */
+    noComment: string;
+    /** 发送按钮文字 */
+    sendBtn: string;
+    /** 评论框穿梭（显示在待回复评论后面） */
+    editorTravel: boolean;
+    /** 表情包 */
+    emoticons: object | any[] | string | false;
+    /** Gravatar 头像 */
+    gravatar: {
+        /** API 地址 */
+        mirror: string;
+        /** API 参数 */
+        params: string;
+    };
+    /** 头像链接生成器 */
+    avatarURLBuilder?: (comment: CommentData) => string;
+    /** 分页配置 */
+    pagination: {
+        /** 每次请求获取数量 */
+        pageSize: number;
+        /** 阅读更多模式 */
+        readMore: boolean;
+        /** 滚动到底部自动加载 */
+        autoLoad: boolean;
+    };
+    /** 内容限高 */
+    heightLimit: {
+        /** 评论内容限高 */
+        content: number;
+        /** 子评论区域限高 */
+        children: number;
+        /** 滚动限高 */
+        scrollable: boolean;
+    };
+    /** 评论投票按钮 */
+    vote: boolean;
+    /** 评论投票反对按钮 */
+    voteDown: boolean;
+    /** 评论预览功能 */
+    preview: boolean;
+    /** 评论数绑定元素 Selector */
+    countEl: string;
+    /** PV 数绑定元素 Selector */
+    pvEl: string;
+    /** 夜间模式 */
+    darkMode: boolean | 'auto';
+    /** 请求超时（单位：秒） */
+    reqTimeout: number;
+    /** 平铺模式 */
+    flatMode: boolean | 'auto';
+    /** 嵌套模式 · 最大层数 */
+    nestMax: number;
+    /** 嵌套模式 · 排序方式 */
+    nestSort: 'DATE_ASC' | 'DATE_DESC';
+    /** 显示 UA 徽标 */
+    uaBadge: boolean;
+    /** 评论列表排序功能 (显示 Dropdown) */
+    listSort: boolean;
+    /** 图片上传功能 */
+    imgUpload: boolean;
+    /** 图片上传器 */
+    imgUploader?: (file: File) => Promise<string>;
+    /** 版本检测 */
+    versionCheck: boolean;
+    /** 引用后端配置 */
+    useBackendConf: boolean;
+    /** 语言本地化 */
+    locale: I18n | string;
+    /** 后端版本 (系统数据，用户不允许更改) */
+    apiVersion?: string;
+    /** Replacer for marked */
+    markedReplacers?: ((raw: string) => string)[];
+    /** 列表请求参数修改器 */
+    listFetchParamsModifier?: (params: any) => void;
+    remoteConfModifier?: (conf: Partial<ArtalkConfig>) => void;
+    listUnreadHighlight?: boolean;
+    scrollRelativeTo?: () => HTMLElement;
+}
+/**
+ * 本地持久化用户数据
+ * @note 始终保持一层结构，不支持多层结构
+ */
+export interface LocalUser {
+    /** 昵称 */
+    nick: string;
+    /** 邮箱 */
+    email: string;
+    /** 链接 */
+    link: string;
+    /** TOKEN */
+    token: string;
+    /** 是否为管理员 */
+    isAdmin: boolean;
+}