import * as react from 'react'; import { RefObject, ReactElement, CSSProperties, ComponentType, ReactNode, MouseEvent } from 'react'; import { CompletionSource } from '@codemirror/autocomplete'; import { Extension, Compartment } from '@codemirror/state'; import { KeyBinding, EditorView } from '@codemirror/view'; import markdownit, { Token } from 'markdown-it'; import * as xss from 'xss'; type IconName = 'bold' | 'underline' | 'italic' | 'strike-through' | 'title' | 'sub' | 'sup' | 'quote' | 'unordered-list' | 'ordered-list' | 'task' | 'code-row' | 'code' | 'link' | 'image' | 'table' | 'revoke' | 'next' | 'save' | 'prettier' | 'minimize' | 'maximize' | 'fullscreen-exit' | 'fullscreen' | 'preview-only' | 'preview' | 'preview-html' | 'catalog' | 'github' | 'mermaid' | 'formula' | 'close' | 'delete' | 'upload'; type ToolDirective = 'bold' | 'underline' | 'italic' | 'strikeThrough' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'quote' | 'unorderedList' | 'orderedList' | 'task' | 'codeRow' | 'code' | 'link' | 'image' | 'table' | 'sub' | 'sup' | 'prettier' | 'flow' | 'sequence' | 'gantt' | 'class' | 'state' | 'pie' | 'relationship' | 'journey' | 'katexInline' | 'katexBlock' | 'universal'; declare global { interface Window { hljs: any; prettier: any; prettierPlugins: any; Cropper: any; screenfull: any; mermaid: any; katex: any; echarts: any; } } interface ToolbarTips { bold?: string; underline?: string; italic?: string; strikeThrough?: string; title?: string; sub?: string; sup?: string; quote?: string; unorderedList?: string; orderedList?: string; task?: string; codeRow?: string; code?: string; link?: string; image?: string; table?: string; mermaid?: string; katex?: string; revoke?: string; next?: string; save?: string; prettier?: string; pageFullscreen?: string; fullscreen?: string; catalog?: string; preview?: string; previewOnly?: string; htmlPreview?: string; github?: string; '-'?: string; '='?: string; } interface StaticTextDefaultValue { toolbarTips?: ToolbarTips; titleItem?: { h1?: string; h2?: string; h3?: string; h4?: string; h5?: string; h6?: string; }; imgTitleItem?: { link: string; upload: string; clip2upload: string; }; linkModalTips?: { linkTitle?: string; imageTitle?: string; descLabel?: string; descLabelPlaceHolder?: string; urlLabel?: string; urlLabelPlaceHolder?: string; buttonOK?: string; }; clipModalTips?: { title?: string; buttonUpload?: string; }; copyCode?: { text?: string; successTips?: string; failTips?: string; }; mermaid?: { flow?: string; sequence?: string; gantt?: string; class?: string; state?: string; pie?: string; relationship?: string; journey?: string; }; katex?: { inline: string; block: string; }; footer?: { markdownTotal: string; scrollAuto: string; }; } interface StaticTextDefault { 'zh-CN': StaticTextDefaultValue; 'en-US': StaticTextDefaultValue; } type StaticTextDefaultKey = keyof StaticTextDefault; type ToolbarNames = keyof ToolbarTips | number; type Footers = '=' | 'markdownTotal' | 'scrollSwitch' | number; interface SettingType { pageFullscreen: boolean; fullscreen: boolean; preview: boolean; htmlPreview: boolean; previewOnly: boolean; } interface HeadList { text: string; level: 1 | 2 | 3 | 4 | 5 | 6; active?: boolean; line: number; currentToken?: Token; nextToken?: Token; } type Themes = 'light' | 'dark'; /** * 预览主题 * * @list ['default', 'github', 'vuepress', 'mk-cute', 'smart-blue', 'cyanosis'] */ type PreviewThemes = string; interface PreviewRendererProps { html: string; id: string; className: string; } type PreviewRendererComponent = ComponentType; /** * 自定义标题ID */ type MdHeadingId = (options: { text: string; level: number; index: number; currentToken?: Token; nextToken?: Token; }) => string; interface MdPreviewProps { value?: string; /** * @deprecated 5.0开始使用value代替 */ modelValue?: string; /** * input回调事件 */ onChange?: ChangeEvent; /** * 主题 * * @default 'light' */ theme?: Themes; /** * 外层类名 * * @default '' */ className?: string; /** * 预设语言名称 * * @default 'zh-CN' */ language?: string; /** * html变化事件 */ onHtmlChanged?: HtmlChangedEvent; /** * 获取目录结构 */ onGetCatalog?: GetCatalogEvent; /** * 5.x版本开始 editorId 的替换 * * @default 'md-editor-rt' */ id?: string; /** * 编辑器唯一标识 * * @default 'md-editor-rt' * @deprecated 5.x版本开始使用 id 替换 */ editorId?: string; /** * 预览中代码是否显示行号 * * @default false */ showCodeRowNumber?: boolean; /** * 预览内容样式 * * @default 'default' */ previewTheme?: PreviewThemes; /** * 标题的id生成方式 * * @default (text: string) => text */ mdHeadingId?: MdHeadingId; /** * 编辑器样式 */ style?: CSSProperties; /** * 不使用该mermaid * * @default false */ noMermaid?: boolean; /** * * 不能保证文本正确的情况，在marked编译md文本后通过该方法处理 * 推荐DOMPurify、sanitize-html * * @default (text: string) => text */ sanitize?: (html: string) => string; /** * 不使用katex * * @default false */ noKatex?: boolean; /** * 代码主题 * * @default 'atom' */ codeTheme?: string; /** * 复制代码格式化方法 * * @default (text) => text */ formatCopiedText?: (text: string) => string; /** * 是否禁用上传图片 * * @default false */ /** * 某些预览主题的代码模块背景是暗色系 * 将这个属性设置为true，会自动在该主题下的light模式下使用暗色系的代码风格 * * @default true */ codeStyleReverse?: boolean; /** * 需要自动调整的预览主题 * * @default ['default', 'mk-cute'] */ codeStyleReverseList?: Array; /** * 是否启用代码高亮 */ noHighlight?: boolean; /** * 是否关闭编辑器默认的放大功能 */ noImgZoomIn?: boolean; /** * 自定义的图标 */ customIcon?: CustomIcon; /** * 转换生成的mermaid代码 * * @param html * @returns */ sanitizeMermaid?: (html: string) => Promise; /** * 是否开启折叠代码功能 * 不开启会使用div标签替代details标签 * * @default true */ codeFoldable?: boolean; /** * 触发自动折叠代码的行数阈值 * * @default 30 */ autoFoldThreshold?: number; /** * 内容重新挂载事件 * * 相比起onHtmlChanged，onRemount会在重新挂载后触发 */ onRemount?: () => void; /** * 不使用 echarts */ noEcharts?: boolean; /** * 自定义渲染预览的组件 * * 组件会接收到 html、id、className，请确保将后两者应用到根节点 */ previewComponent?: PreviewRendererComponent; } type TableShapeType = [number, number] | [number, number, number, number]; interface EditorProps extends MdPreviewProps { /** * 保存事件 */ onSave?: SaveEvent; /** * 上传图片事件 */ onUploadImg?: UploadImgEvent; /** * 是否页面内全屏 * * @default false */ pageFullscreen?: boolean; /** * 是否展开预览 * * @default true */ preview?: boolean; /** * 是否展开html预览 * * @default false */ htmlPreview?: boolean; /** * 工具栏选择显示 * * @default allToolbar */ toolbars?: Array; /** * 工具栏选择不显示 * * @default [] */ toolbarsExclude?: Array; /** * 格式化md * * @default true */ noPrettier?: boolean; /** * 一个tab等于空格数 * * @default 2 */ tabWidth?: number; /** * 表格预设格子数 * * @default [6, 4] */ tableShape?: TableShapeType; /** * 空提示 * * @default '' */ placeholder?: string; /** * 自定义的工具栏列表 */ defToolbars?: Array; /** * 内部错误捕获 */ onError?: ErrorEvent; /** * 页脚列表显示顺序 */ footers?: Array; /** * 是否默认激活输入框和预览框同步滚动 * * @default true */ scrollAuto?: boolean; /** * 自定义的也叫工具组件列表 */ defFooters?: Array; noUploadImg?: boolean; /** * 文本区域自动获得焦点 * * @default false */ autoFocus?: boolean; /** * 禁用文本区域 * * @default false */ disabled?: boolean; /** * 文本区域为只读 * * @default false */ readOnly?: boolean; /** * 文本区域允许的最大字符数 */ maxLength?: number; /** * 是否启用自动识别粘贴代码类别 * 目前支持 vscode 复制的代码识别 * * @default false */ autoDetectCode?: boolean; /** * 输入框失去焦点时触发事件 */ onBlur?: (event: FocusEvent) => void; /** * 输入框获得焦点时触发事件 */ onFocus?: (event: FocusEvent) => void; /** * @codemirror/autocomplete匹配关键词的方法列表 * * 它会被像下面这样嵌入编辑器 * * import { autocompletion } from '@codemirror/autocomplete'; * autocompletion({ * override: [...completions] * }) */ completions?: Array; /** * 是否在工具栏下面显示对应的文字名称 * * @default false */ showToolbarName?: boolean; /** * 字符输入事件 */ onInput?: (e: Event) => void; /** * 拖放事件 * * @param event */ onDrop?: (event: DragEvent) => void; /** * 输入框的默认宽度 * * @example '100px'/'50%' */ inputBoxWidth?: string; /** * 输入框宽度变化事件 */ onInputBoxWidthChange?: (width: string) => void; /** * 替换粘贴的图片链接 * * @param t 图片链接 * @returns */ transformImgUrl?: (t: string) => string | Promise; /** * 内置的目录显示的状态 * * 'fixed': 悬浮在内容上方 * 'flat': 展示在右侧 * * \>=5.3.0 * * @default 'fixed' */ catalogLayout?: 'fixed' | 'flat'; /** * 控制最大显示的目录层级 * * >= v5.5.0 */ catalogMaxDepth?: number; /** * 浮动工具栏 * * @version 6.0.0 * @default [] */ floatingToolbars?: Array; } interface ContextType { editorId: string; tabWidth: number; highlight: { js: Partial; css: Partial; }; showCodeRowNumber: boolean; usedLanguageText: StaticTextDefaultValue; theme: Themes; language: string; previewTheme: PreviewThemes; customIcon: CustomIcon; rootRef: RefObject | null; disabled: boolean | undefined; showToolbarName?: boolean; setting: SettingType; updateSetting: UpdateSetting; tableShape: TableShapeType; catalogVisible: boolean; noUploadImg: boolean; noPrettier: boolean; codeTheme: string; defToolbars: Array; floatingToolbars: Array; } interface MermaidTemplate { /** * 流程图 */ flow?: string; /** * 时序图 */ sequence?: string; /** * 甘特图 */ gantt?: string; /** * 类图 */ class?: string; /** * 状态图 */ state?: string; /** * 饼图 */ pie?: string; /** * 关系图 */ relationship?: string; /** * 旅程图 */ journey?: string; } interface MarkdownItConfigPlugin { type: string; plugin: markdownit.PluginWithParams; options: any; } /** * CodeMirror扩展类型 * * ^6.0.0 */ interface CodeMirrorExtension { /** * 仅用来提供开发者分别不同扩展的依据 */ type: string; /** * CodeMirror的扩展 */ extension: Extension | ((options: any) => Extension); /** * 包裹扩展的Compartment，只有部分扩展有，提供扩展更新的能力 */ compartment?: Compartment; options?: any; } interface GlobalConfig { /** * 编辑器内部依赖库 */ editorExtensions: { highlight?: { instance?: any; js?: string; css?: CodeCss; }; prettier?: { prettierInstance?: any; parserMarkdownInstance?: any; standaloneJs?: string; parserMarkdownJs?: string; }; cropper?: { instance?: any; js?: string; css?: string; }; screenfull?: { instance?: any; js?: string; }; mermaid?: { instance?: any; js?: string; /** * 是否启用缩放功能 * * @default true */ enableZoom?: boolean; }; katex?: { instance?: any; js?: string; css?: string; }; echarts?: { instance?: any; js?: string; /** * 解析echarts代码块内容。 * * 默认实现会使用new Function以兼容官方配置中的函数写法；当内容来源不可信时， * 业务侧应通过该方法替换为更严格的解析策略。 */ parseOption?: (code: string, options: { editorId: string; element: HTMLElement; }) => any; }; }; /** * 对应editorExtensions中的cdn链接标签属性 * * 不要尝试在editorExtensionsAttrs定义script的src\onload\id，link的rel\href\id * 它们会被默认值覆盖 */ editorExtensionsAttrs: { highlight?: { js?: Partial; css?: CodeCssAttrs; }; prettier?: { standaloneJs?: Partial; parserMarkdownJs?: Partial; }; cropper?: { js?: Partial; css?: Partial; }; screenfull?: { js?: Partial; }; mermaid?: { js?: Partial; }; katex?: { js?: Partial; css?: Partial; }; echarts?: { js?: Partial; }; }; editorConfig: { /** * 自定义提示语言 */ languageUserDefined?: { [key: string]: StaticTextDefaultValue; }; /** * 自定义内部mermaid模块 */ mermaidTemplate?: MermaidTemplate; /** * 输入渲染延迟（ms） */ renderDelay?: number; /** * 内部的弹窗、下拉框等内联zIndex * @default 20000 */ zIndex?: number; }; /** * 根据主题和内部默认的codeMirror扩展自定义新的扩展 * * @params theme 当前主题 * @params innerExtensions 当前主题下的扩展列表 * [keymap, minimalSetup, markdown, EditorView.lineWrapping, EditorView.updateListener, EditorView.domEventHandlers, oneDark??oneLight] * [快捷键, 最低配置, markdown识别, 横向自动换行, 更新事件, dom监听事件, oneDark主题(暗夜模式下), oneLight(默认模式下)] * * @params keyBindings md-editor-v3内置的快捷键 */ codeMirrorExtensions: (extensions: Array, options: { editorId: string; theme: Themes; keyBindings: Array; }) => Array; /** * 自定义markdown-it核心库扩展、属性等 */ markdownItConfig: (md: markdownit, options: { editorId: string; }) => void; /** * 挑选编辑器已预设的markdownIt的扩展 * * @param plugins markdownIt的扩展，带编辑器已设定的属性 * @returns plugins */ markdownItPlugins: (plugins: Array, options: { editorId: string; }) => Array; /** * mermaid配置项 * * @param base * @returns */ mermaidConfig: (base: any) => any; /** * katex配置 * * @param baseConfig * @returns */ katexConfig: (baseConfig: any) => any; /** * echarts配置 * * @returns */ echartsConfig: (base: any) => any; } /** * 扩展编辑器内部功能，包括marked和一些内部依赖实例，如highlight、cropper等 */ type Config = (options: Partial) => void; /** * 编辑器操作潜在的错误 */ interface InnerError { name: 'Cropper' | 'fullscreen' | 'prettier' | 'overlength' | 'mermaid'; message: string; data?: any; error?: Error; } interface CodeCss { [key: string]: { light: string; dark: string; }; } interface CodeCssAttrs { [key: string]: { light: Partial; dark: Partial; }; } interface MdPreviewStaticProps { editorId: string; noMermaid: boolean; noKatex: boolean; noHighlight: boolean; } interface StaticProps extends MdPreviewStaticProps { noPrettier: boolean; noUploadImg: boolean; } type UpdateSetting = (k: keyof SettingType, v?: boolean) => void; type ChangeEvent = (v: string) => void; type SaveEvent = (v: string, h: Promise) => void; type UploadImgCallBackParam = string[] | Array<{ url: string; alt: string; title: string; }>; type UploadImgCallBack = (urls: UploadImgCallBackParam) => void; type UploadImgEvent = (files: Array, callBack: UploadImgCallBack) => void; type HtmlChangedEvent = (h: string) => void; type GetCatalogEvent = (list: HeadList[]) => void; type ErrorEvent = (err: InnerError) => void; interface ExposeEvent { pageFullscreen(status: boolean): void; fullscreen(status: boolean): void; preview(status: boolean): void; previewOnly(status: boolean): void; htmlPreview(status: boolean): void; catalog(status: boolean): void; } type DOMEventHandlers = { [e in keyof HTMLElementEventMap]?: (event: HTMLElementEventMap[e], view: EditorView) => boolean | void; }; interface InsertParam { targetValue: string; select?: boolean; deviationStart?: number; deviationEnd?: number; } /** * 插入的内容的构造函数 */ type InsertContentGenerator = (selectedText: string) => InsertParam; /** * 插入内容的通用函数类型 */ type Insert = (generate: InsertContentGenerator) => void; type FocusOption = 'start' | 'end' | { rangeAnchor?: number; rangeHead?: number; cursorPos: number; }; interface ExposeParam { /** * 添加事件监听 * * @param eventName 事件名称 * @param callBack 事件回调函数 */ on(eventName: E, callBack: C): void; /** * 切换页面内全屏 * * @param status 是否页面全屏 */ togglePageFullscreen(status?: boolean): void; /** * 切换屏幕全屏 * * @param status 是否屏幕全屏 */ toggleFullscreen(status?: boolean): void; /** * 切换是否显示预览 * * @param status 是否显示预览 */ togglePreview(status?: boolean): void; togglePreviewOnly(status?: boolean): void; /** * 切换是否显示html预览 * * @param status html预览状态 */ toggleHtmlPreview(status?: boolean): void; /** * 切换是否显示目录 * * @param status 是否显示目录，不设置默认相反 */ toggleCatalog(status?: boolean): void; /** * 触发保存 */ triggerSave(): void; /** * 手动向文本框插入内容 * * @param {Function} generate 构造插入内容方法 * 构造方法提供「当前选中」的内容为入参 * 返回「待插入内容」和插入的属性 * 入参 selectedText 当前选中的内容 * * targetValue 待插入内容 * select 插入后是否自动选中内容 * deviationStart 插入后选中位置的开始偏移量 * deviationEnd 插入后选中位置的结束偏移量 * */ insert: Insert; /** * 手动聚焦 * * @param options 聚焦时光标的位置，不提供默认上次失焦时的位置 */ focus(options?: FocusOption): void; /** * 手动重新渲染 */ rerender(): void; /** * 获取当前选中的文本 */ getSelectedText(): string | undefined; /** * 重置已经存在的历史记录 */ resetHistory(): void; /** * codemirror事件 * * @param handlers */ domEventHandlers(handlers: DOMEventHandlers): void; /** * 执行内部插入命令 * * @param direct */ execCommand(direct: ToolDirective): void; /** * 获取编辑器实例 */ getEditorView(): EditorView | undefined; } type ExposePreviewParam = Pick; type CustomStrIcon = { copy?: string; 'collapse-tips'?: string; pin?: string; 'pin-off'?: string; check?: string; }; /** * 自定义图标的数据类型 */ type CustomIcon = { [key in IconName]?: { component: any; props?: { [key: string | number | symbol]: any; }; }; } & CustomStrIcon; declare const _default$7: react.NamedExoticComponent>; interface NormalToolbarProps { title?: string; children?: ReactNode; /** * @deprecated 使用children代替 */ trigger?: ReactNode; onClick: (e: MouseEvent) => void; disabled?: boolean; } declare const _default$6: react.MemoExoticComponent<(props: NormalToolbarProps) => react.JSX.Element>; interface DropdownToolbarProps { title?: string; visible: boolean; /** * @deprecated 使用children代替 */ trigger?: ReactNode; onChange: (visible: boolean) => void; overlay: ReactNode; children?: ReactNode; disabled?: boolean; } declare const _default$5: react.MemoExoticComponent<(props: DropdownToolbarProps) => react.JSX.Element>; interface ModalToolbarProps { title?: string; modalTitle?: string; visible: boolean; width?: string; height?: string; trigger: ReactNode; onClick: (e: MouseEvent) => void; onClose: () => void; showAdjust?: boolean; isFullscreen?: boolean; onAdjust?: (v: boolean) => void; children?: any; className?: string; style?: CSSProperties; showMask?: boolean; disabled?: boolean; } declare const _default$4: react.MemoExoticComponent<(props: ModalToolbarProps) => react.JSX.Element>; type ModalProps = Readonly<{ title?: ReactNode; visible?: boolean; width?: string; height?: string; onClose?: () => void; showAdjust?: boolean; isFullscreen?: boolean; onAdjust?: (val: boolean) => void; children?: any; className?: string; style?: CSSProperties; showMask?: boolean; }>; declare const _default$3: react.MemoExoticComponent<(props: ModalProps) => react.JSX.Element>; declare const StrIcon: (name: keyof CustomStrIcon, customIcon: CustomIcon) => string; interface NormalFooterToolbarProps { children: ReactNode; onClick?: (e: MouseEvent) => void; disabled?: boolean; } declare const _default$2: react.MemoExoticComponent<(props: NormalFooterToolbarProps) => react.JSX.Element>; declare const _default$1: react.NamedExoticComponent>; interface TocItem extends HeadList { index: number; children?: Array; } interface CatalogProps { /** * 编辑器的Id，务必与需要绑定的编辑器Id相同 */ editorId: string; className?: string; mdHeadingId?: MdHeadingId; /** * 指定滚动的容器，选择器需带上对应的符号，默认预览框 * 元素必须定位！！！！！！ * * 默认：#md-editor-preview-wrapper */ scrollElement?: string | HTMLElement; style?: CSSProperties; theme?: Themes; onClick?: (e: MouseEvent, t: TocItem) => void; /** * 高亮标题相对滚动容器顶部偏移量，即距离该值时，高亮当前目录菜单项 * * 默认：20px */ offsetTop?: number; /** * 滚动区域的固定顶部高度 * * 默认：0 */ scrollElementOffsetTop?: number; /** * 高亮的标题变化事件 * * @param heading * @returns */ onActive?: (heading: HeadList | undefined, activeElement: HTMLDivElement) => void; /** * 滚动容器是否在web component中，默认不在 * * 在其中的话通过document查询不到 */ isScrollElementInShadow?: boolean; /** * 设置与哪个区域同步，默认与内容区域同步 * * >= v5.3.0 * * @default 'preview' */ syncWith?: 'editor' | 'preview'; /** * 控制最大显示的目录层级 * * >= v5.5.0 */ catalogMaxDepth?: number; } declare const _default: react.MemoExoticComponent<(props: CatalogProps) => react.JSX.Element>; /** * 重写markdown-it-xss，它的作者好像不维护了 */ interface XSSPluginType { xss?: (_xss: typeof xss) => XSS.IFilterXSSOptions | xss.IFilterXSSOptions; /** * 它不会覆盖默认的白名单，而是把默认白名单、内置白名单结合 */ extendedWhiteList?: xss.IFilterXSSOptions['whiteList']; } declare const XSSPlugin: (md: markdownit, options: XSSPluginType) => void; declare const prefix = "md-editor"; declare const editorExtensionsAttrs: GlobalConfig['editorExtensionsAttrs']; declare const allToolbar: Array; declare const allFooter: Array; declare const config: Config; declare const zh_CN: StaticTextDefaultValue; declare const en_US: StaticTextDefaultValue; /** * 清空组件带来的副作用，例如 * 1. 使用CDN嵌入的链接，为了保证多个组件能够正常使用，组件在卸载时不会主动移除 */ declare const clearSideEffects: () => void; export { _default$5 as DropdownToolbar, _default as MdCatalog, _default$7 as MdEditor, _default$3 as MdModal, _default$1 as MdPreview, _default$4 as ModalToolbar, _default$2 as NormalFooterToolbar, _default$6 as NormalToolbar, StrIcon, XSSPlugin, allFooter, allToolbar, clearSideEffects, config, editorExtensionsAttrs, en_US, prefix, zh_CN }; export type { ChangeEvent, CodeCss, CodeCssAttrs, CodeMirrorExtension, Config, ContextType, CustomIcon, CustomStrIcon, DOMEventHandlers, EditorProps, ErrorEvent, ExposeEvent, ExposeParam, ExposePreviewParam, FocusOption, Footers, GetCatalogEvent, GlobalConfig, HeadList, HtmlChangedEvent, InnerError, Insert, InsertContentGenerator, InsertParam, MarkdownItConfigPlugin, MdHeadingId, MdPreviewProps, MdPreviewStaticProps, MermaidTemplate, PreviewRendererComponent, PreviewRendererProps, PreviewThemes, SaveEvent, SettingType, StaticProps, StaticTextDefault, StaticTextDefaultKey, StaticTextDefaultValue, TableShapeType, Themes, ToolbarNames, ToolbarTips, UpdateSetting, UploadImgCallBack, UploadImgCallBackParam, UploadImgEvent, XSSPluginType };