alternate background color for table rows

browser/components/MarkdownEditor.js

@@ -250,7 +250,7 @@ class MarkdownEditor extends React.Component {
             : 'codeEditor--hide'
           }
           ref='code'
-          mode='GitHub Flavored Markdown'
+          mode='Boost Flavored Markdown'
           value={value}
           theme={config.editor.theme}
           keyMap={config.editor.keyMap}

browser/components/MarkdownSplitEditor.js

@@ -145,7 +145,7 @@ class MarkdownSplitEditor extends React.Component {
           styleName='codeEditor'
           ref='code'
           width={this.state.codeEditorWidthInPercent + '%'}
-          mode='GitHub Flavored Markdown'
+          mode='Boost Flavored Markdown'
           value={value}
           theme={config.editor.theme}
           keyMap={config.editor.keyMap}

extra_scripts/codemirror/mode/bfm/bfm.css

@@ -0,0 +1,44 @@
+.cm-table-row-even { background-color: rgb(242, 242, 242); }
+.cm-s-3024-day.CodeMirror .cm-table-row-even { background-color: rgb(238, 237, 237); }
+.cm-s-3024-night.CodeMirror .cm-table-row-even { background-color: rgb(30, 24, 21); }
+.cm-s-abcdef.CodeMirror .cm-table-row-even { background-color: rgb(36, 39, 37); }
+.cm-s-ambiance.CodeMirror .cm-table-row-even { background-color: rgb(242, 242, 242); }
+.cm-s-base16-dark.CodeMirror .cm-table-row-even { background-color: rgb(41, 41, 41); }
+.cm-s-base16-light.CodeMirror .cm-table-row-even { background-color: rgb(234, 234, 234); }
+.cm-s-bespin.CodeMirror .cm-table-row-even { background-color: rgb(52, 45, 40); }
+.cm-s-blackboard.CodeMirror .cm-table-row-even { background-color: rgb(36, 39, 55); }
+.cm-s-cobalt.CodeMirror .cm-table-row-even { background-color: rgb(26, 56, 83); }
+.cm-s-colorforth.CodeMirror .cm-table-row-even { background-color: rgb(25, 25, 25); }
+.cm-s-darcula.CodeMirror .cm-table-row-even { background-color: rgb(56, 57, 59); }
+.cm-s-dracula.CodeMirror .cm-table-row-even { background-color: rgb(61, 63, 73); }
+.cm-s-duotone-dark.CodeMirror .cm-table-row-even { background-color: rgb(49, 45, 60); }
+.cm-s-duotone-light.CodeMirror .cm-table-row-even { background-color: rgb(246, 243, 238); }
+.cm-s-erlang-dark.CodeMirror .cm-table-row-even { background-color: rgb(26, 56, 83); }
+.cm-s-gruvbox-dark.CodeMirror .cm-table-row-even { background-color: rgb(55, 53, 51); }
+.cm-s-hopscotch.CodeMirror .cm-table-row-even { background-color: rgb(66, 58, 65); }
+.cm-s-isotope.CodeMirror .cm-table-row-even { background-color: rgb(22, 22, 22); }
+.cm-s-lesser-dark.CodeMirror .cm-table-row-even { background-color: rgb(58, 58, 57); }
+.cm-s-liquibyte.CodeMirror .cm-table-row-even { background-color: rgb(26, 26, 26); }
+.cm-s-lucario.CodeMirror .cm-table-row-even { background-color: rgb(64, 81, 96); }
+.cm-s-material.CodeMirror .cm-table-row-even { background-color: rgb(58, 69, 74); }
+.cm-s-mbo.CodeMirror .cm-table-row-even { background-color: rgb(65, 65, 63); }
+.cm-s-midnight.CodeMirror .cm-table-row-even { background-color: rgb(34, 46, 63); }
+.cm-s-monokai.CodeMirror .cm-table-row-even { background-color: rgb(60, 61, 55); }
+.cm-s-neo.CodeMirror .cm-table-row-even { background-color: rgb(245, 245, 245); }
+.cm-s-night.CodeMirror .cm-table-row-even { background-color: rgb(34, 25, 53); }
+.cm-s-oceanic-next.CodeMirror .cm-table-row-even { background-color: rgb(68, 83, 89); }
+.cm-s-paraiso-dark.CodeMirror .cm-table-row-even { background-color: rgb(61, 45, 59); }
+.cm-s-paraiso-light.CodeMirror .cm-table-row-even { background-color: rgb(223, 224, 211); }
+.cm-s-pastel-on-dark.CodeMirror .cm-table-row-even { background-color: rgb(54, 51, 49); }
+.cm-s-railscasts.CodeMirror .cm-table-row-even { background-color: rgb(63, 63, 62); }
+.cm-s-rubyblue.CodeMirror .cm-table-row-even { background-color: rgb(41, 58, 73); }
+.cm-s-seti.CodeMirror .cm-table-row-even { background-color: rgb(40, 42, 43); }
+.cm-s-shadowfox.CodeMirror .cm-table-row-even { background-color: rgb(56, 56, 59); }
+.cm-s-solarized.CodeMirror .cm-table-row-even { background-color: rgb(242, 242, 242); }
+.cm-s-the-matrix.CodeMirror .cm-table-row-even { background-color: rgb(0, 26, 0); }
+.cm-s-tomorrow-night-bright.CodeMirror .cm-table-row-even { background-color: rgb(23, 23, 23); }
+.cm-s-tomorrow-night-eighties.CodeMirror .cm-table-row-even { background-color: rgb(20, 20, 20); }
+.cm-s-twilight.CodeMirror .cm-table-row-even { background-color: rgb(43, 43, 43); }
+.cm-s-vibrant-ink.CodeMirror .cm-table-row-even { background-color: rgb(26, 26, 26); }
+.cm-s-xq-dark.CodeMirror .cm-table-row-even { background-color: rgb(34, 25, 53); }
+.cm-s-yeti.CodeMirror .cm-table-row-even { background-color: rgb(235, 232, 230); }

extra_scripts/codemirror/mode/bfm/bfm.js

@@ -0,0 +1,71 @@
+(function(mod) {
+  if (typeof exports == "object" && typeof module == "object") // CommonJS
+    mod(require("../codemirror/lib/codemirror"), require("../codemirror/mode/gfm/gfm"))
+  else if (typeof define == "function" && define.amd) // AMD
+    define(["../codemirror/lib/codemirror", "../codemirror/mode/gfm/gfm"], mod)
+  else // Plain browser env
+    mod(CodeMirror)
+})(function(CodeMirror) {
+  'use strict'
+
+  CodeMirror.defineMode('bfm', function(config, gfmConfig) {
+    const bfmOverlay = {
+      startState() {
+        return {
+          inTable: false,
+          rowIndex: 0
+        }
+      },
+      copyState(s) {
+        return {
+          inTable: s.inTable,
+          rowIndex: s.rowIndex
+        }
+      },
+      token(stream, state) {
+        state.combineTokens = true
+
+        if (state.inTable) {
+          if (stream.match(/^\|/)) {
+            ++state.rowIndex
+
+            stream.skipToEnd()
+
+            if (state.rowIndex === 1) {
+              return 'table table-separator'
+            } else if (state.rowIndex % 2 === 0) {
+              return 'table table-row table-row-even'
+            } else {
+              return 'table table-row table-row-odd'
+            }
+          } else {
+            state.inTable = false
+
+            stream.skipToEnd()
+            return null
+          }
+        } else if (stream.match(/^\|/)) {
+          state.inTable = true
+          state.rowIndex = 0
+
+          stream.skipToEnd()
+          return 'table table-header'
+        }
+
+        stream.skipToEnd()
+        return null
+      }
+    }
+
+    gfmConfig.name = 'gfm'
+    return CodeMirror.overlayMode(CodeMirror.getMode(config, gfmConfig), bfmOverlay)
+  })
+
+  CodeMirror.defineMIME('text/x-bfm', 'bfm')
+
+  CodeMirror.modeInfo.push({
+    name: "Boost Flavored Markdown",
+    mime: "text/x-bfm",
+    mode: "bfm"
+  })
+})

gruntfile.js

@@ -1,3 +1,4 @@
+const fs = require('fs')
 const path = require('path')
 const ChildProcess = require('child_process')
 const packager = require('electron-packager')
@@ -284,5 +285,48 @@ module.exports = function (grunt) {
     }
   })
 
+  grunt.registerTask('bfm', function () {
+    const Color = require('color')
+    const parseCSS = require('css').parse
+
+    const root = path.join(__dirname, 'node_modules/codemirror/theme/')
+
+    const colors = fs.readdirSync(root).map(file => {
+      const css = parseCSS(fs.readFileSync(path.join(root, file), 'utf8'))
+
+      const rules = css.stylesheet.rules.filter(rule => rule.selectors && /\b\.CodeMirror$/.test(rule.selectors[0]))
+      if (rules.length === 1) {
+        let bgColor = Color('white')
+        let fgColor = Color('black')
+
+        rules[0].declarations.forEach(declaration => {
+          if (declaration.property === 'background-color' || declaration.property === 'background') {
+            bgColor = Color(declaration.value.split(' ')[0])
+          } else if (declaration.property === 'color') {
+            const value = /^(.*?)(?:\s*!important)?$/.exec(declaration.value)[1]
+            let match = /^rgba\((.*?),\s*1\)$/.exec(value)
+            if (match) {
+              fgColor = Color(`rgb(${match[1]})`)
+            } else {
+              fgColor = Color(value)
+            }
+          }
+        })
+
+        if (bgColor.isLight()) {
+          bgColor = bgColor.mix(fgColor, 0.05)
+        } else {
+          bgColor = bgColor.mix(fgColor, 0.1)
+        }
+
+        return `${rules[0].selectors[0]} .cm-table-row-even { background-color: ${bgColor.rgb().string()}; }`
+      }
+    }).filter(value => !!value)
+
+    const defaultBgColor = Color('white').mix(Color('black'), 0.05)
+
+    fs.writeFileSync(path.join(__dirname, 'extra_scripts/codemirror/mode/bfm/bfm.css'), [`.cm-table-row-even { background-color: ${defaultBgColor.rgb().string()}; }`, ...colors].join('\n'), 'utf8')
+  })
+
   grunt.registerTask('default', ['build'])
 }

lib/main.html

@@ -10,6 +10,7 @@
   <link rel="stylesheet" href="../node_modules/codemirror/lib/codemirror.css">
   <link rel="stylesheet" href="../node_modules/katex/dist/katex.min.css">
   <link rel="stylesheet" href="../node_modules/codemirror/addon/dialog/dialog.css">
+  <link rel="stylesheet" href="../extra_scripts/codemirror/mode/bfm/bfm.css">
 
   <title>Boostnote</title>
 
@@ -94,9 +95,13 @@
   <script src="../node_modules/codemirror/keymap/vim.js"></script>
   <script src="../node_modules/codemirror/keymap/emacs.js"></script>
   <script src="../node_modules/codemirror/addon/runmode/runmode.js"></script>
+  <script src="../node_modules/codemirror/mode/xml/xml.js"></script>
+  <script src="../node_modules/codemirror/mode/markdown/markdown.js"></script>
+  <script src="../node_modules/codemirror/mode/gfm/gfm.js"></script>
 
   <script src="../extra_scripts/boost/boostNewLineIndentContinueMarkdownList.js"></script>
   <script src="../extra_scripts/codemirror/addon/hyperlink/hyperlink.js"></script>
+  <script src="../extra_scripts/codemirror/mode/bfm/bfm.js"></script>
 
   <script src="../node_modules/codemirror/addon/edit/closebrackets.js"></script>
   <script src="../node_modules/codemirror/addon/edit/matchbrackets.js"></script>
@@ -120,7 +125,7 @@
   <script>
     window._ = require('lodash')
   </script>
-  
+
   <script src="../node_modules/js-sequence-diagrams/fucknpm/sequence-diagram-min.js"></script>
   <script src="../node_modules/react/dist/react.min.js"></script>
   <script src="../node_modules/react-dom/dist/react-dom.min.js"></script>

package.json

@@ -116,8 +116,10 @@
     "babel-preset-react-hmre": "^1.0.1",
     "babel-register": "^6.11.6",
     "browser-env": "^3.2.5",
+    "color": "^3.0.0",
     "concurrently": "^3.4.0",
     "copy-to-clipboard": "^3.0.6",
+    "css": "^2.2.4",
     "css-loader": "^0.19.0",
     "devtron": "^1.1.0",
     "dom-storage": "^2.0.2",

yarn.lock

@@ -1832,7 +1832,13 @@ color-convert@^1.3.0, color-convert@^1.9.0:
   dependencies:
     color-name "^1.1.1"
 
-color-name@^1.0.0, color-name@^1.1.1:
+color-convert@^1.9.1:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
+  dependencies:
+    color-name "1.1.3"
+
+[email protected], color-name@^1.0.0, color-name@^1.1.1:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
 
@@ -1842,6 +1848,13 @@ color-string@^0.3.0:
   dependencies:
     color-name "^1.0.0"
 
+color-string@^1.5.2:
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.5.3.tgz#c9bbc5f01b58b5492f3d6857459cb6590ce204cc"
+  dependencies:
+    color-name "^1.0.0"
+    simple-swizzle "^0.2.2"
+
 color@^0.11.0:
   version "0.11.4"
   resolved "https://registry.yarnpkg.com/color/-/color-0.11.4.tgz#6d7b5c74fb65e841cd48792ad1ed5e07b904d764"
@@ -1850,6 +1863,13 @@ color@^0.11.0:
     color-convert "^1.3.0"
     color-string "^0.3.0"
 
+color@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/color/-/color-3.0.0.tgz#d920b4328d534a3ac8295d68f7bd4ba6c427be9a"
+  dependencies:
+    color-convert "^1.9.1"
+    color-string "^1.5.2"
+
 colormin@^1.0.5:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/colormin/-/colormin-1.1.2.tgz#ea2f7420a72b96881a38aae59ec124a6f7298133"
@@ -2149,6 +2169,15 @@ css-selector-tokenizer@^0.5.0, css-selector-tokenizer@^0.5.1:
     cssesc "^0.1.0"
     fastparse "^1.1.1"
 
+css@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/css/-/css-2.2.4.tgz#c646755c73971f2bba6a601e2cf2fd71b1298929"
+  dependencies:
+    inherits "^2.0.3"
+    source-map "^0.6.1"
+    source-map-resolve "^0.5.2"
+    urix "^0.1.0"
+
 cssesc@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4"
@@ -4591,6 +4620,10 @@ is-arrayish@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
 
+is-arrayish@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
+
 is-binary-path@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-1.0.1.tgz#75f16642b480f187a711c814161fd3a4a7655898"
@@ -8047,6 +8080,12 @@ signale@^1.2.1:
     figures "^2.0.0"
     pkg-conf "^2.1.0"
 
+simple-swizzle@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
+  dependencies:
+    is-arrayish "^0.3.1"
+
 single-line-log@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/single-line-log/-/single-line-log-1.1.2.tgz#c2f83f273a3e1a16edb0995661da0ed5ef033364"
@@ -8138,7 +8177,7 @@ source-list-map@^0.1.4, source-list-map@~0.1.7:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-0.1.8.tgz#c550b2ab5427f6b3f21f5afead88c4f5587b2106"
 
-source-map-resolve@^0.5.0:
+source-map-resolve@^0.5.0, source-map-resolve@^0.5.2:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.2.tgz#72e2cc34095543e43b2c62b2c4c10d4a9054f259"
   dependencies: