Fix wrong styling of todo items in exported HTML

The issue happened because styles connected with todo list were applied directly to HTML in Preview component. I added class to `li` tag of each todo item and style it from css.

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
+}