This project has moved. It is now part of a monorepo which includes several other draft-js utilities related to import/export of content.
draft-js-import-element's Introduction
draft-js-import-element's People
Forkers
afhole sugarshin sumeetr coopy frenkelor kubaz frederikvanhevel ccniuj derekhung adamtal3 zackify happyming9527 secretbase canopytax exah tommy10802 legrego jobstart adamlong5 daiwhea dfwood mdarcemont nodeman777 aaronvine westmark oscarmorrison greybyte binhndicts lunascape luiscoms toblix gbbr brijeshb42 themaven-net mille-volts deep-c mxstbr azendoodraft-js-import-element's Issues
customBlockFn can't get span
Hello,
I have a html
<p><span style='color: #FF0000'></span><p>
, but the color style of span could not be seen in editor.
try to use the option and it did not catch SPAN
const options = {
customBlockFn(element) {
let { tagName, style } = element;
if (tagName === 'SPAN' && style.color) {
return { data: { color: style.color } };
}
}
}
Or can we have something like you did in https://github.com/sstur/draft-js-export-html
let options = { inlineStyles: {RED: {style: {color: '#FF0000'}}} ?
Thanks lot
Gary
What is the difference between draft-js-import-html and draft-js-import-element?
Soft new lines (br tags) are not being being properly processed
When converting HTML to Draft content fragments, br tags are not properly converted back to Draft soft newlines '\n' characters (as can be seen in Draft's RichTextUtil insertSoftNewline method).
You can actually witness this issue in your React RTE demo by adding some content with soft newlines, then copying the HTML code and pasting it back in the Editor Source field.
I haven't quite grasped the rationale in your code to use '\r' for br tags but anyway these '\r' characters are getting stripped in your collapseWhiteSpace method.
Right now my quick and dirty fix is to use '\n' for br tags and removing '\n' from your collapseWhiteSpace regex but have a feeling that's not the way to go. If you don't mind sharing a bit more about the whole '\r' rationale I'd be more than happy to do a proper pull request with the correct fix.
Any way to inject ELEM_ATTR_MAP?
Is there any way to have a user-definable ELEM_ATTR_MAP?
I'd like to add some arbitrary data-*
attributes to incoming a
tags (and then export them again with your export library) but I'm not sure if that's currently possible?
Add CI for pull requests
E.g. Travis-CI has a free option for open source projects, and has a push-button setup process.
Entities
Is there currently any way to attach entities
based on information from DOM? e.g. for custom links, atomic blocks, etc.
Thanks.
Warning: DraftEntity.create will be deprecated soon. Please use "contentState.createEntity" instead.
You can see the following warning, if you are using the upcoming 0.10.0 draft-js
WARNING: DraftEntity.create will be deprecated soon!
Please use "contentState.createEntity" instead.
The culprit was around here:
return Entity.create(ENTITY_TYPE.LINK, 'MUTABLE', data);
Element class
Is there a way to somehow pass html element css class to block? Maybe through block data.
So is there a way to pass custom block data? I saw you have blockrenderers option for 'draft-js-export-element' but didn't see any chance to pass something like that to options.
Draft.js has blockStyleFn as you know and it would be great to have block class passed with block data so you can get it within this function with block.getData().
https://facebook.github.io/draft-js/docs/advanced-topics-block-styling.html#content
Sorry if it is mean (my English is not ideal) or smth, I am struggling with this whole day now and probably I will have to do some tricks to pass class with block and then catch ContentState this plugin generates and move those classes to block data.
BTW inline styles also disappear or is it problem in my code?
IE11 receives undefined to `processElement`
See sstur/react-rte#56 for details. We landed a quick workaround but I'd like to know the cause.
block containing image cant be deleted
RichUtils.handleKeyCommand takes care of removing atomic blocks.
After converting, the block which has entity image can't delete normally, because its type is 'unstyled'.
I've tried to change your source code to make those block with 'atomic' type, then those can be deleted correctly.
Will you solve this problem?
customInlineFn?
In order to be able to style exported HTML through CSS, I've exported some custom inline styles as HTML classes, so there's a bunch of <span class="special"/>
elements in my exported HTML (using inlineStyles
in draft-js-export-html). This works fine, but there doesn't appear to be a way to do the transformation in reverse, as only blocks get the custom treatment through customBlockFn
, and the only inline transformation configuration supported in draft-js-import-element is elementStyles
, which maps directly from tag name.
Would it be possible to expose a function that, say, lets you push styles on the stack based on the element?
Soft returns are suffixed with a space
When importing soft returns e.g. <br>\n
a space is added after the line break, effectively prefixing subsequent lines with a single space
can't handle <img> tag
Performance issue when converting HTML with many trailing space to editorState
Performance issue when converting HTML to editorState (with stateFromHTML
from draft-js-import-html)
Below is an example of some HTML that contains many trailing spaces which causes the parsing process to slow down. Time taken depends on how large the HTML is, it can take more than 1 minute for a fairly large block of HTML.
Also, I used performance.now() to measure the time taken when using stateFromHTML
.
"<em> Nemo develops a smaller right fin <\/em> as a result of damage to his egg during the attack, which limits his <em> swimming ability <\/em> . <br><br> Worried about Nemo's safety, Marlin embarrasses Nemo during a school field trip. <br><br> Nemo sneaks away from the reef and is <em> captured by scuba divers <\/em> . <br><br> As the boat departs, a diver accidentally knocks his <a href=\"https:\/\/en.wikipedia.org\/wiki\/Diving_mask\"> <em> diving mask <\/em> <\/a> overboard. <br><br> While attempting to save Nemo, Marlin meets Dory, a good-hearted and optimistic <a href=\"https:\/\/en.wikipedia.org\/wiki\/Paracanthurus\"> <em> regal blue tang with <\/em> <\/a> <em> short-term memory loss <\/em> . <br><br> Marlin and Dory meet three <a href=\"https:\/\/en.wikipedia.org\/wiki\/Shark\"> <em> sharks <\/em> <\/a> โ <em> Bruce, Anchor and Chum <\/em> โ who claim to be <em> vegetarians <\/em> ."
Time taken:
1st round - 443.50ms
2nd round - 481.62ms
3rd round - 442.65ms
This HTML has the trailing spaces removed and it is working perfectly fine as you can see the result of the time taken to convert below.
"<em>Nemo develops a smaller right fin <\/em>as a result of damage to his egg during the attack, which limits his <em>swimming ability <\/em>.<br>\n<br>\nWorried about Nemo's safety, Marlin embarrasses Nemo during a school field trip.<br>\n<br>\nNemo sneaks away from the reef and is <em>captured by scuba divers <\/em>.<br>\n<br>\nAs the boat departs, a diver accidentally knocks his <a href=\"https:\/\/en.wikipedia.org\/wiki\/Diving_mask\"><em>diving mask <\/em><\/a>overboard.<br>\n<br>\nWhile attempting to save Nemo, Marlin meets Dory, a good-hearted and optimistic <a href=\"https:\/\/en.wikipedia.org\/wiki\/Paracanthurus\"><em>regal blue tang with <\/em><\/a><em>short-term memory loss <\/em>.<br>\n<br>\nMarlin and Dory meet three <a href=\"https:\/\/en.wikipedia.org\/wiki\/Shark\"><em>sharks <\/em><\/a>\u2013 <em>Bruce, Anchor and Chum <\/em>\u2013 who claim to be <em>vegetarians <\/em>."
Time taken:
1st round - 63.91ms
2nd round - 71.46ms
3rd round - 65.11ms
Return inline elements before to block elements
When I tried of import html with h2
, h3
, img
and other tags, it's inserting the inline elements a
, strong
before
For example, innsert the text before the title
Convert raw HTML containing datasets into a draftJS contentBlock and back again
We're trying to convert this into a valid contentBlock that draftJS can display (it's a custom entity of type 'PERSON'), and then eventually do the opposite with the export-html.
<p>This is a <span class="person" id="123" data-tag-id="100">special</span> element.</p>
How would we go about this? Is it possible using this library? We can't seem to hook any kind of data attributes when doing stateFromElement
passing customBlockFn()
in the options.
Thank you!
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.