Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
bert-bruggeman opened this issue Aug 4, 2017 · 21 comments
Open

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

bert-bruggeman opened this issue Aug 4, 2017 · 21 comments

Comments

@bert-bruggeman
Copy link

bert-bruggeman commented Aug 4, 2017

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

@tortilaman
Copy link
Contributor

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

@bert-bruggeman
Copy link
Author

Current editor,...

@tortilaman
Copy link
Contributor

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
Copy link
Author

@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
Copy link
Contributor

@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
Copy link
Contributor

tech4him1 commented Aug 8, 2017

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
Copy link
Contributor

erquhart commented Aug 17, 2017

@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 erquhart added this to the 1.0 milestone Aug 17, 2017
@erquhart erquhart self-assigned this Sep 13, 2017
@erquhart
Copy link
Contributor

erquhart commented Oct 2, 2017

@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 erquhart closed this as completed Oct 2, 2017
@ouarez
Copy link

ouarez commented Nov 5, 2018

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
Copy link
Contributor

erquhart commented Nov 6, 2018

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
Copy link
Contributor

erquhart commented Nov 6, 2018

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
Copy link

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

@wing5wong
Copy link
Contributor

wing5wong commented Jul 8, 2019

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
Copy link

binyamin commented Aug 30, 2019

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
Copy link

stale bot commented Oct 29, 2019

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 stale bot added the status: stale label Oct 29, 2019
@wing5wong
Copy link
Contributor

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

@stale stale bot removed the status: stale label Oct 29, 2019
@levino
Copy link

levino commented Nov 7, 2019

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.

@tlohm12s
Copy link

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
Copy link

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
Copy link

ansmlc commented Apr 1, 2022

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
Copy link

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 ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: Triage
Development

No branches or pull requests