Comments (12)
Yes, it should work with this configuration, assuming you have inline styles applied to your Draft ContentState
of types SUPERSCRIPT
and SUBSCRIPT
:
const opts = {
styleToHTML: (style) => {
if (style === 'SUPERSCRIPT') {
return {
start: '<sup>',
end: '</sup>'
};
}
if (style === 'SUBSCRIPT') {
return {
start: '<sub>',
end: '</sub>'
};
}
},
htmlToStyle: (nodeName, node, currentStyle) => {
if (nodeName === 'sup') {
return currentStyle.add('SUPERSCRIPT');
}
if (nodeName === 'sub') {
return currentStyle.add('SUBSCRIPT');
}
return currentStyle;
}
}
const fromHTML = convertFromHTML(opts);
const toHTML = convertToHTML(opts);
from draft-convert.
@benbriggs Yes! That was it. Thanks.
from draft-convert.
This is probably a stupid question, but how do I apply inline styles to my Draft ContentState?
from draft-convert.
I'd suggest something similar to the Styling Controls example in the Draft docs to add an inline style to the currently selected text in your editor
from draft-convert.
Hi so I have the convertToHTML working correctly with my inlineStyles and my HTML has the around the desired text.
But when i try to read in the html into another draftjs instance with convertFromHTML I do not see the subscript effect - i believe I am missing something in the styleToHTML.
Do I need to define 'SUPERSCRIPT' somewhere before i currentStyle.add('SUPERSCRIPT');
any advice would be really appreciated!! awesome library!!
from draft-convert.
@tmccar5 you shouldn't need to - as long as you use the same string in styleToHTML
, htmlToStyle
, and your rendering inline styles, and you use the same config for both convertToHTML
and convertFromHTML
it should be fine. is that still not working?
from draft-convert.
Okay I am pretty sure I have it set up right, but I don't think the convertFromHTML is working properly for me.
The html I am reading in may be something like '< p >sub test< sub >*< /sub >< p >'
but the is lost when the HTML goes through convertFromHTML
Let me know if you want any code snippets ect. this feature is super critical for my project so i really appreciate it.
Thanks for the speedy response!!
from draft-convert.
@tmccar5 i noticed a couple errors in my example above - there should be a return currentStyle;
at the end of the htmlToStyle
function and I was missing a few brackets for if blocks - after fixing those i ran your example it through both convertFromHTML
and convertToHTML
with success. I did also have to remove spaces within the angle brackets from your example input for it to be valid HTML.
from draft-convert.
I'm running into a similar issue. I'm trying to implement the opposite of this exporter function from medium-draft
. They have state to html working and I'm trying to go in the other direction.
Here's my htmlToStyle callback. Some of the calls to currentStyle.add are not showing up in currentStyle when I log it as JSON. Specifically I'm not seeing the HIGHLIGHT option.
htmlToStyle: (nodeName, node, currentStyle) => {
node.className.split(' ').forEach((className) => {
// DEBUG
console.log('className:', className);
switch (className) {
case `md-inline-${Inline.ITALIC.toLowerCase()}`: {
currentStyle.add(Inline.ITALIC);
break;
}
case `md-inline-${Inline.BOLD.toLowerCase()}`: {
currentStyle.add(Inline.BOLD);
break;
}
case `md-inline-${Inline.STRIKETHROUGH.toLowerCase()}`: {
currentStyle.add(Inline.STRIKETHROUGH);
break;
}
case `md-inline-${Inline.UNDERLINE.toLowerCase()}`: {
currentStyle.add(Inline.UNDERLINE);
break;
}
case `md-inline-${Inline.HIGHLIGHT.toLowerCase()}`: {
currentStyle.add(Inline.HIGHLIGHT);
break;
}
case `md-inline-${Inline.CODE.toLowerCase()}`: {
currentStyle.add(Inline.CODE);
break;
}
}
});
// DEBUG
console.log('currentStyle:', JSON.stringify(currentStyle, null, 4));
return currentStyle;
},
from draft-convert.
@akinnee I think your issue might lie with the calls to currentStyle.add
in your htmlToStyle
function. currentStyle
is an immutable OrderedSet
, so calling .add()
without a reassignment won't mutate the value of currentStyle
. Could you try replacing each call with currentStyle = currentStyle.add(...)
?
from draft-convert.
Great! Closing this as I think everything seems to be working as it should.
from draft-convert.
so, how to solve this problem? Thank you very much
from draft-convert.
Related Issues (20)
- 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
- Display of spans
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.