diff --git a/types/draft-js/draft-js-tests.tsx b/types/draft-js/draft-js-tests.tsx index 63821eda98..857671d13d 100644 --- a/types/draft-js/draft-js-tests.tsx +++ b/types/draft-js/draft-js-tests.tsx @@ -22,7 +22,8 @@ import { DraftEntityMutability, DraftEntityType, convertFromHTML, - convertToRaw + convertToRaw, + CompositeDecorator, } from 'draft-js'; const SPLIT_HEADER_BLOCK = 'split-header-block'; @@ -38,6 +39,14 @@ export const KEYCODES: Record = { type SyntheticKeyboardEvent = React.KeyboardEvent<{}>; +const HANDLE_REGEX = /\@[\w]+/g; + +class HandleSpan extends React.Component { + render() { + return {this.props.children} + } +} + class RichEditorExample extends React.Component<{}, { editorState: EditorState }> { constructor() { super({}); @@ -51,8 +60,22 @@ class RichEditorExample extends React.Component<{}, { editorState: EditorState } blocksFromHTML.contentBlocks, blocksFromHTML.entityMap, ); - - this.state = { editorState: EditorState.createWithContent(state) }; + const decorator = new CompositeDecorator([{ + strategy: ( + block: ContentBlock, + callback: (start: number, end: number) => void, + contentState: ContentState + ) => { + const text = block.getText(); + let matchArr, start; + while ((matchArr = HANDLE_REGEX.exec(text)) !== null) { + start = matchArr.index; + callback(start, start + matchArr[0].length); + } + }, + component: HandleSpan, + }]); + this.state = { editorState: EditorState.createWithContent(state, decorator) }; } onChange: (editorState: EditorState) => void = (editorState: EditorState) => this.setState({ editorState }); diff --git a/types/draft-js/index.d.ts b/types/draft-js/index.d.ts index e545fa347d..749841e71d 100644 --- a/types/draft-js/index.d.ts +++ b/types/draft-js/index.d.ts @@ -7,6 +7,7 @@ // Michael Wu // Willis Plummer // Santiago Vilar +// Ulf Schwekendiek // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.6 @@ -398,7 +399,7 @@ declare namespace Draft { /** * Given a `ContentBlock`, return an immutable List of decorator keys. */ - getDecorations(block: ContentBlock): Immutable.List; + getDecorations(block: ContentBlock, contentState: ContentState): Immutable.List; /** * Given a decorator key, return the component to use when rendering @@ -456,7 +457,7 @@ declare namespace Draft { class CompositeDraftDecorator { constructor(decorators: Array); - getDecorations(block: ContentBlock): Immutable.List; + getDecorations(block: ContentBlock, contentState: ContentState): Immutable.List; getComponentForKey(key: string): Function; getPropsForKey(key: string): Object; }