# draft-js-highlight-plugin

> A draft js plugin for highlighting text, compatible with draft-js-plugins

Latest version **0.1.2** (published 2017-06-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install draft-js-highlight-plugin
pnpm add draft-js-highlight-plugin
yarn add draft-js-highlight-plugin
bun add draft-js-highlight-plugin
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2017-06-18 |
| First published | 2017-06-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 7 |
| Author | Julian Krispel |
| Maintainers | juliankrispel |

## Links

- npm: https://www.npmjs.com/package/draft-js-highlight-plugin
- Repository: https://github.com/juliankrispel/getting-started-with-draft-js-plugins/tree/master/src/highlightPlugin
- npm.io page: https://npm.io/package/draft-js-highlight-plugin

## Dependencies (1)

- [draft-js](https://npm.io/package/draft-js.md) ^0.10.1

## Recent versions

- 0.1.2 (latest) — 2017-06-18
- 0.1.1 — 2017-06-18
- 0.1.0 — 2017-06-18

## README

# draft-js-highlight-plugin

A simple draft-js plugin to highlight text, created as part of writing a [tutorial on how to get started with draft-js-plugins](reactrocket.com/post/getting-started-with-draft-js-plugins/). This plugin is compatible with draft-js-plugins.

![Draft-js highlight plugin](https://raw.githubusercontent.com/juliankrispel/getting-started-with-draft-js-plugins/master/src/highlightPlugin/draft-js-plugins-purple-highlight.gif)


## Usage

`createHighlightPlugin(style?: Object)`
- style is a plain javascript object containing css rules that define the highlight style.

Default style:
```js
{
  background: 'blue',
  padding: '0 .3em',
  color: '#fff',
}
```

## Example

```js
import Editor from 'draft-js-plugins-editor';
import { EditorState } from 'draft-js';
import createHighlightPlugin from 'draft-js-highlight-plugin';

const highlightPlugin = createHighlightPlugin({
  background: 'purple',
  color: 'yellow',
  border: '1px solid black',
});

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      editorState: EditorState.createEmpty(),
    }
  }

  onChange = (editorState) => {
    this.setState({
      editorState,
    }
  }

  render() {
    return (
      <div>
        <Editor
          editorState={this.state.editorState}
          onChange={this.onChange}
          plugins={[highlightPlugin]}
        />
      </div>
    );
  }
};
```

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