How to use draft-js-dnd-plugin - 9 common examples

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
        )
      )
    )
  )
);

import createDndPlugin from 'draft-js-dnd-plugin'

/*
import focusStyles from './Focus.css'
import alignmentStyles from './Alignment.css'
const focusPlugin = createFocusPlugin({ theme: focusStyles })
const alignmentPlugin = createAlignmentPlugin({ theme: alignmentStyles })
*/

import 'draft-js-alignment-plugin/lib/plugin.css'
import 'draft-js-focus-plugin/lib/plugin.css'
const focusPlugin = createFocusPlugin()
const alignmentPlugin = createAlignmentPlugin()

const resizeablePlugin = createResizeablePlugin()
const dndPlugin = createDndPlugin()
const { AlignmentTool } = alignmentPlugin

const decorator = composeDecorators(
  resizeablePlugin.decorator,
  alignmentPlugin.decorator,
  focusPlugin.decorator,
  dndPlugin.decorator
)

import { initialState } from './initialState'

const imagePlugin = createImagePlugin({ decorator })
const plugins = [dndPlugin, focusPlugin, alignmentPlugin, resizeablePlugin, imagePlugin]
export default class CustomImageEditor extends Component {

  state = {

import React, {Component} from 'react';
import Image from './Image';
import {EditorState} from 'draft-js';
import Editor from 'draft-js-plugins-editor';
import createUploadPlugin from 'draft-js-dnd-plugin';
import createToolbarPlugin from 'draft-js-toolbar-plugin';
import TextToolbar from 'draft-js-toolbar-plugin/components/text-toolbar';
import styles from './styles.css';
import mockUpload from '../utils/mockUpload';
import DndWrapper from 'draft-js-dnd-plugin/components/dnd-wrapper';
import decorateWithProps from 'decorate-component-with-props';

const toolbarPlugin = createToolbarPlugin({});
const uploadPlugin = createUploadPlugin({
  Image: decorateWithProps(Image, { toolbarTheme: toolbarPlugin.theme }),
  upload: (data, success, failed, progress) =>
    mockUpload(data, success, failed, progress),
});

class SimpleDndEditor extends Component {
  state = {
    editorState: EditorState.createEmpty(),
    draggingOver: false,
  };

  onChange = (editorState) => {
    this.setState({
      editorState,
    });
  };

const { isDragging, progress } = this.props;
    const classNames = [styles.editor];
    if (isDragging) classNames.push(styles.dnd);
    if (progress) classNames.push(styles.uploading);

    const plugins = [uploadPlugin, toolbarPlugin];
    return (
      <div>
        
        
      </div>
    );
  }
}

export default DndWrapper(SimpleDndEditor, uploadPlugin);