Skip to content

Commit

Permalink
Pass onChange to custom toolbar actions
Browse files Browse the repository at this point in the history
Allows for much more robust (and modular) changes from custom toolbar actions. 

Example: A simple "Smile" action:

```
import { EditorState, Modifier } from 'draft-js';
import actions from 'megadraft/lib/actions/default';

export default actions.concat([
  {
    type: 'custom',
    icon: props => (
      <Smile
        {...props}
        width="24"
        height="18"
        fill="currentColor"
        fillRule="evenodd"
      />
    ),
    action(editorState, onChange) {
      const contentState = Modifier.replaceText(
        editorState.getCurrentContent(),
        editorState.getSelection(),
        '😀',
        editorState.getCurrentInlineStyle()
      );

      onChange(EditorState.push(editorState, contentState, 'insert-characters'));
    }
  }
]);
```
  • Loading branch information
kevinsperrine authored and vierno committed Aug 29, 2018
1 parent 25d8de7 commit b687cb8
Showing 1 changed file with 1 addition and 1 deletion.
2 changes: 1 addition & 1 deletion src/components/Toolbar.js
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ export default class Toolbar extends Component {
switch (item.type) {
case "custom": {
key = "custom-" + position;
toggle = () => item.action(this.props.editorState);
toggle = () => item.action(this.props.editorState, this.props.onChange);
break;
}
case "inline": {
Expand Down

0 comments on commit b687cb8

Please sign in to comment.