UNPKG

@uiw/react-markdown-editor

Version:

A markdown editor with preview, implemented with React.js and TypeScript.

55 lines (54 loc) 2.28 kB
import React from 'react'; import { ReactCodeMirrorProps, ReactCodeMirrorRef } from '@uiw/react-codemirror'; import MarkdownPreview, { MarkdownPreviewProps } from '@uiw/react-markdown-preview'; import { Commands } from './components/ToolBar'; import './index.less'; export * from './theme'; export * from './commands'; export * from '@uiw/react-markdown-preview'; export declare const scrollerStyle: import("@codemirror/state").Extension; export interface IMarkdownEditor extends ReactCodeMirrorProps { className?: string; prefixCls?: string; /** The raw markdown that will be converted to html (**required**) */ value?: string; /** Shows a preview that will be converted to html. */ visible?: boolean; visibleEditor?: boolean; /** Override the default preview component */ renderPreview?: (props: MarkdownPreviewProps, initVisible: boolean) => React.ReactNode; /** Preview expanded width @default `50%` */ previewWidth?: string; /** Whether to enable scrolling */ enableScroll?: boolean; /** Tool display settings. */ toolbars?: Commands[]; /** The tool on the right shows the settings. */ toolbarsMode?: Commands[]; /** Tool display filter settings. */ toolbarsFilter?: (tool: Commands, idx: number) => boolean; /** Toolbar on bottom */ toolbarBottom?: boolean; /** Option to hide the tool bar. */ hideToolbar?: boolean; /** [@uiw/react-markdown-preview](https://github.com/uiwjs/react-markdown-preview#options-props) options */ previewProps?: MarkdownPreviewProps; /** replace the default `extensions` */ reExtensions?: ReactCodeMirrorProps['extensions']; } export interface ToolBarProps { editor: React.RefObject<ReactCodeMirrorRef>; preview: React.RefObject<HTMLDivElement>; container: React.RefObject<HTMLDivElement>; containerEditor: React.RefObject<HTMLDivElement>; editorProps: IMarkdownEditor; } export interface MarkdownEditorRef { editor: React.RefObject<ReactCodeMirrorRef>; preview: React.RefObject<HTMLDivElement> | null; } declare const MarkdownEditor: MarkdownEditorComponent; type MarkdownEditorComponent = React.FC<React.PropsWithRef<IMarkdownEditor>> & { Markdown: typeof MarkdownPreview; }; export default MarkdownEditor;