@ant-design/agentic-ui 2.0.0

package/dist/MarkdownEditor/types.d.ts

@@ -0,0 +1,265 @@
+import { Ace } from 'ace-builds';
+import { AnchorProps, ImageProps } from 'antd';
+import React from 'react';
+import { BaseEditor, Selection } from 'slate';
+import { HistoryEditor } from 'slate-history';
+import { ReactEditor, RenderElementProps } from 'slate-react';
+import { TagPopupProps } from './editor/elements/TagPopup';
+import { EditorStore } from './editor/store';
+import { InsertAutocompleteProps } from './editor/tools/InsertAutocomplete';
+import { CustomLeaf, Elements } from './el';
+/**
+ * @typedef CommentDataType
+ * @description 表示评论数据的类型。
+ *
+ * @property {Selection} selection - 用户选择的文本范围。
+ * @property {number[]} path - 文档中选择路径的数组。
+ * @property {number} anchorOffset - 选择范围的起始偏移量。
+ * @property {number} focusOffset - 选择范围的结束偏移量。
+ * @property {string} refContent - 参考内容。
+ * @property {string} commentType - 评论的类型。
+ * @property {string} content - 评论的内容。
+ * @property {number} time - 评论的时间戳。
+ * @property {string | number} id - 评论的唯一标识符。
+ * @property {Object} [user] - 用户信息（可选）。
+ * @property {string} user.name - 用户名。
+ * @property {string} [user.avatar] - 用户头像（可选）。
+ */
+export type CommentDataType = {
+    selection: Selection;
+    path: number[];
+    updateTime?: number;
+    anchorOffset: number;
+    focusOffset: number;
+    refContent: string;
+    commentType: string;
+    content: string;
+    time: number | string;
+    id: string | number;
+    user?: {
+        name: string;
+        avatar?: string;
+    };
+};
+/**
+ * 编辑器接口定义
+ * @interface IEditor
+ *
+ * @property {IEditor[]} [children] - 子编辑器列表
+ * @property {boolean} [expand] - 是否展开
+ * @property {any[]} [schema] - 编辑器模式配置
+ * @property {any} [history] - 编辑器历史记录
+ */
+export type IEditor = {
+    children?: IEditor[];
+    expand?: boolean;
+};
+/**
+ * MarkdownEditor 实例
+ */
+export interface MarkdownEditorInstance {
+    range?: any;
+    store: EditorStore;
+    markdownContainerRef: React.MutableRefObject<HTMLDivElement | null>;
+    markdownEditorRef: React.MutableRefObject<BaseEditor & ReactEditor & HistoryEditor>;
+    exportHtml: (filename?: string) => void;
+}
+/**
+ * MarkdownEditor 的 props
+ * @param props
+ */
+export type MarkdownEditorProps = {
+    className?: string;
+    width?: string | number;
+    height?: string | number;
+    tagInputProps?: {
+        enable?: boolean;
+        placeholder?: string;
+        type?: 'panel' | 'dropdown';
+    } & TagPopupProps;
+    editorStyle?: React.CSSProperties;
+    fncProps?: {
+        render: (props: CustomLeaf<Record<string, any>> & {
+            children: React.ReactNode;
+        }, defaultDom: React.ReactNode) => React.ReactNode;
+        onOriginUrlClick?: (url?: string) => void;
+        onFootnoteDefinitionChange?: (data: {
+            id: any;
+            placeholder: any;
+            origin_text: any;
+            url: any;
+            origin_url: any;
+        }[]) => void;
+    };
+    /**
+     * 代码编辑器配置
+     *
+     * 支持配置代码块的显示和编辑行为，基于 Ace Editor。
+     *
+     * @example
+     * ```tsx
+     * <MarkdownEditor
+     *   codeProps={{
+     *     theme: 'monokai', // 代码编辑器主题
+     *     fontSize: 14,
+     *     hideToolBar: false,
+     *     Languages: ['javascript', 'python', 'typescript'],
+     *     showLineNumbers: true,
+     *     wrap: true,
+     *   }}
+     * />
+     * ```
+     *
+     * @property {string[]} [Languages] - 支持的编程语言列表
+     * @property {boolean} [hideToolBar] - 是否隐藏代码块工具栏
+     * @property {boolean} [alwaysExpandedDeepThink] - 是否始终展开深度思考块
+     * @property {string} [theme] - 代码编辑器主题，如 'chrome', 'monokai', 'github', 'dracula' 等
+     * @property {number} [fontSize] - 代码字体大小，默认 12
+     * @property {number} [tabSize] - Tab 缩进大小，默认 4
+     * @property {boolean} [showLineNumbers] - 是否显示行号，默认 true
+     * @property {boolean} [showGutter] - 是否显示代码栏，默认 true
+     * @property {boolean} [wrap] - 是否自动换行，默认 true
+     */
+    codeProps?: {
+        Languages?: string[];
+        hideToolBar?: boolean;
+        alwaysExpandedDeepThink?: boolean;
+    } & Partial<Ace.EditorOptions>;
+    anchorProps?: AnchorProps;
+    /**
+     * 配置图片数据
+     */
+    image?: {
+        upload?: (file: File[] | string[]) => Promise<string[] | string>;
+        render?: (props: ImageProps, defaultDom: React.ReactNode) => React.ReactNode;
+    };
+    insertAutocompleteProps?: InsertAutocompleteProps;
+    eleItemRender?: (ele: RenderElementProps, defaultDom: React.ReactNode) => React.ReactNode;
+    initValue?: string;
+    /**
+     * 只读模式
+     */
+    readonly?: boolean;
+    /**
+     * 懒加载渲染配置
+     * 启用后，每个元素都会被包裹在一个使用 IntersectionObserver 的容器中
+     * 只有当元素进入视口时才会真正渲染，以提升大型文档的性能
+     *
+     * @example
+     * ```tsx
+     * lazy={{
+     *   enable: true,
+     *   placeholderHeight: 100,
+     *   rootMargin: '200px'
+     * }}
+     * ```
+     */
+    lazy?: {
+        /**
+         * 是否启用懒加载，默认 false
+         */
+        enable?: boolean;
+        /**
+         * 占位符高度（单位：px），默认 25
+         */
+        placeholderHeight?: number;
+        /**
+         * 提前加载的距离，默认 '200px'
+         * 支持所有 IntersectionObserver rootMargin 的值
+         */
+        rootMargin?: string;
+    };
+    /**
+     * 样式
+     */
+    style?: React.CSSProperties;
+    /**
+     * 内容样式
+     */
+    contentStyle?: React.CSSProperties;
+    /**
+     * 工具栏配置
+     */
+    toolbarConfig?: {
+        show?: boolean;
+        items?: string[];
+    };
+    /**
+     * 表格配置
+     */
+    tableConfig?: {
+        minColumn?: number;
+        minRows?: number;
+        actions?: {
+            fullScreen?: 'modal' | 'drawer';
+            download?: 'csv';
+            copy?: 'md' | 'html' | 'csv';
+        };
+        pure?: boolean;
+        previewTitle?: string;
+    };
+    /**
+     * 粘贴配置
+     */
+    pasteConfig?: {
+        enabled?: boolean;
+        allowedTypes?: string[];
+    };
+    /**
+     * 插件配置
+     */
+    plugins?: any[];
+    /**
+     * 变更回调
+     */
+    onChange?: (value: string, schema: Elements[]) => void;
+    /**
+     * 选择变更回调
+     * @param selection - Slate 选区对象
+     * @param selectedMarkdown - 选中内容的 markdown 文本
+     * @param selectedNodes - 选中的节点数组
+     */
+    onSelectionChange?: (selection: Selection | null, selectedMarkdown: string, selectedNodes: Elements[]) => void;
+    comment?: {
+        /**
+         * 是否启用评论功能
+         */
+        enable?: boolean;
+        /**
+         * 评论数据
+         */
+        commentList?: CommentDataType[];
+        loadMentions?: (text: string) => Promise<{
+            name: string;
+        }[]>;
+        /**
+         * 添加评论的回调函数
+         */
+        onSubmit?: (id: string | number, comment: CommentDataType) => void;
+        /**
+         * 删除评论的回调函数
+         */
+        onDelete?: (id: string | number, comment: CommentDataType) => void;
+        editorRender?: (dom: React.ReactNode) => React.ReactNode;
+        onClick?: (id: string | number, comment: CommentDataType) => void;
+        onEdit?: (id: string | number, comment: CommentDataType) => void;
+        deleteConfirmText?: string;
+        mentionsPlaceholder?: string;
+        listItemRender?: (defaultDom: {
+            checkbox: React.JSX.Element | null;
+            mentionsUser: React.JSX.Element | null;
+            children: any;
+        }, comment: {
+            element: Elements;
+            children: React.ReactNode;
+            attributes: any;
+        }) => React.ReactNode;
+    };
+    onFocus?: (value: string, schema: Elements[], e: React.FocusEvent<HTMLDivElement, Element>) => void;
+    onBlur?: (value: string, schema: Elements[], e: React.MouseEvent<HTMLDivElement, Element>) => void;
+    onPaste?: (e: React.ClipboardEvent<HTMLDivElement>) => void;
+    /**
+     * 其他属性
+     */
+    [key: string]: any;
+};

package/dist/MarkdownEditor/utils/exportHtml.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Generate a complete HTML document from content
+ *
+ * @param content - The HTML content string
+ * @param title - The document title
+ * @param styles - Additional CSS styles to include
+ * @returns A complete HTML document as a string
+ */
+export declare const generateHtmlDocument: (content: string, title?: string, styles?: string) => string;
+/**
+ * Export HTML content to a file
+ *
+ * @param htmlContent - The HTML content to export
+ * @param filename - The name of the file to save
+ */
+export declare const exportHtml: (htmlContent: string, filename?: string) => void;

package/dist/MarkdownEditor/utils/exportHtml.js

@@ -0,0 +1,85 @@
+// src/MarkdownEditor/utils/exportHtml.ts
+var generateHtmlDocument = (content, title = "Markdown Export", styles = "") => {
+  return `<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${title}</title>
+  <style>
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+      line-height: 1.6;
+      padding: 20px;
+      max-width: 900px;
+      margin: 0 auto;
+      color: #333;
+    }
+    pre {
+      background-color: #f6f8fa;
+      border-radius: 3px;
+      padding: 16px;
+      overflow: auto;
+    }
+    code {
+      background-color: rgba(27, 31, 35, 0.05);
+      border-radius: 3px;
+      padding: 0.2em 0.4em;
+      font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
+    }
+    blockquote {
+      border-left: 4px solid #ddd;
+      padding-left: 16px;
+      margin-left: 0;
+      color: #666;
+    }
+    img {
+      max-width: 100%;
+    }
+    table {
+      border-collapse: collapse;
+      width: 100%;
+      margin-bottom: 16px;
+    }
+    table, th, td {
+      border: 1px solid #ddd;
+    }
+    th, td {
+      padding: 8px;
+      text-align: left;
+    }
+    th {
+      background-color: #f6f8fa;
+    }
+    ${styles}
+  </style>
+</head>
+<body>
+  ${content}
+</body>
+</html>`;
+};
+var exportHtml = (htmlContent, filename = "export.html") => {
+  try {
+    const fullHtml = generateHtmlDocument(htmlContent);
+    const blob = new Blob([fullHtml], { type: "text/html;charset=utf-8" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    setTimeout(() => {
+      if (typeof document !== "undefined") {
+        document.body.removeChild(a);
+      }
+      URL.revokeObjectURL(url);
+    }, 100);
+  } catch (error) {
+    console.error("Error exporting HTML:", error);
+  }
+};
+export {
+  exportHtml,
+  generateHtmlDocument
+};

package/dist/MarkdownEditor/utils/native-table/index.d.ts

@@ -0,0 +1,2 @@
+export * from './native-table-editor';
+export * from './native-table-keyboard';

package/dist/MarkdownEditor/utils/native-table/index.js

@@ -0,0 +1,3 @@
+// src/MarkdownEditor/utils/native-table/index.ts
+export * from "./native-table-editor";
+export * from "./native-table-keyboard";

package/dist/MarkdownEditor/utils/native-table/native-table-editor.d.ts

@@ -0,0 +1,122 @@
+import { Editor, Location, Node, Path } from 'slate';
+export interface CellElement extends Node {
+    type: 'table-cell' | 'header-cell';
+    rowSpan?: number;
+    colSpan?: number;
+    align?: 'left' | 'center' | 'right';
+    width?: string | number;
+    hidden?: boolean;
+}
+export interface Edge {
+    start: number;
+    end: number;
+}
+export interface NodeEntryWithContext {
+    node: Node;
+    path: Path;
+    context?: any;
+}
+export type SelectionMode = 'cell' | 'row' | 'column' | 'table';
+export interface WithType {
+    type: string;
+}
+/**
+ * 原生表格编辑器 - 提供基础的表格操作功能
+ * 替代复杂的 withTable 插件，使用 Slate 原生 API 实现表格操作
+ */
+export declare const NativeTableEditor: {
+    /**
+     * 插入表格
+     * @param editor - Slate 编辑器实例
+     * @param options - 表格选项
+     */
+    insertTable(editor: Editor, options?: {
+        rows?: number;
+        cols?: number;
+        at?: Location;
+    }): void;
+    /**
+     * 删除表格
+     * @param editor - Slate 编辑器实例
+     * @param at - 位置
+     */
+    removeTable(editor: Editor, at?: Location): void;
+    /**
+     * 查找表格节点
+     * @param editor - Slate 编辑器实例
+     * @param at - 位置
+     */
+    findTable(editor: Editor, at?: Location): import("slate").NodeEntry<unknown> | undefined;
+    /**
+     * 查找表格行节点
+     * @param editor - Slate 编辑器实例
+     * @param at - 位置
+     */
+    findTableRow(editor: Editor, at?: Location): import("slate").NodeEntry<unknown> | undefined;
+    /**
+     * 查找表格单元格节点
+     * @param editor - Slate 编辑器实例
+     * @param at - 位置
+     */
+    findTableCell(editor: Editor, at?: Location): import("slate").NodeEntry<unknown> | undefined;
+    /**
+     * 检查是否在表格中
+     * @param editor - Slate 编辑器实例
+     * @param at - 位置
+     */
+    isInTable(editor: Editor, at?: Location): boolean;
+    /**
+     * 检查是否在表格行中
+     * @param editor - Slate 编辑器实例
+     * @param at - 位置
+     */
+    isInTableRow(editor: Editor, at?: Location): boolean;
+    /**
+     * 检查是否在表格单元格中
+     * @param editor - Slate 编辑器实例
+     * @param at - 位置
+     */
+    isInTableCell(editor: Editor, at?: Location): boolean;
+    /**
+     * 插入表格行
+     * @param editor - Slate 编辑器实例
+     * @param options - 选项
+     */
+    insertTableRow(editor: Editor, options?: {
+        at?: Location;
+        position?: 'above' | 'below';
+    }): void;
+    /**
+     * 删除表格行
+     * @param editor - Slate 编辑器实例
+     * @param at - 位置
+     */
+    removeTableRow(editor: Editor, at?: Location): void;
+    /**
+     * 插入表格列
+     * @param editor - Slate 编辑器实例
+     * @param options - 选项
+     */
+    insertTableColumn(editor: Editor, options?: {
+        at?: Location;
+        position?: 'left' | 'right';
+    }): void;
+    /**
+     * 删除表格列
+     * @param editor - Slate 编辑器实例
+     * @param at - 位置
+     */
+    removeTableColumn(editor: Editor, at?: Location): void;
+    /**
+     * 移动光标到下一个单元格
+     * @param editor - Slate 编辑器实例
+     * @param at - 位置
+     */
+    moveToNextCell(editor: Editor, at?: Location): void;
+    /**
+     * 移动光标到上一个单元格
+     * @param editor - Slate 编辑器实例
+     * @param at - 位置
+     */
+    moveToPreviousCell(editor: Editor, at?: Location): void;
+};