draft-js
draft-js copied to clipboard
facebookarchive
Support custom inline styles when importing from HTML?
The docs mention that you can define map CSS styles to arbitrary styles. I need to serialize my editorState to HTML and from during and between editing sessions.
I know from looking at other Issues that serializing to and rehydrating from HTML should be avoided, but I think there are lots of use cases where you want to frequently initialize the Draft editor from some external state and have the editorState truthfully represent what's given to the editor.
Looking at the source code, only a handful of inline elements are supported:
- b: 'BOLD'
- code: 'CODE'
- del: 'STRIKETHROUGH'
- em: 'ITALIC'
- i: 'ITALIC'
- s: 'STRIKETHROUGH'
- strike: 'STRIKETHROUGH'
- strong: 'BOLD'
- u: 'UNDERLINE'
I'd like to convert from more inline styles to the style strings that I use with RichUtils.toggleInlineStyle; notably superscript <sup/> and subscript <sub>.
The only way to support them today that I can see (without forking the draft-js source) is to choose other styles that I don't use (say, strikethrough and underline) to represent the styles that I want. Is there a different way?
How would one go about implementing support for custom inline tags for the HTML conversion? As far as I can tell, it doesn't have access to props passed to <Editor/>.
Thanks!
I am working on a PR to make that configurable will be similar to https://github.com/facebook/draft-js/pull/205, it was going to be part of that PR but it got way to large so got split over. Just waiting it to be merged into master. At the moment it has already being imported
@mitermayer that's cool. In the meantime, I might just add the inline tags that I need to a fork of draft-js.
Got something ready for this, I believe however that maybe the converter to html could be split from draft itself into a separate module, we could then create an API to allow user specific converters. Example would be allowing user to paste markdown content, this however can be discussed on another issue. In the meantime will write some tests do a bit of refactoring and open a PR for this
Hi - need to support superscript and subscript style on HTML import. Where do we stand from support perspective for these extra styles ?
@coopy I too was looking into adding more custom buttons support,
In https://github.com/draft-js-plugins/draft-js-plugins/tree/master/draft-js-buttons, they have injected the <sub> and <sup> tags in. I am studying their code to see how they did it.
Hi guys, I am back working at draft-js will post the PR soon.
Any news on this?
if anyone is still looking for a solution, i eventually settled on the package draft-convert (https://www.npmjs.com/package/draft-convert). it is able to convert the draft state to html and back to draft state, and you can declare all of the inline styles you want such as colors and links.