This is a plugin for the draft-js-plugins-editor, a plugin system that sits on top of Draft.js.

By default draft carries the current block type over to the next line when you press return, which is an undesired behaviour for some of the default block types (headers mostly).

This plugin adds behaviour to the editor to "break out" of certain block types if the user presses return at the start or end of the block. Where "break out" means changing the inserted block to the default type (usually unstyled)

import createBlockBreakoutPlugin from 'draft-js-block-breakout-plugin'
const blockBreakoutPlugin = createBlockBreakoutPlugin()

This can then be passed into a draft-js-plugins-editor component:

import createBlockBreakoutPlugin from 'draft-js-block-breakout-plugin'
const blockBreakoutPlugin = createBlockBreakoutPlugin()
import Editor from 'draft-js-plugins-editor'
const plugins = [blockBreakoutPlugin]
<Editor plugins={plugins} />

You can pass options to the plugin as you call it:

const options = {
  breakoutBlockType: 'unordered-list-item',
  breakoutBlocks: ['header-one', 'header-two']
}
const blockBreakoutPlugin = createBlockBreakoutPlugin(options)

The options and their defaults are:

npm install
npm run test