index.d.ts

import * as React from 'react';
import {
	EditorState as _EditorState,
	EditorProps as DraftEditorProps,
	Editor
} from 'draft-js';

export type EditorState = _EditorState & {
	[key: string]: any;
};

export { DraftEditorProps };

export interface BraftEditorProps {
	value?: EditorState;
	defaultValue?: EditorState;
	placeholder?: string;
	id?: string,
	editorId?: string,
	readOnly?: boolean;
	language?:
	| 'zh'
	| 'zh-hant'
	| 'en'
	| 'pl'
	| ((languages: any, context: any) => any);
	controls?: ControlType[];
	excludeControls?: BuiltInControlType[];
	extendControls?: ExtendControlType[];
	componentBelowControlBar?: React.ReactNode;
	media?: MediaType;
	imageControls?: ImageControlType[];
	colors?: string[];
	fontSizes?: number[];
	fontFamilies?: { name: string; family: string }[];
	lineHeights?: number[];
	textAligns?: ('left' | 'center' | 'right' | 'justify')[];
	letterSpacings?: number[];
	emojis?: string[];
	draftProps?: DraftEditorProps;
	hooks?: HooksType;
	textBackgroundColor?: boolean;
	stripPastedStyles?: boolean;
	className?: string;
	style?: React.CSSProperties;
	controlBarClassName?: string;
	controlBarStyle?: React.CSSProperties;
	contentClassName?: string;
	contentStyle?: React.CSSProperties;
	onChange?: (editorState: EditorState) => void;
	onFocus?: Function;
	onBlur?: Function;
	onTab?: Function;
	onDelete?: Function;
	onSave?: Function;
}

export default class BraftEditor extends React.Component<BraftEditorProps> {
	static createEditorState(
		content: string | any,
		options?: object
	): EditorState;

	undo(): void;
	redo(): void;
	clearEditorContent(): void;
	forceRender(): void;
	setValue(editorState: EditorState): void;
	getValue(): EditorState;
	getFinderInstance(): any;
	getDraftInstance(): Editor;
}

export type ControlType =
	| BuiltInControlType
	| {
		key: BuiltInControlType;
		title?: string;
		text?: string | React.ReactNode;
	}
	| ExtendControlType;

export type BuiltInControlType =
	| 'blockquote'
	| 'bold'
	| 'code'
	| 'clear'
	| 'emoji'
	| 'font-family'
	| 'font-size'
	| 'fullscreen'
	| 'headings'
	| 'hr'
	| 'italic'
	| 'letter-spacing'
	| 'line-height'
	| 'link'
	| 'list-ol'
	| 'list-ul'
	| 'media'
	| 'redo'
	| 'remove-styles'
	| 'separator'
	| 'strike-through'
	| 'superscript'
	| 'subscript'
	| 'text-align'
	| 'text-color'
	| 'text-indent'
	| 'underline'
	| 'undo';

export type ExtendControlType =
	| {
		key: string;
		type: 'button';
		title?: string;
		className?: string;
		html?: string | null;
		text?: string | React.ReactNode;
		onClick?: Function;
	}
	| {
		key: string;
		type: 'dropdown';
		title?: string;
		className?: string;
		html?: string | null;
		text?: string | React.ReactNode;
		showArrow?: boolean;
		arrowActive?: boolean;
		autoHide?: boolean;
		component: React.ReactNode;
	}
	| {
		key: string;
		type: 'modal';
		title?: string;
		className?: string;
		html?: string | null;
		text?: string | React.ReactNode;
		onClick?: Function;
		modal: {
			id: string;
			title?: string;
			className?: string;
			width?: number;
			height?: number;
			showFooter?: boolean;
			showCancel?: boolean;
			showConfirm?: boolean;
			confirmable?: boolean;
			showClose?: boolean;
			closeOnBlur?: boolean;
			closeOnConfirm?: boolean;
			closeOnCancel?: boolean;
			cancelText?: string;
			confirmText?: string;
			bottomText?: React.ReactNode;
			onConfirm?: Function;
			onCancel?: Function;
			onClose?: Function;
			onBlur?: Function;
			children: React.ReactNode;
		};
	}
	| {
		key: string;
		type: 'component';
		component: React.ReactNode;
	};

export type MediaType = {
	uploadFn?: (
		params: {
			file: File;
			progress: (progress: number) => void;
			libraryId: string;
			success: (
				res: {
					url: string;
					meta: {
						id: string;
						title: string;
						alt: string;
						loop: boolean;
						autoPlay: boolean;
						controls: boolean;
						poster: string;
					};
				}
			) => void;
			error: (
				err: {
					msg: string;
				}
			) => void;
		}
	) => void;
	validateFn?: (file: File) => boolean | PromiseLike<any>;
	accepts?: {
		image?: string | false;
		video?: string | false;
		audio?: string | false;
	};
	externals?: {
		image?: boolean;
		video?: boolean;
		audio?: boolean;
		embed?: boolean;
	};
	onInsert?: Function;
	onChange?: Function;
	pasteImage?: boolean;
};

export type ImageControlType =
	| 'float-left'
	| 'float-right'
	| 'align-left'
	| 'align-center'
	| 'align-right'
	| 'link'
	| 'size'
	| 'remove'
	| {
		text?: string;
		render?: (mediaData: any) => void;
		onClick?: (block: any) => void;
	};

export type HooksType = {
	'toggle-link': HookFunc;
	'open-braft-finder': HookFunc;
	'toggle-inline-style': HookFunc;
	'change-block-type': HookFunc;
	'exec-editor-command': HookFunc;
	'insert-emoji': HookFunc;
	'toggle-font-family': HookFunc;
	'toggle-font-size': HookFunc;
	'toggle-letter-spacing': HookFunc;
	'toggle-line-height': HookFunc;
	'toggle-text-alignment': HookFunc;
	'toggle-text-color': HookFunc;
	'toggle-text-background-color': HookFunc;
	'select-medias': HookFunc;
	'deselect-medias': HookFunc;
	'remove-medias': HookFunc;
	'insert-medias': HookFunc;
	'select-files': HookFunc;
	[key: string]: HookFunc;
};

export type HookFunc = (
	params: { href: string; target: any }
) => { href: string; target: any };

export type HookType =
	| 'toggle-link'
	| 'open-braft-finder'
	| 'toggle-inline-style'
	| 'change-block-type'
	| 'exec-editor-command'
	| 'insert-emoji'
	| 'toggle-font-family'
	| 'toggle-font-size'
	| 'toggle-letter-spacing'
	| 'toggle-line-height'
	| 'toggle-text-alignment'
	| 'toggle-text-color'
	| 'toggle-text-background-color'
	| 'select-medias'
	| 'deselect-medias'
	| 'remove-medias'
	| 'insert-medias'
	| 'select-files';