How to use the draft-js-plugins-editor.composeDecorators function in draft-js-plugins-editor

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 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 }) => (
  
);

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 }) => (
  
);

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 LessWrong2 / Lesswrong2 / packages / lesswrong / components / async / AsyncCommentEditor.jsx View on Github external
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,
        HeadlineTwoButton,
        BlockquoteButton,
github springload / draftail / examples / plugins.story.js View on Github external
import actionBlockPlugin from "./plugins/actionBlockPlugin";
import slashCommandPlugin from "./plugins/slashCommandPlugin";
import sectionBreakPlugin, {
  SectionBreakControl,
} from "./plugins/sectionBreakPlugin";
import autoEmbedPlugin from "./plugins/autoEmbedPlugin";
import createFocusPlugin from "./plugins/draft-js-focus-plugin/index";

const singleLine = singleLinePlugin();
const linkify = linkifyPlugin();
const autoEmbed = autoEmbedPlugin();
const actionBlock = actionBlockPlugin();
const slashCommand = slashCommandPlugin();
const focusPlugin = createFocusPlugin({ focusableBlocks: ["section-break"] });
const sectionBreak = sectionBreakPlugin({
  decorator: composeDecorators(focusPlugin.decorator),
});

storiesOf("Plugins", module)
  .add("Single-line", () => (
    
  ))
  .add("Linkify", () => (
github draft-js-plugins / draft-js-plugins / docs / client / components / pages / Home / UnicornEditor / index.js View on Github external
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;
const { AlignmentTool } = alignmentPlugin;

const plugins = [
  emojiPlugin,

draft-js-plugins-editor

Editor for DraftJS Plugins

MIT
Latest version published 5 years ago

Package Health Score

67 / 100
Full package analysis