decaporg / decap-cms

A Git-based CMS for Static Site Generators
https://decapcms.org
MIT License
17.93k stars 3.04k forks source link

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

Open bert-bruggeman opened 7 years ago

bert-bruggeman commented 7 years ago

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

tortilaman commented 7 years ago

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

bert-bruggeman commented 7 years ago

Current editor,...

tortilaman commented 7 years ago

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

bert-bruggeman commented 7 years ago

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

tortilaman commented 7 years ago

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

tech4him1 commented 7 years ago

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

erquhart commented 7 years ago

@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 commented 7 years ago

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

ouarez commented 6 years ago

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!

erquhart commented 6 years ago

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 commented 6 years ago

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

bettysteger commented 5 years ago

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

wing5wong commented 5 years ago

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)

binyamin commented 5 years ago

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)

stale[bot] commented 5 years ago

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.

wing5wong commented 5 years ago

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

levino commented 5 years ago

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:

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

tlohm12s commented 3 years ago

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?

jordanwalsh23 commented 3 years ago

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.

ansmlc commented 2 years ago

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!

Juniors017 commented 7 months ago

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 ?