Merge pull request #1887 from o-3/master

Add configuration to render newlines as <br> or not

Author: Rokt33r

browser/components/MarkdownEditor.js

@@ -283,6 +283,7 @@ class MarkdownEditor extends React.Component {
           indentSize={editorIndentSize}
           scrollPastEnd={config.preview.scrollPastEnd}
           smartQuotes={config.preview.smartQuotes}
+          breaks={config.preview.breaks}
           sanitize={config.preview.sanitize}
           ref='preview'
           onContextMenu={(e) => this.handleContextMenu(e)}

browser/components/MarkdownPreview.js

@@ -145,10 +145,11 @@ export default class MarkdownPreview extends React.Component {
   }
 
   initMarkdown () {
-    const { smartQuotes, sanitize } = this.props
+    const { smartQuotes, sanitize, breaks } = this.props
     this.markdown = new Markdown({
       typographer: smartQuotes,
-      sanitize
+      sanitize,
+      breaks
     })
   }
 
@@ -340,7 +341,9 @@ export default class MarkdownPreview extends React.Component {
 
   componentDidUpdate (prevProps) {
     if (prevProps.value !== this.props.value) this.rewriteIframe()
-    if (prevProps.smartQuotes !== this.props.smartQuotes || prevProps.sanitize !== this.props.sanitize) {
+    if (prevProps.smartQuotes !== this.props.smartQuotes ||
+        prevProps.sanitize !== this.props.sanitize ||
+        prevProps.breaks !== this.props.breaks) {
       this.initMarkdown()
       this.rewriteIframe()
     }
@@ -599,5 +602,6 @@ MarkdownPreview.propTypes = {
   value: PropTypes.string,
   showCopyNotification: PropTypes.bool,
   storagePath: PropTypes.string,
-  smartQuotes: PropTypes.bool
+  smartQuotes: PropTypes.bool,
+  breaks: PropTypes.bool
 }

browser/components/MarkdownSplitEditor.js

@@ -131,6 +131,7 @@ class MarkdownSplitEditor extends React.Component {
           lineNumber={config.preview.lineNumber}
           scrollPastEnd={config.preview.scrollPastEnd}
           smartQuotes={config.preview.smartQuotes}
+          breaks={config.preview.breaks}
           sanitize={config.preview.sanitize}
           ref='preview'
           tabInde='0'

browser/lib/markdown.js

@@ -25,7 +25,7 @@ class Markdown {
       linkify: true,
       html: true,
       xhtmlOut: true,
-      breaks: true,
+      breaks: config.preview.breaks,
       highlight: function (str, lang) {
         const delimiter = ':'
         const langInfo = lang.split(delimiter)

browser/main/lib/ConfigManager.js

@@ -56,6 +56,7 @@ export const DEFAULT_CONFIG = {
     plantUMLServerAddress: 'http://www.plantuml.com/plantuml',
     scrollPastEnd: false,
     smartQuotes: true,
+    breaks: true,
     sanitize: 'STRICT' // 'STRICT', 'ALLOW_STYLES', 'NONE'
   },
   blog: {

browser/main/modals/PreferencesModal/UiTab.js

@@ -97,6 +97,7 @@ class UiTab extends React.Component {
         plantUMLServerAddress: this.refs.previewPlantUMLServerAddress.value,
         scrollPastEnd: this.refs.previewScrollPastEnd.checked,
         smartQuotes: this.refs.previewSmartQuotes.checked,
+        breaks: this.refs.previewBreaks.checked,
         sanitize: this.refs.previewSanitize.value
       }
     }
@@ -476,6 +477,16 @@ class UiTab extends React.Component {
               Enable smart quotes
             </label>
           </div>
+          <div styleName='group-checkBoxSection'>
+            <label>
+              <input onChange={(e) => this.handleUIChange(e)}
+                checked={this.state.config.preview.breaks}
+                ref='previewBreaks'
+                type='checkbox'
+              />&nbsp;
+              Render newlines in Markdown paragraphs as &lt;br&gt;
+            </label>
+          </div>
 
           <div styleName='group-section'>
             <div styleName='group-section-label'>

tests/fixtures/markdowns.js

@@ -48,10 +48,13 @@ const checkboxes = `
 
 const smartQuotes = 'This is a "QUOTE".'
 
+const breaks = 'This is the first line.\nThis is the second line.'
+
 export default {
   basic,
   codeblock,
   katex,
   checkboxes,
-  smartQuotes
+  smartQuotes,
+  breaks
 }

tests/lib/markdown-test.js

@@ -34,3 +34,12 @@ test('Markdown.render() should text with quotes correctly', t => {
   const renderedNonSmartQuotes = newmd.render(markdownFixtures.smartQuotes)
   t.snapshot(renderedNonSmartQuotes)
 })
+
+test('Markdown.render() should render line breaks correctly', t => {
+  const renderedBreaks = md.render(markdownFixtures.breaks)
+  t.snapshot(renderedBreaks)
+
+  const newmd = new Markdown({ breaks: false })
+  const renderedNonBreaks = newmd.render(markdownFixtures.breaks)
+  t.snapshot(renderedNonBreaks)
+})

tests/lib/snapshots/markdown-test.js.md

@@ -4,6 +4,20 @@ The actual snapshot is saved in `markdown-test.js.snap`.
 
 Generated by [AVA](https://ava.li).
 
+## Markdown.render() should render line breaks correctly
+
+> Snapshot 1
+
+    `<p data-line="0">This is the first line.<br />␊
+    This is the second line.</p>␊
+    `
+
+> Snapshot 2
+
+    `<p data-line="0">This is the first line.␊
+    This is the second line.</p>␊
+    `
+
 ## Markdown.render() should renders KaTeX correctly
 
 > Snapshot 1