Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

draft-js-block-breakout-plugin

icelab9.8kMIT2.0.1

Break out of block types as you type.

draft-js, draft-js-plugins, plugins, plugin

readme

Draft.js Block Breakout plugin

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)

Usage

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} />

Options

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:

Option Type Description Default
breakoutBlockType String Block type to insert when breaking out 'unstyled'
breakoutBlocks Array List of block types to break out from ['header-one', 'header-two', 'header-three', 'header-four', 'header-five', 'header-six']
doubleBreakoutBlocks Array List of block types to that require return on a blank line in order to break ['blockquote', 'unordered-list-item', 'ordered-list-item', 'code-block']

Developing

npm install
npm run test

changelog

Change Log

All notable changes to this project will be documented in this file. This project adheres to Semantic Versioning.

v2.0.1 2017-06-19

  • Bump draft-js peer dependency to v0.10.1

v2.0.0 2017-06-19

v1.0.3 2017-04-20

  • Add support for breaking out of multi-line blocks after a double return — Thanks to @rosey

v1.0.2 2017-02-15

v1.0.1 2016-12-16

Fixed

  • Use the sanctioned API method for retrieving the length of a ContentBlockThanks to @sugarshin

v1.0.0 2016-12-05

Fixed

v0.0.2 2016-06-08

Fixed

  • Changed the after-insert cursor position depending on whether we’re inserting an empty block before or after the current block.

v0.0.1 2016-06-08

First public release