diff --git a/browser/components/CodeEditor.js b/browser/components/CodeEditor.js index 7dfb6125..71843161 100644 --- a/browser/components/CodeEditor.js +++ b/browser/components/CodeEditor.js @@ -7,7 +7,9 @@ import attachmentManagement from 'browser/main/lib/dataApi/attachmentManagement' import convertModeName from 'browser/lib/convertModeName' import eventEmitter from 'browser/main/lib/eventEmitter' import iconv from 'iconv-lite' - +import crypto from 'crypto' +import consts from 'browser/lib/consts' +import fs from 'fs' const { ipcRenderer } = require('electron') CodeMirror.modeURL = '../node_modules/codemirror/mode/%N/%N.js' @@ -81,8 +83,21 @@ export default class CodeEditor extends React.Component { componentDidMount () { const { rulers, enableRulers } = this.props - this.value = this.props.value + const expandSnippet = this.expandSnippet.bind(this) + const defaultSnippet = [ + { + id: crypto.randomBytes(16).toString('hex'), + name: 'Dummy text', + prefix: ['lorem', 'ipsum'], + content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.' + } + ] + if (!fs.existsSync(consts.SNIPPET_FILE)) { + fs.writeFileSync(consts.SNIPPET_FILE, JSON.stringify(defaultSnippet, null, 4), 'utf8') + } + + this.value = this.props.value this.editor = CodeMirror(this.refs.root, { rulers: buildCMRulers(rulers, enableRulers), value: this.props.value, @@ -103,6 +118,8 @@ export default class CodeEditor extends React.Component { Tab: function (cm) { const cursor = cm.getCursor() const line = cm.getLine(cursor.line) + const cursorPosition = cursor.ch + const charBeforeCursor = line.substr(cursorPosition - 1, 1) if (cm.somethingSelected()) cm.indentSelection('add') else { const tabs = cm.getOption('indentWithTabs') @@ -114,6 +131,16 @@ export default class CodeEditor extends React.Component { cm.execCommand('insertSoftTab') } cm.execCommand('goLineEnd') + } else if (!charBeforeCursor.match(/\t|\s|\r|\n/) && cursor.ch > 1) { + // text expansion on tab key if the char before is alphabet + const snippets = JSON.parse(fs.readFileSync(consts.SNIPPET_FILE, 'utf8')) + if (expandSnippet(line, cursor, cm, snippets) === false) { + if (tabs) { + cm.execCommand('insertTab') + } else { + cm.execCommand('insertSoftTab') + } + } } else { if (tabs) { cm.execCommand('insertTab') @@ -157,6 +184,73 @@ export default class CodeEditor extends React.Component { CodeMirror.Vim.map('ZZ', ':q', 'normal') } + expandSnippet (line, cursor, cm, snippets) { + const wordBeforeCursor = this.getWordBeforeCursor(line, cursor.line, cursor.ch) + const templateCursorString = ':{}' + for (let i = 0; i < snippets.length; i++) { + if (snippets[i].prefix.indexOf(wordBeforeCursor.text) !== -1) { + if (snippets[i].content.indexOf(templateCursorString) !== -1) { + const snippetLines = snippets[i].content.split('\n') + let cursorLineNumber = 0 + let cursorLinePosition = 0 + for (let j = 0; j < snippetLines.length; j++) { + const cursorIndex = snippetLines[j].indexOf(templateCursorString) + if (cursorIndex !== -1) { + cursorLineNumber = j + cursorLinePosition = cursorIndex + cm.replaceRange( + snippets[i].content.replace(templateCursorString, ''), + wordBeforeCursor.range.from, + wordBeforeCursor.range.to + ) + cm.setCursor({ line: cursor.line + cursorLineNumber, ch: cursorLinePosition }) + } + } + } else { + cm.replaceRange( + snippets[i].content, + wordBeforeCursor.range.from, + wordBeforeCursor.range.to + ) + } + return true + } + } + + return false + } + + getWordBeforeCursor (line, lineNumber, cursorPosition) { + let wordBeforeCursor = '' + const originCursorPosition = cursorPosition + const emptyChars = /\t|\s|\r|\n/ + + // to prevent the word to expand is long that will crash the whole app + // the safeStop is there to stop user to expand words that longer than 20 chars + const safeStop = 20 + + while (cursorPosition > 0) { + const currentChar = line.substr(cursorPosition - 1, 1) + // if char is not an empty char + if (!emptyChars.test(currentChar)) { + wordBeforeCursor = currentChar + wordBeforeCursor + } else if (wordBeforeCursor.length >= safeStop) { + throw new Error('Your snippet trigger is too long !') + } else { + break + } + cursorPosition-- + } + + return { + text: wordBeforeCursor, + range: { + from: {line: lineNumber, ch: originCursorPosition}, + to: {line: lineNumber, ch: cursorPosition} + } + } + } + quitEditor () { document.querySelector('textarea').blur() } @@ -322,8 +416,9 @@ export default class CodeEditor extends React.Component { const cursor = editor.getCursor() const LinkWithTitle = `[${parsedResponse.title}](${pastedTxt})` const newValue = value.replace(taggedUrl, LinkWithTitle) + const newCursor = Object.assign({}, cursor, { ch: cursor.ch + newValue.length - value.length }) editor.setValue(newValue) - editor.setCursor(cursor) + editor.setCursor(newCursor) }).catch((e) => { const value = editor.getValue() const newValue = value.replace(taggedUrl, pastedTxt) diff --git a/browser/components/MarkdownEditor.js b/browser/components/MarkdownEditor.js index 2bd5d951..3208ce76 100644 --- a/browser/components/MarkdownEditor.js +++ b/browser/components/MarkdownEditor.js @@ -283,6 +283,7 @@ class MarkdownEditor extends React.Component { indentSize={editorIndentSize} scrollPastEnd={config.preview.scrollPastEnd} smartQuotes={config.preview.smartQuotes} + smartArrows={config.previw.smartArrows} breaks={config.preview.breaks} sanitize={config.preview.sanitize} ref='preview' @@ -296,6 +297,8 @@ class MarkdownEditor extends React.Component { showCopyNotification={config.ui.showCopyNotification} storagePath={storage.path} noteKey={noteKey} + customCSS={config.preview.customCSS} + allowCustomCSS={config.preview.allowCustomCSS} /> ) diff --git a/browser/components/MarkdownPreview.js b/browser/components/MarkdownPreview.js index ea5f11c0..df7e74a6 100755 --- a/browser/components/MarkdownPreview.js +++ b/browser/components/MarkdownPreview.js @@ -32,7 +32,7 @@ const CSS_FILES = [ `${appPath}/node_modules/codemirror/lib/codemirror.css` ] -function buildStyle (fontFamily, fontSize, codeBlockFontFamily, lineNumber, scrollPastEnd, theme) { +function buildStyle (fontFamily, fontSize, codeBlockFontFamily, lineNumber, scrollPastEnd, theme, allowCustomCSS, customCSS) { return ` @font-face { font-family: 'Lato'; @@ -52,7 +52,19 @@ function buildStyle (fontFamily, fontSize, codeBlockFontFamily, lineNumber, scro font-weight: 700; text-rendering: optimizeLegibility; } +@font-face { + font-family: 'Material Icons'; + font-style: normal; + font-weight: 400; + src: local('Material Icons'), + local('MaterialIcons-Regular'), + url('${appPath}/resources/fonts/MaterialIcons-Regular.woff2') format('woff2'), + url('${appPath}/resources/fonts/MaterialIcons-Regular.woff') format('woff'), + url('${appPath}/resources/fonts/MaterialIcons-Regular.ttf') format('truetype'); +} +${allowCustomCSS ? customCSS : ''} ${markdownStyle} + body { font-family: '${fontFamily.join("','")}'; font-size: ${fontSize}px; @@ -132,7 +144,6 @@ export default class MarkdownPreview extends React.Component { this.mouseUpHandler = (e) => this.handleMouseUp(e) this.DoubleClickHandler = (e) => this.handleDoubleClick(e) this.scrollHandler = _.debounce(this.handleScroll.bind(this), 100, {leading: false, trailing: true}) - this.anchorClickHandler = (e) => this.handlePreviewAnchorClick(e) this.checkboxClickHandler = (e) => this.handleCheckboxClick(e) this.saveAsTextHandler = () => this.handleSaveAsText() this.saveAsMdHandler = () => this.handleSaveAsMd() @@ -153,22 +164,6 @@ export default class MarkdownPreview extends React.Component { }) } - handlePreviewAnchorClick (e) { - e.preventDefault() - e.stopPropagation() - - const anchor = e.target.closest('a') - const href = anchor.getAttribute('href') - if (_.isString(href) && href.match(/^#/)) { - const targetElement = this.refs.root.contentWindow.document.getElementById(href.substring(1, href.length)) - if (targetElement != null) { - this.getWindow().scrollTo(0, targetElement.offsetTop) - } - } else { - shell.openExternal(href) - } - } - handleCheckboxClick (e) { this.props.onCheckboxClick(e) } @@ -216,9 +211,9 @@ export default class MarkdownPreview extends React.Component { handleSaveAsHtml () { this.exportAsDocument('html', (noteContent, exportTasks) => { - const {fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme, scrollPastEnd, theme} = this.getStyleParams() + const {fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme, scrollPastEnd, theme, allowCustomCSS, customCSS} = this.getStyleParams() - const inlineStyles = buildStyle(fontFamily, fontSize, codeBlockFontFamily, lineNumber, scrollPastEnd, theme) + const inlineStyles = buildStyle(fontFamily, fontSize, codeBlockFontFamily, lineNumber, scrollPastEnd, theme, allowCustomCSS, customCSS) let body = this.markdown.render(escapeHtmlCharacters(noteContent)) const files = [this.GetCodeThemeLink(codeBlockTheme), ...CSS_FILES] @@ -343,6 +338,7 @@ export default class MarkdownPreview extends React.Component { if (prevProps.value !== this.props.value) this.rewriteIframe() if (prevProps.smartQuotes !== this.props.smartQuotes || prevProps.sanitize !== this.props.sanitize || + prevProps.smartArrows !== this.props.smartArrows || prevProps.breaks !== this.props.breaks) { this.initMarkdown() this.rewriteIframe() @@ -354,14 +350,16 @@ export default class MarkdownPreview extends React.Component { prevProps.lineNumber !== this.props.lineNumber || prevProps.showCopyNotification !== this.props.showCopyNotification || prevProps.theme !== this.props.theme || - prevProps.scrollPastEnd !== this.props.scrollPastEnd) { + prevProps.scrollPastEnd !== this.props.scrollPastEnd || + prevProps.allowCustomCSS !== this.props.allowCustomCSS || + prevProps.customCSS !== this.props.customCSS) { this.applyStyle() this.rewriteIframe() } } getStyleParams () { - const { fontSize, lineNumber, codeBlockTheme, scrollPastEnd, theme } = this.props + const { fontSize, lineNumber, codeBlockTheme, scrollPastEnd, theme, allowCustomCSS, customCSS } = this.props let { fontFamily, codeBlockFontFamily } = this.props fontFamily = _.isString(fontFamily) && fontFamily.trim().length > 0 ? fontFamily.split(',').map(fontName => fontName.trim()).concat(defaultFontFamily) @@ -370,14 +368,14 @@ export default class MarkdownPreview extends React.Component { ? codeBlockFontFamily.split(',').map(fontName => fontName.trim()).concat(defaultCodeBlockFontFamily) : defaultCodeBlockFontFamily - return {fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme, scrollPastEnd, theme} + return {fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme, scrollPastEnd, theme, allowCustomCSS, customCSS} } applyStyle () { - const {fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme, scrollPastEnd, theme} = this.getStyleParams() + const {fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme, scrollPastEnd, theme, allowCustomCSS, customCSS} = this.getStyleParams() this.getWindow().document.getElementById('codeTheme').href = this.GetCodeThemeLink(codeBlockTheme) - this.getWindow().document.getElementById('style').innerHTML = buildStyle(fontFamily, fontSize, codeBlockFontFamily, lineNumber, scrollPastEnd, theme) + this.getWindow().document.getElementById('style').innerHTML = buildStyle(fontFamily, fontSize, codeBlockFontFamily, lineNumber, scrollPastEnd, theme, allowCustomCSS, customCSS) } GetCodeThemeLink (theme) { @@ -390,9 +388,6 @@ export default class MarkdownPreview extends React.Component { } rewriteIframe () { - _.forEach(this.refs.root.contentWindow.document.querySelectorAll('a'), (el) => { - el.removeEventListener('click', this.anchorClickHandler) - }) _.forEach(this.refs.root.contentWindow.document.querySelectorAll('input[type="checkbox"]'), (el) => { el.removeEventListener('click', this.checkboxClickHandler) }) @@ -401,7 +396,7 @@ export default class MarkdownPreview extends React.Component { el.removeEventListener('click', this.linkClickHandler) }) - const { theme, indentSize, showCopyNotification, storagePath } = this.props + const { theme, indentSize, showCopyNotification, storagePath, noteKey } = this.props let { value, codeBlockTheme } = this.props this.refs.root.contentWindow.document.body.setAttribute('data-theme', theme) @@ -413,18 +408,15 @@ export default class MarkdownPreview extends React.Component { }) } let renderedHTML = this.markdown.render(value) + attachmentManagement.migrateAttachments(renderedHTML, storagePath, noteKey) this.refs.root.contentWindow.document.body.innerHTML = attachmentManagement.fixLocalURLS(renderedHTML, storagePath) - _.forEach(this.refs.root.contentWindow.document.querySelectorAll('a'), (el) => { - this.fixDecodedURI(el) - el.addEventListener('click', this.anchorClickHandler) - }) - _.forEach(this.refs.root.contentWindow.document.querySelectorAll('input[type="checkbox"]'), (el) => { el.addEventListener('click', this.checkboxClickHandler) }) _.forEach(this.refs.root.contentWindow.document.querySelectorAll('a'), (el) => { + this.fixDecodedURI(el) el.addEventListener('click', this.linkClickHandler) }) @@ -475,7 +467,7 @@ export default class MarkdownPreview extends React.Component { el.innerHTML = '' diagram.drawSVG(el, opts) _.forEach(el.querySelectorAll('a'), (el) => { - el.addEventListener('click', this.anchorClickHandler) + el.addEventListener('click', this.linkClickHandler) }) } catch (e) { console.error(e) @@ -491,7 +483,7 @@ export default class MarkdownPreview extends React.Component { el.innerHTML = '' diagram.drawSVG(el, {theme: 'simple'}) _.forEach(el.querySelectorAll('a'), (el) => { - el.addEventListener('click', this.anchorClickHandler) + el.addEventListener('click', this.linkClickHandler) }) } catch (e) { console.error(e) @@ -598,10 +590,12 @@ MarkdownPreview.propTypes = { onDoubleClick: PropTypes.func, onMouseUp: PropTypes.func, onMouseDown: PropTypes.func, + onContextMenu: PropTypes.func, className: PropTypes.string, value: PropTypes.string, showCopyNotification: PropTypes.bool, storagePath: PropTypes.string, smartQuotes: PropTypes.bool, + smartArrows: PropTypes.bool, breaks: PropTypes.bool } diff --git a/browser/components/MarkdownSplitEditor.js b/browser/components/MarkdownSplitEditor.js index 2bee5c24..5c35c22c 100644 --- a/browser/components/MarkdownSplitEditor.js +++ b/browser/components/MarkdownSplitEditor.js @@ -131,6 +131,7 @@ class MarkdownSplitEditor extends React.Component { lineNumber={config.preview.lineNumber} scrollPastEnd={config.preview.scrollPastEnd} smartQuotes={config.preview.smartQuotes} + smartArrows={config.preview.smartArrows} breaks={config.preview.breaks} sanitize={config.preview.sanitize} ref='preview' @@ -141,6 +142,8 @@ class MarkdownSplitEditor extends React.Component { showCopyNotification={config.ui.showCopyNotification} storagePath={storage.path} noteKey={noteKey} + customCSS={config.preview.customCSS} + allowCustomCSS={config.preview.allowCustomCSS} /> ) diff --git a/browser/components/SideNavFilter.styl b/browser/components/SideNavFilter.styl index c1b378b8..c9dbd861 100644 --- a/browser/components/SideNavFilter.styl +++ b/browser/components/SideNavFilter.styl @@ -18,7 +18,7 @@ .iconWrap width 20px text-align center - + .counters float right color $ui-inactive-text-color @@ -68,10 +68,9 @@ .menu-button-label position fixed display inline-block - height 32px + height 36px left 44px padding 0 10px - margin-top -8px margin-left 0 overflow ellipsis z-index 10 diff --git a/browser/components/StorageItem.styl b/browser/components/StorageItem.styl index ece97008..0a1b4525 100644 --- a/browser/components/StorageItem.styl +++ b/browser/components/StorageItem.styl @@ -58,8 +58,8 @@ opacity 0 border-top-right-radius 2px border-bottom-right-radius 2px - height 26px - line-height 26px + height 34px + line-height 32px .folderList-item:hover, .folderList-item--active:hover .folderList-item-tooltip diff --git a/browser/components/markdown.styl b/browser/components/markdown.styl index 32dbda73..887375ec 100644 --- a/browser/components/markdown.styl +++ b/browser/components/markdown.styl @@ -293,6 +293,82 @@ kbd line-height 1 padding 3px 5px +$admonition + box-shadow 0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.2) + position relative + margin 1.5625em 0 + padding 0 1.2rem + border-left .4rem solid #448aff + border-radius .2rem + overflow auto + +html .admonition>:last-child + margin-bottom 1.2rem + +.admonition .admonition + margin 1em 0 + +.admonition p + margin-top: 0.5em + +$admonition-icon + position absolute + left 1.2rem + font-family: "Material Icons" + font-size: 24px + display: inline-block; + line-height: 1; + text-transform: none; + letter-spacing: normal; + word-wrap: normal; + white-space: nowrap; + direction: ltr; + + /* Support for all WebKit browsers. */ + -webkit-font-smoothing: antialiased; + /* Support for Safari and Chrome. */ + text-rendering: optimizeLegibility; + + /* Support for Firefox. */ + -moz-osx-font-smoothing: grayscale; + + /* Support for IE. */ + font-feature-settings: 'liga'; + +$admonition-title + margin 0 -1.2rem + padding .8rem 1.2rem .8rem 4rem + border-bottom .1rem solid rgba(68,138,255,.1) + background-color rgba(68,138,255,.1) + font-weight 700 + +.admonition>.admonition-title:last-child + margin-bottom 0 + +admonition_types = { + note: {border-color: #448aff, title-color: rgba(68,138,255,.1), icon: "note"}, + hint: {border-color: #00bfa5, title-color: rgba(0,191,165,.1), icon: "info"}, + danger: {border-color: #ff1744, title-color: rgba(255,23,68,.1), icon: "block"}, + caution: {border-color: #ff9100, title-color: rgba(255,145,0,.1), icon: "warning"}, + error: {border-color: #ff1744, title-color: rgba(255,23,68,.1), icon: "error"}, + attention: {border-color: #64dd17, title-color: rgba(100,221,23,.1), icon: "priority_high"} +} + +for name, val in admonition_types + .admonition.{name} + @extend $admonition + border-left-color: val[border-color] + + .admonition.{name}>.admonition-title + @extend $admonition-title + border-bottom-color: .1rem solid val[title-color] + background-color: val[title-color] + + .admonition.{name}>.admonition-title:before + @extend $admonition-icon + color: val[border-color] + content: val[icon] + themeDarkBackground = darken(#21252B, 10%) themeDarkText = #f9f9f9 themeDarkBorder = lighten(themeDarkBackground, 20%) diff --git a/browser/lib/consts.js b/browser/lib/consts.js index c6b2ea5b..e744e87a 100644 --- a/browser/lib/consts.js +++ b/browser/lib/consts.js @@ -12,6 +12,10 @@ const themes = fs.readdirSync(themePath) }) themes.splice(themes.indexOf('solarized'), 1, 'solarized dark', 'solarized light') +const snippetFile = process.env.NODE_ENV !== 'test' + ? path.join(app.getPath('appData'), 'Boostnote', 'snippets.json') + : '' // return nothing as we specified different path to snippets.json in test + const consts = { FOLDER_COLORS: [ '#E10051', @@ -31,7 +35,8 @@ const consts = { 'Dodger Blue', 'Violet Eggplant' ], - THEMES: ['default'].concat(themes) + THEMES: ['default'].concat(themes), + SNIPPET_FILE: snippetFile } module.exports = consts diff --git a/browser/lib/markdown.js b/browser/lib/markdown.js index b9e1a3eb..4dafa4a3 100644 --- a/browser/lib/markdown.js +++ b/browser/lib/markdown.js @@ -2,6 +2,7 @@ import markdownit from 'markdown-it' import sanitize from './markdown-it-sanitize-html' import emoji from 'markdown-it-emoji' import math from '@rokt33r/markdown-it-math' +import smartArrows from 'markdown-it-smartarrows' import _ from 'lodash' import ConfigManager from 'browser/main/lib/ConfigManager' import katex from 'katex' @@ -141,6 +142,7 @@ class Markdown { } }) this.md.use(require('markdown-it-kbd')) + this.md.use(require('markdown-it-admonition')) const deflate = require('markdown-it-plantuml/lib/deflate') this.md.use(require('markdown-it-plantuml'), '', { @@ -213,6 +215,10 @@ class Markdown { return true }) + if (config.preview.smartArrows) { + this.md.use(smartArrows) + } + // Add line number attribute for scrolling const originalRender = this.md.renderer.render this.md.renderer.render = (tokens, options, env) => { diff --git a/browser/lib/utils.js b/browser/lib/utils.js index f67ca377..441cfbc7 100644 --- a/browser/lib/utils.js +++ b/browser/lib/utils.js @@ -54,7 +54,25 @@ export function escapeHtmlCharacters (text) { : html } +export function isObjectEqual (a, b) { + const aProps = Object.getOwnPropertyNames(a) + const bProps = Object.getOwnPropertyNames(b) + + if (aProps.length !== bProps.length) { + return false + } + + for (var i = 0; i < aProps.length; i++) { + const propName = aProps[i] + if (a[propName] !== b[propName]) { + return false + } + } + return true +} + export default { lastFindInArray, - escapeHtmlCharacters + escapeHtmlCharacters, + isObjectEqual } diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js index 1067d256..a8fc938b 100755 --- a/browser/main/Detail/MarkdownNoteDetail.js +++ b/browser/main/Detail/MarkdownNoteDetail.js @@ -55,6 +55,10 @@ class MarkdownNoteDetail extends React.Component { componentDidMount () { ee.on('topbar:togglelockbutton', this.toggleLockButton) + ee.on('topbar:togglemodebutton', () => { + const reversedType = this.state.editorType === 'SPLIT' ? 'EDITOR_PREVIEW' : 'SPLIT' + this.handleSwitchMode(reversedType) + }) } componentWillReceiveProps (nextProps) { diff --git a/browser/main/Detail/TagSelect.js b/browser/main/Detail/TagSelect.js index e45d05bc..d14c7a8c 100644 --- a/browser/main/Detail/TagSelect.js +++ b/browser/main/Detail/TagSelect.js @@ -44,16 +44,9 @@ class TagSelect extends React.Component { } removeLastTag () { - let { value } = this.props - - value = _.isArray(value) - ? value.slice() - : [] - value.pop() - value = _.uniq(value) - - this.value = value - this.props.onChange() + this.removeTagByCallback((value) => { + value.pop() + }) } reset () { @@ -96,15 +89,22 @@ class TagSelect extends React.Component { } handleTagRemoveButtonClick (tag) { - return (e) => { - let { value } = this.props - + this.removeTagByCallback((value, tag) => { value.splice(value.indexOf(tag), 1) - value = _.uniq(value) + }, tag) + } - this.value = value - this.props.onChange() - } + removeTagByCallback (callback, tag = null) { + let { value } = this.props + + value = _.isArray(value) + ? value.slice() + : [] + callback(value, tag) + value = _.uniq(value) + + this.value = value + this.props.onChange() } render () { @@ -118,7 +118,7 @@ class TagSelect extends React.Component { > #{tag} diff --git a/browser/main/Main.js b/browser/main/Main.js index 9c15a0fe..69b16bc7 100644 --- a/browser/main/Main.js +++ b/browser/main/Main.js @@ -16,6 +16,7 @@ import { hashHistory } from 'react-router' import store from 'browser/main/store' import i18n from 'browser/lib/i18n' import { getLocales } from 'browser/lib/Languages' +import applyShortcuts from 'browser/main/lib/shortcutManager' const path = require('path') const electron = require('electron') const { remote } = electron @@ -159,7 +160,7 @@ class Main extends React.Component { } else { i18n.setLocale('en') } - + applyShortcuts() // Reload all data dataApi.init() .then((data) => { diff --git a/browser/main/NoteList/index.js b/browser/main/NoteList/index.js index 876de0c0..d6b7f846 100644 --- a/browser/main/NoteList/index.js +++ b/browser/main/NoteList/index.js @@ -7,6 +7,7 @@ import moment from 'moment' import _ from 'lodash' import ee from 'browser/main/lib/eventEmitter' import dataApi from 'browser/main/lib/dataApi' +import attachmentManagement from 'browser/main/lib/dataApi/attachmentManagement' import ConfigManager from 'browser/main/lib/ConfigManager' import NoteItem from 'browser/components/NoteItem' import NoteItemSimple from 'browser/components/NoteItemSimple' @@ -662,6 +663,10 @@ class NoteList extends React.Component { title: firstNote.title + ' ' + i18n.__('copy'), content: firstNote.content }) + .then((note) => { + attachmentManagement.cloneAttachments(firstNote, note) + return note + }) .then((note) => { dispatch({ type: 'UPDATE_NOTE', diff --git a/browser/main/SideNav/PreferenceButton.styl b/browser/main/SideNav/PreferenceButton.styl index 97a48982..54513cb6 100644 --- a/browser/main/SideNav/PreferenceButton.styl +++ b/browser/main/SideNav/PreferenceButton.styl @@ -48,4 +48,5 @@ body[data-theme="dark"] line-height normal border-radius 2px opacity 0 - transition 0.1s \ No newline at end of file + transition 0.1s + white-space nowrap diff --git a/browser/main/SideNav/StorageItem.styl b/browser/main/SideNav/StorageItem.styl index 619498ec..a06ecb11 100644 --- a/browser/main/SideNav/StorageItem.styl +++ b/browser/main/SideNav/StorageItem.styl @@ -44,7 +44,7 @@ height 36px padding-left 25px padding-right 15px - line-height 22px + line-height 36px cursor pointer font-size 14px border none @@ -147,7 +147,7 @@ body[data-theme="dark"] background-color $ui-dark-button--active-backgroundColor &:active color $ui-dark-text-color - background-color $ui-dark-button--active-backgroundColor + background-color $ui-dark-button--active-backgroundColor .header--active .header-addFolderButton @@ -180,7 +180,7 @@ body[data-theme="dark"] &:active, &:active:hover color $ui-dark-text-color background-color $ui-dark-button--active-backgroundColor - + diff --git a/browser/main/SideNav/SwitchButton.styl b/browser/main/SideNav/SwitchButton.styl index 54e21b03..36099140 100644 --- a/browser/main/SideNav/SwitchButton.styl +++ b/browser/main/SideNav/SwitchButton.styl @@ -29,6 +29,7 @@ border-radius 2px opacity 0 transition 0.1s + white-space nowrap body[data-theme="white"] .non-active-button diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js index 0159293a..67adf700 100644 --- a/browser/main/SideNav/index.js +++ b/browser/main/SideNav/index.js @@ -185,7 +185,7 @@ class SideNav extends React.Component { ).filter( note => activeTags.every(tag => note.tags.includes(tag)) ) - let relatedTags = new Set() + const relatedTags = new Set() relatedNotes.forEach(note => note.tags.map(tag => relatedTags.add(tag))) return relatedTags } @@ -224,7 +224,7 @@ class SideNav extends React.Component { handleClickNarrowToTag (tag) { const { router } = this.context const { location } = this.props - let listOfTags = this.getActiveTags(location.pathname) + const listOfTags = this.getActiveTags(location.pathname) const indexOfTag = listOfTags.indexOf(tag) if (indexOfTag > -1) { listOfTags.splice(indexOfTag, 1) diff --git a/browser/main/lib/ConfigManager.js b/browser/main/lib/ConfigManager.js index 8a46911e..0f070fc6 100644 --- a/browser/main/lib/ConfigManager.js +++ b/browser/main/lib/ConfigManager.js @@ -1,6 +1,7 @@ import _ from 'lodash' import RcParser from 'browser/lib/RcParser' import i18n from 'browser/lib/i18n' +import ee from 'browser/main/lib/eventEmitter' const OSX = global.process.platform === 'darwin' const win = global.process.platform === 'win32' @@ -20,7 +21,8 @@ export const DEFAULT_CONFIG = { listStyle: 'DEFAULT', // 'DEFAULT', 'SMALL' amaEnabled: true, hotkey: { - toggleMain: OSX ? 'Cmd + Alt + L' : 'Super + Alt + E' + toggleMain: OSX ? 'Cmd + Alt + L' : 'Super + Alt + E', + toggleMode: OSX ? 'Cmd + M' : 'Ctrl + M' }, ui: { language: 'en', @@ -57,6 +59,9 @@ export const DEFAULT_CONFIG = { scrollPastEnd: false, smartQuotes: true, breaks: true, + smartArrows: false, + allowCustomCSS: false, + customCSS: '', sanitize: 'STRICT' // 'STRICT', 'ALLOW_STYLES', 'NONE' }, blog: { @@ -167,6 +172,7 @@ function set (updates) { ipcRenderer.send('config-renew', { config: get() }) + ee.emit('config-renew') } function assignConfigValues (originalConfig, rcConfig) { diff --git a/browser/main/lib/dataApi/attachmentManagement.js b/browser/main/lib/dataApi/attachmentManagement.js index 1373cf94..e1469f38 100644 --- a/browser/main/lib/dataApi/attachmentManagement.js +++ b/browser/main/lib/dataApi/attachmentManagement.js @@ -42,7 +42,7 @@ function copyAttachment (sourceFilePath, storageKey, noteKey, useRandomName = tr const targetStorage = findStorage.findStorage(storageKey) - const inputFile = fs.createReadStream(sourceFilePath) + const inputFileStream = fs.createReadStream(sourceFilePath) let destinationName if (useRandomName) { destinationName = `${uniqueSlug()}${path.extname(sourceFilePath)}` @@ -52,8 +52,10 @@ function copyAttachment (sourceFilePath, storageKey, noteKey, useRandomName = tr const destinationDir = path.join(targetStorage.path, DESTINATION_FOLDER, noteKey) createAttachmentDestinationFolder(targetStorage.path, noteKey) const outputFile = fs.createWriteStream(path.join(destinationDir, destinationName)) - inputFile.pipe(outputFile) - resolve(destinationName) + inputFileStream.pipe(outputFile) + inputFileStream.on('end', () => { + resolve(destinationName) + }) } catch (e) { return reject(e) } @@ -71,6 +73,31 @@ function createAttachmentDestinationFolder (destinationStoragePath, noteKey) { } } +/** + * @description Moves attachments from the old location ('/images') to the new one ('/attachments/noteKey) + * @param renderedHTML HTML of the current note + * @param storagePath Storage path of the current note + * @param noteKey Key of the current note + */ +function migrateAttachments (renderedHTML, storagePath, noteKey) { + if (sander.existsSync(path.join(storagePath, 'images'))) { + const attachments = getAttachmentsInContent(renderedHTML) || [] + if (attachments !== []) { + createAttachmentDestinationFolder(storagePath, noteKey) + } + for (const attachment of attachments) { + const attachmentBaseName = path.basename(attachment) + const possibleLegacyPath = path.join(storagePath, 'images', attachmentBaseName) + if (sander.existsSync(possibleLegacyPath)) { + const destinationPath = path.join(storagePath, DESTINATION_FOLDER, attachmentBaseName) + if (!sander.existsSync(destinationPath)) { + sander.copyFileSync(possibleLegacyPath).to(destinationPath) + } + } + } + } +} + /** * @description Fixes the URLs embedded in the generated HTML so that they again refer actual local files. * @param {String} renderedHTML HTML in that the links should be fixed @@ -149,8 +176,9 @@ function handlePastImageEvent (codeEditor, storageKey, noteKey, dataTransferItem base64data = reader.result.replace(/^data:image\/png;base64,/, '') base64data += base64data.replace('+', ' ') const binaryData = new Buffer(base64data, 'base64').toString('binary') - fs.writeFile(imagePath, binaryData, 'binary') - const imageMd = generateAttachmentMarkdown(imageName, imagePath, true) + fs.writeFileSync(imagePath, binaryData, 'binary') + const imageReferencePath = path.join(STORAGE_FOLDER_PLACEHOLDER, noteKey, imageName) + const imageMd = generateAttachmentMarkdown(imageName, imageReferencePath, true) codeEditor.insertAttachmentMd(imageMd) } reader.readAsDataURL(blob) @@ -163,7 +191,7 @@ function handlePastImageEvent (codeEditor, storageKey, noteKey, dataTransferItem */ function getAttachmentsInContent (markdownContent) { const preparedInput = markdownContent.replace(new RegExp(mdurl.encode(path.sep), 'g'), path.sep) - const regexp = new RegExp(STORAGE_FOLDER_PLACEHOLDER + escapeStringRegexp(path.sep) + '([a-zA-Z0-9]|-)+' + escapeStringRegexp(path.sep) + '[a-zA-Z0-9]+(\\.[a-zA-Z0-9]+)?', 'g') + const regexp = new RegExp(STORAGE_FOLDER_PLACEHOLDER + escapeStringRegexp(path.sep) + '?([a-zA-Z0-9]|-)*' + escapeStringRegexp(path.sep) + '[a-zA-Z0-9]+(\\.[a-zA-Z0-9]+)?', 'g') return preparedInput.match(regexp) } @@ -174,7 +202,7 @@ function getAttachmentsInContent (markdownContent) { * @returns {String[]} Absolute paths of the referenced attachments */ function getAbsolutePathsOfAttachmentsInContent (markdownContent, storagePath) { - const temp = getAttachmentsInContent(markdownContent) + const temp = getAttachmentsInContent(markdownContent) || [] const result = [] for (const relativePath of temp) { result.push(relativePath.replace(new RegExp(STORAGE_FOLDER_PLACEHOLDER, 'g'), path.join(storagePath, DESTINATION_FOLDER))) @@ -198,8 +226,19 @@ function moveAttachments (oldPath, newPath, noteKey, newNoteKey, noteContent) { if (fse.existsSync(src)) { fse.moveSync(src, dest) } + return replaceNoteKeyWithNewNoteKey(noteContent, noteKey, newNoteKey) +} + +/** + * Modifies the given content so that in all attachment references the oldNoteKey is replaced by the new one + * @param noteContent content that should be modified + * @param oldNoteKey note key to be replaced + * @param newNoteKey note key serving as a replacement + * @returns {String} modified note content + */ +function replaceNoteKeyWithNewNoteKey (noteContent, oldNoteKey, newNoteKey) { if (noteContent) { - return noteContent.replace(new RegExp(STORAGE_FOLDER_PLACEHOLDER + escapeStringRegexp(path.sep) + noteKey, 'g'), path.join(STORAGE_FOLDER_PLACEHOLDER, newNoteKey)) + return noteContent.replace(new RegExp(STORAGE_FOLDER_PLACEHOLDER + escapeStringRegexp(path.sep) + oldNoteKey, 'g'), path.join(STORAGE_FOLDER_PLACEHOLDER, newNoteKey)) } return noteContent } @@ -211,7 +250,7 @@ function moveAttachments (oldPath, newPath, noteKey, newNoteKey, noteContent) { * @returns {String} Input without the references */ function removeStorageAndNoteReferences (input, noteKey) { - return input.replace(new RegExp(mdurl.encode(path.sep), 'g'), path.sep).replace(new RegExp(STORAGE_FOLDER_PLACEHOLDER + escapeStringRegexp(path.sep) + noteKey, 'g'), DESTINATION_FOLDER) + return input.replace(new RegExp(mdurl.encode(path.sep), 'g'), path.sep).replace(new RegExp(STORAGE_FOLDER_PLACEHOLDER + '(' + escapeStringRegexp(path.sep) + noteKey + ')?', 'g'), DESTINATION_FOLDER) } /** @@ -232,6 +271,9 @@ function deleteAttachmentFolder (storageKey, noteKey) { * @param noteKey NoteKey of the current note. Is used to determine the belonging attachment folder. */ function deleteAttachmentsNotPresentInNote (markdownContent, storageKey, noteKey) { + if (storageKey == null || noteKey == null || markdownContent == null) { + return + } const targetStorage = findStorage.findStorage(storageKey) const attachmentFolder = path.join(targetStorage.path, DESTINATION_FOLDER, noteKey) const attachmentsInNote = getAttachmentsInContent(markdownContent) @@ -241,11 +283,10 @@ function deleteAttachmentsNotPresentInNote (markdownContent, storageKey, noteKey attachmentsInNoteOnlyFileNames.push(attachmentsInNote[i].replace(new RegExp(STORAGE_FOLDER_PLACEHOLDER + escapeStringRegexp(path.sep) + noteKey + escapeStringRegexp(path.sep), 'g'), '')) } } - if (fs.existsSync(attachmentFolder)) { fs.readdir(attachmentFolder, (err, files) => { if (err) { - console.error("Error reading directory '" + attachmentFolder + "'. Error:") + console.error('Error reading directory \'' + attachmentFolder + '\'. Error:') console.error(err) return } @@ -254,17 +295,44 @@ function deleteAttachmentsNotPresentInNote (markdownContent, storageKey, noteKey const absolutePathOfFile = path.join(targetStorage.path, DESTINATION_FOLDER, noteKey, file) fs.unlink(absolutePathOfFile, (err) => { if (err) { - console.error("Could not delete '%s'", absolutePathOfFile) + console.error('Could not delete \'%s\'', absolutePathOfFile) console.error(err) return } - console.info("File '" + absolutePathOfFile + "' deleted because it was not included in the content of the note") + console.info('File \'' + absolutePathOfFile + '\' deleted because it was not included in the content of the note') }) } }) }) } else { - console.info("Attachment folder ('" + attachmentFolder + "') did not exist..") + console.debug('Attachment folder (\'' + attachmentFolder + '\') did not exist..') + } +} + +/** + * Clones the attachments of a given note. + * Copies the attachments to their new destination and updates the content of the new note so that the attachment-links again point to the correct destination. + * @param oldNote Note that is being cloned + * @param newNote Clone of the note + */ +function cloneAttachments (oldNote, newNote) { + if (newNote.type === 'MARKDOWN_NOTE') { + const oldStorage = findStorage.findStorage(oldNote.storage) + const newStorage = findStorage.findStorage(newNote.storage) + const attachmentsPaths = getAbsolutePathsOfAttachmentsInContent(oldNote.content, oldStorage.path) || [] + + const destinationFolder = path.join(newStorage.path, DESTINATION_FOLDER, newNote.key) + if (!sander.existsSync(destinationFolder)) { + sander.mkdirSync(destinationFolder) + } + + for (const attachment of attachmentsPaths) { + const destination = path.join(newStorage.path, DESTINATION_FOLDER, newNote.key, path.basename(attachment)) + sander.copyFileSync(attachment).to(destination) + } + newNote.content = replaceNoteKeyWithNewNoteKey(newNote.content, oldNote.key, newNote.key) + } else { + console.debug('Cloning of the attachment was skipped since it only works for MARKDOWN_NOTEs') } } @@ -280,6 +348,8 @@ module.exports = { deleteAttachmentFolder, deleteAttachmentsNotPresentInNote, moveAttachments, + cloneAttachments, + migrateAttachments, STORAGE_FOLDER_PLACEHOLDER, DESTINATION_FOLDER } diff --git a/browser/main/lib/dataApi/createSnippet.js b/browser/main/lib/dataApi/createSnippet.js new file mode 100644 index 00000000..5d189217 --- /dev/null +++ b/browser/main/lib/dataApi/createSnippet.js @@ -0,0 +1,26 @@ +import fs from 'fs' +import crypto from 'crypto' +import consts from 'browser/lib/consts' +import fetchSnippet from 'browser/main/lib/dataApi/fetchSnippet' + +function createSnippet (snippetFile) { + return new Promise((resolve, reject) => { + const newSnippet = { + id: crypto.randomBytes(16).toString('hex'), + name: 'Unnamed snippet', + prefix: [], + content: '' + } + fetchSnippet(null, snippetFile).then((snippets) => { + snippets.push(newSnippet) + fs.writeFile(snippetFile || consts.SNIPPET_FILE, JSON.stringify(snippets, null, 4), (err) => { + if (err) reject(err) + resolve(newSnippet) + }) + }).catch((err) => { + reject(err) + }) + }) +} + +module.exports = createSnippet diff --git a/browser/main/lib/dataApi/deleteFolder.js b/browser/main/lib/dataApi/deleteFolder.js index 908677e1..0c7486f5 100644 --- a/browser/main/lib/dataApi/deleteFolder.js +++ b/browser/main/lib/dataApi/deleteFolder.js @@ -5,6 +5,7 @@ const resolveStorageNotes = require('./resolveStorageNotes') const CSON = require('@rokt33r/season') const sander = require('sander') const { findStorage } = require('browser/lib/findStorage') +const deleteSingleNote = require('./deleteNote') /** * @param {String} storageKey @@ -49,11 +50,7 @@ function deleteFolder (storageKey, folderKey) { const deleteAllNotes = targetNotes .map(function deleteNote (note) { - const notePath = path.join(storage.path, 'notes', note.key + '.cson') - return sander.unlink(notePath) - .catch(function (err) { - console.warn('Failed to delete', notePath, err) - }) + return deleteSingleNote(storageKey, note.key) }) return Promise.all(deleteAllNotes) .then(() => storage) diff --git a/browser/main/lib/dataApi/deleteSnippet.js b/browser/main/lib/dataApi/deleteSnippet.js new file mode 100644 index 00000000..0e446886 --- /dev/null +++ b/browser/main/lib/dataApi/deleteSnippet.js @@ -0,0 +1,17 @@ +import fs from 'fs' +import consts from 'browser/lib/consts' +import fetchSnippet from 'browser/main/lib/dataApi/fetchSnippet' + +function deleteSnippet (snippet, snippetFile) { + return new Promise((resolve, reject) => { + fetchSnippet(null, snippetFile).then((snippets) => { + snippets = snippets.filter(currentSnippet => currentSnippet.id !== snippet.id) + fs.writeFile(snippetFile || consts.SNIPPET_FILE, JSON.stringify(snippets, null, 4), (err) => { + if (err) reject(err) + resolve(snippet) + }) + }) + }) +} + +module.exports = deleteSnippet diff --git a/browser/main/lib/dataApi/fetchSnippet.js b/browser/main/lib/dataApi/fetchSnippet.js new file mode 100644 index 00000000..456a5090 --- /dev/null +++ b/browser/main/lib/dataApi/fetchSnippet.js @@ -0,0 +1,20 @@ +import fs from 'fs' +import consts from 'browser/lib/consts' + +function fetchSnippet (id, snippetFile) { + return new Promise((resolve, reject) => { + fs.readFile(snippetFile || consts.SNIPPET_FILE, 'utf8', (err, data) => { + if (err) { + reject(err) + } + const snippets = JSON.parse(data) + if (id) { + const snippet = snippets.find(snippet => { return snippet.id === id }) + resolve(snippet) + } + resolve(snippets) + }) + }) +} + +module.exports = fetchSnippet diff --git a/browser/main/lib/dataApi/index.js b/browser/main/lib/dataApi/index.js index 311ca2f3..7c57e016 100644 --- a/browser/main/lib/dataApi/index.js +++ b/browser/main/lib/dataApi/index.js @@ -13,6 +13,10 @@ const dataApi = { deleteNote: require('./deleteNote'), moveNote: require('./moveNote'), migrateFromV5Storage: require('./migrateFromV5Storage'), + createSnippet: require('./createSnippet'), + deleteSnippet: require('./deleteSnippet'), + updateSnippet: require('./updateSnippet'), + fetchSnippet: require('./fetchSnippet'), _migrateFromV6Storage: require('./migrateFromV6Storage'), _resolveStorageData: require('./resolveStorageData'), diff --git a/browser/main/lib/dataApi/updateSnippet.js b/browser/main/lib/dataApi/updateSnippet.js new file mode 100644 index 00000000..f2310b8e --- /dev/null +++ b/browser/main/lib/dataApi/updateSnippet.js @@ -0,0 +1,33 @@ +import fs from 'fs' +import consts from 'browser/lib/consts' + +function updateSnippet (snippet, snippetFile) { + return new Promise((resolve, reject) => { + const snippets = JSON.parse(fs.readFileSync(snippetFile || consts.SNIPPET_FILE, 'utf-8')) + + for (let i = 0; i < snippets.length; i++) { + const currentSnippet = snippets[i] + + if (currentSnippet.id === snippet.id) { + if ( + currentSnippet.name === snippet.name && + currentSnippet.prefix === snippet.prefix && + currentSnippet.content === snippet.content + ) { + // if everything is the same then don't write to disk + resolve(snippets) + } else { + currentSnippet.name = snippet.name + currentSnippet.prefix = snippet.prefix + currentSnippet.content = snippet.content + fs.writeFile(snippetFile || consts.SNIPPET_FILE, JSON.stringify(snippets, null, 4), (err) => { + if (err) reject(err) + resolve(snippets) + }) + } + } + } + }) +} + +module.exports = updateSnippet diff --git a/browser/main/lib/shortcut.js b/browser/main/lib/shortcut.js new file mode 100644 index 00000000..a6f33196 --- /dev/null +++ b/browser/main/lib/shortcut.js @@ -0,0 +1,7 @@ +import ee from 'browser/main/lib/eventEmitter' + +module.exports = { + 'toggleMode': () => { + ee.emit('topbar:togglemodebutton') + } +} diff --git a/browser/main/lib/shortcutManager.js b/browser/main/lib/shortcutManager.js new file mode 100644 index 00000000..2b937aea --- /dev/null +++ b/browser/main/lib/shortcutManager.js @@ -0,0 +1,40 @@ +import Mousetrap from 'mousetrap' +import CM from 'browser/main/lib/ConfigManager' +import ee from 'browser/main/lib/eventEmitter' +import { isObjectEqual } from 'browser/lib/utils' +require('mousetrap-global-bind') +const functions = require('./shortcut') + +let shortcuts = CM.get().hotkey + +ee.on('config-renew', function () { + // only update if hotkey changed ! + const newHotkey = CM.get().hotkey + if (!isObjectEqual(newHotkey, shortcuts)) { + updateShortcut(newHotkey) + } +}) + +function updateShortcut (newHotkey) { + Mousetrap.reset() + shortcuts = newHotkey + applyShortcuts(newHotkey) +} + +function formatShortcut (shortcut) { + return shortcut.toLowerCase().replace(/ /g, '') +} + +function applyShortcuts (shortcuts) { + for (const shortcut in shortcuts) { + const toggler = formatShortcut(shortcuts[shortcut]) + // only bind if the function for that shortcut exists + if (functions[shortcut]) { + Mousetrap.bindGlobal(toggler, functions[shortcut]) + } + } +} + +applyShortcuts(CM.get().hotkey) + +module.exports = applyShortcuts diff --git a/browser/main/modals/PreferencesModal/HotkeyTab.js b/browser/main/modals/PreferencesModal/HotkeyTab.js index 8cbf772f..671e1516 100644 --- a/browser/main/modals/PreferencesModal/HotkeyTab.js +++ b/browser/main/modals/PreferencesModal/HotkeyTab.js @@ -67,7 +67,8 @@ class HotkeyTab extends React.Component { handleHotkeyChange (e) { const { config } = this.state config.hotkey = { - toggleMain: this.refs.toggleMain.value + toggleMain: this.refs.toggleMain.value, + toggleMode: this.refs.toggleMode.value } this.setState({ config @@ -115,6 +116,17 @@ class HotkeyTab extends React.Component { /> +
+
{i18n.__('Toggle editor mode')}
+
+ this.handleHotkeyChange(e)} + ref='toggleMode' + value={config.hotkey.toggleMode} + type='text' + /> +
+
+
+ + + + ) + } +} + +export default CSSModules(SnippetList, styles) diff --git a/browser/main/modals/PreferencesModal/SnippetTab.js b/browser/main/modals/PreferencesModal/SnippetTab.js new file mode 100644 index 00000000..67e9ace6 --- /dev/null +++ b/browser/main/modals/PreferencesModal/SnippetTab.js @@ -0,0 +1,116 @@ +import React from 'react' +import CSSModules from 'browser/lib/CSSModules' +import styles from './SnippetTab.styl' +import SnippetEditor from './SnippetEditor' +import i18n from 'browser/lib/i18n' +import dataApi from 'browser/main/lib/dataApi' +import SnippetList from './SnippetList' +import eventEmitter from 'browser/main/lib/eventEmitter' + +class SnippetTab extends React.Component { + constructor (props) { + super(props) + this.state = { + currentSnippet: null + } + this.changeDelay = null + } + + handleSnippetNameOrPrefixChange () { + clearTimeout(this.changeDelay) + this.changeDelay = setTimeout(() => { + // notify the snippet editor that the name or prefix of snippet has been changed + this.snippetEditor.onSnippetNameOrPrefixChanged(this.state.currentSnippet) + eventEmitter.emit('snippetList:reload') + }, 500) + } + + handleSnippetClick (snippet) { + const { currentSnippet } = this.state + if (currentSnippet === null || currentSnippet.id !== snippet.id) { + dataApi.fetchSnippet(snippet.id).then(changedSnippet => { + // notify the snippet editor to load the content of the new snippet + this.snippetEditor.onSnippetChanged(changedSnippet) + this.setState({currentSnippet: changedSnippet}) + }) + } + } + + onSnippetNameOrPrefixChanged (e, type) { + const newSnippet = Object.assign({}, this.state.currentSnippet) + if (type === 'name') { + newSnippet.name = e.target.value + } else { + newSnippet.prefix = e.target.value + } + this.setState({ currentSnippet: newSnippet }) + this.handleSnippetNameOrPrefixChange() + } + + handleDeleteSnippet (snippet) { + // prevent old snippet still display when deleted + if (snippet.id === this.state.currentSnippet.id) { + this.setState({currentSnippet: null}) + } + } + + render () { + const { config, storageKey } = this.props + const { currentSnippet } = this.state + + let editorFontSize = parseInt(config.editor.fontSize, 10) + if (!(editorFontSize > 0 && editorFontSize < 101)) editorFontSize = 14 + let editorIndentSize = parseInt(config.editor.indentSize, 10) + if (!(editorFontSize > 0 && editorFontSize < 132)) editorIndentSize = 4 + return ( +
+
{i18n.__('Snippets')}
+ +
+
+
{i18n.__('Snippet name')}
+
+ { this.onSnippetNameOrPrefixChanged(e, 'name') }} + type='text' /> +
+
+
+
{i18n.__('Snippet prefix')}
+
+ { this.onSnippetNameOrPrefixChanged(e, 'prefix') }} + type='text' /> +
+
+
+ { this.snippetEditor = ref }} /> +
+
+
+ ) + } +} + +SnippetTab.PropTypes = { +} + +export default CSSModules(SnippetTab, styles) diff --git a/browser/main/modals/PreferencesModal/SnippetTab.styl b/browser/main/modals/PreferencesModal/SnippetTab.styl new file mode 100644 index 00000000..118c56ed --- /dev/null +++ b/browser/main/modals/PreferencesModal/SnippetTab.styl @@ -0,0 +1,180 @@ +@import('./Tab') +@import('./ConfigTab') + +.root + padding 15px + white-space pre + line-height 1.4 + color alpha($ui-text-color, 90%) + width 100% + font-size 14px + +.group + margin-bottom 45px + +.group-header + @extend .header + color $ui-text-color + +.group-header2 + font-size 20px + color $ui-text-color + margin-bottom 15px + margin-top 30px + +.group-section + margin-bottom 20px + display flex + line-height 30px + +.group-section-label + width 150px + text-align left + margin-right 10px + font-size 14px + +.group-section-control + flex 1 + margin-left 5px + +.group-section-control select + outline none + border 1px solid $ui-borderColor + font-size 16px + height 30px + width 250px + margin-bottom 5px + background-color transparent + +.group-section-control-input + height 30px + vertical-align middle + width 400px + font-size $tab--button-font-size + border solid 1px $border-color + border-radius 2px + padding 0 5px + outline none + &:disabled + background-color $ui-input--disabled-backgroundColor + +.group-control-button + height 30px + border none + border-top-right-radius 2px + border-bottom-right-radius 2px + colorPrimaryButton() + vertical-align middle + padding 0 20px + +.group-checkBoxSection + margin-bottom 15px + display flex + line-height 30px + padding-left 15px + +.group-control + padding-top 10px + box-sizing border-box + height 40px + text-align right + :global + .alert + display inline-block + position absolute + top 60px + right 15px + font-size 14px + .success + color #1EC38B + .error + color red + .warning + color #FFA500 + +.snippet-list + width 30% + height calc(100% - 200px) + position absolute + + .snippets + height calc(100% - 8px) + overflow scroll + background: #f5f5f5 + + .snippet-item + height 50px + font-size 15px + line-height 50px + padding 0 5% + cursor pointer + position relative + + &::after + width 90% + height 1px + background rgba(0, 0, 0, 0.1) + position absolute + top 100% + left 5% + content '' + + &:hover + background darken(#f5f5f5, 5) + +.snippet-detail + width 70% + height calc(100% - 200px) + position absolute + left 33% + +.SnippetEditor + position absolute + width 100% + height 90% + +body[data-theme="default"], body[data-theme="white"] + .snippets + background $ui-backgroundColor + .snippet-item + color black + &::after + background $ui-borderColor + &:hover + background darken($ui-backgroundColor, 5) + +body[data-theme="dark"] + .snippets + background $ui-dark-backgroundColor + .snippet-item + color white + &::after + background $ui-dark-borderColor + &:hover + background darken($ui-dark-backgroundColor, 5) + .snippet-detail + color white + +body[data-theme="solarized-dark"] + .snippets + background $ui-solarized-dark-backgroundColor + .snippet-item + color white + &::after + background $ui-solarized-dark-borderColor + &:hover + background darken($ui-solarized-dark-backgroundColor, 5) + .snippet-detail + color white + +body[data-theme="monokai"] + .snippets + background $ui-monokai-backgroundColor + .snippet-item + color White + &::after + background $ui-monokai-borderColor + &:hover + background darken($ui-monokai-backgroundColor, 5) + .snippet-detail + color white diff --git a/browser/main/modals/PreferencesModal/UiTab.js b/browser/main/modals/PreferencesModal/UiTab.js index d2a2f178..ce149f65 100644 --- a/browser/main/modals/PreferencesModal/UiTab.js +++ b/browser/main/modals/PreferencesModal/UiTab.js @@ -28,6 +28,8 @@ class UiTab extends React.Component { componentDidMount () { CodeMirror.autoLoadMode(this.codeMirrorInstance.getCodeMirror(), 'javascript') + CodeMirror.autoLoadMode(this.customCSSCM.getCodeMirror(), 'css') + this.customCSSCM.getCodeMirror().setSize('400px', '400px') this.handleSettingDone = () => { this.setState({UiAlert: { type: 'success', @@ -98,7 +100,10 @@ class UiTab extends React.Component { scrollPastEnd: this.refs.previewScrollPastEnd.checked, smartQuotes: this.refs.previewSmartQuotes.checked, breaks: this.refs.previewBreaks.checked, - sanitize: this.refs.previewSanitize.value + smartArrows: this.refs.previewSmartArrows.checked, + sanitize: this.refs.previewSanitize.value, + allowCustomCSS: this.refs.previewAllowCustomCSS.checked, + customCSS: this.customCSSCM.getCodeMirror().getValue() } } @@ -159,6 +164,7 @@ class UiTab extends React.Component { const { config, codemirrorTheme } = this.state const codemirrorSampleCode = 'function iamHappy (happy) {\n\tif (happy) {\n\t console.log("I am Happy!")\n\t} else {\n\t console.log("I am not Happy!")\n\t}\n};' const enableEditRulersStyle = config.editor.enableRulers ? 'block' : 'none' + const customCSS = config.preview.customCSS return (
@@ -234,7 +240,7 @@ class UiTab extends React.Component { disabled={OSX} type='checkbox' />  - Disable Direct Write(It will be applied after restarting) + {i18n.__('Disable Direct Write (It will be applied after restarting)')}
: null @@ -474,7 +480,7 @@ class UiTab extends React.Component { ref='previewSmartQuotes' type='checkbox' />  - Enable smart quotes + {i18n.__('Enable smart quotes')}
@@ -484,7 +490,17 @@ class UiTab extends React.Component { ref='previewBreaks' type='checkbox' />  - Render newlines in Markdown paragraphs as <br> + {i18n.__('Render newlines in Markdown paragraphs as
')} + +
+
+
@@ -569,6 +585,20 @@ class UiTab extends React.Component { /> +
+
+ {i18n.__('Custom CSS')} +
+
+ this.handleUIChange(e)} + checked={config.preview.allowCustomCSS} + ref='previewAllowCustomCSS' + type='checkbox' + />  + {i18n.__('Allow custom CSS for preview')} + this.handleUIChange(e)} ref={e => (this.customCSSCM = e)} value={config.preview.customCSS} options={{ lineNumbers: true, mode: 'css', theme: codemirrorTheme }} /> +
+