Restrict a draft-js editor to a single line of input.

Downloads in past


2.0.54 years ago7 years agoMinified + gzip package size for draft-js-single-line-plugin in KB


Draft.js Single Line plugin
This is a plugin for the draft-js-plugins-editor, a plugin system that sits on top of Draft.js.
This plugin adds support restricting Facebook’s Draft.js editor
to a single line of content. It will condense any blocks into a single block, and (optionally) strip any rich entities.

What, why?!

Madness I know, however there places you want to allow some rich styling yet the underlying value should still be a single line. Allowing titles for things like blog posts or pages to contain strong/emphasis is our main use-case.


import createSingleLinePlugin from 'draft-js-single-line-plugin'
const singleLinePlugin = createSingleLinePlugin()

This can then be passed into a draft-js-plugins-editor component:
import createSingleLinePlugin from 'draft-js-single-line-plugin'
const singleLinePlugin = createSingleLinePlugin()
import Editor from 'draft-js-plugins-editor'

const plugins = [singleLinePlugin]

<Editor plugins={plugins}
    blockRenderMap={singleLinePlugin.blockRenderMap} />

The plugin export a custom blockRenderMap that overrides the draft-js defaults and restricts the editor from rendering anything except an unstyled block. You’ll need to manually pass it as above as the draft-js-plugins-editor doesn’t yet support this.


You can pass options to the plugin as you call it:
const options = {
  stripEntities: false
const singleLinePlugin = createSingleLinePlugin(options)

There’s only one option so far: stripEntities: true/false.


npm install
npm install react react-dom draft-js
npm run test