sstur/draft-js-export-markdown

DraftJS: Export ContentState to Markdown

draft-js-export-markdown's Issues

Common Mark compatibility?

Hi. Would it be a good idea to document what Markdown flavour does this library supports exactly. For example, I would like to know if this library aims to be Common Mark compatible or something else.

Code blocks with multiple lines

Hey Simon,

Thanks for the library! I'm using stateToMarkdown on a project in conjunction with SamyPesse/draft-js-code which prevents new code blocks from being created when enter is pressed.

It's my understanding that the default behaviour in Draft is to create a new code-block, so this isn't a bug report by any means, however I was wondering whether you may be open to a pull request which would allow for code blocks with multiple new lines?

This hackery gave the desired output:

-this.output.push(CODE_INDENT + this.renderBlockContent(block).split('\n').join('\n' + CODE_INDENT) + '\n');

I noticed that in draft-js-export-html you've provided an API to define custom renderers, perhaps this is something I could try and provide you with some assistance with?

Image export is not working

Steps to reproduce the issue

If you try to export an image inserted using DraftJS, the block with the image is not present in the markdown output. This is because the IF clause that is supposed to convert the image block is never possible due to differences in case (one side is 'image', the other is 'IMAGE' and there's a === between them).

The if clause should look like this (line 240):
if (entity != null && entity.getType().toLowerCase() === _draftJsUtils.ENTITY_TYPE.IMAGE.toLowerCase()) {

Would have done it myself, but no rights to access repo.

Wrong support for underline

As I said in sstur/react-rte#71, UNDERLINE inline style is not really supported.
Underline does not really exists in markdown, so it makes ++underline++ unusable in other parsers.

Num of spaces for nested list

Hi Simon.
Thank you so much for your lib.

I found 4spaces is required for a nested list as described in the specs
http://markdown-guide.readthedocs.io/en/latest/basics.html#lists-nested

However, in line 103 and 120 of stateToMarkdown.js, only 2spaces are being used.

var indent = ' '.repeat(block.depth * 2);

Question of the scope of the exporter

@sstur Is this meant for basic rich text editors with links?

Would be nice to have a solution that also supports mentions, hashtags, images etc that is often used in editors these days. Or some kind of way to define our own rules.

Escape special characters

Characters such as # ~ - [ ] ( ) > should be escaped like how characters * _ are.

Use case:

• Visit https://react-rte.org/demo
• Type the following

# heading
~~strike~~
- list
[title](url)
> blockquote

• Switch to markdown tab
• Cut markdown
• Paste markdown

You'll notice the dehydrated state is not properly escaping these MD characters and when rehydrated from MD not all exported content like blockquotes are recreated.

Insert breaks every time

Hello, when I trying get markdown from onChange event by Editor I has double breaks in text.
I want save markdown to another key in my state and save its to database.
What I doing wrong?

<div className={`editor ${this.state.hasFocus ? 'hasFocus' : ''}`}
     onClick={() => { this.editor.focus() }} >
	<Editor
		onFocus={() => this.setState({hasFocus: true})}
		onBlur={e => this.validationDescriptionCheck(e)}
		editorState={this.state.editorState}
		onChange={this.onChange}
		plugins={plugins}
		ref={(element) => { this.editor = element; }}
	/>
	<EmojiSuggestions/>
	<InlineToolbar/>
	{this.state._description === false ?
		<div className="invalid-feedback">{this.state._descriptionMsg}</div> : null}
</div>

	onChange = (editorState) => {
		const markdown = stateToMarkdown(editorState.getCurrentContent());
		this.setState({
			editorState,
			formData: {
				...this.state.formData,
				description: markdown
			}
		});
	};

And my submitHandler:

submitHandler(e) {
	e.preventDefault();
	const { actions } = this.props;
	
	if(this.validate()) {
		let data = this.state.formData;

		let service = new Service(data);

		//TODO удалить
		if(!service.createdAt || service.createdAt === null)
			service.createdAt = moment().format('YYYY-MM-DD HH:mm');
		
		if(this.state.edit === true)
			actions.updateServiceAction(service);
		else
			actions.addServiceAction(service);
	} else {
		actions.error("Данные заполнены не корректно или неполностью");
	}
}

When I call submitHandler I has multiple line-breaks in my string and next save form added another breaks
example first save

next save

If I save in my formData plaintext(not markdown) all works properly

Extra spacing on line break

When hitting enter for a new line it seems like an extra line is appended to the output from the stateToMarkdown module. Below is a screenshot consoling out stateToMarkdown(editorState.getCurrentContent()). As you can see in the console there is an added space between each of the breaks which is not seen in the draft.js editor itself. @sstur feel free to hit me back on slack. Like I mentioned I'd be happy to work through this with you and help out as much as possible.

Support UNDERLINE and custom inline-styles.

This is a followup to #9. Underline should not be supported by default. We should, however, accept options to allow custom rendering.