diff --git a/types/react-rte/index.d.ts b/types/react-rte/index.d.ts index 61cded4934..2ebf2c0268 100644 --- a/types/react-rte/index.d.ts +++ b/types/react-rte/index.d.ts @@ -1,4 +1,4 @@ -// Type definitions for react-rte 0.16.1 +// Type definitions for react-rte 0.16 // Project: https://github.com/sstur/react-rte // Definitions by: jclyons52 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped @@ -9,7 +9,9 @@ import { ContentBlock, EditorState } from "draft-js"; import { Options as ImportOptions } from "draft-js-import-html"; import { Options as ExportOptions } from "draft-js-export-html"; -type StringMap = { [key: string]: string }; +interface StringMap { + [key: string]: string; +} export class EditorValue { constructor(editorState: EditorState, cache: StringMap); @@ -37,7 +39,7 @@ interface StyleConfig { className?: string; } -type StyleConfigList = Array; +type StyleConfigList = StyleConfig[]; type ChangeHandler = (value: EditorValue) => any; @@ -62,14 +64,14 @@ type GroupName = | "IMAGE_BUTTON"; interface ToolbarConfig { - display: Array; - extraProps?: Object; + display: GroupName[]; + extraProps?: object; INLINE_STYLE_BUTTONS: StyleConfigList; BLOCK_TYPE_DROPDOWN: StyleConfigList; BLOCK_TYPE_BUTTONS: StyleConfigList; } -interface IProps { +interface Props { className?: string; toolbarClassName?: string; editorClassName?: string; @@ -77,24 +79,26 @@ interface IProps { onChange?: ChangeHandler; placeholder?: string; customStyleMap?: { [style: string]: { [key: string]: any } }; - handleReturn?: (event: Object) => boolean; - customControls?: Array; + handleReturn?: (event: object) => boolean; + customControls?: CustomControl[]; readOnly?: boolean; disabled?: boolean; // Alias of readOnly toolbarConfig?: ToolbarConfig; blockStyleFn?: (block: ContentBlock) => string | undefined; autoFocus?: boolean; - keyBindingFn?: (event: Object) => string | undefined; - rootStyle?: Object; - editorStyle?: Object; - toolbarStyle?: Object; + keyBindingFn?: (event: object) => string | undefined; + rootStyle?: object; + editorStyle?: object; + toolbarStyle?: object; } -export default class RichTextEditor extends Component { - public static createEmptyValue(): EditorValue; - public static createValueFromString( +declare class RichTextEditor extends Component { + static createEmptyValue(): EditorValue; + static createValueFromString( markup: string, format: string, options?: ImportOptions ): EditorValue; } + +export default RichTextEditor; diff --git a/types/react-rte/react-rte-tests.tsx b/types/react-rte/react-rte-tests.tsx new file mode 100644 index 0000000000..93e7ffa8f9 --- /dev/null +++ b/types/react-rte/react-rte-tests.tsx @@ -0,0 +1,33 @@ +import * as React from "react"; +import RichTextEditor, { EditorValue } from "react-rte"; + +interface Props { + onChange: (val: string) => void; +} + +class MyStatefulEditor extends React.Component { + state = { + value: RichTextEditor.createEmptyValue() + }; + + onChange = (value: EditorValue) => { + this.setState({value}); + if (this.props.onChange) { + // Send the changes up to the parent component as an HTML string. + // This is here to demonstrate using `.toString()` but in a real app it + // would be better to avoid generating a string on each change. + this.props.onChange( + value.toString('html') + ); + } + } + + render() { + return ( + + ); + } +} diff --git a/types/react-rte/tsconfig.json b/types/react-rte/tsconfig.json index 414a31a0fa..1fa35271b4 100644 --- a/types/react-rte/tsconfig.json +++ b/types/react-rte/tsconfig.json @@ -13,5 +13,5 @@ "noEmit": true, "forceConsistentCasingInFileNames": true }, - "files": ["index.d.ts"] + "files": ["index.d.ts", "react-rte-tests.tsx"] } diff --git a/types/react-rte/tslint.json b/types/react-rte/tslint.json index f93cf8562a..3db14f85ea 100644 --- a/types/react-rte/tslint.json +++ b/types/react-rte/tslint.json @@ -1,3 +1 @@ -{ - "extends": "dtslint/dt.json" -} +{ "extends": "dtslint/dt.json" }