decap-cms icon indicating copy to clipboard operation
decap-cms copied to clipboard

Markdown new line " " (double space) converts to "\"

Open bert-bruggeman opened this issue 8 years ago • 21 comments

Markdown new line " " (double space) converts to a backslash in the markdown editor....

bert-bruggeman avatar Aug 04 '17 07:08 bert-bruggeman

@bert-bruggeman Is this with the current editor, or with the preview of the slate editor?

tortilaman avatar Aug 04 '17 09:08 tortilaman

Current editor,...

bert-bruggeman avatar Aug 04 '17 09:08 bert-bruggeman

The slate editor from #254 is about to be merged. I can't seem to reproduce this in Slate, so that's good. If you want to have a try, look at https://deploy-preview-254--cms-demo.netlify.com/. I might just not be understanding the error you're mentioning..

tortilaman avatar Aug 04 '17 10:08 tortilaman

@tortilaman In markdown, two spaces are used after a certain sentence to start the next sentence on a new line.

In the current editor, this only works if the text is displayed as markdown code, in wysiwyg mode double spaces are replaced by a backslash and the text is not on a new line...

In the new slate editor, the double spaces do not work at all (not in the content preview as well).

bert-bruggeman avatar Aug 04 '17 22:08 bert-bruggeman

@bert-bruggeman Alright, I would assume it's preferable to not have the slash, so that's probably good. I'm curious if it's the markdown library itself that doesn't support the double space syntax.

tortilaman avatar Aug 05 '17 02:08 tortilaman

It looks like the reason this is broken in the new Slate editor is because of these lines in #254:

/**
 * Turn off soft breaks until we can properly support them across both
 * editors.
 */
pull(this.Parser.prototype.inlineMethods, 'break');

src/components/Widgets/Markdown/serializers/index.js#L119

tech4him1 avatar Aug 08 '17 00:08 tech4him1

@tech4him1 good eye :)

The issue is that a soft break is a distinct entity in the Markdown AST we're using, and there's no obvious way to express that entity in the Slate AST. Just need to dig in more and find the right approach. As always, contributions are welcome!

erquhart avatar Aug 17 '17 13:08 erquhart

@bert-bruggeman a break can be accomplished in markdown via double space or backslash. The AST we use for markdown doesn't carry specifics, just abstract meaning - to wit, the AST doesn't know how the break was made. In other words, both a trailing double space and a trailing slash translate into the same "soft break" entity when the markdown is parsed to an abstract syntax tree. When we convert that back to a markdown string, we don't know which method was used to create the soft break, so we always output it the same way, as a slash.

The good new is, both styles are now supported in the new editor, which is on master and soon to be released.

erquhart avatar Oct 02 '17 16:10 erquhart

Sorry for bothering you with this issue a year later, but the Netlify CMS Markdown editor is still outputting line breaks as a backslash for me.

The result in Jekyll (which uses Kramdown) is a \ in the middle of the text, instead of a <br/> :(

You wrote The good new is, both styles are now supported in the new editor, which is on master and soon to be released.

Is this the case? Is there any way I can add support for a double space, instead of a backslash?

Sorry in advance if I am missing the obvious solution, but I couldn't find a way to force Kramdown to grudgingly accept the backslash line break notation.

For reference, I'm using Netlify CMS version 2.0.0 (https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js)

Thank you!

ouarez avatar Nov 05 '18 23:11 ouarez

We output commonmark compatible markdown, but Kramdown doesn't really adhere to the commonmark spec. There should be ways to configure our markdown widget's output, though, definitely worth discussing.

erquhart avatar Nov 06 '18 17:11 erquhart

Hmm looks like turning off the commonmark flag for remark-stringify might fix it: https://github.com/remarkjs/remark/blob/master/packages/remark-stringify/lib/visitors/break.js

erquhart avatar Nov 06 '18 17:11 erquhart

@ouarez have you found a solution when using kramdown with netlify-cms?

bettysteger avatar Feb 25 '19 13:02 bettysteger

Bump for this.

Jigsaw utilises Parsedown which does not appear to work with backslash newlines. the backslash characters are rendered into content instead of newlines.

Having to train editors into using a double space is no mean feat when they just expect to type and everything "works".

In summary: it should be possible to configure which line break is used - "\"(backslash) or " "(double space)

wing5wong avatar Jul 08 '19 00:07 wing5wong

I think the config options should include a <br/> option as well, since double spaces can be easily deleted by mistake. (BTW, I fixed this issue by using a different markdown renderer for jekyll)

binyamin avatar Aug 30 '19 14:08 binyamin

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

stale[bot] avatar Oct 29 '19 15:10 stale[bot]

This is still our single biggest issue our editors experience. Saving in rich text mode converts all double spaces to backslash which then display in articles. Not great

wing5wong avatar Oct 29 '19 18:10 wing5wong

~~Please someone address this issue.~~ Actually we just switched to render the markdown with react-commonmark instead of react-markdown and now it is at least consistent. I personally find this is an acceptable solution. However I recommend doing the following changes:

  • Call the widget "commonmark" instead of "markdown" (it is NOT a markdown widget after all).
  • Update the editor UI to allow the user to switch between "Rich Text" and "Commonmark" instead of "Rich Text" and "Markdown". Selection_272

These changes would make life easier for future users without much work on your end.

levino avatar Nov 07 '19 10:11 levino

Sorry for bothering you with this issue a year later, but the Netlify CMS Markdown editor is still outputting line breaks as a backslash for me.

The result in Jekyll (which uses Kramdown) is a \ in the middle of the text, instead of a <br/> :(

You wrote The good new is, both styles are now supported in the new editor, which is on master and soon to be released.

Is this the case? Is there any way I can add support for a double space, instead of a backslash?

Sorry in advance if I am missing the obvious solution, but I couldn't find a way to force Kramdown to grudgingly accept the backslash line break notation.

For reference, I'm using Netlify CMS version 2.0.0 (https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js)

Thank you!

Is there meanwhile a solution to this problem?

tlohm12s avatar Aug 26 '21 15:08 tlohm12s

I've been struggling with this one also. I've implemented some simple regex to get around it:

//Generate Content
let converter = new showdown.Converter({ simpleLineBreaks: true });
let html = converter.makeHtml(frontMatter.body);

//Hack to remove random backslash with single line breaks. See: https://github.com/netlify/netlify-cms/issues/512
html = html.toString().replace(/\\<br\s?\/>/g, "<br/>");
frontMatter.htmlBody = html;

This just takes any html that is \<br /> and replaces it with a <br/>.

Seems to work ok in my case, maybe this is helpful for others viewing this ticket.

jordanwalsh23 avatar Nov 08 '21 01:11 jordanwalsh23

I've been struggling with this one also. I've implemented some simple regex to get around it:

//Generate Content
let converter = new showdown.Converter({ simpleLineBreaks: true });
let html = converter.makeHtml(frontMatter.body);

//Hack to remove random backslash with single line breaks. See: https://github.com/netlify/netlify-cms/issues/512
html = html.toString().replace(/\\<br\s?\/>/g, "<br/>");
frontMatter.htmlBody = html;

This just takes any html that is \<br /> and replaces it with a <br/>.

Seems to work ok in my case, maybe this is helpful for others viewing this ticket.

Works like a charm. Thanks!

ansmlc avatar Apr 01 '22 23:04 ansmlc

I've been struggling with this one also. I've implemented some simple regex to get around it:

//Generate Content
let converter = new showdown.Converter({ simpleLineBreaks: true });
let html = converter.makeHtml(frontMatter.body);

//Hack to remove random backslash with single line breaks. See: https://github.com/netlify/netlify-cms/issues/512
html = html.toString().replace(/\\<br\s?\/>/g, "<br/>");
frontMatter.htmlBody = html;

This just takes any html that is \<br /> and replaces it with a <br/>. Seems to work ok in my case, maybe this is helpful for others viewing this ticket.

Works like a charm. Thanks!

hi all

where i add this ?

Juniors017 avatar Mar 29 '24 20:03 Juniors017