Comments (13)
I think the latter is what we want here - it's how overlapping style ranges currently work and I'm not so sure the first is valid.
from draft-convert.
closed via #57 🎉
from draft-convert.
Fix is landed in 1.4.6 - thanks so much for your help @liyantang!
from draft-convert.
Should resulting tags overlap, or be close/opened around the intersect?
In the Intersect start example, for example, which of these possibilities would be desired?
<div>t<strong>e<a href="http://google.com" target="_blank">s</strong>t test te</a>st</div>
<div>t<strong>e</strong><a href="http://google.com" target="_blank"><strong>s</strong>t test te</a>st</div>
For HTML5, either one should be valid. Is there any preference here?
from draft-convert.
@benbriggs Found a breaking case:
Given that you style text not overlapping to links, and have more that one link in text block, style is left on stack and error is thrown.
Example:
testing testing testing testing testing
Uncaught Error: Character 73: -1 styles left on stack that should no longer be there
Error is thrown in blockInlineStyles: https://github.com/HubSpot/draft-convert/blob/master/src/blockInlineStyles.js#L119
from draft-convert.
Hmm I can't seem to reproduce that @liyantang, can you provide a failing test? Here's one I tried to mimic your example that passes:
const contentState = buildContentState([
{
type: 'unstyled',
text: 'testing testing testing testing testing',
styleRanges: [
{
style: 'BOLD',
offset: 8,
length: 7
}
],
entityRanges: [
{
key: 0,
offset: 16,
length: 7
},
{
key: 1,
offset: 24,
length: 7
}
]
}
], {
0: {
type: 'LINK',
mutability: 'MUTABLE',
data: {
url: 'asdf'
}
},
1: {
type: 'LINK',
mutability: 'MUTABLE',
data: {
url: 'asdf'
}
}
});
const html = convertToHTML({
entityToHTML: (entity, originalText) => {
if (entity.type === 'LINK') {
return <a>{originalText}</a>;
}
}
})(contentState);
expect(html).toBe('<p>testing <strong>testing</strong> <a>testing</a> <a>testing</a> testing</p>');
from draft-convert.
Example:
it('failing test', () => {
const contentState = buildContentState([
{
type: 'unstyled',
text: 'overlapping test Hello World',
styleRanges: [
{
offset: 0,
length: 11,
style: 'BOLD'
},
{
offset: 23,
length: 5,
style: 'ITALIC'
}
],
entityRanges: [
{
key: 0,
offset: 17,
length: 5,
prefixLength: '<a href="http://google.com">'.length,
suffixLength: '</a>'.length
},
{
key: 1,
offset: 23,
length: 5,
prefixLength: '<a href="http://google.com">'.length,
suffixLength: '</a>'.length
}
],
},
], {
0: {
type: 'LINK',
mutability: 'IMMUTABLE',
data: {
href: 'http://google.com',
}
},
1: {
type: 'LINK',
mutability: 'IMMUTABLE',
data: {
href: 'http://google.com',
}
}
});
const result = convertToHTML(convertToHTMLProps)(contentState);
expect(result).toBe('<strong>overlapping</strong> test <a href="http://google.com">Hello</a> <em><a href="http://google.com">World</a></em>');
});
from draft-convert.
Hmm...that still passes for me as well (after adding wrapping <p>
tags and defining convertToHTMLProps
). Is your local fork/clone up to date to [email protected]
?
from draft-convert.
I am on the latest of master branch of 1.4.5. I added this test to the existing tests in converToHTML.js and it throws the error for me.
from draft-convert.
Strange! Could you try submitting it as a PR so that the test runs in Travis and we can have an isolated place to verify that it can be fixed? Thanks for digging into this!
from draft-convert.
https://travis-ci.org/HubSpot/draft-convert/builds/226509786
from draft-convert.
Perfect, thanks! I'll dig into it now.
from draft-convert.
Great, thanks!
from draft-convert.
Related Issues (20)
- Example from readme breaks links with ampersand, quote and other escaped characters
- Feature suggestion: convertToJSX
- convertToHTML Anchor Tag HOT 1
- When converting html with hyperlink, spaces is removed.
- TypeScript: Argument of type 'htmlConverter' is not assignable to parameter of type 'ContentState'.
- soft enters are not persisted when pasting text entered in draft.js editor
- After convertFromHtml span with whitespace doesn't keep the inline styles
- Possible bug in the readme example (entityToHTML) HOT 4
- convertToHTML throws for "code-block" HOT 4
- Empty block when using iframe
- Error for code-block, no list and no font size change
- v2.1.11 -> v2.1.12 extra spaces HOT 1
- disable default behavior of list elements being wrapped in ul/ol HOT 2
- List Items rendered without <ul> or <li> HOT 1
- convertFromHTML and inline images
- How to map code
- Handle empty lines when converting to HTML
- peerDependencies to support React v18 HOT 3
- convertFromHTML adds <br/> to blockquotes HOT 1
- Encounter "ReferenceError: document is not defined" when call convertFromHTML() on Node.js server side
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.
from draft-convert.