How can I add support for images?

[Bodacious]

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.

[theozaurus]

Hi @Bodacious,
Sorry for the delay. I've seen this and will take a proper look at the weekend. Essentially DraftJS needs a custom block formatter in this scenario and so will DraftjsExporter. I'll pen a more helpful answer when I've got some more time.
Cheers,
Theo

[theozaurus]

Hi @Bodacious,

Currently draftjs_exporter doesn't support custom block wrappers. However, I've created video elements using entities as opposed to blocks to achieve a similar affect.

Perhaps something like this could get you going:

require "draftjs_exporter"

content = {
  "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" => "a2rmc",
      "data" => {},
      "text" => " ",
      "type" => "atomic",
      "depth" => 0,
      "entityRanges" => [
        {
          "key" => 0,
          "length" => 1,
          "offset" => 0
        }
      ],
      "inlineStyleRanges" => []
    },
    {
      "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" => {}
    }
  ],
  "entityMap" => {
    "0" => {
      "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"
      },
      "type" => "IMAGE",
      "mutability" => "IMMUTABLE"
    }
  }
}

class ImageEntity
   def call(parent_element, data)
     args = { src: data.fetch(:data, {}).fetch(:url) }
     element = parent_element.document.create_element('img', args)
     parent_element.add_child(element)
     element
  end
end

config = {
  entity_decorators: {
    'IMAGE' => ImageEntity.new
  },
  block_map: {
    'header-one'          => { element: 'h1' },
    'header-two'          => { element: "h2" },
    'header-three'        => { element: "h3" },
    'header-four'         => { element: "h4" },

    "blockquote"          => { element: "blockquote" },
    "code-block"          => { element: "pre" },
    "atomic"              => { element: "div" },
    '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' }
  }
}

DraftjsExporter::HTML.new(config).call(content.deep_symbolize_keys)
#=> "<h1>Lorem ipsum</h1><h2>This is a sub-heading</h2><div>\n<img src=\"https://s3-eu-west-2.amazonaws.com/reformer-assets/development/images/uploads/eccbc87e4b5ce2fe28308fd9f2a7baf3/resized_e0e2c961df.png\"></div><p>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.</p><p>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.</p><p>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.</p><p></p>"

If you really need custom block support let me know and we'll see if we can figure something out.

Cheers,

Theo

[Bodacious]

Thanks @theozaurus

I'm using Dante2 editor which, unfortunately, doesn't create entity objects for images and videos, so the above solution won't work for this case.

Here's a full sample of JSON with each of the block types being used:

{
  "entityMap":
  {
    "0":
    {
      "type": "LINK",
      "mutability": "MUTABLE",
      "data":
      {
        "url": "http://example.com"
      }
    }
  },
  "blocks": [
  {
    "key": "83mcp",
    "text": "This is the article header",
    "type": "header-one",
    "depth": 0,
    "inlineStyleRanges": [],
    "entityRanges": [],
    "data":{}
  },
  {
    "key": "4rooi",
    "text": "This is the subheader",
    "type": "header-two",
    "depth": 0,
    "inlineStyleRanges": [],
    "entityRanges": [],
    "data":{}
  },
  {
    "key": "edi16",
    "text": "This is an image caption",
    "type": "image",
    "depth": 0,
    "inlineStyleRanges": [],
    "entityRanges": [],
    "data":
    {
      "enabled": false,
      "aspect_ratio":
      {
        "width": 640,
        "height": 480,
        "ratio": 75
      },
      "width": 640,
      "height": 480,
      "forceUpload": false,
      "url": "https://s3-eu-west-2.amazonaws.com/reformer-assets/development/images/uploads/8f14e45fceea167a5a36dedd4bea2543/resized_58e9b247d1.png",
      "loading_progress": 100,
      "selected": false,
      "loading": true,
      "file": null,
      "direction": "center"
    }
  },
  {
    "key": "7dcng",
    "text": "This is a paragraph.",
    "type": "unstyled",
    "depth": 0,
    "inlineStyleRanges": [],
    "entityRanges": [],
    "data":
    {}
  },
  {
    "key": "80rs3",
    "text": "This is a styled paragraph. Bold text. Italic text. A hyperlink.",
    "type": "unstyled",
    "depth": 0,
    "inlineStyleRanges": [
    {
      "offset": 28,
      "length": 11,
      "style": "BOLD"
    },
    {
      "offset": 39,
      "length": 13,
      "style": "ITALIC"
    }],
    "entityRanges": [
    {
      "offset": 52,
      "length": 12,
      "key": 0
    }],
    "data":
    {}
  },
  {
    "key": "b266c",
    "text": "Unstyled one",
    "type": "unordered-list-item",
    "depth": 0,
    "inlineStyleRanges": [],
    "entityRanges": [],
    "data":
    {}
  },
  {
    "key": "8qfcm",
    "text": "Unstyled two",
    "type": "unordered-list-item",
    "depth": 0,
    "inlineStyleRanges": [],
    "entityRanges": [],
    "data":
    {}
  },
  {
    "key": "c405k",
    "text": "Ordered one",
    "type": "ordered-list-item",
    "depth": 0,
    "inlineStyleRanges": [],
    "entityRanges": [],
    "data":
    {}
  },
  {
    "key": "3m5q6",
    "text": "Ordered two",
    "type": "ordered-list-item",
    "depth": 0,
    "inlineStyleRanges": [],
    "entityRanges": [],
    "data":
    {}
  },
  {
    "key": "a7h5h",
    "text": "Blockquote",
    "type": "blockquote",
    "depth": 0,
    "inlineStyleRanges": [],
    "entityRanges": [],
    "data":
    {}
  },
  {
    "key": "37bc2",
    "text": "Heading 3",
    "type": "header-three",
    "depth": 0,
    "inlineStyleRanges": [],
    "entityRanges": [],
    "data":
    {}
  },
  {
    "key": "2u4j3",
    "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": "7opur",
    "text": "This is a code block",
    "type": "code-block",
    "depth": 0,
    "inlineStyleRanges": [],
    "entityRanges": [],
    "data":
    {}
  },
  {
    "key": "7b9he",
    "text": "ttps://www.youtube.com/watch?v=DL6g6OXt9zs",
    "type": "video",
    "depth": 0,
    "inlineStyleRanges": [],
    "entityRanges": [],
    "data":
    {
      "provisory_text": "https://www.youtube.com/watch?v=DL6g6OXt9zs",
      "endpoint": "//api.embed.ly/1/oembed?key=986d38768d634c2c91834dc3a7dad6c3\u0026url=",
      "type": "video"
    }
  },
  {
    "key": "9ofhn",
    "text": "Ttweet\" data-lang=\"en\"\u003e\u003cp lang=\"en\" dir=\"ltr\"\u003eI didn\u0026#39;t say \u0026#39;universally hated\u0026#39;, did I? Just \u0026#39;hated\u0026#39;. \u003ca href=\"https://t.co/OFm0BZ3fYh\"\u003ehttps://t.co/OFm0BZ3fYh\u003c/a\u003e\u003cT/p\u003e\u0026mdash; Peter Hitchens (@ClarkeMicah) \u003ca href=\"https://twitter.com/ClarkeMicah/status/840926631246069760\"\u003eMarch 12, 2017\u003c/a\u003e\u003c/blockquote\u003e \u003cscript async src=\"//platform.twitter.com/widgets.js\" charset=\"utf-8\"\u003e\u003c/script\u003e",
    "type": "embed",
    "depth": 0,
    "inlineStyleRanges": [],
    "entityRanges": [],
    "data":
    {
      "provisory_text": "\u003cblockquote class=\"twitter-tweet\" data-lang=\"en\"\u003e\u003cp lang=\"en\" dir=\"ltr\"\u003eI didn\u0026#39;t say \u0026#39;universally hated\u0026#39;, did I? Just \u0026#39;hated\u0026#39;. \u003ca href=\"https://t.co/OFm0BZ3fYh\"\u003ehttps://t.co/OFm0BZ3fYh\u003c/a\u003e\u003c/p\u003e\u0026mdash; Peter Hitchens (@ClarkeMicah) \u003ca href=\"https://twitter.com/ClarkeMicah/status/840926631246069760\"\u003eMarch 12, 2017\u003c/a\u003e\u003c/blockquote\u003e \u003cscript async src=\"//platform.twitter.com/widgets.js\" charset=\"utf-8\"\u003e\u003c/script\u003e",
      "endpoint": "//api.embed.ly/1/extract?key=986d38768d634c2c91834dc3a7dad6c3\u0026url=",
      "type": "embed"
    }
  },
  {
    "key": "a7n94",
    "text": "This is the final paragraph.",
    "type": "unstyled",
    "depth": 0,
    "inlineStyleRanges": [],
    "entityRanges": [],
    "data":
    {}
  }]
}

[pch]

In case anyone runs into the same problem: My hacky solution is to add support for custom wrappers by monkey patching WrapperState:

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

# overwrite element_for to add support for custom wrappers
module DraftjsExporter
  class WrapperState
    def element_for(block)
      type = block.fetch(:type, 'unstyled')
      custom_proc = block_map.fetch(type).fetch(:custom_proc, nil)

      if custom_proc
        e = custom_proc.call(document, block)
      else
        e = document.create_element(block_options(type))
      end

      parent_for(type).add_child(e)
    end
  end
end

# custom wrapper proc
image_proc = lambda { |document, block|
  image_url = block.fetch(:data, {}).fetch(:url, "")
  image_direction = block.fetch(:data, {}).fetch(:url, "")
  caption = block[:text]

  figure = document.create_element("figure", class: "direction--#{image_direction}")
  img = document.create_element("img", src: image_url)

  figure.add_child(img)

  if caption.present?
    figcaption = document.create_element("figcaption")
    figcaption.add_child(document.create_text_node(caption))
    figure.add_child(figcaption)
  end

  block[:text] = "" # erase caption so that it's not re-inserted to html later

  figure
}

DRAFTJS_EXPORTER_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" },

    "blockquote"          => { element: "blockquote" },
    "code-block"          => { element: "pre" },
    "atomic"              => { element: "div" },
    'unordered-list-item' => {
      element: 'li',
      wrapper: ['ul', { className: 'unordered-list' }]
    },
    'ordered-list-item' => {
      element: 'li',
      wrapper: ['ol', { className: 'ordered-list' }]
    },
    'unstyled' => { element: 'p' },
    'image' => { custom_proc: image_proc }
  },
  style_map: {
    "UNDERLINE" => { fontStyle: 'underline' },
    'ITALIC'    => { fontStyle: 'italic' },
    'BOLD'      => { fontStyle: 'bold' }
  }
}.freeze

[theozaurus]

Thanks