draftjs-filters

Draft.js filters

Filter Draft.js content when copy-pasting rich text into the editor. Initially made for Draftail.

Check out the online demo.

Using the filters

First, grab the package from npm:

npm install --save draftjs-filters

WIP – Then, import the filters' entry point and use it in your <Editor>'s onChange function:

import { filterEditorState } from "draftjs-filters"

function onChange(nextEditorState) {
  const {
    stateSaveInterval,
    maxListNesting,
    enableHorizontalRule,
    stripPastedStyles,
    blockTypes,
    inlineStyles,
    entityTypes,
  } = this.props
  const { editorState } = this.state
  const content = editorState.getCurrentContent()
  const nextContent = nextEditorState.getCurrentContent()
  const shouldFilterPaste =
    nextContent !== content &&
    !stripPastedStyles &&
    nextEditorState.getLastChangeType() === "insert-fragment"

  let filteredEditorState = nextEditorState
  if (shouldFilterPaste) {
    filteredEditorState = filterEditorState(
      nextEditorState,
      maxListNesting,
      enableHorizontalRule,
      blockTypes,
      inlineStyles,
      entityTypes,
    )
  }

  this.setState({ editorState: filteredEditorState })
}

Browser support and polyfills

The Draft.js filters follow the browser support targets of Draft.js. Be sure to have a look at the Draft.js required polyfills.

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.

Development

Install

Clone the project on your computer, and install Node. This project also uses nvm.

nvm install
# Then, install all project dependencies.
npm install
# Install the git hooks.
./.githooks/deploy

Working on the project

Everything mentioned in the installation process should already be done.

# Make sure you use the right node version.
nvm use
# Start the server and the development tools.
npm run start
# Runs linting.
npm run lint
# Start a Flow server for type errors.
npm run flow
# Re-formats all of the files in the project (with Prettier).
npm run format
# Run tests in a watcher.
npm run test:watch
# Run test coverage
npm run test:coverage
# Open the coverage report with:
npm run report:coverage
# Open the build report with:
npm run report:build
# View other available commands with:
npm run

Releases

Credits

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

Changelog

0.1.0 (2018-01-10)

Features

• add normalize code from Draftail (c2fdc87)
• add type annotations to current normalize API (7d432c9)
• refactor normalize API to use separate ES6 exports (030e458)