draftjs-conductor

Draft.js conductor

📝✨ Little Draft.js helpers to make rich text editors just work. Built for Draftail and Wagtail.

Check out the online demo!

Features

• Infinite list nesting
• Idempotent copy-paste between editors

---

Infinite list nesting

By default, Draft.js only provides support for 5 list levels for bulleted and numbered lists. While this is often more than enough, some editors need to go further.

Instead of manually writing and maintaining the list nesting styles, use this little helper:

import { ListNestingStyles, blockDepthStyleFn } from "draftjs-conductor";

<Editor blockStyleFn={blockDepthStyleFn} />
<ListNestingStyles max={6} />

ListNestingStyles will generate the necessary CSS for your editor’s lists. blockDepthStyleFn will then apply classes to blocks based on their depth, so the styles take effect. Voilà!

Relevant Draft.js issues:

• maxDepth param is greater than 4 in RichUtils.onTab – facebook/draft-js#997
• Still problematic: Nested list styles above 4 levels are not retained when copy-pasting between Draft instances. – facebook/draft-js#1605 (comment)

---

Idempotent copy-paste between editors

The default Draft.js copy-paste handlers lose a lot of the formatting when copy-pasting between Draft.js editors. While this might be ok for some use cases, sites with multiple editors on the same page need them to reliably support copy-paste.

Relevant Draft.js issues:

• Copy/paste between editors – facebook/draft-js#787
• Extra newlines added to text pasted between two Draft editors – facebook/draft-js#1389
• Copy/paste between editors strips soft returns – facebook/draft-js#1154
• Sequential unstyled blocks are merged into the same block on paste – facebook/draft-js#738
• Nested list styles are not retained when copy-pasting between Draft instances. – facebook/draft-js#1163
• Nested list styles above 4 levels are not retained when copy-pasting between Draft instances. – facebook/draft-js#1605 (comment)
• Merged <p> tags on paste – facebook/draft-js#523 (comment)

To make it just work:

import {
  registerCopySource,
  handleDraftEditorPastedText,
} from "draftjs-conductor";

class MyEditor extends Component {
  constructor(props: Props) {
    super(props);

    this.state = {
      editorState: EditorState.createEmpty(),
    };

    this.onChange = this.onChange.bind(this);
    this.handlePastedText = this.handlePastedText.bind(this);
  }

  componentDidMount() {
    this.copySource = registerCopySource(this.editorRef);
  }

  onChange(nextState: EditorState) {
    this.setState({ editorState: nextState });
  }

  handlePastedText(text: string, html: ?string, editorState: EditorState) {
    let newState = handleDraftEditorPastedText(html, editorState);

    if (newState) {
      this.onChange(newState);
      return true;
    }

    return false;
  }

  componentWillUnmount() {
    if (this.copySource) {
      this.copySource.unregister();
    }
  }

  render() {
    const { editorState } = this.state;

    return (
      <Editor
        ref={(ref) => {
          this.editorRef = ref;
        }}
        editorState={editorState}
        onChange={this.onChange}
        handlePastedText={this.handlePastedText}
      />
    );
  }
}

registerCopySource will ensure the clipboard contains a full representation of the Draft.js content state on copy, while handleDraftEditorPastedText retrieves Draft.js content state from the clipboard. Voilà! This also changes the HTML clipboard content to be more semantic, with less styles copied to other word processors/editors.

Note: IE11 isn’t supported, as it doesn't support storing HTML in the clipboard.

Contributing

See anything you like in here? Anything missing? We welcome all support, whether on bug reports, feature requests, code, design, reviews, tests, documentation, and more. Please have a look at our contribution guidelines.

Credits

View the full list of contributors. MIT licensed. Website content available as CC0.

Changelog

0.3.0 (2018-10-27)

Features

• release: mark package as side-effects-free for Webpack (#11) (5923318)