Draft-js-plugins: How to use draft-js-alignment-plugin?

[birledan]

Hello.
Do you have a working example of this plugin? I added 'import createAlignmentPlugin' and 'const alignmentPlugin' but I don't know how to use it :|.
thank you

[nikgraf]

@birledan sorry, I didn't get to write documentation for it yet. @bkniffler built it & used it here: https://github.com/bkniffler/draft-wysiwyg

If you have time to add PR after investigating I would be very thankful 😃 I will close the issue for now so I can keep an overview of critical issues. Feel free to continue the conversation here. I will reply.

[bkniffler]

Here is a little example (from the top of my head!)

// editor.js
import createEntityPropsPlugin from 'draft-js-entity-props-plugin'; // necessary for alignment plugin
import createAlignmentPlugin, { AlignmentDecorator } from 'draft-js-alignment-plugin';
import 'draft-js-alignment-plugin/lib/plugin.css';

const plugins = [
   createEntityPropsPlugin({ }),
   createAlignmentPlugin({}),
];
... "look at example https://github.com/draft-js-plugins/draft-js-plugins/blob/master/README.md)"

// aligned-image-block.js
import { AlignmentDecorator } from 'draft-js-alignment-plugin';
@AlignmentDecorator
export default class AlignedImageBlock extends Component {
   render() {
      const { className, alignment, actions } = this.props;
      console.log(alignment); // e.g. 'left', 'center', 'right'
      return <img className={className} />
   }
   // Or with some alignment buttons
   render() {
      const { className, alignment, actions } = this.props;
      console.log(alignment); // e.g. 'left', 'center', 'right'
      console.log(actions); // Buttons/Actions to toggle left/center/right states, use if you want to create your own buttons. Exposes 'active' (true/false), 'toggle' function, 'label' and 'button'
      return (
         <div>
            {actions.map(action => <span style={{fontWeight: action.active ? 'bold' : 'normal'}} key={action.label} onClick={action.toggle}>{action.label}</span>)}
            <img className={className} />
         </div>
      );
   }
}

Instead of rendering your own buttons, you can also use the toolbar plugin. For an example, checkout draft-wysiwyg which implements the toolbar plugin, focus plugin (set focus on blocks by onClick) and many more!

Sorry for the current lack of docs :( I really hope we can tackle this sometime!

Feel free to ask for help here!