Merge pull request #2460 from ZeroX-DG/linethrough-checkbox

Added linethrough checkbox & make it optional

Author: Rokt33r

browser/components/MarkdownPreview.js

@@ -483,6 +483,10 @@ export default class MarkdownPreview extends React.Component {
     eventEmitter.on('export:save-md', this.saveAsMdHandler)
     eventEmitter.on('export:save-html', this.saveAsHtmlHandler)
     eventEmitter.on('print', this.printHandler)
+    eventEmitter.on('config-renew', () => {
+      this.markdown.updateConfig()
+      this.rewriteIframe()
+    })
   }
 
   componentWillUnmount () {

browser/components/markdown.styl

@@ -80,6 +80,9 @@ li
     &.checked
       text-decoration line-through
       opacity 0.5
+  &.taskListItem.checked
+    text-decoration line-through
+    opacity 0.5
 div.math-rendered
   text-align center
 .math-failed

browser/lib/markdown.js

@@ -7,6 +7,7 @@ import _ from 'lodash'
 import ConfigManager from 'browser/main/lib/ConfigManager'
 import katex from 'katex'
 import { lastFindInArray } from './utils'
+import ee from 'browser/main/lib/eventEmitter'
 
 function createGutter (str, firstLineNumber) {
   if (Number.isNaN(firstLineNumber)) firstLineNumber = 1
@@ -20,7 +21,7 @@ function createGutter (str, firstLineNumber) {
 
 class Markdown {
   constructor (options = {}) {
-    const config = ConfigManager.get()
+    let config = ConfigManager.get()
     const defaultOptions = {
       typographer: config.preview.smartQuotes,
       linkify: true,
@@ -223,7 +224,11 @@ class Markdown {
             if (!liToken.attrs) {
               liToken.attrs = []
             }
-            liToken.attrs.push(['class', 'taskListItem'])
+            if (config.preview.lineThroughCheckbox) {
+              liToken.attrs.push(['class', `taskListItem${match[1] !== ' ' ? ' checked' : ''}`])
+            } else {
+              liToken.attrs.push(['class', 'taskListItem'])
+            }
           }
           content = `<label class='taskListItem${match[1] !== ' ' ? ' checked' : ''}' for='checkbox-${startLine + 1}'><input type='checkbox'${match[1] !== ' ' ? ' checked' : ''} id='checkbox-${startLine + 1}'/> ${content.substring(4, content.length)}</label>`
         }
@@ -260,6 +265,9 @@ class Markdown {
     }
     // FIXME We should not depend on global variable.
     window.md = this.md
+    this.updateConfig = () => {
+      config = ConfigManager.get()
+    }
   }
 
   render (content) {

browser/main/lib/ConfigManager.js

@@ -65,7 +65,8 @@ export const DEFAULT_CONFIG = {
     smartArrows: false,
     allowCustomCSS: false,
     customCSS: '',
-    sanitize: 'STRICT' // 'STRICT', 'ALLOW_STYLES', 'NONE'
+    sanitize: 'STRICT', // 'STRICT', 'ALLOW_STYLES', 'NONE'
+    lineThroughCheckbox: true
   },
   blog: {
     type: 'wordpress', // Available value: wordpress, add more types in the future plz

browser/main/modals/PreferencesModal/UiTab.js

@@ -107,6 +107,7 @@ class UiTab extends React.Component {
         smartArrows: this.refs.previewSmartArrows.checked,
         sanitize: this.refs.previewSanitize.value,
         allowCustomCSS: this.refs.previewAllowCustomCSS.checked,
+        lineThroughCheckbox: this.refs.lineThroughCheckbox.checked,
         customCSS: this.customCSSCM.getCodeMirror().getValue()
       }
     }
@@ -512,6 +513,16 @@ class UiTab extends React.Component {
               </select>
             </div>
           </div>
+          <div styleName='group-checkBoxSection'>
+            <label>
+              <input onChange={(e) => this.handleUIChange(e)}
+                checked={this.state.config.preview.lineThroughCheckbox}
+                ref='lineThroughCheckbox'
+                type='checkbox'
+              />&nbsp;
+              {i18n.__('Allow line through checkbox')}
+            </label>
+          </div>
           <div styleName='group-checkBoxSection'>
             <label>
               <input onChange={(e) => this.handleUIChange(e)}

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

@@ -31,7 +31,7 @@ Generated by [AVA](https://ava.li).
 
     `<ul>␊
     <li class="taskListItem"><input type="checkbox" id="checkbox-2" /> Unchecked</li>␊
-    <li class="taskListItem"><input type="checkbox" checked id="checkbox-3" /> Checked</li>␊
+    <li class="taskListItem checked"><input type="checkbox" checked id="checkbox-3" /> Checked</li>␊
     </ul>␊
     `