# draft-js-import-element

> DraftJS: Import Element to ContentState

Latest version **1.4.0** (published 2019-07-29) · ISC license · 0 weekly downloads

## Install

```sh
npm install draft-js-import-element
pnpm add draft-js-import-element
yarn add draft-js-import-element
bun add draft-js-import-element
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.4.0 |
| Published | 2019-07-29 |
| First published | 2016-03-12 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 69.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 880 |
| Author | sstur@me.com |
| Maintainers | sstur |
| Keywords | draft-js, import-element |

## Links

- npm: https://www.npmjs.com/package/draft-js-import-element
- Repository: https://github.com/sstur/draft-js-utils/tree/master/packages/draft-js-import-element
- Homepage: https://github.com/sstur/draft-js-utils/blob/master/packages/draft-js-import-element/README.md
- Issues: https://github.com/sstur/draft-js-utils/issues
- npm.io page: https://npm.io/package/draft-js-import-element

## Dependencies (2)

- [synthetic-dom](https://npm.io/package/synthetic-dom.md) ^1.4.0
- [draft-js-utils](https://npm.io/package/draft-js-utils.md) ^1.4.0

## Recent versions

- 1.4.0 (latest) — 2019-07-29
- 1.3.3 — 2019-02-28
- 1.3.2 — 2019-02-27
- 1.3.0 — 2019-01-29
- 1.2.2 — 2019-01-07
- 1.2.1 — 2017-10-05
- 1.2.0 — 2017-09-19
- 1.1.0 — 2017-09-07
- 1.0.2 — 2017-09-03
- 1.0.1 — 2017-09-03
- 0.5.0 — 2017-07-27
- 0.4.3 — 2016-11-06
- 0.4.2 — 2016-11-03
- 0.4.1 — 2016-10-22
- 0.4.0 — 2016-10-17
- … 17 more at https://npm.io/package/draft-js-import-element/versions

## README

# DraftJS: Import Element to ContentState

This is a module for [DraftJS](https://github.com/facebook/draft-js) that will convert an HTML DOM Element to editor content.

It was extracted from [React-RTE](https://react-rte.org) and placed into a separate module for more general use. Hopefully it can be helpful in your projects.

## Installation

    npm install --save draft-js-import-element

This project is still under development. If you want to help out, please open an issue to discuss or join us on [Slack](https://draftjs.slack.com/).

## Usage

`stateFromElement` takes a DOM node `element` and returns a DraftJS [ContentState](https://facebook.github.io/draft-js/docs/api-reference-content-state.html).

```js
import {stateFromElement} from 'draft-js-import-element';
const contentState = stateFromElement(element);
```

### Options

You can optionally pass a second `Object` argument to `stateFromElement` with the following supported properties:

- `customBlockFn`: Function to specify block type/data based on HTML element. Example:
```js
let options = {
  // Should return null/undefined or an object with optional: type (string); data (plain object)
  customBlockFn: (element) => {
    if (element.tagName === 'ARTICLE') {
      return {type: 'custom-block-type'};
    }
    if (element.tagName === 'CENTER') {
      return {data: {align: 'center'}};
    }
  },
};
let contentState = stateFromElement(element, options);
```

- `customInlineFn`: Function to specify how inline elements are handled. Example:

```js
let options = {
  // Should return a Style() or Entity() or null/undefined
  customInlineFn: (element, {Style, Entity}) => {
    if (element.tagName === 'SPAN' && element.className === 'emphasis') {
      return Style('ITALIC');
    } else if (element.tagName === 'IMG') {
      return Entity('IMAGE', {src: element.getAttribute('src')});
    }
  },
};
let contentState = stateFromElement(element, options);
```

- `elementStyles`: HTML element name as key, DraftJS style string as value. Example:
```js
stateFromElement(element, {
  elementStyles: {
    // Support `<sup>` (superscript) inline element:
    'sup': 'SUPERSCRIPT',
  },
});
```

## License

This software is [BSD Licensed](/LICENSE).

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