How to use the draft-js-focus-plugin.FocusDecorator function in draft-js-focus-plugin

To help you get started, we’ve selected a few draft-js-focus-plugin 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 bkniffler / draft-wysiwyg / src / create-plugins.js View on Github external
import 'draft-js-focus-plugin/lib/plugin.css';
import 'draft-js-image-plugin/lib/plugin.css';
import 'draft-js-table-plugin/lib/plugin.css';
import 'draft-js-toolbar-plugin/lib/plugin.css';

// Utils
import addBlock from 'draft-js-dnd-plugin/lib/modifiers/addBlock';
import { RichUtils } from 'draft-js';

const image = ResizeableDecorator({
  resizeSteps: 10,
  handles: true,
  vertical: 'auto'
})(
  DraggableDecorator(
    FocusDecorator(
      AlignmentDecorator(
        ToolbarDecorator()(
          imageCreator({ theme: imageStyles })
        )
      )
    )
  )
);
const table = FocusDecorator(
  DraggableDecorator(
    ToolbarDecorator()(
      tableCreator({ theme: tableStyles, Editor })
    )
  )
);
github Khan / hivemind / imports / ui / components / DescriptionEditor.jsx View on Github external
import createImagePlugin, { imageCreator, imageStyles } from 'draft-js-image-plugin';
import createLinkifyPlugin from 'draft-js-linkify-plugin';
import Editor from 'draft-js-plugins-editor-wysiwyg';
import createResizeablePlugin, { ResizeableDecorator } from 'draft-js-resizeable-plugin';
import createToolbarPlugin, { ToolbarDecorator } from 'draft-js-toolbar-plugin';
import Immutable from 'immutable';
import Lodash from 'lodash';
import React from 'react';

const imageComponent = ResizeableDecorator({
  resizeSteps: 10,
  handles: true,
  vertical: 'auto'
})(
  DraggableDecorator(
    FocusDecorator(
      AlignmentDecorator(
        ToolbarDecorator()(
          imageCreator({ theme: imageStyles })
        )
      )
    )
  )
);

// Init Plugins
const plugins = [
  createCleanupEmptyPlugin({
    types: ['block-image']
  }),
  createEntityPropsPlugin({ }),
  createToolbarPlugin({}),
github bkniffler / draft-wysiwyg / src / create-plugins.js View on Github external
const image = ResizeableDecorator({
  resizeSteps: 10,
  handles: true,
  vertical: 'auto'
})(
  DraggableDecorator(
    FocusDecorator(
      AlignmentDecorator(
        ToolbarDecorator()(
          imageCreator({ theme: imageStyles })
        )
      )
    )
  )
);
const table = FocusDecorator(
  DraggableDecorator(
    ToolbarDecorator()(
      tableCreator({ theme: tableStyles, Editor })
    )
  )
);

// Init Plugins
export default ({ handleUpload, handleDefaultData, plugins = ()=>{}, toolbar = { disableItems: [], textActions: []}}) => [
  plugins,
  createCleanupEmptyPlugin({
    types: ['block-image', 'block-table']
  }),
  createEntityPropsPlugin({ }),
  createToolbarPlugin({
    __toolbarHandler: {
github bkniffler / draft-wysiwyg / example / draft / resizeable-div2.js View on Github external
position: 'relative',
         ...style
      };
      return (
         <div style="{styles}">
            Horizontal only
            {/**/}
         </div>
      );
   }
}
export default ResizeableDecorator({
   handles: true
})(
  DraggableDecorator(
    FocusDecorator(
      AlignmentDecorator(
        ToolbarDecorator()(
          Div
        )
      )
    )
  )
);
github bkniffler / draft-wysiwyg / example / draft / resizeable-div.js View on Github external
return (
         <div style="{styles}">
            Horizontal+Vertical
            {/**/}
         </div>
      );
   }
}

export default ResizeableDecorator({
   resizeSteps: 10,
   caption: true,
   vertical: 'absolute'
})(
  DraggableDecorator(
    FocusDecorator(
      AlignmentDecorator(
        ToolbarDecorator()(
          Div
        )
      )
    )
  )
);

draft-js-focus-plugin

Focus Plugin for DraftJS

MIT
Latest version published 5 years ago

Package Health Score

65 / 100
Full package analysis

Popular draft-js-focus-plugin functions