import { Value } from 'platejs'; import { TPlateEditor } from 'platejs/react'; import { EditorPluginKit } from '../../types/plugin-types'; import { ToolbarConfig, ToolbarAlign } from '../../types/toolbar-config'; import { HtmlSerializeOptions } from '../../lib/content-converter'; import { EditorMode, WordCountResult, OutlineItem, FindOptions, ReplaceOptions, MatchPosition } from '../../types/editor-types'; import * as React from 'react'; /** * 自定义工具栏按钮配置 */ export interface CustomToolbarButtons { /** 在工具栏开始位置插入的按钮 */ before?: React.ReactNode; /** 在工具栏末尾插入的按钮 */ after?: React.ReactNode; } /** * 工具栏引用接口 */ export interface ToolbarRef { /** 获取工具栏容器元素 */ getElement: () => HTMLDivElement | null; /** 设置工具栏可见性 */ setVisible: (visible: boolean) => void; /** 获取工具栏可见性 */ isVisible: () => boolean; } /** * PlateEditor 组件属性 */ export interface PlateEditorProps { /** 编辑器内容值(受控模式) */ value?: Value; /** 内容变化回调 */ onChange?: (value: Value) => void; /** 自定义插件列表 */ plugins?: EditorPluginKit; /** 自定义 CSS 类名 */ className?: string; /** 是否禁用编辑器 */ disabled?: boolean; /** 是否只读 */ readOnly?: boolean; /** 挂载时自动聚焦 */ autoFocus?: boolean; /** 工具栏配置 */ toolbarConfig?: ToolbarConfig; /** 是否显示工具栏,默认 true */ showToolbar?: boolean; /** 工具栏是否吸顶,默认 true */ toolbarSticky?: boolean; /** 编辑器模式:'edit' | 'view' | 'suggestion' */ mode?: EditorMode; /** 是否显示右侧设置按钮,默认 true */ showSettings?: boolean; /** 修改状态变化回调 */ onModifiedChange?: (isModified: boolean) => void; /** 自定义工具栏按钮 */ customToolbarButtons?: CustomToolbarButtons; /** 工具栏按钮对齐方式:left | center | right,默认 left */ toolbarAlign?: ToolbarAlign; /** 工具栏是否占据全宽(不受内容区域宽度限制),默认 false */ toolbarFullWidth?: boolean; /** 自定义工具栏的 CSS 类名 */ toolbarClassName?: string; /** 自定义工具栏的内联样式对象 */ toolbarStyle?: React.CSSProperties; /** 自定义渲染工具栏的函数 */ renderToolbar?: (toolbar: React.ReactNode) => React.ReactNode; /** 编辑器内容区域的最大宽度 */ contentMaxWidth?: string | number; /** 是否显示目录侧边栏,默认 false */ showToc?: boolean; /** 目录位置,默认 'left' */ tocPosition?: import('../../types/editor-types').TocPosition; /** 目录宽度(当位置为 left/right 时),默认 '240px' */ tocWidth?: string | number; /** 自定义目录的 CSS 类名 */ tocClassName?: string; /** 自定义目录的内联样式对象 */ tocStyle?: React.CSSProperties; /** 自定义渲染目录的函数 */ renderToc?: (toc: React.ReactNode) => React.ReactNode; /** 是否启用自动保存,默认 false */ autoSave?: boolean; /** 自动保存存储键名 */ autoSaveKey?: string; /** 自动保存间隔(毫秒),默认 30000 */ autoSaveInterval?: number; /** 自动保存回调 */ onAutoSave?: (content: Value) => void; /** 保存回调(用于快捷键保存 Ctrl+S / Cmd+S) */ onSave?: (content: Value) => void; /** 是否将编辑器状态同步到全局 Store,默认 false */ syncToStore?: boolean; } /** * PlateEditor 组件引用接口 * 提供编辑器的所有操作方法 */ export interface PlateEditorRef { /** 获取工具栏实例或引用 */ getToolbar: () => ToolbarRef | null; /** 设置工具栏的显示/隐藏状态 */ setToolbarVisible: (visible: boolean) => void; /** 获取目录实例或引用 */ getToc: () => import('../../types/editor-types').TocRef | null; /** 设置目录的显示/隐藏状态 */ setTocVisible: (visible: boolean) => void; /** 获取编辑器内容(JSON 格式) */ getContent: () => Value; /** 设置编辑器内容 */ setContent: (content: Value) => void; /** 重置编辑器内容为初始值 */ resetContent: () => void; /** 获取底层编辑器实例(高级用法) */ getEditor: () => TPlateEditor; /** 导出为 Markdown 格式 */ getMarkdown: () => string; /** 从 Markdown 加载内容 */ setMarkdown: (markdown: string) => void; /** * 导出为 HTML 格式 * @param options 序列化选项 * @returns HTML 字符串 */ getHtml: (options?: HtmlSerializeOptions) => Promise; /** 从 HTML 加载内容 */ setHtml: (html: string) => void; /** * 获取指定格式的内容 * @param format 内容格式:'json' | 'html' | 'markdown' */ getContentAs: (format: 'json' | 'html' | 'markdown') => Promise; /** * 从指定格式加载内容 * @param content 内容字符串或 JSON * @param format 内容格式:'json' | 'html' | 'markdown' */ setContentFrom: (content: string | Value, format: 'json' | 'html' | 'markdown') => void; /** 获取纯文本内容 */ getText: () => string; /** 检查编辑器是否为空 */ isEmpty: () => boolean; /** 聚焦编辑器 */ focus: () => void; /** 失焦编辑器 */ blur: () => void; /** 检查内容是否已修改 */ isModified: () => boolean; /** 重置修改状态 */ resetModifiedState: () => void; /** 插入文本 */ insertText: (text: string) => void; /** 插入 Markdown 内容 */ insertMarkdown: (markdown: string) => void; /** 切换标记(如粗体、斜体) */ toggleMark: (mark: string) => void; /** 插入链接 */ insertLink: (url: string, text?: string) => void; /** 插入图片 */ insertImage: (url: string) => void; /** 撤销 */ undo: () => void; /** 重做 */ redo: () => void; /** 导出为 HTML 文件 */ exportAsHtml: (filename?: string) => Promise; /** 导出为 Markdown 文件 */ exportAsMarkdown: (filename?: string) => Promise; /** 导出为 PDF 文件 */ exportAsPdf: (filename?: string) => Promise; /** 导出为图片 */ exportAsImage: (filename: string) => Promise; /** 清理本地存储的临时内容 */ clearLocalStorage: () => void; /** 手动保存到本地存储 */ saveToLocalStorage: () => void; /** 查找文本 */ find: (searchText: string, options?: FindOptions) => MatchPosition[]; /** 替换文本 */ replace: (searchText: string, replaceText: string, options?: ReplaceOptions) => number; /** 获取文档大纲 */ getOutline: () => OutlineItem[]; /** 获取字数统计 */ getWordCount: () => WordCountResult; /** 获取自动保存状态 */ getAutoSaveState: () => { isSaving: boolean; lastSavedAt: Date | null; hasUnsavedChanges: boolean; }; /** 手动触发保存 */ saveNow: () => void; /** 恢复最新的自动保存版本 */ restoreAutoSave: () => Value | null; /** 清除自动保存数据 */ clearAutoSave: () => void; /** 获取选中的文本 */ getSelectedText: () => string; /** 检查是否有选中内容 */ hasSelection: () => boolean; /** 获取当前选区 */ getSelection: () => { anchor: { path: number[]; offset: number; }; focus: { path: number[]; offset: number; }; } | null; /** 选中所有内容 */ selectAll: () => void; /** 取消选中 */ deselect: () => void; /** 检查是否可以撤销 */ canUndo: () => boolean; /** 检查是否可以重做 */ canRedo: () => boolean; /** 清空历史记录 */ clearHistory: () => void; /** * 插入节点 * @param nodes 要插入的节点数组 * @param options 插入选项 */ insertNodes: (nodes: Value, options?: { at?: number[]; }) => void; /** * 插入代码块 * @param code 代码内容 * @param language 代码语言 */ insertCodeBlock: (code: string, language?: string) => void; /** * 插入引用块 * @param text 引用内容 */ insertBlockquote: (text: string) => void; /** 滚动到顶部 */ scrollToTop: () => void; /** 滚动到底部 */ scrollToBottom: () => void; /** * 滚动到指定节点 * @param nodeId 节点 ID */ scrollToNode: (nodeId: string) => void; /** 获取当前编辑模式 */ getMode: () => import('../../types/editor-types').EditorMode; /** 设置编辑模式 */ setMode: (mode: import('../../types/editor-types').EditorMode) => void; /** 切换只读状态 */ toggleReadOnly: () => void; } export declare const PlateEditor: React.ForwardRefExoticComponent>;