diff --git a/browser/components/MarkdownEditor.js b/browser/components/MarkdownEditor.js index 4c195797..70df16a0 100644 --- a/browser/components/MarkdownEditor.js +++ b/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} diff --git a/browser/components/MarkdownSplitEditor.js b/browser/components/MarkdownSplitEditor.js index ddc9d7e0..d714125a 100644 --- a/browser/components/MarkdownSplitEditor.js +++ b/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} diff --git a/extra_scripts/codemirror/mode/bfm/bfm.css b/extra_scripts/codemirror/mode/bfm/bfm.css new file mode 100644 index 00000000..ef488cbf --- /dev/null +++ b/extra_scripts/codemirror/mode/bfm/bfm.css @@ -0,0 +1,42 @@ +.cm-table-row-even { background-color: rgb(242, 242, 242); } +.cm-s-3024-day.CodeMirror .cm-table-row-even { background-color: rgb(235, 235, 235); } +.cm-s-3024-night.CodeMirror .cm-table-row-even { background-color: rgb(12, 4, 0); } +.cm-s-abcdef.CodeMirror .cm-table-row-even { background-color: rgb(20, 20, 20); } +.cm-s-base16-dark.CodeMirror .cm-table-row-even { background-color: rgb(28, 28, 28); } +.cm-s-base16-light.CodeMirror .cm-table-row-even { background-color: rgb(233, 233, 233); } +.cm-s-bespin.CodeMirror .cm-table-row-even { background-color: rgb(54, 45, 38); } +.cm-s-blackboard.CodeMirror .cm-table-row-even { background-color: rgb(16, 22, 45); } +.cm-s-cobalt.CodeMirror .cm-table-row-even { background-color: rgb(0, 46, 86); } +.cm-s-colorforth.CodeMirror .cm-table-row-even { background-color: rgb(0, 0, 0); } +.cm-s-darcula.CodeMirror .cm-table-row-even { background-color: rgb(58, 58, 58); } +.cm-s-dracula.CodeMirror .cm-table-row-even { background-color: rgb(54, 57, 73); } +.cm-s-duotone-dark.CodeMirror .cm-table-row-even { background-color: rgb(57, 53, 70); } +.cm-s-duotone-light.CodeMirror .cm-table-row-even { background-color: rgb(242, 236, 229); } +.cm-s-erlang-dark.CodeMirror .cm-table-row-even { background-color: rgb(0, 46, 86); } +.cm-s-gruvbox-dark.CodeMirror .cm-table-row-even { background-color: rgb(54, 54, 54); } +.cm-s-hopscotch.CodeMirror .cm-table-row-even { background-color: rgb(68, 55, 66); } +.cm-s-isotope.CodeMirror .cm-table-row-even { background-color: rgb(0, 0, 0); } +.cm-s-lesser-dark.CodeMirror .cm-table-row-even { background-color: rgb(51, 51, 51); } +.cm-s-liquibyte.CodeMirror .cm-table-row-even { background-color: rgb(0, 0, 0); } +.cm-s-lucario.CodeMirror .cm-table-row-even { background-color: rgb(58, 84, 108); } +.cm-s-material.CodeMirror .cm-table-row-even { background-color: rgb(51, 68, 76); } +.cm-s-mbo.CodeMirror .cm-table-row-even { background-color: rgb(59, 59, 59); } +.cm-s-midnight.CodeMirror .cm-table-row-even { background-color: rgb(20, 34, 57); } +.cm-s-monokai.CodeMirror .cm-table-row-even { background-color: rgb(53, 54, 46); } +.cm-s-neo.CodeMirror .cm-table-row-even { background-color: rgb(242, 242, 242); } +.cm-s-night.CodeMirror .cm-table-row-even { background-color: rgb(14, 0, 42); } +.cm-s-oceanic-next.CodeMirror .cm-table-row-even { background-color: rgb(65, 88, 97); } +.cm-s-paraiso-dark.CodeMirror .cm-table-row-even { background-color: rgb(63, 41, 62); } +.cm-s-paraiso-light.CodeMirror .cm-table-row-even { background-color: rgb(222, 224, 205); } +.cm-s-pastel-on-dark.CodeMirror .cm-table-row-even { background-color: rgb(59, 54, 53); } +.cm-s-railscasts.CodeMirror .cm-table-row-even { background-color: rgb(58, 58, 58); } +.cm-s-rubyblue.CodeMirror .cm-table-row-even { background-color: rgb(23, 49, 72); } +.cm-s-seti.CodeMirror .cm-table-row-even { background-color: rgb(28, 31, 32); } +.cm-s-shadowfox.CodeMirror .cm-table-row-even { background-color: rgb(57, 57, 62); } +.cm-s-the-matrix.CodeMirror .cm-table-row-even { background-color: rgb(0, 0, 0); } +.cm-s-tomorrow-night-bright.CodeMirror .cm-table-row-even { background-color: rgb(0, 0, 0); } +.cm-s-tomorrow-night-eighties.CodeMirror .cm-table-row-even { background-color: rgb(0, 0, 0); } +.cm-s-twilight.CodeMirror .cm-table-row-even { background-color: rgb(27, 27, 27); } +.cm-s-vibrant-ink.CodeMirror .cm-table-row-even { background-color: rgb(0, 0, 0); } +.cm-s-xq-dark.CodeMirror .cm-table-row-even { background-color: rgb(14, 0, 42); } +.cm-s-yeti.CodeMirror .cm-table-row-even { background-color: rgb(225, 222, 219); } \ No newline at end of file diff --git a/extra_scripts/codemirror/mode/bfm/bfm.js b/extra_scripts/codemirror/mode/bfm/bfm.js new file mode 100644 index 00000000..1cd9e87c --- /dev/null +++ b/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" + }) +}) \ No newline at end of file diff --git a/gruntfile.js b/gruntfile.js index 5683adda..50881e8a 100644 --- a/gruntfile.js +++ b/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,31 @@ module.exports = function (grunt) { } }) + grunt.registerTask('bfm', function () { + const done = this.async() + const root = path.join(__dirname, 'node_modules/codemirror/theme/') + + const colors = fs.readdirSync(root).map(file => { + const css = require('css').parse(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) { + const declarations = rules[0].declarations.filter(declaration => declaration.property === 'background-color' || declaration.property === 'background') + if (declarations.length === 1) { + let bgColor = require('color')(declarations[0].value.split(' ')[0]) + if (bgColor.isLight()) { + bgColor = bgColor.darken(0.05) + } else { + bgColor = bgColor.lighten(0.35) + } + + return `${rules[0].selectors[0]} .cm-table-row-even { background-color: ${bgColor.rgb().string()}; }` + } + } + }).filter(value => !!value) + + fs.writeFileSync(path.join(__dirname, 'extra_scripts/codemirror/mode/bfm/bfm.css'), ['.cm-table-row-even { background-color: rgb(242, 242, 242); }', ...colors].join('\n'), 'utf8') + }) + grunt.registerTask('default', ['build']) } diff --git a/lib/main.html b/lib/main.html index 663c1d23..65c540a3 100644 --- a/lib/main.html +++ b/lib/main.html @@ -10,6 +10,7 @@ + Boostnote @@ -94,9 +95,13 @@ + + + + @@ -120,7 +125,7 @@ - + diff --git a/package.json b/package.json index f4e5f532..8577566f 100644 --- a/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index 687bb6de..c8f38aea 100644 --- a/yarn.lock +++ b/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" + +color-name@1.1.3, 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: