ignitionworks / draftjs_exporter

Export Draft.js content state into HTML.

Draft.js Exporter

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

draftjs_exporter's Issues

Unknown styles crash the editor

Some of the draftjs editors generate super weird styles:

{
  "blocks": [
    {
      "data": {
      },
      "depth": 0,
      "entityRanges": [
      ],
      "inlineStyleRanges": [
        {
          "length": 118,
          "offset": 0,
          "style": "color-rgba(0,0,0,0.87)"
        },
        {
          "length": 118,
          "offset": 0,
          "style": "bgcolor-rgb(255,255,255)"
        },
        {
          "length": 118,
          "offset": 0,
          "style": "fontsize-14"
        },
        {
          "length": 118,
          "offset": 0,
          "style": "fontfamily-sans-serif"
        }
      ],
      "key": "2c9et",
      "text": "Hi John!\n\nThanks for your question.  We're looking forward to seeing you on the trip.  Crampons are great.  Pray for ⛷",
      "type": "unstyled"
    }
  ],
  "entityMap": {
  }
}

Currently this sort of data is really difficult to deal with. This is from draft-js-wysiwyg someone copy pasting the data in. Would be nice to just ignore these unknown styles and perhaps not display them.

Output blank

When using the config from the example in the readme, with raw content that contains even just a simple line of (unstyled) text, the converter produces a blank result. No errors, just a blank string is returned.

Is this gem compatible with current versions of Draft?

JSON data requires deep symbolization

Kind of a nuisance. Most of the data is coming in from JSON editors and all the accessors on the data in here use symbols. If you pass deserialized JSON data into the exporter you just get a blank output. Kind of confusing.

support elements over inline styles in style map

I noticed in the configuration style_map, formatting like bold and italics can only be exported as <span>s with style attributes, instead of more semantic tags (e.g. <strong>, <b>, <em>, <i>). I find the latter more flexible if I import the generated HTML into other tools.

Can we support elements in the style map?

How can I add support for images?

Images don't seem to be working for me.

My post content looks like this:

{
  "entityMap" => {},
  "blocks" => [
    {
      "key" => "an9ha",
      "text" => "Lorem ipsum",
      "type" => "header-one",
      "depth" => 0,
      "inlineStyleRanges" => [],
      "entityRanges" => [],
      "data" => {}
    },
    {
      "key" => "1pi54",
      "text" => "This is a sub-heading",
      "type" => "header-two",
      "depth" => 0,
      "inlineStyleRanges" => [],
      "entityRanges" => [],
      "data" => {}
    },
    {
      "key" => "8vsrd",
      "text" => "",
      "type" => "image",
      "depth" => 0,
      "inlineStyleRanges" => [],
      "entityRanges" => [],
      "data" => {
        "enabled"=>false,
        "aspect_ratio" => {
          "width"=>1000,
          "height"=>878.1838316722037,
          "ratio"=>87.81838316722038
        },
        "width"=>3612,
        "height"=>3172,
        "forceUpload"=>false,
        "url" => "https://s3-eu-west-2.amazonaws.com/reformer-assets/development/images/uploads/eccbc87e4b5ce2fe28308fd9f2a7baf3/resized_e0e2c961df.png",
        "loading_progress"=>100,
        "selected"=>false,
        "loading"=>true,
        "file"=>nil,
        "direction" => "center"
      }
    },
    {
      "key" => "bf99o",
      "text" => "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
      "type" => "unstyled",
      "depth" => 0,
      "inlineStyleRanges" => [],
      "entityRanges" => [],
      "data" => {}
    },
    {
      "key" => "2igf",
      "text" => "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
      "type" => "unstyled",
      "depth" => 0,
      "inlineStyleRanges" => [],
      "entityRanges" => [],
      "data" => {}
    },
    {
      "key" => "c4o61",
      "text" => "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
      "type" => "unstyled",
      "depth" => 0,
      "inlineStyleRanges" => [],
      "entityRanges" => [],
      "data" => {}
    },
    {
      "key" => "b6khi",
      "text" => "",
      "type" => "unstyled",
      "depth" => 0,
      "inlineStyleRanges" => [],
      "entityRanges" => [],
      "data" => {}
    }
  ]
}

My configuration looks like this:

# Convert a record's Dante content into HTML, asynchronously
class DanteToHTML

  require "draftjs_exporter"
  require "draftjs_exporter/entities/link"

  attr_reader :output

  CONFIG = {
    entity_decorators: {
      'LINK' => DraftjsExporter::Entities::Link.new(className: 'link')
    },
    block_map: {
      'header-one'          => { element: 'h1' },
      'header-two'          => { element: "h2" },
      'header-three'        => { element: "h3" },
      'header-four'         => { element: "h4" },

      "image"               => { element: "img" },
      "blockquote"          => { element: "blockquote" },
      "code-block"          => { element: "pre" },
      'unordered-list-item' => {
        element: 'li',
        wrapper: ['ul', { className: 'public-DraftStyleDefault-ul' }]
      },
      'unstyled' => { element: 'p' }
    },
    style_map: {
      "UNDERLINE" => { fontStyle: 'underline' },
      'ITALIC'    => { fontStyle: 'italic' },
      'BOLD'      => { fontStyle: 'bold' }
    }
  }

  def self.exporter
    @exporter ||= DraftjsExporter::HTML.new(CONFIG)
  end

  def initialize(editor_content)
    @output = self.class.exporter.call(editor_content.deep_symbolize_keys)
  end

end

What I expect to see, is a well-formed HTML image tag, with the SRC attribute containing the correct image URL (https://s3-eu-west-2.amazonaws.com/reformer-assets/development/images/uploads/eccbc87e4b5ce2fe28308fd9f2a7baf3/resized_e0e2c961df.png).
Instead, I just see an empty <img> tag floating in my HTML.

Exporter exports nothing unless you symbolize keys

Link entity not required by default

Just noticed that when following the config in the current README:

config = {
  entity_decorators: {
    'LINK' => DraftjsExporter::Entities::Link.new(className: 'link')
  },
  # ...
}

This line

DraftjsExporter::Entities::Link.new(className: 'link')

fails with NameError: uninitialized constant DraftjsExporter::Entities::Link
unless I do an explicit

require 'draftjs_exporter/entities/link'

Any reason the Link entity shouldn't be required by default?