ignitionworks / draftjs_exporter Goto Github PK
View Code? Open in Web Editor NEWExport Draft.js content state into HTML.
License: MIT License
Export Draft.js content state into HTML.
License: MIT License
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.
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?
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?
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.
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.
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.