Draft-js-plugins: image alignement plugin not working

[firashamila33]

Hello I implemented the image plugins in the Editor as illustrated in the documentation

const focusPlugin = createFocusPlugin();
const resizeablePlugin = createResizeablePlugin();
const blockDndPlugin = createBlockDndPlugin();
const alignmentPlugin = createAlignmentPlugin();
const { AlignmentTool } = alignmentPlugin;

const decorator = composeDecorators(
  resizeablePlugin.decorator,
  alignmentPlugin.decorator,
  focusPlugin.decorator,
  blockDndPlugin.decorator
);
const imagePlugin = createImagePlugin({ decorator });
const plugins = [
  toolbarPlugin,
  emojiPlugin,
  linkifyPlugin,
  blockDndPlugin,
  focusPlugin,
  alignmentPlugin,
  resizeablePlugin,
  imagePlugin
  ];

render() {
      return (
        <div>
          <div style={editorStyles.editor} onClick={this.focus}>
            <Editor
              editorState={this.state.editorState}
              onChange={this.onChange}
              plugins={plugins}
              ref={(element) => { this.editor = element; }}
            />
            <AlignmentTool />
           </div>        
        </div>
      );
    }

but I get the image alignementTools in thee butom of the editor and separated from the image ,, and once I click on the image the alignment tool disappear and I get this error :

createBlockAlignmentButton.js:45 Uncaught TypeError: _this.props.setAlignment is not a function at BlockAlignmentButton._this.activate (createBlockAlignmentButton.js:45) at HTMLUnknownElement.callCallback (react-dom.development.js:100) at Object.invokeGuardedCallbackDev (react-dom.development.js:138) at Object.invokeGuardedCallback (react-dom.development.js:187) at Object.invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:201) at executeDispatch (react-dom.development.js:461) at executeDispatchesInOrder (react-dom.development.js:480) at executeDispatchesAndRelease (react-dom.development.js:581) at executeDispatchesAndReleaseTopLevel (react-dom.development.js:592) at forEachAccumulated (react-dom.development.js:562)

[freedomlang]

@firashamila33 Can't find out the difference between doc's example and your code, it's too weird, i'm willing to take a closer look if there is a codesandbox for that error you mentioned above!

[firashamila33]

Hello @freedomlang
here the example on codesandbox : problem illustration here,
Once I click an alignement button this error occurs
Error : _this.props.setAlignment is not a function

another case is when you upload a photo , and when photo is clicked ,, the alignment buttons desepear

[freedomlang]

@firashamila33 sry for my late reply, just Importing the default styles for alignment plugin and it will work. btw, documentation maybe a little oversight, will find a way to improve it

import 'draft-js-alignment-plugin/lib/plugin.css';

[firashamila33]

Thank you @freedomlang it worked well ,,
yeah the documentation is good but sometimes missing somethings ,,