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

import React, { Component } from 'react';
import {
  convertFromRaw,
  EditorState,
} from 'draft-js';

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

import createResizeablePlugin from 'draft-js-resizeable-plugin';

import createFocusPlugin from 'draft-js-focus-plugin';
import createColorBlockPlugin from './colorBlockPlugin';
import editorStyles from './editorStyles.css';

const focusPlugin = createFocusPlugin();
const resizeablePlugin = createResizeablePlugin();

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

const colorBlockPlugin = createColorBlockPlugin({ decorator });
const plugins = [focusPlugin, resizeablePlugin, colorBlockPlugin];

/* eslint-disable */
const initialState = {
    "entityMap": {
        "0": {
            "type": "colorBlock",
            "mutability": "IMMUTABLE",
            "data": {}

import createHashtagPlugin from 'draft-js-hashtag-plugin'
import 'draft-js-hashtag-plugin/lib/plugin.css'
const hashtagPlugin = createHashtagPlugin()

/* Image with Alignment, dnd, focus, resize plugin */
import createImagePlugin from 'draft-js-image-plugin'
import createAlignmentPlugin from 'draft-js-alignment-plugin'
import createFocusPlugin from 'draft-js-focus-plugin'
import createResizeablePlugin from 'draft-js-resizeable-plugin'
import createDndPlugin from 'draft-js-drag-n-drop-plugin'

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

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

const decorator = composeDecorators(
  resizeablePlugin.decorator,
  alignmentPlugin.decorator,
  focusPlugin.decorator,
  dndPlugin.decorator
)
const imagePlugin = createImagePlugin({ decorator })

/* Linkify */
import createLinkifyPlugin from 'draft-js-linkify-plugin'
import 'draft-js-linkify-plugin/lib/plugin.css'
const linkifyPlugin = createLinkifyPlugin()

import React, { Component } from 'react';
import { EditorState, convertFromRaw } from 'draft-js';
import Editor, { composeDecorators } from 'draft-js-plugins-editor'; // eslint-disable-line import/no-unresolved
// eslint-disable-next-line import/no-unresolved
import createAlignmentPlugin from 'draft-js-alignment-plugin';
// eslint-disable-next-line import/no-unresolved
import createFocusPlugin from 'draft-js-focus-plugin';
// eslint-disable-next-line import/no-unresolved
import createResizeablePlugin from 'draft-js-resizeable-plugin';
import createVideoPlugin from 'draft-js-video-plugin'; // eslint-disable-line import/no-unresolved
import editorStyles from './editorStyles.css';

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

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

const videoPlugin = createVideoPlugin({ decorator });
const { types } = videoPlugin;
const plugins = [focusPlugin, alignmentPlugin, resizeablePlugin, videoPlugin];
/* eslint-disable */
const initialState = {
  "entityMap": {
    "0": {

import React, { Component } from 'react';
import { EditorState, convertFromRaw } from 'draft-js';
import Editor, { composeDecorators } from 'draft-js-plugins-editor'; // eslint-disable-line import/no-unresolved
// eslint-disable-next-line import/no-unresolved
import createAlignmentPlugin from 'draft-js-alignment-plugin';
// eslint-disable-next-line import/no-unresolved
import createFocusPlugin from 'draft-js-focus-plugin';
// eslint-disable-next-line import/no-unresolved
import createResizeablePlugin from 'draft-js-resizeable-plugin';
// eslint-disable-next-line import/no-unresolved
import createDragNDropPlugin from 'draft-js-drag-n-drop-plugin';
import createVideoPlugin from 'draft-js-video-plugin'; // eslint-disable-line import/no-unresolved
import editorStyles from './editorStyles.css';

const focusPlugin = createFocusPlugin();
const resizeablePlugin = createResizeablePlugin();
const dragNDropPlugin = createDragNDropPlugin();
const alignmentPlugin = createAlignmentPlugin();
const { AlignmentTool } = alignmentPlugin;

const decorator = composeDecorators(
  resizeablePlugin.decorator,
  alignmentPlugin.decorator,
  focusPlugin.decorator,
  dragNDropPlugin.decorator
);

const videoPlugin = createVideoPlugin({ decorator });
const { types } = videoPlugin;
const plugins = [dragNDropPlugin, focusPlugin, alignmentPlugin, resizeablePlugin, videoPlugin];
/* eslint-disable */
const initialState = {

initializePlugins = (isClient, commentEditor) => {
    const linkPlugin = createLinkPlugin();
    const alignmentPlugin = createAlignmentPlugin();
    const focusPlugin = createFocusPlugin();
    const resizeablePlugin = createResizeablePlugin();
    const decorator = composeDecorators(
      resizeablePlugin.decorator,
      alignmentPlugin.decorator,
      focusPlugin.decorator,
    );

    const dividerPlugin = createDividerPlugin({decorator});

    const toolbarButtons = [
      { button: BoldButton,                    commentEditor: true   },
      { button: ItalicButton,                  commentEditor: true   },
      { button: UnderlineButton,               commentEditor: true   },
      { button: LinkButton,             commentEditor: true   },
      { button: Separator,                     commentEditor: true   },
      { button: HeadlineOneButton,             commentEditor: false  },
      { button: HeadlineTwoButton,             commentEditor: true   },

import createImagePlugin from 'draft-js-image-plugin';

import createAlignmentPlugin from 'draft-js-alignment-plugin';

import createFocusPlugin from 'draft-js-focus-plugin';

import createResizeablePlugin from 'draft-js-resizeable-plugin';

import createBlockDndPlugin from 'draft-js-drag-n-drop-plugin';

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

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 dragNDropFileUploadPlugin = createDragNDropUploadPlugin({
  handleUpload: mockUpload,
  addImage: imagePlugin.addImage,
});

import * as React from 'react';
import { RouteComponentProps } from 'react-router-dom';
import { convertFromRaw, EditorState } from 'draft-js';
import Editor, { composeDecorators } from 'draft-js-plugins-editor';
import createImagePlugin from 'draft-js-image-plugin';
import createAlignmentPlugin from 'draft-js-alignment-plugin';
import createFocusPlugin from 'draft-js-focus-plugin';
import createResizeablePlugin from 'draft-js-resizeable-plugin';
import createBlockDndPlugin from 'draft-js-drag-n-drop-plugin';
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 });

import createLinkPlugin from 'draft-js-anchor-plugin';
import createInlineToolbarPlugin, { Separator } from 'draft-js-inline-toolbar-plugin';
import {
  ItalicButton,

import createResizeablePlugin from 'draft-js-resizeable-plugin'
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 {

linkPlugin,
  Counter,
  createDividerPlugin,
} from './index';

const undoPlugin = createUndoPlugin({
  undoContent: <button>undo</button>,
  redoContent: <button>redo</button>,
});
const { UndoButton, RedoButton } = undoPlugin;
const richButtonsPlugin = createRichButtonsPlugin();
const blockBreakoutPlugin = createBlockBreakoutPlugin();
const focusPlugin = createFocusPlugin();
const dividerPlugin = createDividerPlugin({ focusPlugin });
const { DividerButton } = dividerPlugin;
const resizeablePlugin = createResizeablePlugin();
const alignmentPlugin = createAlignmentPlugin();
const decorator = composeDecorators(
  alignmentPlugin.decorator,
  focusPlugin.decorator,
  resizeablePlugin.decorator
);
const imagePlugin = createImagePlugin({ decorator });
const { AlignmentTool } = alignmentPlugin;

const HistoryButtons = styled('div')`
  position: absolute;
  left: 0.5rem;
  bottom: 0.5rem;
  &gt; button {
    background: none;
    border: none;

initializePlugins = () => {
    const linkPlugin = createLinkPlugin();
    const alignmentPlugin = createAlignmentPlugin();
    const focusPlugin = createFocusPlugin();
    const resizeablePlugin = createResizeablePlugin();

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

    const dividerPlugin = createDividerPlugin({decorator});

    const inlineToolbarPlugin = createInlineToolbarPlugin({
      structure: [
        BoldButton,
        ItalicButton,
        UnderlineButton,
        linkPlugin.LinkButton,
        Separator,