How to use draft-js-plugins-editor - 10 common examples

To help you get started, we’ve selected a few draft-js-plugins-editor examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github draft-js-plugins / draft-js-plugins / stories / DragNDropUpload / CustomImageEditor / index.js View on Github external
import Editor, { composeDecorators } from 'draft-js-plugins-editor';
import createImagePlugin from 'draft-js-image-plugin';
import createFocusPlugin from 'draft-js-focus-plugin';
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.",
github draft-js-plugins / draft-js-plugins / docs / client / components / pages / Emoji / SimpleEmojiEditor / index.js View on Github external
import React, { Component } from 'react';
import Editor, { createEditorStateWithText } from 'draft-js-plugins-editor'; // eslint-disable-line import/no-unresolved
import createEmojiPlugin from 'draft-js-emoji-plugin'; // eslint-disable-line import/no-unresolved
import editorStyles from './editorStyles.css';

const emojiPlugin = createEmojiPlugin();
const { EmojiSuggestions, EmojiSelect } = emojiPlugin;
const plugins = [emojiPlugin];
const text = `Cool, we can have all sorts of Emojis here. 🙌
🌿☃️🎉🙈 aaaand maybe a few more here 🐲☀️🗻 Quite fun!`;

export default class SimpleEmojiEditor extends Component {

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

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

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

  render() {
    return (
      <div>
        <div></div></div>
github ld-x / last-draft / src / components / SideToolbar / SideToolbar.js View on Github external
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) =&gt; {
    this.setState({ editorState })
  }

  focus = () =&gt; {
    this.editor.focus()
  }

  render() {
    return (
      <div>
        </div>
github mimecuvalo / helloworld / packages / hello-world-editor / plugins / index.js View on Github external
//theme: { alignmentToolStyles: toolbarStyles, buttonStyles: toolbarStyles },
});
export const blockDndPlugin = createBlockDndPlugin();
export const focusPlugin = createFocusPlugin();
export const hashtagPlugin = createHashtagPlugin();
export const linkifyPlugin = createLinkifyPlugin();
export const replyPlugin = createReplyPlugin();
export const rsvpPlugin = createRSVPPlugin();

export default compose(
  Anchor,
  Iframe,
  Image
);

const componentDecorators = composeDecorators(
  alignmentPlugin.decorator,
  blockDndPlugin.decorator,
  focusPlugin.decorator
);

export const dividerPlugin = createDividerPlugin({ decorator: componentDecorators });

export const htmlPlugins = compose(
  Anchor,
  Iframe,
  Image,
  // TODO(mime): enable the rest of these.
  /*dividerPlugin,
  hashtagPlugin,
  mentionPlugin,*/
  createPlugin(Object.assign(
github draft-js-plugins / draft-js-plugins / stories / divider-with-side-toolbar-editor / src / App.js View on Github external
import React, { Component } from 'react';
import { convertFromRaw, EditorState } from 'draft-js';

import Editor, { composeDecorators } from 'draft-js-plugins-editor';
import createFocusPlugin from 'draft-js-focus-plugin';
import createSideToolbarPlugin from 'draft-js-side-toolbar-plugin';
import createDividerPlugin from 'draft-js-divider-plugin';
// eslint-disable-next-line
import BlockTypeSelect from 'draft-js-side-toolbar-plugin/components/BlockTypeSelect';
import editorStyles from './editorStyles.css';

const focusPlugin = createFocusPlugin();

const decorator = composeDecorators(focusPlugin.decorator);

const dividerPlugin = createDividerPlugin({ decorator });

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

const sideToolbarPlugin = createSideToolbarPlugin({
  structure: [DefaultBlockTypeSelect]
});
github draft-js-plugins / draft-js-plugins / docs / client / components / pages / DragNDrop / CustomImageEditor / index.js View on Github external
EditorState,
} from 'draft-js';

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

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

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

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

const focusPlugin = createFocusPlugin();
const blockDndPlugin = createBlockDndPlugin();

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

const plugins = [
  blockDndPlugin,
  focusPlugin,
  imagePlugin
];

/* eslint-disable */
const initialState = {
    "entityMap": {
        "0": {
            "type": "image",
github draft-js-plugins / draft-js-plugins / docs / client / components / pages / Divider / DividerWithSideToolbarEditor / index.js View on Github external
import React, { Component } from 'react';
import { convertFromRaw, EditorState } from 'draft-js';

import Editor, { composeDecorators } from 'draft-js-plugins-editor';
import createFocusPlugin from 'draft-js-focus-plugin';
import createSideToolbarPlugin from 'draft-js-side-toolbar-plugin';
import createDividerPlugin from 'draft-js-divider-plugin';
// eslint-disable-next-line
import BlockTypeSelect from 'draft-js-side-toolbar-plugin/components/BlockTypeSelect';
import editorStyles from './editorStyles.css';

const focusPlugin = createFocusPlugin();

const decorator = composeDecorators(focusPlugin.decorator);

const dividerPlugin = createDividerPlugin({ decorator });

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

const sideToolbarPlugin = createSideToolbarPlugin({
  structure: [DefaultBlockTypeSelect]
});
github draft-js-plugins / draft-js-plugins / docs / client / components / pages / Video / CustomVideoEditor / index.js View on Github external
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": {
      "type": types.VIDEOTYPE,
      "mutability": "IMMUTABLE",
      "data": {
        "src": "https://www.youtube.com/watch?v=iEPTlhBmwRg"
github draft-js-plugins / draft-js-plugins / stories / inline-toolbar-custom-styled / src / App.js View on Github external
import createInlineToolbarPlugin from 'draft-js-inline-toolbar-plugin';
import editorStyles from './editorStyles.css';
import buttonStyles from './buttonStyles.css';
import toolbarStyles from './toolbarStyles.css';

const inlineToolbarPlugin = createInlineToolbarPlugin({
  theme: { buttonStyles, toolbarStyles }
});
const { InlineToolbar } = inlineToolbarPlugin;
const plugins = [inlineToolbarPlugin];
const text = 'In this editor a toolbar with a lot more options shows up once you select part of the text …';

export default class ThemedInlineToolbarEditor extends Component {

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

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

  focus = () =&gt; {
    this.editor.focus();
  };

  render() {
    return (
      <div>
        </div>
github GigaTables / reactables / src / components / form / fields / CustomToolBarEditor.js View on Github external
Separator,
        HeadlinesButton,
        UnorderedListButton,
        OrderedListButton,
        BlockquoteButton,
        CodeBlockButton
    ]
});
const {Toolbar} = toolbarPlugin;
const plugins = [toolbarPlugin];
const text = 'In this editor a toolbar shows up once you select part of the text …';

export default class CustomToolbarEditor extends Component {

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

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

    focus = () =&gt; {
        this.editor.focus();
    };

    render() {
        return (
            <div>
                <div></div></div>

draft-js-plugins-editor

Editor for DraftJS Plugins

MIT
Latest version published 4 years ago

Package Health Score

67 / 100
Full package analysis