# material-ui-rte

> A rich text editor build with Draft.js and Material UI

Latest version **1.2.4** (published 2019-07-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install material-ui-rte
pnpm add material-ui-rte
yarn add material-ui-rte
bun add material-ui-rte
```

## 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.2.4 |
| Published | 2019-07-01 |
| First published | 2019-06-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 3.5 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Jordan Riser |
| Maintainers | jordan4jc |
| Keywords | material, ui, react, rich, text, editor, wysiwyg, draft, draft.js, draft-js |

## Links

- npm: https://www.npmjs.com/package/material-ui-rte
- Repository: https://github.com/jrdn91/material-ui-rte
- Homepage: https://github.com/jrdn91/material-ui-rte#readme
- Issues: https://github.com/jrdn91/material-ui-rte/issues
- npm.io page: https://npm.io/package/material-ui-rte

## Dependencies (6)

- [draft-js](https://npm.io/package/draft-js.md) ^0.10.5
- [immutable](https://npm.io/package/immutable.md) ^4.0.0-rc.12
- [draft-js-image-plugin](https://npm.io/package/draft-js-image-plugin.md) ^2.0.6
- [draft-js-divider-plugin](https://npm.io/package/draft-js-divider-plugin.md) ^0.2.1
- [draft-js-plugins-editor](https://npm.io/package/draft-js-plugins-editor.md) ^2.1.1
- [draft-js-block-breakout-plugin](https://npm.io/package/draft-js-block-breakout-plugin.md) ^2.0.1

## Alternatives

- [ext-list](https://npm.io/package/ext-list.md) — 6.3M weekly downloads
- [@lexical/selection](https://npm.io/package/@lexical/selection.md) — 3.8M weekly downloads
- [@lexical/text](https://npm.io/package/@lexical/text.md) — 3.6M weekly downloads
- [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) — 3.0M weekly downloads
- [@tiptap/extension-mention](https://npm.io/package/@tiptap/extension-mention.md) — 3.0M weekly downloads

## Recent versions

- 1.2.4 (latest) — 2019-07-01
- 1.2.3 — 2019-06-27
- 1.2.2 — 2019-06-27
- 1.2.1 — 2019-06-27
- 1.2.0 — 2019-06-26
- 1.1.3 — 2019-06-21
- 1.1.2 — 2019-06-20
- 1.1.1 — 2019-06-20
- 1.1.0 — 2019-06-20
- 1.0.0 — 2019-06-19
- 0.2.0 — 2019-06-19
- 0.1.4 — 2019-06-18
- 0.1.3 — 2019-06-18
- 0.1.2 — 2019-06-17
- 0.1.1 — 2019-06-17
- … 2 more at https://npm.io/package/material-ui-rte/versions

## README

# Material-UI-RTE

## Description

A rich text editor build with Draft.js and Material UI

## Installation

`yarn add material-ui-rte`

## Example

Filling this out later

## API

### Editor Props

Currently, all controls follow this property setup unless otherwise specified...

Specifying a `boolean` will completely show / hide the controls altogether.

Specifying an `array` will only show the buttons / menu items that were passed in.

#### Block styles (headings, paragraph, etc.)

```js
  blockStyleControls: PropTypes.oneOfType([
    PropTypes.bool,
    PropTypes.arrayOf("paragraph", "blockquote", "header-one", "header-two", "header-three", "header-four", "header-five", "header-six")
  ])

  defaultProps = {
    blockStyleControls: true
  }
```

#### Divider

```js
  dividerControl: PropTypes.bool

  defaultProps = {
    dividerControl: true
  }
```

The Divider Control does not accept an array value since it's only one button :grin:

#### Inline Style Controls (bold, italic, underline)

```js
  inlineStyleControls: PropTypes.oneOfType([
    PropTypes.bool,
    PropTypes.arrayOf("bold", "italic", "underline")
  ])

  defaultProps = {
    inlineStyleControls: true
  }
```

#### List Controls

```js
  listControls: PropTypes.oneOfType([
    PropTypes.bool,
    PropTypes.arrayOf("ordered-list", "unordered-list")
  ])

  defaultProps = {
    listControls: true
  }
```

#### List Controls

```js
  alignmentControls: PropTypes.oneOfType([
    PropTypes.bool,
    PropTypes.arrayOf("left", "center", "right")
  ])

  defaultProps = {
    alignmentControls: true
  }
```

## Development

`yarn start`

Make changes to `src/app.js` for testing, `webpack-dev-server` is run at `localhost:4400`

Run tests with `yarn test`

## ToDo

- [ ] Move docs to Docz
- [ ] Setup live pages for storybook and docz
- [ ] Color picker
- [ ] Image controls
- [ ] Support for custom controls
- [ ] support for additional draft.js plugins
- [ ] support for plain text and html as initial values

PR's welcome!

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