added support for toggling smart quotes in preview

browser/components/MarkdownEditor.js

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

browser/components/MarkdownPreview.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import markdown from 'browser/lib/markdown'
+import Markdown from 'browser/lib/markdown'
 import _ from 'lodash'
 import CodeMirror from 'codemirror'
 import 'codemirror-mode-elixir'
@@ -130,6 +130,13 @@ export default class MarkdownPreview extends React.Component {
     this.printHandler = () => this.handlePrint()
 
     this.linkClickHandler = this.handlelinkClick.bind(this)
+    this.initMarkdown = this.initMarkdown.bind(this)
+    this.initMarkdown()
+  }
+
+  initMarkdown () {
+    const { smartQuotes } = this.props
+    this.markdown = new Markdown({ typographer: smartQuotes })
   }
 
   handlePreviewAnchorClick (e) {
@@ -198,7 +205,7 @@ export default class MarkdownPreview extends React.Component {
       const {fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme} = this.getStyleParams()
 
       const inlineStyles = buildStyle(fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme, lineNumber)
-      const body = markdown.render(noteContent)
+      const body = this.markdown.render(noteContent)
       const files = [this.GetCodeThemeLink(codeBlockTheme), ...CSS_FILES]
 
       files.forEach((file) => {
@@ -309,6 +316,10 @@ export default class MarkdownPreview extends React.Component {
 
   componentDidUpdate (prevProps) {
     if (prevProps.value !== this.props.value) this.rewriteIframe()
+    if (prevProps.smartQuotes !== this.props.smartQuotes) {
+      this.initMarkdown()
+      this.rewriteIframe()
+    }
     if (prevProps.fontFamily !== this.props.fontFamily ||
       prevProps.fontSize !== this.props.fontSize ||
       prevProps.codeBlockFontFamily !== this.props.codeBlockFontFamily ||
@@ -374,7 +385,7 @@ export default class MarkdownPreview extends React.Component {
         value = value.replace(codeBlock, htmlTextHelper.encodeEntities(codeBlock))
       })
     }
-    this.refs.root.contentWindow.document.body.innerHTML = markdown.render(value)
+    this.refs.root.contentWindow.document.body.innerHTML = this.markdown.render(value)
 
     _.forEach(this.refs.root.contentWindow.document.querySelectorAll('a'), (el) => {
       this.fixDecodedURI(el)
@@ -390,9 +401,9 @@ export default class MarkdownPreview extends React.Component {
     })
 
     _.forEach(this.refs.root.contentWindow.document.querySelectorAll('img'), (el) => {
-      el.src = markdown.normalizeLinkText(el.src)
+      el.src = this.markdown.normalizeLinkText(el.src)
       if (!/\/:storage/.test(el.src)) return
-      el.src = `file:///${markdown.normalizeLinkText(path.join(storagePath, 'images', path.basename(el.src)))}`
+      el.src = `file:///${this.markdown.normalizeLinkText(path.join(storagePath, 'images', path.basename(el.src)))}`
     })
 
     codeBlockTheme = consts.THEMES.some((_theme) => _theme === codeBlockTheme)
@@ -533,5 +544,6 @@ MarkdownPreview.propTypes = {
   className: PropTypes.string,
   value: PropTypes.string,
   showCopyNotification: PropTypes.bool,
-  storagePath: PropTypes.string
+  storagePath: PropTypes.string,
+  smartQuotes: PropTypes.bool
 }

browser/components/MarkdownSplitEditor.js

@@ -127,6 +127,7 @@ class MarkdownSplitEditor extends React.Component {
           codeBlockFontFamily={config.editor.fontFamily}
           lineNumber={config.preview.lineNumber}
           scrollPastEnd={config.preview.scrollPastEnd}
+          smartQuotes={config.preview.smartQuotes}
           ref='preview'
           tabInde='0'
           value={value}

browser/lib/markdown.js

@@ -19,7 +19,9 @@ function createGutter (str, firstLineNumber) {
   return '<span class="lineNumber CodeMirror-gutters">' + lines.join('') + '</span>'
 }
 
-var md = markdownit({
+class Markdown {
+  constructor (options = {}) {
+    const defaultOptions = {
       typographer: true,
       linkify: true,
       html: true,
@@ -45,11 +47,14 @@ var md = markdownit({
           str +
           '</code></pre>'
       }
-})
-md.use(emoji, {
+    }
+
+    const updatedOptions = Object.assign(defaultOptions, options)
+    this.md = markdownit(updatedOptions)
+    this.md.use(emoji, {
       shortcuts: {}
     })
-md.use(math, {
+    this.md.use(math, {
       inlineOpen: config.preview.latexInlineOpen,
       inlineClose: config.preview.latexInlineClose,
       blockOpen: config.preview.latexBlockOpen,
@@ -73,10 +78,10 @@ md.use(math, {
         return output
       }
     })
-md.use(require('markdown-it-imsize'))
-md.use(require('markdown-it-footnote'))
-md.use(require('markdown-it-multimd-table'))
-md.use(require('markdown-it-named-headers'), {
+    this.md.use(require('markdown-it-imsize'))
+    this.md.use(require('markdown-it-footnote'))
+    this.md.use(require('markdown-it-multimd-table'))
+    this.md.use(require('markdown-it-named-headers'), {
       slugify: (header) => {
         return encodeURI(header.trim()
           .replace(/[\]\[\!\"\#\$\%\&\'\(\)\*\+\,\.\/\:\;\<\=\>\?\@\\\^\_\{\|\}\~]/g, '')
@@ -84,10 +89,10 @@ md.use(require('markdown-it-named-headers'), {
           .replace(/\-+$/, '')
       }
     })
-md.use(require('markdown-it-kbd'))
+    this.md.use(require('markdown-it-kbd'))
 
     const deflate = require('markdown-it-plantuml/lib/deflate')
-md.use(require('markdown-it-plantuml'), '', {
+    this.md.use(require('markdown-it-plantuml'), '', {
       generateSource: function (umlCode) {
         const s = unescape(encodeURIComponent(umlCode))
         const zippedCode = deflate.encode64(
@@ -98,7 +103,7 @@ md.use(require('markdown-it-plantuml'), '', {
     })
 
     // Override task item
-md.block.ruler.at('paragraph', function (state, startLine/*, endLine */) {
+    this.md.block.ruler.at('paragraph', function (state, startLine/*, endLine */) {
       let content, terminate, i, l, token
       let nextLine = startLine + 1
       const terminatorRules = state.md.block.ruler.getRules('paragraph')
@@ -156,8 +161,8 @@ md.block.ruler.at('paragraph', function (state, startLine/*, endLine */) {
     })
 
     // Add line number attribute for scrolling
-const originalRender = md.renderer.render
-md.renderer.render = function render (tokens, options, env) {
+    const originalRender = this.md.renderer.render
+    this.md.renderer.render = (tokens, options, env) => {
       tokens.forEach((token) => {
         switch (token.type) {
           case 'heading_open':
@@ -167,23 +172,22 @@ md.renderer.render = function render (tokens, options, env) {
             token.attrPush(['data-line', token.map[0]])
         }
       })
-  const result = originalRender.call(md.renderer, tokens, options, env)
+      const result = originalRender.call(this.md.renderer, tokens, options, env)
       return result
     }
     // FIXME We should not depend on global variable.
-window.md = md
-
-function normalizeLinkText (linkText) {
-  return md.normalizeLinkText(linkText)
+    window.md = this.md
   }
 
-const markdown = {
-  render: function markdown (content) {
+  render (content) {
     if (!_.isString(content)) content = ''
-    const renderedContent = md.render(content)
-    return renderedContent
-  },
-  normalizeLinkText
+    return this.md.render(content)
   }
 
-export default markdown
+  normalizeLinkText (linkText) {
+    return this.md.normalizeLinkText(linkText)
+  }
+}
+
+export default Markdown
+

browser/main/lib/ConfigManager.js

@@ -48,7 +48,8 @@ export const DEFAULT_CONFIG = {
     latexInlineClose: '$',
     latexBlockOpen: '$$',
     latexBlockClose: '$$',
-    scrollPastEnd: false
+    scrollPastEnd: false,
+    smartQuotes: true
   }
 }
 

browser/main/modals/PreferencesModal/UiTab.js

@@ -88,7 +88,8 @@ class UiTab extends React.Component {
         latexInlineClose: this.refs.previewLatexInlineClose.value,
         latexBlockOpen: this.refs.previewLatexBlockOpen.value,
         latexBlockClose: this.refs.previewLatexBlockClose.value,
-        scrollPastEnd: this.refs.previewScrollPastEnd.checked
+        scrollPastEnd: this.refs.previewScrollPastEnd.checked,
+        smartQuotes: this.refs.previewSmartQuotes.checked
       }
     }
 
@@ -402,6 +403,16 @@ class UiTab extends React.Component {
               Show line numbers for preview code blocks
             </label>
           </div>
+          <div styleName='group-checkBoxSection'>
+            <label>
+              <input onChange={(e) => this.handleUIChange(e)}
+                checked={this.state.config.preview.smartQuotes}
+                ref='previewSmartQuotes'
+                type='checkbox'
+              />&nbsp;
+              Enable smart quotes
+            </label>
+          </div>
           <div styleName='group-section'>
             <div styleName='group-section-label'>
               LaTeX Inline Open Delimiter