Comments (11)
We are using your recommended example to me from awhile back:
const draftConverter = convertToHTML({
blockToHTML: (block) => {
if(block.type === 'header-two'){
return {
start: '<h2 class="title">',
end: '</h2>'
}
}
if(block.type === 'header-three'){
return {
start: '<h3 class="subtitle">',
end: '</h3>'
}
}
if (block.type === 'atomic') {
return {
start: '',
end: ''
}
} else {
return {
start: '<p>',
end: '</p>'
}
}
},
entityToHTML: (entity, originalText) => {
const src = entity.data.src;
if (entity.type === 'image') return `<div class="content-image">${originalText}<img src="${src}"/></div>`;
else if (entity.type === '#mention') return parsers.games.hearthstone(entity);
else return originalText;
}
});
from draft-convert.
I just ran into this issue as well. This is what fixed it for me in case anyone else is stuck on the same problem (note the nestStart/nestEnd tags):
if (type === 'unordered-list-item') {
return {
start: '<li>',
end: '</li>',
nestStart: '<ul>',
nestEnd: '</ul>',
};
}
if (type === 'ordered-list-item') {
return {
start: '<li>',
end: '</li>',
nestStart: '<ol>',
nestEnd: '</ol>',
};
}
from draft-convert.
Here's the raw object from draftjs.
{
"entityMap": {},
"blocks": [{
"key": "9elus",
"text": "Ordered list test",
"type": "unstyled",
"depth": 0,
"inlineStyleRanges": [],
"entityRanges": [],
"data": {}
}, {
"key": "1rd6b",
"text": "first item",
"type": "ordered-list-item",
"depth": 0,
"inlineStyleRanges": [],
"entityRanges": [],
"data": {}
}, {
"key": "9l80r",
"text": "second item",
"type": "ordered-list-item",
"depth": 0,
"inlineStyleRanges": [],
"entityRanges": [],
"data": {}
}, {
"key": "cr9vv",
"text": "third item",
"type": "ordered-list-item",
"depth": 0,
"inlineStyleRanges": [],
"entityRanges": [],
"data": {}
}, {
"key": "cc2j0",
"text": "",
"type": "unstyled",
"depth": 0,
"inlineStyleRanges": [],
"entityRanges": [],
"data": {}
}]
}
from draft-convert.
It looks like DraftJS doesn't export the <ol>
or <ul>
tags that open/close the line items.
from draft-convert.
hmm, what version of draft-convert
are you using? are you running convertToHTML
with any configuration options passed to it? I was able to successfully convert that raw state with the default options.
from draft-convert.
We just updated to 1.3.3 and we still get this error:
convertToHTML: received block information without either a ReactElement or an object with start/end tags
from draft-convert.
Interesting. I still can't reproduce on 1.3.3 with the default settings so it sounds like draft-convert disagrees with your setting of the blockToHTML
option. Is it possible that for list items you're returning HTML information that doesn't include any of these properties:
a) a nest
property with a value of a ReactElement
b) a nestStart
and nestEnd
with string values for the html tags
If you're interested this is likely the source of the error check. In order to know what tag (ul
or ol
) in this case to use to wrap blocks that require nesting. The default block HTML has this definition so it sounds like it's being overridden somewhere in your configuration.
from draft-convert.
I tried adding this but no change:
if(block.type === 'unordered-list-item'){
return {
element: '<li/>',
nest: '<ul>'
}
}
if(block.type === 'ordered-list-item'){
return {
element: '<li/>',
nest: '<ol>'
}
}
from draft-convert.
We got it working. Thanks!
from draft-convert.
Great! Looks like that else
at the end was clobbering it. I'd recommend avoiding one so that it can fall back to the built-in values.
from draft-convert.
@benbriggs I had to add the same thing as @coniel above. Is this a bug in draft-convert? I can share any information on my setup if needed.
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.