{note.tags.length > 0
- ? TagElementList(note.tags)
+ ? TagElementList(note.tags, showTagsAlphabetically)
: (
this.handleClearTodo(e)} percentageOfTodo={getTodoPercentageOfCompleted(note.content)} />
{storageList.length > 0 ? storageList : (
-
)
StorageList.propTypes = {
- storgaeList: PropTypes.arrayOf(PropTypes.element).isRequired
+ storageList: PropTypes.arrayOf(PropTypes.element).isRequired
}
export default CSSModules(StorageList, styles)
diff --git a/browser/components/TagListItem.js b/browser/components/TagListItem.js
index 6cd50c9c..eec8ab14 100644
--- a/browser/components/TagListItem.js
+++ b/browser/components/TagListItem.js
@@ -14,8 +14,8 @@ import CSSModules from 'browser/lib/CSSModules'
* @param {bool} isRelated
*/
-const TagListItem = ({name, handleClickTagListItem, handleClickNarrowToTag, isActive, isRelated, count}) => (
- No storage mount.
+ No storage mount.
)}
+const TagListItem = ({name, handleClickTagListItem, handleClickNarrowToTag, handleContextMenu, isActive, isRelated, count}) => (
+
+
)
TodoListPercentage.propTypes = {
- percentageOfTodo: PropTypes.number.isRequired
+ percentageOfTodo: PropTypes.number.isRequired,
+ onClearCheckboxClick: PropTypes.func.isRequired
}
export default CSSModules(TodoListPercentage, styles)
diff --git a/browser/components/TodoListPercentage.styl b/browser/components/TodoListPercentage.styl
index 94e75599..5a0f3257 100644
--- a/browser/components/TodoListPercentage.styl
+++ b/browser/components/TodoListPercentage.styl
@@ -1,4 +1,5 @@
.percentageBar
+ display: flex
position absolute
top 72px
right 0px
@@ -30,6 +31,20 @@
color #f4f4f4
font-weight 600
+.todoClear
+ display flex
+ justify-content: flex-end
+ position absolute
+ z-index 120
+ width 100%
+ height 100%
+ padding 2px 10px
+
+.todoClearText
+ color #f4f4f4
+ cursor pointer
+ font-weight 500
+
body[data-theme="dark"]
.percentageBar
background-color #444444
@@ -39,6 +54,9 @@ body[data-theme="dark"]
.percentageText
color $ui-dark-text-color
+
+ .todoClearText
+ color $ui-dark-text-color
body[data-theme="solarized-dark"]
.percentageBar
@@ -50,6 +68,9 @@ body[data-theme="solarized-dark"]
.percentageText
color #fdf6e3
+ .todoClearText
+ color #fdf6e3
+
body[data-theme="monokai"]
.percentageBar
background-color: $ui-monokai-borderColor
@@ -58,4 +79,17 @@ body[data-theme="monokai"]
background-color $ui-monokai-active-color
.percentageText
- color $ui-monokai-text-color
\ No newline at end of file
+ color $ui-monokai-text-color
+
+body[data-theme="dracula"]
+ .percentageBar
+ background-color $ui-dracula-borderColor
+
+ .progressBar
+ background-color: $ui-dracula-active-color
+
+ .percentageText
+ color $ui-dracula-text-color
+
+ .percentageText
+ color $ui-dracula-text-color
diff --git a/browser/components/markdown.styl b/browser/components/markdown.styl
index fb30742d..19132622 100644
--- a/browser/components/markdown.styl
+++ b/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
@@ -206,41 +209,39 @@ code
text-decoration none
margin-right 2px
pre
- padding 0.5em !important
+ padding 0.5rem !important
border solid 1px #D1D1D1
border-radius 5px
overflow-x auto
- margin 0 0 1em
+ margin 0 0 1rem
display flex
line-height 1.4em
- &.flowchart, &.sequence, &.chart
- display flex
- justify-content center
- background-color white
- &.CodeMirror
- height initial
- flex-wrap wrap
- &>code
- flex 1
- overflow-x auto
code
background-color inherit
margin 0
padding 0
border none
border-radius 0
+ &.CodeMirror
+ height initial
+ flex-wrap wrap
+ &>code
+ flex 1
+ overflow-x auto
+ &.mermaid svg
+ max-width 100% !important
&>span.filename
- width 100%
- border-radius: 5px 0px 0px 0px
- margin -8px 100% 8px -8px
- padding 0px 6px
+ margin -0.5rem 100% 0.5rem -0.5rem
+ padding 0.125rem 0.375rem
background-color #777;
color white
+ &:empty
+ display none
&>span.lineNumber
display none
font-size 1em
- padding 0.5em 0
- margin -0.5em 0.5em -0.5em -0.5em
+ padding 0.5rem 0
+ margin -0.5rem 0.5rem -0.5rem -0.5rem
border-right 1px solid
text-align right
border-top-left-radius 4px
@@ -361,7 +362,7 @@ for name, val in admonition_types
.admonition.{name}
@extend $admonition
border-left-color: val[color]
-
+
.admonition.{name}>.admonition-title
@extend $admonition-title
border-bottom-color: .1rem solid rgba(val[color], 0.2)
@@ -372,6 +373,19 @@ for name, val in admonition_types
color: val[color]
content: val[icon]
+pre.fence
+ flex-wrap wrap
+
+ .chart, .flowchart, .mermaid, .sequence
+ display flex
+ justify-content center
+ background-color white
+ max-width 100%
+ flex-grow 1
+
+ canvas, svg
+ max-width 100% !important
+
themeDarkBackground = darken(#21252B, 10%)
themeDarkText = #f9f9f9
themeDarkBorder = lighten(themeDarkBackground, 20%)
@@ -476,5 +490,34 @@ body[data-theme="monokai"]
border-color themeMonokaiTableBorder
&:last-child
border-right solid 1px themeMonokaiTableBorder
+ kbd
+ background-color themeDarkBackground
+
+themeDraculaTableOdd = $ui-dracula-noteDetail-backgroundColor
+themeDraculaTableEven = darken($ui-dracula-noteDetail-backgroundColor, 10%)
+themeDraculaTableHead = themeDraculaTableEven
+themeDraculaTableBorder = themeDarkBorder
+
+body[data-theme="dracula"]
+ color $ui-dracula-text-color
+ border-color themeDarkBorder
+ background-color $ui-dracula-noteDetail-backgroundColor
+ table
+ thead
+ tr
+ background-color themeDraculaTableHead
+ th
+ border-color themeDraculaTableBorder
+ &:last-child
+ border-right solid 1px themeDraculaTableBorder
+ tbody
+ tr:nth-child(2n + 1)
+ background-color themeDraculaTableOdd
+ tr:nth-child(2n)
+ background-color themeDraculaTableEven
+ td
+ border-color themeDraculaTableBorder
+ &:last-child
+ border-right solid 1px themeDraculaTableBorder
kbd
background-color themeDarkBackground
\ No newline at end of file
diff --git a/browser/components/render/MermaidRender.js b/browser/components/render/MermaidRender.js
index 12dce327..7a3b3ea2 100644
--- a/browser/components/render/MermaidRender.js
+++ b/browser/components/render/MermaidRender.js
@@ -2,8 +2,8 @@ import mermaidAPI from 'mermaid'
// fixes bad styling in the mermaid dark theme
const darkThemeStyling = `
-.loopText tspan {
- fill: white;
+.loopText tspan {
+ fill: white;
}`
function getRandomInt (min, max) {
@@ -11,9 +11,9 @@ function getRandomInt (min, max) {
}
function getId () {
- var pool = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'
- var id = 'm-'
- for (var i = 0; i < 7; i++) {
+ const pool = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'
+ let id = 'm-'
+ for (let i = 0; i < 7; i++) {
id += pool[getRandomInt(0, 16)]
}
return id
@@ -21,16 +21,20 @@ function getId () {
function render (element, content, theme) {
try {
- let isDarkTheme = theme === 'dark' || theme === 'solarized-dark' || theme === 'monokai'
+ const height = element.attributes.getNamedItem('data-height')
+ if (height && height.value !== 'undefined') {
+ element.style.height = height.value + 'vh'
+ }
+ let isDarkTheme = theme === 'dark' || theme === 'solarized-dark' || theme === 'monokai' || theme === 'dracula'
mermaidAPI.initialize({
theme: isDarkTheme ? 'dark' : 'default',
- themeCSS: isDarkTheme ? darkThemeStyling : ''
+ themeCSS: isDarkTheme ? darkThemeStyling : '',
+ useMaxWidth: false
})
mermaidAPI.render(getId(), content, (svgGraph) => {
element.innerHTML = svgGraph
})
} catch (e) {
- console.error(e)
element.className = 'mermaid-error'
element.innerHTML = 'mermaid diagram parse error: ' + e.message
}
diff --git a/browser/lib/Languages.js b/browser/lib/Languages.js
index ddb7e0ed..1a798fdf 100644
--- a/browser/lib/Languages.js
+++ b/browser/lib/Languages.js
@@ -49,7 +49,7 @@ const languages = [
},
{
name: 'Portuguese',
- locale: 'pt'
+ locale: 'pt-BR'
},
{
name: 'Russian',
@@ -61,6 +61,9 @@ const languages = [
}, {
name: 'Turkish',
locale: 'tr'
+ }, {
+ name: 'Thai',
+ locale: 'th'
}
]
diff --git a/browser/lib/findNoteTitle.js b/browser/lib/findNoteTitle.js
index b954f172..912c3bdd 100644
--- a/browser/lib/findNoteTitle.js
+++ b/browser/lib/findNoteTitle.js
@@ -1,4 +1,4 @@
-export function findNoteTitle (value) {
+export function findNoteTitle (value, enableFrontMatterTitle, frontMatterTitleField = 'title') {
const splitted = value.split('\n')
let title = null
let isInsideCodeBlock = false
@@ -6,6 +6,11 @@ export function findNoteTitle (value) {
if (splitted[0] === '---') {
let line = 0
while (++line < splitted.length) {
+ if (enableFrontMatterTitle && splitted[line].startsWith(frontMatterTitleField + ':')) {
+ title = splitted[line].substring(frontMatterTitleField.length + 1).trim()
+
+ break
+ }
if (splitted[line] === '---') {
splitted.splice(0, line + 1)
@@ -14,17 +19,19 @@ export function findNoteTitle (value) {
}
}
- splitted.some((line, index) => {
- const trimmedLine = line.trim()
- const trimmedNextLine = splitted[index + 1] === undefined ? '' : splitted[index + 1].trim()
- if (trimmedLine.match('```')) {
- isInsideCodeBlock = !isInsideCodeBlock
- }
- if (isInsideCodeBlock === false && (trimmedLine.match(/^# +/) || trimmedNextLine.match(/^=+$/))) {
- title = trimmedLine
- return true
- }
- })
+ if (title === null) {
+ splitted.some((line, index) => {
+ const trimmedLine = line.trim()
+ const trimmedNextLine = splitted[index + 1] === undefined ? '' : splitted[index + 1].trim()
+ if (trimmedLine.match('```')) {
+ isInsideCodeBlock = !isInsideCodeBlock
+ }
+ if (isInsideCodeBlock === false && (trimmedLine.match(/^# +/) || trimmedNextLine.match(/^=+$/))) {
+ title = trimmedLine
+ return true
+ }
+ })
+ }
if (title === null) {
title = ''
diff --git a/browser/lib/markdown-it-fence.js b/browser/lib/markdown-it-fence.js
new file mode 100644
index 00000000..983dc45c
--- /dev/null
+++ b/browser/lib/markdown-it-fence.js
@@ -0,0 +1,130 @@
+'use strict'
+
+module.exports = function (md, renderers, defaultRenderer) {
+ function fence (state, startLine, endLine) {
+ let pos = state.bMarks[startLine] + state.tShift[startLine]
+ let max = state.eMarks[startLine]
+
+ if (state.sCount[startLine] - state.blkIndent >= 4 || pos + 3 > max) {
+ return false
+ }
+
+ const marker = state.src.charCodeAt(pos)
+ if (!(marker === 96 || marker === 126)) {
+ return false
+ }
+
+ let mem = pos
+ pos = state.skipChars(pos, marker)
+
+ let len = pos - mem
+ if (len < 3) {
+ return false
+ }
+
+ const markup = state.src.slice(mem, pos)
+ const params = state.src.slice(pos, max)
+
+ let nextLine = startLine
+ let haveEndMarker = false
+
+ while (true) {
+ nextLine++
+ if (nextLine >= endLine) {
+ break
+ }
+
+ pos = mem = state.bMarks[nextLine] + state.tShift[nextLine]
+ max = state.eMarks[nextLine]
+
+ if (pos < max && state.sCount[nextLine] < state.blkIndent) {
+ break
+ }
+ if (state.src.charCodeAt(pos) !== marker || state.sCount[nextLine] - state.blkIndent >= 4) {
+ continue
+ }
+
+ pos = state.skipChars(pos, marker)
+
+ if (pos - mem < len) {
+ continue
+ }
+
+ pos = state.skipSpaces(pos)
+
+ if (pos >= max) {
+ haveEndMarker = true
+ break
+ }
+ }
+
+ len = state.sCount[startLine]
+ state.line = nextLine + (haveEndMarker ? 1 : 0)
+
+ const parameters = {}
+ let langType = ''
+ let fileName = ''
+ let firstLineNumber = 1
+
+ let match = /^(\w[-\w]*)?(?:\(((?:\s*\w[-\w]*(?:=(?:'(?:.*?[^\\])?'|"(?:.*?[^\\])?"|(?:[^'"][^\s]*)))?)*)\))?(?::([^:]*)(?::(\d+))?)?\s*$/.exec(params)
+ if (match) {
+ if (match[1]) {
+ langType = match[1]
+ }
+ if (match[3]) {
+ fileName = match[3]
+ }
+ if (match[4]) {
+ firstLineNumber = parseInt(match[4], 10)
+ }
+
+ if (match[2]) {
+ const params = match[2]
+ const regex = /(\w[-\w]*)(?:=(?:'(.*?[^\\])?'|"(.*?[^\\])?"|([^'"][^\s]*)))?/g
+
+ let name, value
+ while ((match = regex.exec(params))) {
+ name = match[1]
+ value = match[2] || match[3] || match[4] || null
+
+ const height = /^(\d+)h$/.exec(name)
+ if (height && !value) {
+ parameters.height = height[1]
+ } else {
+ parameters[name] = value
+ }
+ }
+ }
+ }
+
+ let token
+ if (renderers[langType]) {
+ token = state.push(`${langType}_fence`, 'div', 0)
+ } else {
+ token = state.push('_fence', 'code', 0)
+ }
+
+ token.langType = langType
+ token.fileName = fileName
+ token.firstLineNumber = firstLineNumber
+ token.parameters = parameters
+
+ token.content = state.getLines(startLine + 1, nextLine, len, true)
+ token.markup = markup
+ token.map = [startLine, state.line]
+
+ return true
+ }
+
+ md.block.ruler.before('fence', '_fence', fence, {
+ alt: ['paragraph', 'reference', 'blockquote', 'list']
+ })
+
+ for (const name in renderers) {
+ md.renderer.rules[`${name}_fence`] = (tokens, index) => renderers[name](tokens[index])
+ }
+
+ if (defaultRenderer) {
+ md.renderer.rules['_fence'] = (tokens, index) => defaultRenderer(tokens[index])
+ }
+}
diff --git a/browser/lib/markdown-it-sanitize-html.js b/browser/lib/markdown-it-sanitize-html.js
index 05e5e7be..8f6d86a8 100644
--- a/browser/lib/markdown-it-sanitize-html.js
+++ b/browser/lib/markdown-it-sanitize-html.js
@@ -2,6 +2,7 @@
import sanitizeHtml from 'sanitize-html'
import { escapeHtmlCharacters } from './utils'
+import url from 'url'
module.exports = function sanitizePlugin (md, options) {
options = options || {}
@@ -14,7 +15,7 @@ module.exports = function sanitizePlugin (md, options) {
options
)
}
- if (state.tokens[tokenIdx].type === 'fence') {
+ if (state.tokens[tokenIdx].type === '_fence') {
// escapeHtmlCharacters has better performance
state.tokens[tokenIdx].content = escapeHtmlCharacters(
state.tokens[tokenIdx].content,
@@ -25,7 +26,7 @@ module.exports = function sanitizePlugin (md, options) {
const inlineTokens = state.tokens[tokenIdx].children
for (let childIdx = 0; childIdx < inlineTokens.length; childIdx++) {
if (inlineTokens[childIdx].type === 'html_inline') {
- inlineTokens[childIdx].content = sanitizeHtml(
+ inlineTokens[childIdx].content = sanitizeInline(
inlineTokens[childIdx].content,
options
)
@@ -35,3 +36,89 @@ module.exports = function sanitizePlugin (md, options) {
}
})
}
+
+const tagRegex = /<([A-Z][A-Z0-9]*)\s*((?:\s*[A-Z][A-Z0-9]*(?:=("|')(?:[^\3]+?)\3)?)*)\s*\/?>|<\/([A-Z][A-Z0-9]*)\s*>/i
+const attributesRegex = /([A-Z][A-Z0-9]*)(?:=("|')([^\2]+?)\2)?/ig
+
+function sanitizeInline (html, options) {
+ let match = tagRegex.exec(html)
+ if (!match) {
+ return ''
+ }
+
+ const { allowedTags, allowedAttributes, selfClosing, allowedSchemesAppliedToAttributes } = options
+
+ if (match[1] !== undefined) {
+ // opening tag
+ const tag = match[1].toLowerCase()
+ if (allowedTags.indexOf(tag) === -1) {
+ return ''
+ }
+
+ const attributes = match[2]
+
+ let attrs = ''
+ let name
+ let value
+
+ while ((match = attributesRegex.exec(attributes))) {
+ name = match[1].toLowerCase()
+ value = match[3]
+
+ if (allowedAttributes['*'].indexOf(name) !== -1 || (allowedAttributes[tag] && allowedAttributes[tag].indexOf(name) !== -1)) {
+ if (allowedSchemesAppliedToAttributes.indexOf(name) !== -1) {
+ if (naughtyHRef(value, options) || (tag === 'iframe' && name === 'src' && naughtyIFrame(value, options))) {
+ continue
+ }
+ }
+
+ attrs += ` ${name}`
+ if (match[2]) {
+ attrs += `="${value}"`
+ }
+ }
+ }
+
+ if (selfClosing.indexOf(tag) === -1) {
+ return '<' + tag + attrs + '>'
+ } else {
+ return '<' + tag + attrs + ' />'
+ }
+ } else {
+ // closing tag
+ if (allowedTags.indexOf(match[4].toLowerCase()) !== -1) {
+ return html
+ } else {
+ return ''
+ }
+ }
+}
+
+function naughtyHRef (href, options) {
+ // href = href.replace(/[\x00-\x20]+/g, '')
+ href = href.replace(/<\!\-\-.*?\-\-\>/g, '')
+
+ const matches = href.match(/^([a-zA-Z]+)\:/)
+ if (!matches) {
+ if (href.match(/^[\/\\]{2}/)) {
+ return !options.allowProtocolRelative
+ }
+
+ // No scheme
+ return false
+ }
+
+ const scheme = matches[1].toLowerCase()
+
+ return options.allowedSchemes.indexOf(scheme) === -1
+}
+
+function naughtyIFrame (src, options) {
+ try {
+ const parsed = url.parse(src, false, true)
+
+ return options.allowedIframeHostnames.index(parsed.hostname) === -1
+ } catch (e) {
+ return true
+ }
+}
diff --git a/browser/lib/markdown.js b/browser/lib/markdown.js
index ed4fbca1..0c97a4d5 100644
--- a/browser/lib/markdown.js
+++ b/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
@@ -27,32 +28,6 @@ class Markdown {
html: true,
xhtmlOut: true,
breaks: config.preview.breaks,
- highlight: function (str, lang) {
- const delimiter = ':'
- const langInfo = lang.split(delimiter)
- const langType = langInfo[0]
- const fileName = langInfo[1] || ''
- const firstLineNumber = parseInt(langInfo[2], 10)
-
- if (langType === 'flowchart') {
- return ` handleContextMenu(e, name)}>
{isRelated
?
diff --git a/browser/components/TodoListPercentage.js b/browser/components/TodoListPercentage.js
index 3565f274..b917bbc1 100644
--- a/browser/components/TodoListPercentage.js
+++ b/browser/components/TodoListPercentage.js
@@ -12,7 +12,7 @@ import styles from './TodoListPercentage.styl'
*/
const TodoListPercentage = ({
- percentageOfTodo
+ percentageOfTodo, onClearCheckboxClick
}) => (
@@ -20,11 +20,15 @@ const TodoListPercentage = ({
{percentageOfTodo}%
+
onClearCheckboxClick(e)}>clear
+${str}`
- }
- if (langType === 'sequence') {
- return `${str}`
- }
- if (langType === 'chart') {
- return `${str}`
- }
- if (langType === 'mermaid') {
- return `${str}`
- }
- return '' +
- '' + fileName + '' +
- createGutter(str, firstLineNumber) +
- '' +
- str +
- ''
- },
sanitize: 'STRICT'
}
@@ -105,7 +80,11 @@ class Markdown {
'iframe': ['src', 'width', 'height', 'frameborder', 'allowfullscreen'],
'input': ['type', 'id', 'checked']
},
- allowedIframeHostnames: ['www.youtube.com']
+ allowedIframeHostnames: ['www.youtube.com'],
+ selfClosing: [ 'img', 'br', 'hr', 'input' ],
+ allowedSchemes: [ 'http', 'https', 'ftp', 'mailto' ],
+ allowedSchemesAppliedToAttributes: [ 'href', 'src', 'cite' ],
+ allowProtocolRelative: true
})
}
@@ -152,6 +131,39 @@ class Markdown {
this.md.use(require('markdown-it-admonition'), {types: ['note', 'hint', 'attention', 'caution', 'danger', 'error']})
this.md.use(require('./markdown-it-frontmatter'))
+ this.md.use(require('./markdown-it-fence'), {
+ chart: token => {
+ return `+ ${token.fileName} +` + }, + flowchart: token => { + return `${token.content}+
+ ${token.fileName} +` + }, + mermaid: token => { + return `${token.content}+
+ ${token.fileName} +` + }, + sequence: token => { + return `${token.content}+
+ ${token.fileName} +` + } + }, token => { + return `${token.content}+
+ ${token.fileName}
+ ${createGutter(token.content, token.firstLineNumber)}
+ ${token.content}
+ `
+ })
+
const deflate = require('markdown-it-plantuml/lib/deflate')
this.md.use(require('markdown-it-plantuml'), '', {
generateSource: function (umlCode) {
@@ -223,7 +235,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 = ``
}
diff --git a/browser/main/Detail/Detail.styl b/browser/main/Detail/Detail.styl
index 49a634f3..1b7bd606 100644
--- a/browser/main/Detail/Detail.styl
+++ b/browser/main/Detail/Detail.styl
@@ -23,7 +23,7 @@ body[data-theme="dark"]
border-left 1px solid $ui-dark-borderColor
.empty-message
color $ui-dark-inactive-text-color
-
+
body[data-theme="solarized-dark"]
.root
background-color $ui-solarized-dark-noteDetail-backgroundColor
@@ -37,3 +37,10 @@ body[data-theme="monokai"]
border-left 1px solid $ui-monokai-borderColor
.empty-message
color $ui-monokai-text-color
+
+body[data-theme="dracula"]
+ .root
+ background-color $ui-dracula-noteDetail-backgroundColor
+ border-left 1px solid $ui-dracula-borderColor
+ .empty-message
+ color $ui-dracula-text-color
\ No newline at end of file
diff --git a/browser/main/Detail/FolderSelect.styl b/browser/main/Detail/FolderSelect.styl
index cfdc2734..fe045e3a 100644
--- a/browser/main/Detail/FolderSelect.styl
+++ b/browser/main/Detail/FolderSelect.styl
@@ -36,7 +36,7 @@
height 34px
width 20px
line-height 34px
-
+
.search-input
vertical-align middle
position relative
@@ -71,7 +71,7 @@
overflow ellipsis
cursor pointer
&:hover
- background-color $ui-button--hover-backgroundColor
+ background-color $ui-button--hover-backgroundColor
.search-optionList-item--active
@extend .search-optionList-item
@@ -159,3 +159,29 @@ body[data-theme="monokai"]
color $ui-monokai-button--active-color
.search-optionList-item-name-surfix
color $ui-monokai-inactive-text-color
+
+body[data-theme="dracula"]
+ .root
+ color $ui-dracula-text-color
+ &:hover
+ color #f8f8f2
+ background-color $ui-dark-button--hover-backgroundColor
+ border-color $ui-dracula-borderColor
+
+ .search-optionList
+ color #f8f8f2
+ border-color $ui-dracula-borderColor
+ background-color $ui-dracula-button-backgroundColor
+
+ .search-optionList-item
+ &:hover
+ background-color lighten($ui-dracula-button--hover-backgroundColor, 15%)
+
+ .search-optionList-item--active
+ background-color $ui-dracula-button--active-backgroundColor
+ color $ui-dracula-button--active-color
+ &:hover
+ background-color $ui-dark-button--hover-backgroundColor
+ color $ui-dracula-button--active-color
+ .search-optionList-item-name-surfix
+ color $ui-dracula-inactive-text-color
diff --git a/browser/main/Detail/InfoPanel.styl b/browser/main/Detail/InfoPanel.styl
index 2a73ca7e..1f774174 100644
--- a/browser/main/Detail/InfoPanel.styl
+++ b/browser/main/Detail/InfoPanel.styl
@@ -257,3 +257,43 @@ body[data-theme="monokai"]
color $ui-dark-inactive-text-color
&:hover
color $ui-monokai-text-color
+
+body[data-theme="dracula"]
+ .control-infoButton-panel
+ background-color $ui-dracula-noteList-backgroundColor
+
+ .control-infoButton-panel-trash
+ background-color $ui-dracula-noteList-backgroundColor
+
+ .modification-date
+ color $ui-dracula-text-color
+
+ .modification-date-desc
+ color $ui-inactive-text-color
+
+ .infoPanel-defaul-count
+ color $ui-dracula-text-color
+
+ .infoPanel-sub-count
+ color $ui-inactive-text-color
+
+ .infoPanel-default
+ color $ui-dracula-text-color
+
+ .infoPanel-sub
+ color $ui-inactive-text-color
+
+ .infoPanel-noteLink
+ background-color alpha($ui-dracula-borderColor, 20%)
+ color $ui-dracula-text-color
+
+ [id=export-wrap]
+ button
+ color $ui-dark-inactive-text-color
+ &:hover
+ background-color alpha($ui-dracula-borderColor, 20%)
+ color $ui-dracula-text-color
+ p
+ color $ui-dark-inactive-text-color
+ &:hover
+ color $ui-dracula-text-color
\ No newline at end of file
diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js
index e4493a80..116fdec0 100755
--- a/browser/main/Detail/MarkdownNoteDetail.js
+++ b/browser/main/Detail/MarkdownNoteDetail.js
@@ -61,11 +61,14 @@ class MarkdownNoteDetail extends React.Component {
const reversedType = this.state.editorType === 'SPLIT' ? 'EDITOR_PREVIEW' : 'SPLIT'
this.handleSwitchMode(reversedType)
})
+ ee.on('hotkey:deletenote', this.handleDeleteNote.bind(this))
ee.on('code:generate-toc', this.generateToc)
}
componentWillReceiveProps (nextProps) {
- if (nextProps.note.key !== this.props.note.key && !this.state.isMovingNote) {
+ const isNewNote = nextProps.note.key !== this.props.note.key
+ const hasDeletedTags = nextProps.note.tags.length < this.props.note.tags.length
+ if (!this.state.isMovingNote && (isNewNote || hasDeletedTags)) {
if (this.saveQueue != null) this.saveNow()
this.setState({
note: Object.assign({}, nextProps.note)
@@ -91,7 +94,7 @@ class MarkdownNoteDetail extends React.Component {
handleUpdateContent () {
const { note } = this.state
note.content = this.refs.content.value
- note.title = markdown.strip(striptags(findNoteTitle(note.content)))
+ note.title = markdown.strip(striptags(findNoteTitle(note.content, this.props.config.editor.enableFrontMatterTitle, this.props.config.editor.frontMatterTitleField)))
this.updateNote(note)
}
@@ -293,9 +296,33 @@ class MarkdownNoteDetail extends React.Component {
})
}
+ handleDeleteNote () {
+ this.handleTrashButtonClick()
+ }
+
+ handleClearTodo () {
+ const { note } = this.state
+ const splitted = note.content.split('\n')
+
+ const clearTodoContent = splitted.map((line) => {
+ const trimmedLine = line.trim()
+ if (trimmedLine.match(/\[x\]/i)) {
+ return line.replace(/\[x\]/i, '[ ]')
+ } else {
+ return line
+ }
+ }).join('\n')
+
+ note.content = clearTodoContent
+ this.refs.content.setValue(note.content)
+
+ this.updateNote(note)
+ }
+
renderEditor () {
const { config, ignorePreviewPointerEvents } = this.props
const { note } = this.state
+
if (this.state.editorType === 'EDITOR_PREVIEW') {
return
-
-)
-
-ToggleModeButton.propTypes = {
- onClick: PropTypes.func.isRequired,
- editorType: PropTypes.string.Required
-}
-
-export default CSSModules(ToggleModeButton, styles)
+import PropTypes from 'prop-types'
+import React from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './ToggleModeButton.styl'
+import i18n from 'browser/lib/i18n'
+
+const ToggleModeButton = ({
+ onClick, editorType
+}) => (
+ onClick('SPLIT')}>
- 
-
- onClick('EDITOR_PREVIEW')}>
-
-
- {i18n.__('Toggle Mode')}
-
+
+)
+
+ToggleModeButton.propTypes = {
+ onClick: PropTypes.func.isRequired,
+ editorType: PropTypes.string.Required
+}
+
+export default CSSModules(ToggleModeButton, styles)
diff --git a/browser/main/Detail/ToggleModeButton.styl b/browser/main/Detail/ToggleModeButton.styl
index 7ede0576..73f5acbd 100644
--- a/browser/main/Detail/ToggleModeButton.styl
+++ b/browser/main/Detail/ToggleModeButton.styl
@@ -63,3 +63,10 @@ body[data-theme="monokai"]
.active
background-color #f92672
box-shadow 2px 0px 7px #222222
+
+body[data-theme="dracula"]
+ .control-toggleModeButton
+ background-color #44475a
+ .active
+ background-color #bd93f9
+ box-shadow 2px 0px 7px #222222
diff --git a/browser/main/Main.js b/browser/main/Main.js
index 65bde538..e9d2c94d 100644
--- a/browser/main/Main.js
+++ b/browser/main/Main.js
@@ -80,7 +80,6 @@ class Main extends React.Component {
}
})
.then(data => {
- console.log(data)
store.dispatch({
type: 'ADD_STORAGE',
storage: data.storage,
@@ -141,7 +140,7 @@ class Main extends React.Component {
componentDidMount () {
const { dispatch, config } = this.props
- const supportedThemes = ['dark', 'white', 'solarized-dark', 'monokai']
+ const supportedThemes = ['dark', 'white', 'solarized-dark', 'monokai', 'dracula']
if (supportedThemes.indexOf(config.ui.theme) !== -1) {
document.body.setAttribute('data-theme', config.ui.theme)
@@ -297,7 +296,7 @@ class Main extends React.Component {
onMouseUp={e => this.handleMouseUp(e)}
>
onClick('SPLIT')}>
+
+
+ onClick('EDITOR_PREVIEW')}>
+
+
+ {i18n.__('Toggle Mode')}
+ {i18n.__('Crowdfunding')}
- {i18n.__('Dear Boostnote users,')}
-{i18n.__('Thank you for using Boostnote!')}
-{i18n.__('Boostnote is used in about 200 different countries and regions by an awesome community of developers.')}
-
{i18n.__('To support our growing userbase, and satisfy community expectations,')}
-{i18n.__('we would like to invest more time and resources in this project.')}
+{i18n.__('We launched IssueHunt which is an issue-based crowdfunding / sourcing platform for open source projects.')}
+{i18n.__('Anyone can put a bounty on not only a bug but also on OSS feature requests listed on IssueHunt. Collected funds will be distributed to project owners and contributors.')}
-
{i18n.__('If you use Boostnote and see its potential, help us out by supporting the project on OpenCollective!')}
+{i18n.__('### Sustainable Open Source Ecosystem')}
+{i18n.__('We discussed about open-source ecosystem and IssueHunt concept with the Boostnote team repeatedly. We actually also discussed with Matz who father of Ruby.')}
+{i18n.__('The original reason why we made IssueHunt was to reward our contributors of Boostnote project. We’ve got tons of Github stars and hundred of contributors in two years.')}
+{i18n.__('We thought that it will be nice if we can pay reward for our contributors.')}
-
{i18n.__('Thanks,')}
+{i18n.__('### We believe Meritocracy')}
+{i18n.__('We think developers who has skill and did great things must be rewarded properly.')}
+{i18n.__('OSS projects are used in everywhere on the internet, but no matter how they great, most of owners of those projects need to have another job to sustain their living.')}
+{i18n.__('It sometimes looks like exploitation.')}
+{i18n.__('We’ve realized IssueHunt could enhance sustainability of open-source ecosystem.')}
++
{i18n.__('As same as issues of Boostnote are already funded on IssueHunt, your open-source projects can be also started funding from now.')}
++
{i18n.__('Thank you,')}
{i18n.__('The Boostnote Team')}