# final-draft

> Final Draft... A Draft.js Editor using draft-js-plugins

Latest version **1.1.8** (published 2016-12-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install final-draft
pnpm add final-draft
yarn add final-draft
bun add final-draft
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.8 |
| Published | 2016-12-26 |
| First published | 2016-12-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 9 |
| Known vulnerabilities | 0 (+5 in 2 direct dependencies) |
| Install scripts | no |
| GitHub stars | 218 |
| Author | Steven Iseki |
| Maintainers | steveniseki |
| Keywords | final draft, final-draft, draft-js, draft-js-plugins, draftjs plugins, draftjs, editor, richtext, react |

## Links

- npm: https://www.npmjs.com/package/final-draft
- Repository: https://github.com/vacenz/final-draft
- Homepage: https://github.com/vacenz/final-draft#readme
- Issues: https://github.com/vacenz/final-draft/issues
- npm.io page: https://npm.io/package/final-draft

## Dependencies (9)

- [tlds](https://npm.io/package/tlds.md) ^1.182.0
- [draft-js](https://npm.io/package/draft-js.md) ^0.9.1
- [babel-cli](https://npm.io/package/babel-cli.md) ^6.18.0
- [immutable](https://npm.io/package/immutable.md) ~3.7.4
- [linkify-it](https://npm.io/package/linkify-it.md) ^2.0.2
- [setimmediate](https://npm.io/package/setimmediate.md) ^1.0.4
- [draft-convert](https://npm.io/package/draft-convert.md) ^1.3.1
- [styled-components](https://npm.io/package/styled-components.md) ^1.2.1
- [draft-js-export-html](https://npm.io/package/draft-js-export-html.md) ^0.5.2

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.8 (latest) — 2016-12-26
- 1.1.7 — 2016-12-24
- 1.1.6 — 2016-12-24
- 1.1.5 — 2016-12-23
- 1.1.4 — 2016-12-23
- 1.1.3 — 2016-12-22
- 1.1.2 — 2016-12-22
- 1.1.1 — 2016-12-22
- 1.1.0 — 2016-12-22
- 1.0.18 — 2016-12-22
- 1.0.17 — 2016-12-22
- 1.0.16 — 2016-12-22
- 1.0.15 — 2016-12-21
- 1.0.14 — 2016-12-21
- 1.0.13 — 2016-12-21
- … 13 more at https://npm.io/package/final-draft/versions

## README

# [final-draft](http://finaldraft.vace.nz)

[![npm version](https://badge.fury.io/js/final-draft.svg)](https://badge.fury.io/js/final-draft)

[![Standard - JavaScript Style Guide](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com/)

![](https://raw.githubusercontent.com/StevenIseki/final-draft/master/example/public/screenshot.png)

final-draft is a Draft.js editor built using [draft-js-plugins](https://draft-js-plugins.com)

## Install
```jsx
npm install final-draft --save
```

## Use
```jsx
import React, { Component } from 'react'
import { render } from 'react-dom'
import {editorStateFromHtml, editorStateFromRaw} from 'final-draft'
import { Editor } from 'final-draft'

export default class ExampleEditor extends Component {
  constructor(props) {
    super(props)
    this.state = { value: editorStateFromRaw(raw) }
  }

  onChange(value) {
    this.setState({ value })
  }

  render() {
    return (
      <Editor
        editorState={this.state.value}
        placeholder="Text"
        uploadImageCallBack={uploadImageCallBack}
        onChange={::this.onChange} />
    )
  }
}

function uploadImageCallBack(file) {
  return new Promise(
    (resolve, reject) => {
      /* simulate a 2 second call to parse file and return an img src... */
      setTimeout( () => {
        resolve({ src: 'http://imgur.com/yrwFoXT.jpg' });
      }, 2000)
    }
  )
}
```

## Props

#### `plugins` (required)
Array of plugins to include, any of the following: `imagePlugin`, `emojiPlugin`, `hashtagPlugin`, `inlineToolbarPlugin`, `linkifyPlugin`, `mentionPlugin`, `sideToolbarPlugin`, `stickerPlugin`, `undoPlugin`, `videoPlugin`

## Styles

Are using styled-components so they should `just work` 💅 like magic. They append to a `<style>` tag if you want to be specific.

## Development

```
yarn install
npm run dev
open http://127.0.0.1:3000
```

## License

[MIT](http://isekivacenz.mit-license.org/)

---
_Source: https://npm.io/package/final-draft · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._