decaporg / decap-cms

A Git-based CMS for Static Site Generators

Home Page:https://decapcms.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

bert-bruggeman opened this issue · comments

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

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

Current editor,...

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

commented

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

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

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!

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.

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

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

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)

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)

commented

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.

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

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.

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?

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.

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!