Include markdown-it-smartArrow. Toggle it via settings and disable it by default since it might affect HTML comments in markdown

browser/components/MarkdownEditor.js

@@ -283,6 +283,7 @@ class MarkdownEditor extends React.Component {
           indentSize={editorIndentSize}
           scrollPastEnd={config.preview.scrollPastEnd}
           smartQuotes={config.preview.smartQuotes}
+          smartArrows={config.previw.smartArrows}
           breaks={config.preview.breaks}
           sanitize={config.preview.sanitize}
           ref='preview'

browser/components/MarkdownPreview.js

@@ -336,6 +336,7 @@ export default class MarkdownPreview extends React.Component {
     if (prevProps.value !== this.props.value) this.rewriteIframe()
     if (prevProps.smartQuotes !== this.props.smartQuotes ||
         prevProps.sanitize !== this.props.sanitize ||
+        prevProps.smartArrows !== this.props.smartArrows ||
         prevProps.breaks !== this.props.breaks) {
       this.initMarkdown()
       this.rewriteIframe()
@@ -590,5 +591,6 @@ MarkdownPreview.propTypes = {
   showCopyNotification: PropTypes.bool,
   storagePath: PropTypes.string,
   smartQuotes: PropTypes.bool,
+  smartArrows: 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}
+          smartArrows={config.preview.smartArrows}
           breaks={config.preview.breaks}
           sanitize={config.preview.sanitize}
           ref='preview'

browser/lib/markdown.js

@@ -2,6 +2,7 @@ import markdownit from 'markdown-it'
 import sanitize from './markdown-it-sanitize-html'
 import emoji from 'markdown-it-emoji'
 import math from '@rokt33r/markdown-it-math'
+import smartArrows from 'markdown-it-smartarrows'
 import _ from 'lodash'
 import ConfigManager from 'browser/main/lib/ConfigManager'
 import katex from 'katex'
@@ -214,6 +215,10 @@ class Markdown {
       return true
     })
 
+    if (config.preview.smartArrows) {
+      this.md.use(smartArrows)
+    }
+
     // Add line number attribute for scrolling
     const originalRender = this.md.renderer.render
     this.md.renderer.render = (tokens, options, env) => {

browser/main/lib/ConfigManager.js

@@ -59,6 +59,7 @@ export const DEFAULT_CONFIG = {
     scrollPastEnd: false,
     smartQuotes: true,
     breaks: true,
+    smartArrows: false,
     sanitize: 'STRICT' // 'STRICT', 'ALLOW_STYLES', 'NONE'
   },
   blog: {

browser/main/modals/PreferencesModal/UiTab.js

@@ -98,6 +98,7 @@ class UiTab extends React.Component {
         scrollPastEnd: this.refs.previewScrollPastEnd.checked,
         smartQuotes: this.refs.previewSmartQuotes.checked,
         breaks: this.refs.previewBreaks.checked,
+        smartArrows: this.refs.previewSmartArrows.checked,
         sanitize: this.refs.previewSanitize.value
       }
     }
@@ -487,6 +488,16 @@ class UiTab extends React.Component {
               {i18n.__('Render newlines in Markdown paragraphs as <br>')}
             </label>
           </div>
+          <div styleName='group-checkBoxSection'>
+            <label>
+              <input onChange={(e) => this.handleUIChange(e)}
+                checked={this.state.config.preview.smartArrows}
+                ref='previewSmartArrows'
+                type='checkbox'
+              />&nbsp;
+              {i18n.__('Convert textual arrows to beautiful signs. ⚠ This will interfere with using HTML comments in your Markdown.')}
+            </label>
+          </div>
 
           <div styleName='group-section'>
             <div styleName='group-section-label'>