Are you happy with your logging solution? Would you help us out by taking a 30-second survey? Click here

draft-extend

Build extensible Draft.js editors with configurable plugins and integrated serialization.

Subscribe to updates I use draft-extend


Statistics on draft-extend

Number of watchers on Github 61
Number of open issues 5
Average time to close an issue 2 days
Main language HTML
Average time to merge a PR 11 days
Open pull requests 3+
Closed pull requests 1+
Last commit almost 2 years ago
Repo Created over 3 years ago
Repo Last Updated over 1 year ago
Size 108 KB
Organization / Authorhubspot
Latest Releasev1.5.4
Contributors2
Page Updated
Do you use draft-extend? Leave a review!
View open issues (5)
View on github
Fresh, new opensource launches 🚀🚀🚀
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

Evaluating draft-extend for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

draft-extend

npm version License

Build extensible Draft.js editors with configurable plugins and integrated serialization


Jump to:

Overview

Draft Extend is a platform to build a full-featured Draft.js editor using modular plugins that can integrate with draft-convert to serialize with HTML. The higher-order function API makes it extremely easy to use any number of plugins for rendering and conversion.

Usage:

import React from 'react';
import ReactDOM from 'react-dom';
import {EditorState} from 'draft-js';
import {Editor, compose} from 'draft-extend';
import {convertFromHTML, convertToHTML} from 'draft-convert';

const plugins = compose(
    FirstPlugin,
    SecondPlugin,
    ThirdPlugin
);

const EditorWithPlugins = plugins(Editor); // Rich text editor component with plugin functionality
const toHTML = plugins(convertFromHTML); // function to convert from HTML including plugin functionality
const fromHTML = plugins(convertToHTML); // function to convert to HTML including plugin functionality

const MyEditor = React.createClass({
    getInitialState() {
        return {
            editorState: EditorState.createWithContent(fromHTML('<div></div>'))
        };
    },

    onChange(editorState) {
        const html = toHTML(editorState.getCurrentContent());
        console.log(html); // don't actually convert to HTML on every change!
        this.setState({editorState});
    },

    render() {
        return (
            <EditorWithPlugins
                editorState={this.state.editorState}
                onChange={this.onChange}
            />
        );
    }
});

ReactDOM.render(
    <MyEditor />,
    document.querySelector('.app')
);

Examples

Examples of how to build plugins of different types are included in the example directory. To run the examples locally:

  1. run npm install in the draft-extend directory
  2. open any HTML file in the examples directory in your web browser - no local server is necessary

Editor

Editor component on which to extend functionality with plugins created by createPlugin.

Props

The most important two props are:

  • editorState - Draft.js EditorState instance to be rendered.
  • onChange: function(editorState: EditorState): void - Like with vanilla Draft.js, function called on any editor change passing the EditorState.

Other props are used by plugins composed around Editor. See Building Plugins for more information. These should generally not be used outside of the context of a plugin:

  • buttons: Array<Component> Array of React components to add to the controls of the editor.
  • overlays: Array<Component> Array of React components to add as overlays to the editor.
  • decorators: Array<DraftDecorator> Array of Draft.js decorator objects used to render the EditorState. They are added to the EditorState as a CompositeDecorator within the component and are of shape {strategy, component}.
  • styleMap: Object Object map from Draft.js inline style type to style object. Used for the Draft.js Editor's customStyleMap prop.

All other props are passed down to the Draft.js Editor component and to any buttons and overlays added by plugins.


compose

Since the API of plugins is based around composition, a basic compose function is provided to make it easy to apply plugins to the component as well as conversion functions and provides a single source of truth for plugin configuration.

// without compose
const EditorWithPlugins = FirstPlugin(SecondPlugin(ThirdPlugin(Editor)));
const fromHTML = FirstPlugin(SecondPlugin(ThirdPlugin(convertFromHTML)));
const toHTML = FirstPlugin(SecondPlugin(ThirdPlugin(convertToHTML)));

// with compose
const plugins = compose(
    FirstPlugin,
    SecondPlugin,
    ThirdPlugin
);

const EditorWithPlugins = plugins(Editor);
const toHTML = plugins(convertToHTML);
const fromHTML = plugins(convertFromHTML);

KeyCommandController

Higher-order component to consolidate key command listeners across the component tree

An increasingly common pattern for rich text editors is a toolbar detached from the main Editor component. This toolbar will be outside of the Editor component subtree, but will often need to respond to key commands that would otherwise be encapsulated by the Editor. KeyCommandController is a higher-order component that allows the subscription to key commands to move up the React tree so that components outside that subtree may listen and emit changes to editor state. KeyCommandController. It may be used with any component, but a good example is the Toolbar component:

import {Editor, Toolbar, KeyCommandController, compose} from 'draft-extend';

const plugins = compose(
  FirstPlugin,
  SecondPlugin
);

const WrappedEditor = plugins(Editor);
const WrappedToolbar = plugins(Toolbar);

const Parent = ({editorState, onChange, handleKeyCommand, addKeyCommandListener, removeKeyCommandListener}) => {
  return (
    <div>
      <WrappedEditor
        editorState={editorState}
        onChange={onChange}
        handleKeyCommand={handleKeyCommand}
        addKeyCommandListener={addKeyCommandListener}
        removeKeyCommandListener={removeKeyCommandListener}
      />
      <WrappedToolbar
        editorState={editorState}
        onChange={onChange}
        addKeyCommandListener={addKeyCommandListener}
        removeKeyCommandListener={removeKeyCommandListener}
      />
    </div>
  );
};

export default KeyCommandController(Parent);

KeyCommandController provides the final handleKeyCommand to use in the Editor component as well as subscribe/unsubscribe functions. As long as these props are passed from some common parent wrapped with KeyCommandController that also receives editorState and onChange props, other components may subscribe and emit chagnes to the editor state.

Additionally, KeyCommandControllers are composable and will defer to the highest parent instance. That is, if a KeyCommandController receives handleKeyCommand, addKeyCommandListener, and removeKeyCommandListener props (presumably from another controller) it will delegate to that controller's record of subscribed functions, keeping all listeners in one place.

draft-extend open pull requests (View All Pulls)
  • Separate key command controller and add Toolbar component
  • Use renderSubtreeIntoContainer to render overlay
  • Create function to pass reference to the actual editor through plugin chain
draft-extend list of languages used
draft-extend latest release notes
v1.5.4 v1.5.4

Changes

  • Add compatibility with new Entity API from draft-js@0.10 (#29)
v1.5.3 v1.5.3

Changes

  • Fixed yarn lockfile registry domain
v1.5.2 v1.5.2

Changes

  • Support React 16 (#23)
  • Add license field to package.json (#22)
  • Use babel env (#24)
Other projects in HTML