National Patience Month

    @entryone/draft-js-import-element

    1.3.7 • Public • Published

    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.

    Install

    npm i @entryone/draft-js-import-element

    DownloadsWeekly Downloads

    0

    Version

    1.3.7

    License

    ISC

    Unpacked Size

    25.7 kB

    Total Files

    6

    Last publish

    Collaborators

    • entryone