Exciting release!Introducing "safe npm". Learn more
Socket
Log inDemoInstall

draft-js-import-element-cbx

Package Overview
Dependencies
2
Maintainers
1
Versions
1
Issues
File Explorer

Advanced tools

draft-js-import-element-cbx

DraftJS: Import Element to ContentState

    1.4.0latest
    GitHub

Version published
Maintainers
1
Weekly downloads
442
decreased by-31.15%

Weekly downloads

Readme

Source

DraftJS: Import Element to ContentState

This is a module for DraftJS that will convert an HTML DOM Element to editor content.

It was extracted from React-RTE and placed into a separate module for more general use. Hopefully it can be helpful in your projects.

Installation

npm install draft-js-import-element-cbx

This project is still under development. If you want to help out, please open an issue to discuss or join us on Slack.

Usage

stateFromElement takes a DOM node element and returns a DraftJS ContentState.

import {stateFromElement} from 'draft-js-import-element-cbx'; 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:
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:
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:
stateFromElement(element, { elementStyles: { // Support `<sup>` (superscript) inline element: 'sup': 'SUPERSCRIPT', }, });

License

This software is BSD Licensed.

Keywords

FAQs

Last updated on 20 Apr 2020

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket
Socket
support@socket.devSocket SOC 2 Logo

Product

  • Package Issues
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc