sstur / draft-js-import-element Goto Github PK

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);

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?

When importing soft returns e.g. <br>\n a space is added after the line break, effectively prefixing subsequent lines with a single space

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

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!

E.g. Travis-CI has a free option for open source projects, and has a push-button setup process.

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

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?

Is there currently any way to attach entities based on information from DOM? e.g. for custom links, atomic blocks, etc.
Thanks.

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

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?

See sstur/react-rte#56 for details. We landed a quick workaround but I'd like to know the cause.

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.

Hello,

I've tried to transform html content to contentState

Everything goes fine but

The output result shows there's not any image element but only '~' string

Would you take a look and fix it?

Thanks a lot!

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?