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

// It is important to import the Editor which accepts plugins.
import Editor from 'draft-js-plugins-editor';
import createLinkPlugin from 'draft-js-anchor-plugin';
import createInlineToolbarPlugin from 'draft-js-inline-toolbar-plugin';
import { ItalicButton, BoldButton, UnderlineButton } from 'draft-js-buttons';
import React from 'react';

// Here's your chance to pass in a configuration object (see below).
const linkPlugin = createLinkPlugin();

// Pass the `linkPlugin.LinkButton` into the structure of the inline toolbar.
const inlineToolbarPlugin = createInlineToolbarPlugin({
  structure: [
    BoldButton,
    ItalicButton,
    UnderlineButton,
    linkPlugin.LinkButton
  ]
});

const { InlineToolbar } = inlineToolbarPlugin;
const plugins = [inlineToolbarPlugin, linkPlugin];

const MyEditor = ({ editorState, onChange }) => (
  <div></div>

//  LinkButton,
  NumberedListButton,
  StrikethroughButton,
} from './Buttons';
import createInlineToolbarPlugin from 'draft-js-inline-toolbar-plugin';
import createLinkPlugin from 'draft-js-anchor-plugin';
import createSideToolbarPlugin from 'draft-js-side-toolbar-plugin';
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;

const options = settings => {
      if (props.isTopPopup) {
        return {
          top: settings.decoratorRect.y - 30 + 'px', // change this value (30) for manage the distance between cursor and bottom edge of popover
          transform: 'scale(1) translateY(-100%)'
        };
      }

      return {
        top: settings.decoratorRect.y + 'px',
        transform: 'scale(1)'
      };
    };

    this.linkPlugin = createLinkPlugin();
    this.toolbarPlugin = createToolbarPlugin();
    this.emojiPlugin = createEmojiPlugin({
      useNativeArt: true,
      selectButtonContent: ,
      positionSuggestions: settings => {
        return {
          left: settings.decoratorRect.x + 'px',
          boxShadow: '0 0 12px 0 rgba(0, 0, 0, 0.1)',
          transformOrigin: '1em 0%',
          position: 'fixed',
          transition: 'all 0.2s cubic-bezier(0.3, 1.2, 0.2, 1) 0s',
          ...options(settings)
        };
      }
    });
  }

import createLinkPlugin from 'draft-js-anchor-plugin';
import createInlineToolbarPlugin, { Separator } from 'draft-js-inline-toolbar-plugin';
import {
  ItalicButton,
  BoldButton,
  UnderlineButton,
  CodeButton,
  HeadlineOneButton,
  HeadlineTwoButton,
  HeadlineThreeButton,
  UnorderedListButton,
  OrderedListButton,
  BlockquoteButton,
  CodeBlockButton,
} from 'draft-js-buttons';
const linkPlugin = createLinkPlugin();
const inlineToolbarPlugin = createInlineToolbarPlugin({
  structure: [
    BoldButton,
    ItalicButton,
    UnderlineButton,
    HeadlineTwoButton,
    HeadlineThreeButton,
    UnorderedListButton,
    OrderedListButton,
    BlockquoteButton,
    linkPlugin.LinkButton
  ]
});
const plugins = [
    blockDndPlugin,
    focusPlugin,

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,

import React, { Component, Fragment } from 'react';
import createInlineToolbarPlugin, {
  Separator,
} from 'draft-js-inline-toolbar-plugin';
import styled from 'styled-components';
import { Typography } from '@rmwc/typography';
import { IconButton } from '@rmwc/icon-button';
import createLinkPlugin from 'draft-js-anchor-plugin';

const inlineToolbarPlugin = createInlineToolbarPlugin();
const { InlineToolbar: DefaultInlineToolbar } = inlineToolbarPlugin;
const linkPlugin = createLinkPlugin();

const InlineToolbarWrapper = styled('div')`
  [class^='draftJsToolbar__toolbar'] {
    z-index: 10;
    border-radius: 0.25rem;
  }
`;

const Button = ({
  icon,
  toggleBlockType,
  toggleInlineStyle,
  isActive,
  style,
}) => {
  return (

import React, { Component } from 'react';
import Editor, { createEditorStateWithText } from 'draft-js-plugins-editor';
import createInlineToolbarPlugin from 'draft-js-inline-toolbar-plugin';
import createLinkPlugin from 'draft-js-anchor-plugin';
import {
  ItalicButton,
  BoldButton,
  UnderlineButton,
} from 'draft-js-buttons';
import editorStyles from './editorStyles.css';
import buttonStyles from './buttonStyles.css';
import toolbarStyles from './toolbarStyles.css';
import linkStyles from './linkStyles.css';

const linkPlugin = createLinkPlugin({
  theme: linkStyles,
  placeholder: 'http://…'
});
const inlineToolbarPlugin = createInlineToolbarPlugin({
  theme: { buttonStyles, toolbarStyles }
});
const { InlineToolbar } = inlineToolbarPlugin;
const plugins = [inlineToolbarPlugin, linkPlugin];
const text = 'Try selecting a part of this text and click on the link button in the toolbar that appears …';

export default class ThemedInlineToolbarEditor extends Component {
  state = {
    editorState: createEditorStateWithText(text)
  };

  onChange = (editorState) =>

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   },

import React, { Component } from 'react';
import Editor, { createEditorStateWithText } from 'draft-js-plugins-editor';
import createInlineToolbarPlugin from 'draft-js-inline-toolbar-plugin';
import createLinkPlugin from 'draft-js-anchor-plugin';
import { ItalicButton, BoldButton, UnderlineButton } from 'draft-js-buttons';
import editorStyles from './editorStyles.css';

const linkPlugin = createLinkPlugin();
const inlineToolbarPlugin = createInlineToolbarPlugin();
const { InlineToolbar } = inlineToolbarPlugin;
const plugins = [inlineToolbarPlugin, linkPlugin];
const text = 'Try selecting a part of this text and click on the link button in the toolbar that appears …';

export default class SimpleLinkPluginEditor extends Component {
  state = {
    editorState: createEditorStateWithText(text)
  };

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

  focus = () =>
    this.editor.focus();