How to use draft-js-side-toolbar-plugin - 10 common examples

import React, { Component, Fragment } from 'react';
import createSideToolbarPlugin from 'draft-js-side-toolbar-plugin';
import styled from 'styled-components';
import { IconButton } from '@rmwc/icon-button';
import addIcon from '../../../images/baseline-add-24px.svg';
import expandIcon from '../../../images/baseline-expand_more-24px.svg';

// Setting the side Toolbar at right position(default is left) and styling with custom theme
const sideToolbarPlugin = createSideToolbarPlugin();
const { SideToolbar: DefaultSideToolbar } = sideToolbarPlugin;

const SideToolbarWrapper = styled('div')`
  [class^='draftJsToolbar__wrapper'] {
    z-index: 8;
    left: -1.125rem !important;
    /* transform: scale(1) !important; */
    /* visibility: visible !important; */
    [class*='draftJsToolbar__blockType'] {
      transition: transform 200ms ease, display 200ms ease;
      svg {
        display: none;
      }
      ::before {
        content: url(${addIcon});
        display: ${props => (props['data-active'] ? 'none' : 'block')};

Editor
*/

import React from 'react';
import Editor from 'draft-js-plugins-editor';
import createSideToolbarPlugin from 'draft-js-side-toolbar-plugin';
import {EditorState, RichUtils, Modifier, CompositeDecorator, SelectionState} from 'draft-js';

import { LSTMGenerator } from './Lstm';

import Loading from './Loading'

import 'draft-js/dist/Draft.css';
import './../css/Menu.css';

const sideToolbarPlugin = createSideToolbarPlugin({

});

const { SideToolbar } = sideToolbarPlugin;
const plugins = [sideToolbarPlugin];

// LSTM Parameters
const length = 37; // The length of the generated result
const seedSize = 30;  // The size of the seed to feed the LSTM

class TextEditor extends React.Component {
  constructor(props) {
    super(props);
    const decorator = new CompositeDecorator([{
        strategy: getEntityStrategy('IMMUTABLE'),
        component: GeneratedSpan,

import React from 'react';
import { Separator } from 'draft-js-inline-toolbar-plugin';
import { styles as toolbarStyles, useStyles as useToolbarStyles } from './toolbarStyles';
import Toolbar from '@material-ui/core/Toolbar';
import { styles as sideToolbarStyles, useStyles as useSideToolbarStyles } from './sideToolbarStyles';

// TODO(mime): rewrite this one day. it's annoying to work with.
// Plus, this probably conflicts with plugins/Anchor.js :-/
export const linkPlugin = createLinkPlugin({ theme: {} });

export const inlineToolbarPlugin = createInlineToolbarPlugin({
  // TODO(mime): theme migration
  //theme: { toolbarStyles: toolbarStyles },
});
const { InlineToolbar } = inlineToolbarPlugin;
export const sideToolbarPlugin = createSideToolbarPlugin({
  position: 'right',
  // TODO(mime): theme migration
  // theme: {
  //   buttonStyles: toolbarStyles,
  //   toolbarStyles: Object.assign({}, toolbarStyles, sideToolbarStyles),
  //   blockTypeSelectStyles: sideToolbarStyles,
  // },
});
const { SideToolbar } = sideToolbarPlugin;

export default function Toolbars({ AlignmentTool, dividerPlugin }) {
  const { DividerButton } = dividerPlugin;
  const styles = useToolbarStyles();
  const sideStyles = useSideToolbarStyles();

  return (

import React, { Component } from 'react'
import Editor, { createEditorStateWithText } from 'draft-js-plugins-editor'
import createSideToolbarPlugin from 'draft-js-side-toolbar-plugin'

/*
import styles from './SideToolbar.css'
const sideToolbarPlugin = createSideToolbarPlugin({ themes: styles })
// themes not yet implemented
*/

import 'draft-js-side-toolbar-plugin/lib/plugin.css'
const sideToolbarPlugin = createSideToolbarPlugin()

const { SideToolbar } = sideToolbarPlugin
const plugins = [sideToolbarPlugin]
const text = 'Once you click into the text field the sidebar plugin will show up …'


export default class CustomSideToolbarEditor extends Component {

  state = {
    editorState: createEditorStateWithText(text)
  }

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

const focusPlugin = createFocusPlugin();

const decorator = composeDecorators(focusPlugin.decorator);

const dividerPlugin = createDividerPlugin({ decorator });

const DefaultBlockTypeSelect = ({ getEditorState, setEditorState, theme }) => (
  
);

const sideToolbarPlugin = createSideToolbarPlugin({
  structure: [DefaultBlockTypeSelect]
});

const { SideToolbar } = sideToolbarPlugin;

const plugins = [focusPlugin, dividerPlugin, sideToolbarPlugin];

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

const focusPlugin = createFocusPlugin();

const decorator = composeDecorators(focusPlugin.decorator);

const dividerPlugin = createDividerPlugin({ decorator });

const DefaultBlockTypeSelect = ({ getEditorState, setEditorState, theme }) => (
  
);

const sideToolbarPlugin = createSideToolbarPlugin({
  structure: [DefaultBlockTypeSelect]
});

const { SideToolbar } = sideToolbarPlugin;

const plugins = [focusPlugin, dividerPlugin, sideToolbarPlugin];

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

import React, { Component } from 'react';

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

import createSideToolbarPlugin from 'draft-js-side-toolbar-plugin';
import editorStyles from './editorStyles.css';
import buttonStyles from './buttonStyles.css';
import toolbarStyles from './toolbarStyles.css';
import blockTypeSelectStyles from './blockTypeSelectStyles.css';

const sideToolbarPlugin = createSideToolbarPlugin({
  theme: { buttonStyles, toolbarStyles, blockTypeSelectStyles }
});
const { SideToolbar } = sideToolbarPlugin;
const plugins = [sideToolbarPlugin];
const text = 'Once you click into the text field the sidebar plugin will show up …';

export default class CustomSideToolbarEditor extends Component {

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

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

import React, { Component } from 'react';
import Editor, { createEditorStateWithText } from 'draft-js-plugins-editor';
import {
  HeadlineOneButton,
  HeadlineTwoButton,
  BlockquoteButton,
  CodeBlockButton,
  UnorderedListButton,
  OrderedListButton,
} from 'draft-js-buttons';
import createSideToolbarPlugin from 'draft-js-side-toolbar-plugin';
import editorStyles from './editorStyles.css';

const sideToolbarPlugin = createSideToolbarPlugin();
const { SideToolbar } = sideToolbarPlugin;
const plugins = [sideToolbarPlugin];
const text = 'Once you click into the text field the sidebar plugin will show up …';

export default class SimpleSideToolbarEditor extends Component {

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

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

OrderedListButton,
} from 'draft-js-buttons';
import { convertFromRaw, EditorState } from 'draft-js';
import styles from './styles.css';
import stickers from './stickers';
import mentions from './mentions';
import initialState from './initialState';

const emojiPlugin = createEmojiPlugin();
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;

import React, { Component } from 'react';
import Editor, { createEditorStateWithText } from 'draft-js-plugins-editor';
import createSideToolbarPlugin from 'draft-js-side-toolbar-plugin';
import editorStyles from './editorStyles.css';

const sideToolbarPlugin = createSideToolbarPlugin();
const { SideToolbar } = sideToolbarPlugin;
const plugins = [sideToolbarPlugin];
const text = 'Once you click into the text field the sidebar plugin will show up …';

export default class SimpleSideToolbarEditor extends Component {

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

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