How to use draft-js-image-plugin - 10 common examples

import createBlockDndUploadPlugin from 'draft-js-drag-n-drop-upload-plugin';
import editorStyles from './editorStyles.css';

const focusPlugin = createFocusPlugin();
const blockDndPlugin = createBlockDndUploadPlugin({
  handleUpload: (data, callback) => {

  }
});

console.log('eyo', blockDndPlugin)

const decorator = composeDecorators(
  focusPlugin.decorator,
);
const imagePlugin = createImagePlugin({ decorator });

const plugins = [
  blockDndPlugin,
  focusPlugin,
  imagePlugin
];

/* eslint-disable */
const initialState = {
    "entityMap": {},
    "blocks": [{
        "key": "9gm3s",
        "text": "You can have images in your text field which are draggable. Hover over the image press down your mouse button and drag it to another position inside the editor.",
        "type": "unstyled",
        "depth": 0,
        "inlineStyleRanges": [],

import React, { Component } from 'react';
import {
  convertFromRaw,
  EditorState,
} from 'draft-js';
import Editor from 'draft-js-plugins-editor';
import createImagePlugin from 'draft-js-image-plugin';
import editorStyles from './editorStyles.css';

const imagePlugin = createImagePlugin();
const plugins = [imagePlugin];

/* eslint-disable */
const initialState = {
    "entityMap": {
        "0": {
            "type": "IMAGE",
            "mutability": "IMMUTABLE",
            "data": {
                "src": "/images/canada-landscape-small.jpg"
            }
        }
    },
    "blocks": [{
        "key": "9gm3s",
        "text": "You can have images in your text field. This is a very rudimentary example, but you can enhance the image plugin with resizing, focus or alignment plugins.",

uploader.on('upload:done', (response) => {
          setUploadState(false)
          const result = JSON.parse(response).result
          if (result && result.content && result.content.url) {
            setEditorState(addImage(getEditorState(), result.content.url))
          } else {
            console.error(response)
            Alert.error('Failed to upload image')
          }
        })
        uploader.on('upload:progress', (progress) => {

const hashtagPlugin = createHashtagPlugin();
const linkifyPlugin = createLinkifyPlugin();
const mentionPlugin = createMentionPlugin();
const undoPlugin = createUndoPlugin();
const stickerPlugin = createStickerPlugin({ stickers });
const inlineToolbarPlugin = createInlineToolbarPlugin();
const sideToolbarPlugin = createSideToolbarPlugin();
const focusPlugin = createFocusPlugin();
const blockDndPlugin = createBlockDndPlugin();
const alignmentPlugin = createAlignmentPlugin();
const decorator = composeDecorators(
  alignmentPlugin.decorator,
  focusPlugin.decorator,
  blockDndPlugin.decorator,
);
const imagePlugin = createImagePlugin({ decorator });

const { MentionSuggestions } = mentionPlugin;
const { EmojiSuggestions } = emojiPlugin;
const { StickerSelect } = stickerPlugin;
const { UndoButton, RedoButton } = undoPlugin;
const { InlineToolbar } = inlineToolbarPlugin;
const { SideToolbar } = sideToolbarPlugin;
const { AlignmentTool } = alignmentPlugin;

const plugins = [
  emojiPlugin,
  hashtagPlugin,
  stickerPlugin,
  linkifyPlugin,
  mentionPlugin,
  undoPlugin,

import React, { Component } from 'react';

import Editor, { createEditorStateWithText } from 'draft-js-plugins-editor';

import createImagePlugin from 'draft-js-image-plugin';
import ImageAdd from './ImageAdd';

import editorStyles from './editorStyles.css';

const imagePlugin = createImagePlugin();
const plugins = [imagePlugin];

const text = 'Click on the + button below and insert "/images/canada-landscape-small.jpg" to add the landscape image. Alternativly you can use any image url on the web.';

export default class CustomImageEditor extends Component {

  state = {
    editorState: createEditorStateWithText(text),
  };

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

getPluginsReady = props => {
    const codePlugin = createCodeEditorPlugin();
    const blockBreakoutPlugin = createBlockBreakoutPlugin();
    const richButtons = createRichButtonsPlugin();
    const prismPlugin = createPrismPlugin({
      prism: Prism
    });
    const linkifyPlugin = createLinkifyPlugin({
      target: "_blank"
    });
    const markdownPlugin = createMarkdownPlugin({ languages });
    const imagePlugin = createImagePlugin({
      imageComponent: Img
    });
    return {
      plugins: [
        linkifyPlugin,
        codePlugin,
        blockBreakoutPlugin,
        richButtons,
        prismPlugin,
        markdownPlugin,
        imagePlugin
      ],
      addImage: imagePlugin.addImage,
      editorButtons: {
        ItalicButton: richButtons.ItalicButton,
        BoldButton: richButtons.BoldButton,

target: '_blank',
    });
    const embedPlugin = createEmbedPlugin({
      EmbedComponent: Embed,
    });
    const prismPlugin = createPrismPlugin({
      prism: Prism,
    });
    const codePlugin = createCodeEditorPlugin();

    const decorator = composeDecorators(
      focusPlugin.decorator,
      dndPlugin.decorator
    );

    const imagePlugin = createImagePlugin({
      decorator,
      imageComponent: Image,
    });

    return {
      plugins: [
        imagePlugin,
        prismPlugin,
        embedPlugin,
        createMarkdownPlugin({
          renderLanguageSelect: props.readOnly
            ? () => null
            : renderLanguageSelect,
        }),
        codePlugin,
        linkifyPlugin,

} from '../../config/constants'
import * as filepicker from 'filestack-js'
import BtnRemove from '../../assets/icons/ui-16px-1_trash-simple.svg'
import { createTopicAttachment } from '../../api/messages'
import { withRouter } from 'react-router-dom'

const linkPlugin = createLinkPlugin()
const blockDndPlugin = createBlockDndPlugin()

const decorator = composeDecorators(
  blockDndPlugin.decorator
)
const allowImages = false
const plugins = [linkPlugin, blockDndPlugin]
if (allowImages) {
  const imagePlugin = createImagePlugin({ decorator })
  plugins.push(handleDropPlugin)
  plugins.push(imagePlugin)
  plugins.push(imageUploadPlugin)
}



const styles = [
  { className: 'bold', style: 'BOLD' },
  { className: 'italic', style: 'ITALIC' },
  { className: 'underline', style: 'UNDERLINE' }
]

const blocks = [
  { className: 'ordered-list', style: 'ordered-list-item' },
  { className: 'unordered-list', style: 'unordered-list-item' },

import createFocusPlugin from "draft-js-focus-plugin";
import createLinkifyPlugin from "draft-js-linkify-plugin";
import createImagePlugin from "draft-js-image-plugin";
import createUndoPlugin from "draft-js-undo-plugin";

import { stateToHTML } from "draft-js-export-html";

const autoListPlugin = createAutoListPlugin();
const entityPlugin = createEntityPropsPlugin();
const focusPlugin = createFocusPlugin();
const linkifyPlugin = createLinkifyPlugin();
const undoPlugin = createUndoPlugin();

const decorator = composeDecorators(focusPlugin.decorator);

const imagePlugin = createImagePlugin({ decorator });
const { UndoButton, RedoButton } = undoPlugin;
const plugins = [
  autoListPlugin,
  entityPlugin,
  focusPlugin,
  imagePlugin,
  linkifyPlugin,
  undoPlugin
];

const styles = {
  contentEditor: {
    display: "flex",
    flexDirection: "column",
    borderCollapse: "collapse",
    border: "1px solid lightgray",