https://github.com/ignitionworks/draftjs_exporter

Export Draft.js content state into HTML.
https://github.com/ignitionworks/draftjs_exporter

Last synced: 3 months ago
JSON representation

Export Draft.js content state into HTML.

• Host: GitHub
• URL: https://github.com/ignitionworks/draftjs_exporter
• Owner: ignitionworks
• License: mit
• Created: 2016-06-20T20:01:48.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2019-04-11T16:50:08.000Z (about 5 years ago)
• Last Synced: 2024-03-23T21:23:08.382Z (3 months ago)
• Language: Ruby
• Size: 21.5 KB
• Stars: 16
• Watchers: 4
• Forks: 20
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Lists

• awesome-draft-js - Draft.js exporter (Ruby) - Export Draft.js content state into HTML. (Common Utilities)
• awesome-draft-js - Draft.js exporter (Ruby) - Export Draft.js content state into HTML. (Common Utilities)

README

        
# Draft.js Exporter

[![Circle CI](https://circleci.com/gh/ignitionworks/draftjs_exporter/tree/master.svg?style=shield)](https://circleci.com/gh/ignitionworks/draftjs_exporter/tree/master)

[![Code Climate](https://codeclimate.com/github/ignitionworks/draftjs_exporter/badges/gpa.svg)](https://codeclimate.com/github/ignitionworks/draftjs_exporter)

[![Test Coverage](https://codeclimate.com/github/ignitionworks/draftjs_exporter/badges/coverage.svg)](https://codeclimate.com/github/ignitionworks/draftjs_exporter/coverage)

[Draft.js](https://facebook.github.io/draft-js/) is a framework for

building rich text editors. However, it does not support exporting

documents at HTML. This gem is designed to take the raw `ContentState`

(output of [`convertToRaw`](https://facebook.github.io/draft-js/docs/api-reference-data-conversion.html#converttoraw))

from Draft.js and convert it to HTML using Ruby.

## Usage

```ruby

# Create configuration for entities and styles

config = {

  entity_decorators: {

    'LINK' => DraftjsExporter::Entities::Link.new(className: 'link')

  },

  block_map: {

    'header-one' => { element: 'h1' },

    'unordered-list-item' => {

      element: 'li',

      wrapper: ['ul', { className: 'public-DraftStyleDefault-ul' }]

    },

    'unstyled' => { element: 'div' }

  },

  style_map: {

    'ITALIC' => { fontStyle: 'italic' }

  }

}

# New up the exporter

exporter = DraftjsExporter::HTML.new(config)

# Provide raw content state

exporter.call({

  entityMap: {

    '0' => {

      type: 'LINK',

      mutability: 'MUTABLE',

      data: {

        url: 'http://example.com'

      }

    }

  },

  blocks: [

    {

      key: '5s7g9',

      text: 'Header',

      type: 'header-one',

      depth: 0,

      inlineStyleRanges: [],

      entityRanges: []

    },

    {

      key: 'dem5p',

      text: 'some paragraph text',

      type: 'unstyled',

      depth: 0,

      inlineStyleRanges: [

        {

          offset: 0,

          length: 4,

          style: 'ITALIC'

        }

      ],

      entityRanges: [

        {

          offset: 5,

          length: 9,

          key: 0

        }

      ]

    }

  ]

})

# => "
Header
\nsome paragraph text
"

```


## Tests

```bash

$ rspec

```