How to use the draft-js-dnd-plugin.DraggableDecorator function in draft-js-dnd-plugin

resizeSteps: 10,
  handles: true,
  vertical: 'auto'
})(
  DraggableDecorator(
    FocusDecorator(
      AlignmentDecorator(
        ToolbarDecorator()(
          imageCreator({ theme: imageStyles })
        )
      )
    )
  )
);
const table = FocusDecorator(
  DraggableDecorator(
    ToolbarDecorator()(
      tableCreator({ theme: tableStyles, Editor })
    )
  )
);

// Init Plugins
export default ({ handleUpload, handleDefaultData, plugins = ()=>{}, toolbar = { disableItems: [], textActions: []}}) => [
  plugins,
  createCleanupEmptyPlugin({
    types: ['block-image', 'block-table']
  }),
  createEntityPropsPlugin({ }),
  createToolbarPlugin({
    __toolbarHandler: {
      add: props => console.log('Add toolbar', props),

import 'draft-js-alignment-plugin/lib/plugin.css';
import 'draft-js-focus-plugin/lib/plugin.css';
import 'draft-js-image-plugin/lib/plugin.css';
import 'draft-js-table-plugin/lib/plugin.css';
import 'draft-js-toolbar-plugin/lib/plugin.css';

// Utils
import addBlock from 'draft-js-dnd-plugin/lib/modifiers/addBlock';
import { RichUtils } from 'draft-js';

const image = ResizeableDecorator({
  resizeSteps: 10,
  handles: true,
  vertical: 'auto'
})(
  DraggableDecorator(
    FocusDecorator(
      AlignmentDecorator(
        ToolbarDecorator()(
          imageCreator({ theme: imageStyles })
        )
      )
    )
  )
);
const table = FocusDecorator(
  DraggableDecorator(
    ToolbarDecorator()(
      tableCreator({ theme: tableStyles, Editor })
    )
  )
);

import createFocusPlugin, { FocusDecorator } from 'draft-js-focus-plugin';
import createImagePlugin, { imageCreator, imageStyles } from 'draft-js-image-plugin';
import createLinkifyPlugin from 'draft-js-linkify-plugin';
import Editor from 'draft-js-plugins-editor-wysiwyg';
import createResizeablePlugin, { ResizeableDecorator } from 'draft-js-resizeable-plugin';
import createToolbarPlugin, { ToolbarDecorator } from 'draft-js-toolbar-plugin';
import Immutable from 'immutable';
import Lodash from 'lodash';
import React from 'react';

const imageComponent = ResizeableDecorator({
  resizeSteps: 10,
  handles: true,
  vertical: 'auto'
})(
  DraggableDecorator(
    FocusDecorator(
      AlignmentDecorator(
        ToolbarDecorator()(
          imageCreator({ theme: imageStyles })
        )
      )
    )
  )
);

// Init Plugins
const plugins = [
  createCleanupEmptyPlugin({
    types: ['block-image']
  }),
  createEntityPropsPlugin({ }),

{createRatioPlaceholder()}

};
      return (
         <div style="{styles}">
            Horizontal+Vertical
            {/**/}
         </div>
      );
   }
}

export default ResizeableDecorator({
   resizeSteps: 10,
   caption: true,
   vertical: 'absolute'
})(
  DraggableDecorator(
    FocusDecorator(
      AlignmentDecorator(
        ToolbarDecorator()(
          Div
        )
      )
    )
  )
);

zIndex: 1,
         position: 'relative',
         ...style
      };
      return (
         <div style="{styles}">
            Horizontal only
            {/**/}
         </div>
      );
   }
}
export default ResizeableDecorator({
   handles: true
})(
  DraggableDecorator(
    FocusDecorator(
      AlignmentDecorator(
        ToolbarDecorator()(
          Div
        )
      )
    )
  )
);