Rosey/markdown-draft-js

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

Rosey commented

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 ๐Ÿ˜Š

HDv2b commented

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

Rosey commented

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.

Rosey commented

@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 ๐Ÿคฉ

vmc08 commented

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.