Skip to content
This repository has been archived by the owner on Feb 6, 2023. It is now read-only.

Support custom inline styles when importing from HTML? #282

Open
coopy opened this issue Apr 8, 2016 · 24 comments
Open

Support custom inline styles when importing from HTML? #282

coopy opened this issue Apr 8, 2016 · 24 comments

Comments

@coopy
Copy link

coopy commented Apr 8, 2016

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!

@mitermayer
Copy link
Contributor

I am working on a PR to make that configurable will be similar to #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

@coopy
Copy link
Author

coopy commented Apr 8, 2016

@mitermayer that's cool. In the meantime, I might just add the inline tags that I need to a fork of draft-js.

@milushov
Copy link

milushov commented Sep 5, 2016

@coopy @mitermayer Hello, guys. Do you have any news?

@milushov
Copy link

milushov commented Sep 5, 2016

@mitermayer I did not find your PR here

@MrDarkHorse
Copy link

I'm also in need of this feature. Any word on this?

@mitermayer
Copy link
Contributor

Hi guys, I am back working at draft-js will post the PR soon.

@coinfork
Copy link

Looking forward to this!

@mitermayer
Copy link
Contributor

mitermayer commented Oct 24, 2016

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

@andpor
Copy link

andpor commented Mar 24, 2017

Hi - need to support superscript and subscript style on HTML import. Where do we stand from support perspective for these extra styles ?

@taylorstine
Copy link

Is this implemented?

@tsboom
Copy link

tsboom commented Sep 12, 2017

I am also wondering if superscript and subscripts are supported yet.

@joafeldmann
Copy link

Any news on this?

@Drewsov
Copy link

Drewsov commented Jun 15, 2018

Still no news ?

@williamli
Copy link

williamli commented Sep 18, 2018

@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.

@flycj
Copy link

flycj commented Oct 31, 2019

Any news on this?

@flycj
Copy link

flycj commented Oct 31, 2019

Hi guys, I am back working at draft-js will post the PR soon.

Any news on this?

@VivekNeel
Copy link

Any update on this? :)

@VivekNeel
Copy link

aa

@jkevingutierrez
Copy link

+1

@BiancaArtola
Copy link

BiancaArtola commented Jan 13, 2021

Any update?

@Nassimadebeo
Copy link

any update ?

@ks-krimi
Copy link

Hello, please give me a sign if this is implemented 👍🏾 ;)

@Hipposhark
Copy link

any update?

@Hipposhark
Copy link

Hipposhark commented Oct 28, 2022

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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests