Remove direct css styling todo lists from MarkdownPreview component

browser/components/MarkdownPreview.js

@@ -360,10 +360,6 @@ export default class MarkdownPreview extends React.Component {
     }
     this.refs.root.contentWindow.document.body.innerHTML = markdown.render(value)
 
-    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('.taskListItem'), (el) => {
-      el.parentNode.parentNode.style.listStyleType = 'none'
-    })
-
     _.forEach(this.refs.root.contentWindow.document.querySelectorAll('a'), (el) => {
       this.fixDecodedURI(el)
       el.addEventListener('click', this.anchorClickHandler)

browser/components/markdown.styl

@@ -178,6 +178,8 @@ ul
   margin-bottom 1em
   li
     display list-item
+    &.taskListItem
+      list-style none
     p
       margin 0
   &>li>ul, &>li>ol

browser/lib/markdown.js

@@ -3,6 +3,7 @@ import emoji from 'markdown-it-emoji'
 import math from '@rokt33r/markdown-it-math'
 import _ from 'lodash'
 import ConfigManager from 'browser/main/lib/ConfigManager'
+import {lastFindInArray} from './utils'
 
 // FIXME We should not depend on global variable.
 const katex = window.katex
@@ -125,6 +126,13 @@ md.block.ruler.at('paragraph', function (state, startLine/*, endLine */) {
   if (state.parentType === 'list') {
     const match = content.match(/^\[( |x)\] ?(.+)/i)
     if (match) {
+      const liToken = lastFindInArray(state.tokens, token => token.type === 'list_item_open')
+      if (liToken) {
+        if (!liToken.attrs) {
+          liToken.attrs = []
+        }
+        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>`
     }
   }

browser/lib/utils.js

@@ -0,0 +1,11 @@
+export function lastFindInArray (array, callback) {
+  for (let i = array.length - 1; i >= 0; --i) {
+    if (callback(array[i], i, array)) {
+      return array[i]
+    }
+  }
+}
+
+export default {
+  lastFindInArray
+}