@js-seo/draft-js-import-element

DraftJS: Import Element to ContentState

Stats

StarsIssuesVersionUpdatedCreatedSize
@js-seo/draft-js-import-element
1.2.24 years ago4 years agoMinified + gzip package size for @js-seo/draft-js-import-element in KB

Readme

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 --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.

Usage

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

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:

    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.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.