Skip to content
Export Draft.js content state into HTML.
Ruby
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib Bump version to 0.0.7 Aug 6, 2017
spec
.codeclimate.yml Disable analysing specs with code climate Jun 21, 2016
.editorconfig
.gitignore Add codecoverage Jun 21, 2016
.rubocop.yml
.ruby-version Bump ruby version Aug 6, 2017
Gemfile
LICENSE.md Initial commit Jun 20, 2016
README.md Allow link entities to be customized Aug 4, 2016
draftjs_exporter.gemspec

README.md

Draft.js Exporter

Circle CI Code Climate Test Coverage

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) from Draft.js and convert it to HTML using Ruby.

Usage

# 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
        }
      ]
    }
  ]
})
# => "<h1>Header</h1><div>\n<span style=\"font-style: italic;\">some</span> <a href=\"http://example.com\" class=\"link\">paragraph</a> text</div>"

Tests

$ rspec
You can’t perform that action at this time.