some styles like underline do not work
Closed this issue ยท 9 comments
So far, I've found that the underline and through styles don't work correctly
This is something you can add on when passing in options to the conversion tool if you like, it should be a super straightforward addition :) I think it was excluded from being built in since underline/strikethrough aren't a part of basic markdown syntax, but I'm open to adding them anyway at this point ๐
@formine: I've just been battling the same issue. Turns out there's a lot of common WYSIWYG features which are missing in MD.
For this example, we assume ++
wraps underline...
import { convertToRaw } from 'draft-js';
import { draftToMarkdown } from 'markdown-draft-js';
export const extendedStyleItems = {
UNDERLINE: {
open: function open() {
return '++';
},
close: function close() {
return '++';
},
},
};
export function draftToMarkdownWrapper(editorState) {
return draftToMarkdown(
convertToRaw(editorState.getCurrentContent()),
{
styleItems: extendedStyleItems,
},
);
}
How to handle this while converting markdown to draft syntax?
If you check out remarkable's documentation (this lib uses remarkable) you can turn on underline support with their extra options! Then you need to also pass in options for how it should map to draftjs (see the readme on this repo for that part)
Thanks @Rosey for such a quick reply. I will check the documentation once more, I couldn't find that option when I checked last time. It would be awesome if there are any samples which you can point out.
Thank you so much
@Rosey I tried this
markdownToDraft("Test string with **bold** and ++underline++", {
remarkableOptions: {
enable: {
inline: "ins",
},
},
})
but doesn't seems to work. Am I missing something?
As per this https://jonschlinkert.github.io/remarkable/demo/ clearly '++' syntax looks like a underline one.
@maheshchauhan-terem After enabling in remarkable you'll also need to pass in custom blockStyles
to map the remarkable key to the draftjs version. Try
markdownToDraft("Test string with **bold** and ++underline++", {
blockStyles: {
'ins_open': 'UNDERLINE',
},
remarkableOptions: {
enable: {
inline: "ins",
},
},
})
You are awesome @Rosey . Thank you so much ๐คฉ
Hi @Rosey , thanks for this great library. Can't figure out ++UNDERLINED TEXT++
isn't parsing in the editor while typing (doing "** bold **" parsed it as bold text in the editor after hitting space)
. is there any more configuration I'm missing aside from the code above? I did that and seems like it is parsing correctly to the markdown specified (++) and as well as rendering as UNDERLINE when converting the value from markdown to draft.
But doing ++TEXT++
is not parsing to underline when typing the text in the editor.