this.handleDropImage(e)}
/>
)
}
- createSpellCheckPanel () {
+ createSpellCheckPanel() {
const panel = document.createElement('div')
panel.className = 'panel bottom'
panel.id = 'editor-bottom-panel'
const dropdown = document.createElement('select')
dropdown.title = 'Spellcheck'
dropdown.className = styles['spellcheck-select']
- dropdown.addEventListener('change', (e) => spellcheck.setLanguage(this.editor, dropdown.value))
+ dropdown.addEventListener('change', e =>
+ spellcheck.setLanguage(this.editor, dropdown.value)
+ )
const options = spellcheck.getAvailableDictionaries()
for (const op of options) {
const option = document.createElement('option')
@@ -1214,7 +1294,8 @@ CodeEditor.propTypes = {
spellCheck: PropTypes.bool,
enableMarkdownLint: PropTypes.bool,
customMarkdownLintConfig: PropTypes.string,
- deleteUnusedAttachments: PropTypes.bool
+ deleteUnusedAttachments: PropTypes.bool,
+ RTL: PropTypes.bool
}
CodeEditor.defaultProps = {
@@ -1230,5 +1311,6 @@ CodeEditor.defaultProps = {
enableMarkdownLint: DEFAULT_CONFIG.editor.enableMarkdownLint,
customMarkdownLintConfig: DEFAULT_CONFIG.editor.customMarkdownLintConfig,
prettierConfig: DEFAULT_CONFIG.editor.prettierConfig,
- deleteUnusedAttachments: DEFAULT_CONFIG.editor.deleteUnusedAttachments
+ deleteUnusedAttachments: DEFAULT_CONFIG.editor.deleteUnusedAttachments,
+ RTL: false
}
diff --git a/browser/components/ColorPicker.js b/browser/components/ColorPicker.js
index 9e0199c2..4d4e80e4 100644
--- a/browser/components/ColorPicker.js
+++ b/browser/components/ColorPicker.js
@@ -7,7 +7,7 @@ import styles from './ColorPicker.styl'
const componentHeight = 330
class ColorPicker extends React.Component {
- constructor (props) {
+ constructor(props) {
super(props)
this.state = {
@@ -18,21 +18,21 @@ class ColorPicker extends React.Component {
this.handleConfirm = this.handleConfirm.bind(this)
}
- componentWillReceiveProps (nextProps) {
+ componentWillReceiveProps(nextProps) {
this.onColorChange(nextProps.color)
}
- onColorChange (color) {
+ onColorChange(color) {
this.setState({
color
})
}
- handleConfirm () {
+ handleConfirm() {
this.props.onConfirm(this.state.color)
}
- render () {
+ render() {
const { onReset, onCancel, targetRect } = this.props
const { color } = this.state
@@ -44,13 +44,22 @@ class ColorPicker extends React.Component {
}
return (
-
+
-
-
-
+
+
+
)
diff --git a/browser/components/MarkdownEditor.js b/browser/components/MarkdownEditor.js
index cd885fd9..d07ffb0e 100644
--- a/browser/components/MarkdownEditor.js
+++ b/browser/components/MarkdownEditor.js
@@ -1,3 +1,4 @@
+/* eslint-disable camelcase */
import PropTypes from 'prop-types'
import React from 'react'
import CSSModules from 'browser/lib/CSSModules'
@@ -10,7 +11,7 @@ import ConfigManager from 'browser/main/lib/ConfigManager'
import attachmentManagement from 'browser/main/lib/dataApi/attachmentManagement'
class MarkdownEditor extends React.Component {
- constructor (props) {
+ constructor(props) {
super(props)
// char codes for ctrl + w
@@ -20,142 +21,171 @@ class MarkdownEditor extends React.Component {
this.supportMdSelectionBold = [16, 17, 186]
this.state = {
- status: props.config.editor.switchPreview === 'RIGHTCLICK' ? props.config.editor.delfaultStatus : 'CODE',
+ status:
+ props.config.editor.switchPreview === 'RIGHTCLICK'
+ ? props.config.editor.delfaultStatus
+ : 'CODE',
renderValue: props.value,
keyPressed: new Set(),
isLocked: props.isLocked
}
- this.lockEditorCode = () => this.handleLockEditor()
+ this.lockEditorCode = this.handleLockEditor.bind(this)
+ this.focusEditor = this.focusEditor.bind(this)
+
+ this.previewRef = React.createRef()
}
- componentDidMount () {
+ componentDidMount() {
this.value = this.refs.code.value
eventEmitter.on('editor:lock', this.lockEditorCode)
- eventEmitter.on('editor:focus', this.focusEditor.bind(this))
+ eventEmitter.on('editor:focus', this.focusEditor)
}
- componentDidUpdate () {
+ componentDidUpdate() {
this.value = this.refs.code.value
}
- componentWillReceiveProps (props) {
+ UNSAFE_componentWillReceiveProps(props) {
if (props.value !== this.props.value) {
this.queueRendering(props.value)
}
}
- componentWillUnmount () {
+ componentWillUnmount() {
this.cancelQueue()
eventEmitter.off('editor:lock', this.lockEditorCode)
- eventEmitter.off('editor:focus', this.focusEditor.bind(this))
+ eventEmitter.off('editor:focus', this.focusEditor)
}
- focusEditor () {
- this.setState({
- status: 'CODE'
- }, () => {
- this.refs.code.focus()
- })
+ focusEditor() {
+ this.setState(
+ {
+ status: 'CODE'
+ },
+ () => {
+ if (this.refs.code == null) {
+ return
+ }
+ this.refs.code.focus()
+ }
+ )
}
- queueRendering (value) {
+ queueRendering(value) {
clearTimeout(this.renderTimer)
this.renderTimer = setTimeout(() => {
this.renderPreview(value)
}, 500)
}
- cancelQueue () {
+ cancelQueue() {
clearTimeout(this.renderTimer)
}
- renderPreview (value) {
+ renderPreview(value) {
this.setState({
renderValue: value
})
}
- setValue (value) {
+ setValue(value) {
this.refs.code.setValue(value)
}
- handleChange (e) {
+ handleChange(e) {
this.value = this.refs.code.value
this.props.onChange(e)
}
- handleContextMenu (e) {
+ handleContextMenu(e) {
if (this.state.isLocked) return
const { config } = this.props
if (config.editor.switchPreview === 'RIGHTCLICK') {
const newStatus = this.state.status === 'PREVIEW' ? 'CODE' : 'PREVIEW'
- this.setState({
- status: newStatus
- }, () => {
- if (newStatus === 'CODE') {
- this.refs.code.focus()
- } else {
- this.refs.preview.focus()
- }
- eventEmitter.emit('topbar:togglelockbutton', this.state.status)
+ this.setState(
+ {
+ status: newStatus
+ },
+ () => {
+ if (newStatus === 'CODE') {
+ this.refs.code.focus()
+ } else {
+ this.previewRef.current.focus()
+ }
+ eventEmitter.emit('topbar:togglelockbutton', this.state.status)
- const newConfig = Object.assign({}, config)
- newConfig.editor.delfaultStatus = newStatus
- ConfigManager.set(newConfig)
- })
+ const newConfig = Object.assign({}, config)
+ newConfig.editor.delfaultStatus = newStatus
+ ConfigManager.set(newConfig)
+ }
+ )
}
}
- handleBlur (e) {
+ handleBlur(e) {
if (this.state.isLocked) return
this.setState({ keyPressed: new Set() })
const { config } = this.props
- if (config.editor.switchPreview === 'BLUR' ||
- (config.editor.switchPreview === 'DBL_CLICK' && this.state.status === 'CODE')
+ if (
+ config.editor.switchPreview === 'BLUR' ||
+ (config.editor.switchPreview === 'DBL_CLICK' &&
+ this.state.status === 'CODE')
) {
const cursorPosition = this.refs.code.editor.getCursor()
- this.setState({
- status: 'PREVIEW'
- }, () => {
- this.refs.preview.focus()
- this.refs.preview.scrollTo(cursorPosition.line)
- })
+ this.setState(
+ {
+ status: 'PREVIEW'
+ },
+ () => {
+ this.previewRef.current.focus()
+ this.previewRef.current.scrollToRow(cursorPosition.line)
+ }
+ )
eventEmitter.emit('topbar:togglelockbutton', this.state.status)
}
}
- handleDoubleClick (e) {
+ handleDoubleClick(e) {
if (this.state.isLocked) return
- this.setState({keyPressed: new Set()})
+ this.setState({ keyPressed: new Set() })
const { config } = this.props
if (config.editor.switchPreview === 'DBL_CLICK') {
- this.setState({
- status: 'CODE'
- }, () => {
- this.refs.code.focus()
- eventEmitter.emit('topbar:togglelockbutton', this.state.status)
- })
+ this.setState(
+ {
+ status: 'CODE'
+ },
+ () => {
+ this.refs.code.focus()
+ eventEmitter.emit('topbar:togglelockbutton', this.state.status)
+ }
+ )
}
}
- handlePreviewMouseDown (e) {
+ handlePreviewMouseDown(e) {
this.previewMouseDownedAt = new Date()
}
- handlePreviewMouseUp (e) {
+ handlePreviewMouseUp(e) {
const { config } = this.props
- if (config.editor.switchPreview === 'BLUR' && new Date() - this.previewMouseDownedAt < 200) {
- this.setState({
- status: 'CODE'
- }, () => {
- this.refs.code.focus()
- })
+ if (
+ config.editor.switchPreview === 'BLUR' &&
+ new Date() - this.previewMouseDownedAt < 200
+ ) {
+ this.setState(
+ {
+ status: 'CODE'
+ },
+ () => {
+ this.refs.code.focus()
+ }
+ )
eventEmitter.emit('topbar:togglelockbutton', this.state.status)
}
}
- handleCheckboxClick (e) {
+ handleCheckboxClick(e) {
e.preventDefault()
e.stopPropagation()
const idMatch = /checkbox-([0-9]+)/
@@ -164,9 +194,9 @@ class MarkdownEditor extends React.Component {
const checkReplace = /\[x]/i
const uncheckReplace = /\[ ]/
if (idMatch.test(e.target.getAttribute('id'))) {
- const lineIndex = parseInt(e.target.getAttribute('id').match(idMatch)[1], 10) - 1
- const lines = this.refs.code.value
- .split('\n')
+ const lineIndex =
+ parseInt(e.target.getAttribute('id').match(idMatch)[1], 10) - 1
+ const lines = this.refs.code.value.split('\n')
const targetLine = lines[lineIndex]
let newLine = targetLine
@@ -181,45 +211,56 @@ class MarkdownEditor extends React.Component {
}
}
- focus () {
+ focus() {
if (this.state.status === 'PREVIEW') {
- this.setState({
- status: 'CODE'
- }, () => {
- this.refs.code.focus()
- })
+ this.setState(
+ {
+ status: 'CODE'
+ },
+ () => {
+ this.refs.code.focus()
+ }
+ )
} else {
this.refs.code.focus()
}
eventEmitter.emit('topbar:togglelockbutton', this.state.status)
}
- reload () {
+ reload() {
this.refs.code.reload()
this.cancelQueue()
this.renderPreview(this.props.value)
}
- handleKeyDown (e) {
+ handleKeyDown(e) {
const { config } = this.props
if (this.state.status !== 'CODE') return false
const keyPressed = this.state.keyPressed
keyPressed.add(e.keyCode)
this.setState({ keyPressed })
- const isNoteHandlerKey = (el) => { return keyPressed.has(el) }
+ const isNoteHandlerKey = el => {
+ return keyPressed.has(el)
+ }
// These conditions are for ctrl-e and ctrl-w
- if (keyPressed.size === this.escapeFromEditor.length &&
- !this.state.isLocked && this.state.status === 'CODE' &&
- this.escapeFromEditor.every(isNoteHandlerKey)) {
+ if (
+ keyPressed.size === this.escapeFromEditor.length &&
+ !this.state.isLocked &&
+ this.state.status === 'CODE' &&
+ this.escapeFromEditor.every(isNoteHandlerKey)
+ ) {
this.handleContextMenu()
if (config.editor.switchPreview === 'BLUR') document.activeElement.blur()
}
- if (keyPressed.size === this.supportMdSelectionBold.length && this.supportMdSelectionBold.every(isNoteHandlerKey)) {
+ if (
+ keyPressed.size === this.supportMdSelectionBold.length &&
+ this.supportMdSelectionBold.every(isNoteHandlerKey)
+ ) {
this.addMdAroundWord('**')
}
}
- addMdAroundWord (mdElement) {
+ addMdAroundWord(mdElement) {
if (this.refs.code.editor.getSelection()) {
return this.addMdAroundSelection(mdElement)
}
@@ -227,47 +268,63 @@ class MarkdownEditor extends React.Component {
const word = this.refs.code.editor.findWordAt(currentCaret)
const cmDoc = this.refs.code.editor.getDoc()
cmDoc.replaceRange(mdElement, word.anchor)
- cmDoc.replaceRange(mdElement, { line: word.head.line, ch: word.head.ch + mdElement.length })
- }
-
- addMdAroundSelection (mdElement) {
- this.refs.code.editor.replaceSelection(`${mdElement}${this.refs.code.editor.getSelection()}${mdElement}`)
- }
-
- handleDropImage (dropEvent) {
- dropEvent.preventDefault()
- const { storageKey, noteKey } = this.props
-
- this.setState({
- status: 'CODE'
- }, () => {
- this.refs.code.focus()
-
- this.refs.code.editor.execCommand('goDocEnd')
- this.refs.code.editor.execCommand('goLineEnd')
- this.refs.code.editor.execCommand('newlineAndIndent')
-
- attachmentManagement.handleAttachmentDrop(
- this.refs.code,
- storageKey,
- noteKey,
- dropEvent
- )
+ cmDoc.replaceRange(mdElement, {
+ line: word.head.line,
+ ch: word.head.ch + mdElement.length
})
}
- handleKeyUp (e) {
+ addMdAroundSelection(mdElement) {
+ this.refs.code.editor.replaceSelection(
+ `${mdElement}${this.refs.code.editor.getSelection()}${mdElement}`
+ )
+ }
+
+ handleDropImage(dropEvent) {
+ dropEvent.preventDefault()
+ const { storageKey, noteKey } = this.props
+
+ this.setState(
+ {
+ status: 'CODE'
+ },
+ () => {
+ this.refs.code.focus()
+
+ this.refs.code.editor.execCommand('goDocEnd')
+ this.refs.code.editor.execCommand('goLineEnd')
+ this.refs.code.editor.execCommand('newlineAndIndent')
+
+ attachmentManagement.handleAttachmentDrop(
+ this.refs.code,
+ storageKey,
+ noteKey,
+ dropEvent
+ )
+ }
+ )
+ }
+
+ handleKeyUp(e) {
const keyPressed = this.state.keyPressed
keyPressed.delete(e.keyCode)
this.setState({ keyPressed })
}
- handleLockEditor () {
+ handleLockEditor() {
this.setState({ isLocked: !this.state.isLocked })
}
- render () {
- const {className, value, config, storageKey, noteKey, linesHighlighted} = this.props
+ render() {
+ const {
+ className,
+ value,
+ config,
+ storageKey,
+ noteKey,
+ linesHighlighted,
+ RTL
+ } = this.props
let editorFontSize = parseInt(config.editor.fontSize, 10)
if (!(editorFontSize > 0 && editorFontSize < 101)) editorFontSize = 14
@@ -275,23 +332,24 @@ class MarkdownEditor extends React.Component {
if (!(editorFontSize > 0 && editorFontSize < 132)) editorIndentSize = 4
const previewStyle = {}
- if (this.props.ignorePreviewPointerEvents) previewStyle.pointerEvents = 'none'
+ if (this.props.ignorePreviewPointerEvents)
+ previewStyle.pointerEvents = 'none'
const storage = findStorage(storageKey)
return (
-
this.handleContextMenu(e)}
+ onContextMenu={e => this.handleContextMenu(e)}
tabIndex='-1'
- onKeyDown={(e) => this.handleKeyDown(e)}
- onKeyUp={(e) => this.handleKeyUp(e)}
+ onKeyDown={e => this.handleKeyDown(e)}
+ onKeyUp={e => this.handleKeyUp(e)}
>
- this.handleChange(e)}
- onBlur={(e) => this.handleBlur(e)}
+ onChange={e => this.handleChange(e)}
+ onBlur={e => this.handleBlur(e)}
spellCheck={config.editor.spellcheck}
enableSmartPaste={config.editor.enableSmartPaste}
hotkey={config.hotkey}
@@ -325,10 +383,12 @@ class MarkdownEditor extends React.Component {
customMarkdownLintConfig={config.editor.customMarkdownLintConfig}
prettierConfig={config.editor.prettierConfig}
deleteUnusedAttachments={config.editor.deleteUnusedAttachments}
+ RTL={RTL}
/>
- this.handleContextMenu(e)}
- onDoubleClick={(e) => this.handleDoubleClick(e)}
+ onContextMenu={e => this.handleContextMenu(e)}
+ onDoubleClick={e => this.handleDoubleClick(e)}
tabIndex='0'
value={this.state.renderValue}
- onMouseUp={(e) => this.handlePreviewMouseUp(e)}
- onMouseDown={(e) => this.handlePreviewMouseDown(e)}
- onCheckboxClick={(e) => this.handleCheckboxClick(e)}
+ onMouseUp={e => this.handlePreviewMouseUp(e)}
+ onMouseDown={e => this.handlePreviewMouseDown(e)}
+ onCheckboxClick={e => this.handleCheckboxClick(e)}
showCopyNotification={config.ui.showCopyNotification}
storagePath={storage.path}
noteKey={noteKey}
customCSS={config.preview.customCSS}
allowCustomCSS={config.preview.allowCustomCSS}
lineThroughCheckbox={config.preview.lineThroughCheckbox}
- onDrop={(e) => this.handleDropImage(e)}
+ onDrop={e => this.handleDropImage(e)}
+ RTL={RTL}
/>
)
diff --git a/browser/components/MarkdownPreview.js b/browser/components/MarkdownPreview.js
index 50f073e5..9ddea318 100755
--- a/browser/components/MarkdownPreview.js
+++ b/browser/components/MarkdownPreview.js
@@ -1,5 +1,6 @@
import PropTypes from 'prop-types'
import React from 'react'
+import { connect } from 'react-redux'
import Markdown from 'browser/lib/markdown'
import _ from 'lodash'
import CodeMirror from 'codemirror'
@@ -11,6 +12,7 @@ import mermaidRender from './render/MermaidRender'
import SequenceDiagram from '@rokt33r/js-sequence-diagrams'
import Chart from 'chart.js'
import eventEmitter from 'browser/main/lib/eventEmitter'
+import config from 'browser/main/lib/ConfigManager'
import htmlTextHelper from 'browser/lib/htmlTextHelper'
import convertModeName from 'browser/lib/convertModeName'
import copy from 'copy-to-clipboard'
@@ -20,11 +22,15 @@ import { escapeHtmlCharacters } from 'browser/lib/utils'
import yaml from 'js-yaml'
import { render } from 'react-dom'
import Carousel from 'react-image-carousel'
+import { push } from 'connected-react-router'
import ConfigManager from '../main/lib/ConfigManager'
+import uiThemes from 'browser/lib/ui-themes'
+import i18n from 'browser/lib/i18n'
const { remote, shell } = require('electron')
const attachmentManagement = require('../main/lib/dataApi/attachmentManagement')
-const buildMarkdownPreviewContextMenu = require('browser/lib/contextMenuBuilder').buildMarkdownPreviewContextMenu
+const buildMarkdownPreviewContextMenu = require('browser/lib/contextMenuBuilder')
+ .buildMarkdownPreviewContextMenu
const { app } = remote
const path = require('path')
@@ -50,22 +56,21 @@ const CSS_FILES = [
* @param {String} opts.theme
* @param {Boolean} [opts.lineNumber] Should show line number
* @param {Boolean} [opts.scrollPastEnd]
- * @param {Boolean} [opts.optimizeOverflowScroll] Should tweak body style to optimize overflow scrollbar display
* @param {Boolean} [opts.allowCustomCSS] Should add custom css
* @param {String} [opts.customCSS] Will be added to bottom, only if `opts.allowCustomCSS` is truthy
* @returns {String}
*/
-function buildStyle (opts) {
+function buildStyle(opts) {
const {
fontFamily,
fontSize,
codeBlockFontFamily,
lineNumber,
scrollPastEnd,
- optimizeOverflowScroll,
theme,
allowCustomCSS,
- customCSS
+ customCSS,
+ RTL
} = opts
return `
@font-face {
@@ -102,8 +107,17 @@ ${markdownStyle}
body {
font-family: '${fontFamily.join("','")}';
font-size: ${fontSize}px;
- ${scrollPastEnd ? 'padding-bottom: 90vh;' : ''}
- ${optimizeOverflowScroll ? 'height: 100%;' : ''}
+
+ ${
+ scrollPastEnd
+ ? `
+ padding-bottom: 90vh;
+ box-sizing: border-box;
+ `
+ : ''
+ }
+ ${RTL ? 'direction: rtl;' : ''}
+ ${RTL ? 'text-align: right;' : ''}
}
@media print {
body {
@@ -113,7 +127,84 @@ body {
code {
font-family: '${codeBlockFontFamily.join("','")}';
background-color: rgba(0,0,0,0.04);
+ text-align: left;
+ direction: ltr;
}
+
+p code,
+li code,
+td code
+{
+ padding: 2px;
+ border-width: 1px;
+ border-style: solid;
+ border-radius: 5px;
+}
+[data-theme="default"] p code,
+[data-theme="default"] li code,
+[data-theme="default"] td code
+{
+ background-color: #F4F4F4;
+ border-color: #d9d9d9;
+ color: inherit;
+}
+[data-theme="white"] p code,
+[data-theme="white"] li code,
+[data-theme="white"] td code
+{
+ background-color: #F4F4F4;
+ border-color: #d9d9d9;
+ color: inherit;
+}
+[data-theme="dark"] p code,
+[data-theme="dark"] li code,
+[data-theme="dark"] td code
+{
+ background-color: #444444;
+ border-color: #555;
+ color: #FFFFFF;
+}
+[data-theme="dracula"] p code,
+[data-theme="dracula"] li code,
+[data-theme="dracula"] td code
+{
+ background-color: #444444;
+ border-color: #555;
+ color: #FFFFFF;
+}
+[data-theme="monokai"] p code,
+[data-theme="monokai"] li code,
+[data-theme="monokai"] td code
+{
+ background-color: #444444;
+ border-color: #555;
+ color: #FFFFFF;
+}
+[data-theme="nord"] p code,
+[data-theme="nord"] li code,
+[data-theme="nord"] td code
+{
+ background-color: #444444;
+ border-color: #555;
+ color: #FFFFFF;
+}
+[data-theme="solarized-dark"] p code,
+[data-theme="solarized-dark"] li code,
+[data-theme="solarized-dark"] td code
+{
+ background-color: #444444;
+ border-color: #555;
+ color: #FFFFFF;
+}
+[data-theme="vulcan"] p code,
+[data-theme="vulcan"] li code,
+[data-theme="vulcan"] td code
+{
+ background-color: #444444;
+ border-color: #555;
+ color: #FFFFFF;
+}
+
.lineNumber {
${lineNumber && 'display: block !important;'}
font-family: '${codeBlockFontFamily.join("','")}';
@@ -143,14 +234,22 @@ h1, h2 {
border: none;
}
+h3 {
+ margin: 1em 0 0.8em;
+}
+
+h4, h5, h6 {
+ margin: 1.1em 0 0.5em;
+}
+
h1 {
- padding-bottom: 4px;
+ padding: 0.2em 0 0.2em;
margin: 1em 0 8px;
}
h2 {
- padding-bottom: 0.2em;
- margin: 1em 0 0.37em;
+ padding: 0.2em 0 0.2em;
+ margin: 1em 0 0.7em;
}
body p {
@@ -173,21 +272,33 @@ ${allowCustomCSS ? customCSS : ''}
const scrollBarStyle = `
::-webkit-scrollbar {
+ ${config.get().ui.showScrollBar ? '' : 'display: none;'}
width: 12px;
}
::-webkit-scrollbar-thumb {
+ ${config.get().ui.showScrollBar ? '' : 'display: none;'}
background-color: rgba(0, 0, 0, 0.15);
}
+
+::-webkit-scrollbar-track-piece {
+ background-color: inherit;
+}
`
const scrollBarDarkStyle = `
::-webkit-scrollbar {
+ ${config.get().ui.showScrollBar ? '' : 'display: none;'}
width: 12px;
}
::-webkit-scrollbar-thumb {
+ ${config.get().ui.showScrollBar ? '' : 'display: none;'}
background-color: rgba(0, 0, 0, 0.3);
}
+
+::-webkit-scrollbar-track-piece {
+ background-color: inherit;
+}
`
const OSX = global.process.platform === 'darwin'
@@ -208,7 +319,7 @@ const defaultCodeBlockFontFamily = [
// return the line number of the line that used to generate the specified element
// return -1 if the line is not found
-function getSourceLineNumberByElement (element) {
+function getSourceLineNumberByElement(element) {
let isHasLineNumber = element.dataset.line !== undefined
let parent = element
while (!isHasLineNumber && parent.parentElement !== null) {
@@ -218,8 +329,8 @@ function getSourceLineNumberByElement (element) {
return parent.dataset.line !== undefined ? parseInt(parent.dataset.line) : -1
}
-export default class MarkdownPreview extends React.Component {
- constructor (props) {
+class MarkdownPreview extends React.Component {
+ constructor(props) {
super(props)
this.contextMenuHandler = e => this.handleContextMenu(e)
@@ -236,13 +347,14 @@ export default class MarkdownPreview extends React.Component {
this.saveAsHtmlHandler = () => this.handleSaveAsHtml()
this.saveAsPdfHandler = () => this.handleSaveAsPdf()
this.printHandler = () => this.handlePrint()
+ this.resizeHandler = _.throttle(this.handleResize.bind(this), 100)
this.linkClickHandler = this.handleLinkClick.bind(this)
this.initMarkdown = this.initMarkdown.bind(this)
this.initMarkdown()
}
- initMarkdown () {
+ initMarkdown() {
const { smartQuotes, sanitize, breaks } = this.props
this.markdown = new Markdown({
typographer: smartQuotes,
@@ -251,17 +363,17 @@ export default class MarkdownPreview extends React.Component {
})
}
- handleCheckboxClick (e) {
+ handleCheckboxClick(e) {
this.props.onCheckboxClick(e)
}
- handleScroll (e) {
+ handleScroll(e) {
if (this.props.onScroll) {
this.props.onScroll(e)
}
}
- handleContextMenu (event) {
+ handleContextMenu(event) {
const menu = buildMarkdownPreviewContextMenu(this, event)
const switchPreview = ConfigManager.get().editor.switchPreview
if (menu != null && switchPreview !== 'RIGHTCLICK') {
@@ -271,17 +383,21 @@ export default class MarkdownPreview extends React.Component {
}
}
- handleDoubleClick (e) {
+ handleDoubleClick(e) {
if (this.props.onDoubleClick != null) this.props.onDoubleClick(e)
}
- handleMouseDown (e) {
+ handleMouseDown(e) {
const config = ConfigManager.get()
const clickElement = e.target
const targetTag = clickElement.tagName // The direct parent HTML of where was clicked ie "BODY" or "DIV"
const lineNumber = getSourceLineNumberByElement(clickElement) // Line location of element clicked.
- if (config.editor.switchPreview === 'RIGHTCLICK' && e.buttons === 2 && config.editor.type === 'SPLIT') {
+ if (
+ config.editor.switchPreview === 'RIGHTCLICK' &&
+ e.buttons === 2 &&
+ config.editor.type === 'SPLIT'
+ ) {
eventEmitter.emit('topbar:togglemodebutton', 'CODE')
}
if (e.ctrlKey) {
@@ -297,10 +413,11 @@ export default class MarkdownPreview extends React.Component {
}
}
- if (this.props.onMouseDown != null && targetTag === 'BODY') this.props.onMouseDown(e)
+ if (this.props.onMouseDown != null && targetTag === 'BODY')
+ this.props.onMouseDown(e)
}
- handleMouseUp (e) {
+ handleMouseUp(e) {
if (!this.props.onMouseUp) return
if (e.target != null && e.target.tagName === 'A') {
return null
@@ -308,15 +425,15 @@ export default class MarkdownPreview extends React.Component {
if (this.props.onMouseUp != null) this.props.onMouseUp(e)
}
- handleSaveAsText () {
+ handleSaveAsText() {
this.exportAsDocument('txt')
}
- handleSaveAsMd () {
+ handleSaveAsMd() {
this.exportAsDocument('md')
}
- htmlContentFormatter (noteContent, exportTasks, targetDir) {
+ htmlContentFormatter(noteContent, exportTasks, targetDir) {
const {
fontFamily,
fontSize,
@@ -326,7 +443,8 @@ export default class MarkdownPreview extends React.Component {
scrollPastEnd,
theme,
allowCustomCSS,
- customCSS
+ customCSS,
+ RTL
} = this.getStyleParams()
const inlineStyles = buildStyle({
@@ -337,13 +455,11 @@ export default class MarkdownPreview extends React.Component {
scrollPastEnd,
theme,
allowCustomCSS,
- customCSS
+ customCSS,
+ RTL
})
- let body = this.markdown.render(noteContent)
- body = attachmentManagement.fixLocalURLS(
- body,
- this.props.storagePath
- )
+ let body = this.refs.root.contentWindow.document.body.innerHTML
+ body = attachmentManagement.fixLocalURLS(body, this.props.storagePath)
const files = [this.getCodeThemeLink(codeBlockTheme), ...CSS_FILES]
files.forEach(file => {
if (global.process.platform === 'win32') {
@@ -359,7 +475,7 @@ export default class MarkdownPreview extends React.Component {
let styles = ''
files.forEach(file => {
- styles += `
`
+ styles += `
`
})
return `
@@ -374,14 +490,24 @@ export default class MarkdownPreview extends React.Component {
`
}
- handleSaveAsHtml () {
- this.exportAsDocument('html', (noteContent, exportTasks, targetDir) => Promise.resolve(this.htmlContentFormatter(noteContent, exportTasks, targetDir)))
+ handleSaveAsHtml() {
+ this.exportAsDocument('html', (noteContent, exportTasks, targetDir) =>
+ Promise.resolve(
+ this.htmlContentFormatter(noteContent, exportTasks, targetDir)
+ )
+ )
}
- handleSaveAsPdf () {
+ handleSaveAsPdf() {
this.exportAsDocument('pdf', (noteContent, exportTasks, targetDir) => {
- const printout = new remote.BrowserWindow({show: false, webPreferences: {webSecurity: false, javascript: false}})
- printout.loadURL('data:text/html;charset=UTF-8,' + this.htmlContentFormatter(noteContent, exportTasks, targetDir))
+ const printout = new remote.BrowserWindow({
+ show: false,
+ webPreferences: { webSecurity: false, javascript: false }
+ })
+ printout.loadURL(
+ 'data:text/html;charset=UTF-8,' +
+ this.htmlContentFormatter(noteContent, exportTasks, targetDir)
+ )
return new Promise((resolve, reject) => {
printout.webContents.on('did-finish-load', () => {
printout.webContents.printToPDF({}, (err, data) => {
@@ -394,11 +520,11 @@ export default class MarkdownPreview extends React.Component {
})
}
- handlePrint () {
+ handlePrint() {
this.refs.root.contentWindow.print()
}
- exportAsDocument (fileType, contentFormatter) {
+ exportAsDocument(fileType, contentFormatter) {
const options = {
filters: [{ name: 'Documents', extensions: [fileType] }],
properties: ['openFile', 'createDirectory']
@@ -414,7 +540,8 @@ export default class MarkdownPreview extends React.Component {
.then(res => {
dialog.showMessageBox(remote.getCurrentWindow(), {
type: 'info',
- message: `Exported to ${filename}`
+ message: `Exported to ${filename}`,
+ buttons: [i18n.__('Ok')]
})
})
.catch(err => {
@@ -428,7 +555,7 @@ export default class MarkdownPreview extends React.Component {
})
}
- fixDecodedURI (node) {
+ fixDecodedURI(node) {
if (
node &&
node.children.length === 1 &&
@@ -445,17 +572,18 @@ export default class MarkdownPreview extends React.Component {
* @param {string[]} splitWithCodeTag Array of HTML strings separated by three ```
* @returns {string} HTML in which special characters between three ``` have been converted
*/
- escapeHtmlCharactersInCodeTag (splitWithCodeTag) {
+ escapeHtmlCharactersInCodeTag(splitWithCodeTag) {
for (let index = 0; index < splitWithCodeTag.length; index++) {
- const codeTagRequired = (splitWithCodeTag[index] !== '\`\`\`' && index < splitWithCodeTag.length - 1)
+ const codeTagRequired =
+ splitWithCodeTag[index] !== '```' && index < splitWithCodeTag.length - 1
if (codeTagRequired) {
- splitWithCodeTag.splice((index + 1), 0, '\`\`\`')
+ splitWithCodeTag.splice(index + 1, 0, '```')
}
}
let inCodeTag = false
let result = ''
for (let content of splitWithCodeTag) {
- if (content === '\`\`\`') {
+ if (content === '```') {
inCodeTag = !inCodeTag
} else if (inCodeTag) {
content = escapeHtmlCharacters(content)
@@ -465,21 +593,15 @@ export default class MarkdownPreview extends React.Component {
return result
}
- getScrollBarStyle () {
+ getScrollBarStyle() {
const { theme } = this.props
- switch (theme) {
- case 'dark':
- case 'solarized-dark':
- case 'monokai':
- case 'dracula':
- return scrollBarDarkStyle
- default:
- return scrollBarStyle
- }
+ return uiThemes.some(item => item.name === theme && item.isDark)
+ ? scrollBarDarkStyle
+ : scrollBarStyle
}
- componentDidMount () {
+ componentDidMount() {
const { onDrop } = this.props
this.refs.root.setAttribute('sandbox', 'allow-scripts')
@@ -529,6 +651,7 @@ export default class MarkdownPreview extends React.Component {
'scroll',
this.scrollHandler
)
+ this.refs.root.contentWindow.addEventListener('resize', this.resizeHandler)
eventEmitter.on('export:save-text', this.saveAsTextHandler)
eventEmitter.on('export:save-md', this.saveAsMdHandler)
eventEmitter.on('export:save-html', this.saveAsHtmlHandler)
@@ -536,7 +659,7 @@ export default class MarkdownPreview extends React.Component {
eventEmitter.on('print', this.printHandler)
}
- componentWillUnmount () {
+ componentWillUnmount() {
const { onDrop } = this.props
this.refs.root.contentWindow.document.body.removeEventListener(
@@ -567,6 +690,10 @@ export default class MarkdownPreview extends React.Component {
'scroll',
this.scrollHandler
)
+ this.refs.root.contentWindow.removeEventListener(
+ 'resize',
+ this.resizeHandler
+ )
eventEmitter.off('export:save-text', this.saveAsTextHandler)
eventEmitter.off('export:save-md', this.saveAsMdHandler)
eventEmitter.off('export:save-html', this.saveAsHtmlHandler)
@@ -574,7 +701,7 @@ export default class MarkdownPreview extends React.Component {
eventEmitter.off('print', this.printHandler)
}
- componentDidUpdate (prevProps) {
+ componentDidUpdate(prevProps) {
// actual rewriteIframe function should be called only once
let needsRewriteIframe = false
if (prevProps.value !== this.props.value) needsRewriteIframe = true
@@ -599,7 +726,8 @@ export default class MarkdownPreview extends React.Component {
prevProps.theme !== this.props.theme ||
prevProps.scrollPastEnd !== this.props.scrollPastEnd ||
prevProps.allowCustomCSS !== this.props.allowCustomCSS ||
- prevProps.customCSS !== this.props.customCSS
+ prevProps.customCSS !== this.props.customCSS ||
+ prevProps.RTL !== this.props.RTL
) {
this.applyStyle()
needsRewriteIframe = true
@@ -611,11 +739,11 @@ export default class MarkdownPreview extends React.Component {
// Should scroll to top after selecting another note
if (prevProps.noteKey !== this.props.noteKey) {
- this.getWindow().scrollTo(0, 0)
+ this.scrollTo(0, 0)
}
}
- getStyleParams () {
+ getStyleParams() {
const {
fontSize,
lineNumber,
@@ -623,22 +751,24 @@ export default class MarkdownPreview extends React.Component {
scrollPastEnd,
theme,
allowCustomCSS,
- customCSS
+ customCSS,
+ RTL
} = this.props
let { fontFamily, codeBlockFontFamily } = this.props
- fontFamily = _.isString(fontFamily) && fontFamily.trim().length > 0
- ? fontFamily
- .split(',')
- .map(fontName => fontName.trim())
- .concat(defaultFontFamily)
- : defaultFontFamily
- codeBlockFontFamily = _.isString(codeBlockFontFamily) &&
- codeBlockFontFamily.trim().length > 0
- ? codeBlockFontFamily
- .split(',')
- .map(fontName => fontName.trim())
- .concat(defaultCodeBlockFontFamily)
- : defaultCodeBlockFontFamily
+ fontFamily =
+ _.isString(fontFamily) && fontFamily.trim().length > 0
+ ? fontFamily
+ .split(',')
+ .map(fontName => fontName.trim())
+ .concat(defaultFontFamily)
+ : defaultFontFamily
+ codeBlockFontFamily =
+ _.isString(codeBlockFontFamily) && codeBlockFontFamily.trim().length > 0
+ ? codeBlockFontFamily
+ .split(',')
+ .map(fontName => fontName.trim())
+ .concat(defaultCodeBlockFontFamily)
+ : defaultCodeBlockFontFamily
return {
fontFamily,
@@ -649,11 +779,12 @@ export default class MarkdownPreview extends React.Component {
scrollPastEnd,
theme,
allowCustomCSS,
- customCSS
+ customCSS,
+ RTL
}
}
- applyStyle () {
+ applyStyle() {
const {
fontFamily,
fontSize,
@@ -663,7 +794,8 @@ export default class MarkdownPreview extends React.Component {
scrollPastEnd,
theme,
allowCustomCSS,
- customCSS
+ customCSS,
+ RTL
} = this.getStyleParams()
this.getWindow().document.getElementById(
@@ -675,15 +807,14 @@ export default class MarkdownPreview extends React.Component {
codeBlockFontFamily,
lineNumber,
scrollPastEnd,
- optimizeOverflowScroll: true,
theme,
allowCustomCSS,
- customCSS
+ customCSS,
+ RTL
})
- this.getWindow().document.documentElement.style.overflowY = 'hidden'
}
- getCodeThemeLink (name) {
+ getCodeThemeLink(name) {
const theme = consts.THEMES.find(theme => theme.name === name)
return theme != null
@@ -691,7 +822,7 @@ export default class MarkdownPreview extends React.Component {
: `${appPath}/node_modules/codemirror/theme/elegant.css`
}
- rewriteIframe () {
+ rewriteIframe() {
_.forEach(
this.refs.root.contentWindow.document.querySelectorAll(
'input[type="checkbox"]'
@@ -749,7 +880,9 @@ export default class MarkdownPreview extends React.Component {
codeBlockTheme = consts.THEMES.find(theme => theme.name === codeBlockTheme)
- const codeBlockThemeClassName = codeBlockTheme ? codeBlockTheme.className : 'cm-s-default'
+ const codeBlockThemeClassName = codeBlockTheme
+ ? codeBlockTheme.className
+ : 'cm-s-default'
_.forEach(
this.refs.root.contentWindow.document.querySelectorAll('.code code'),
@@ -835,7 +968,10 @@ export default class MarkdownPreview extends React.Component {
el => {
try {
const format = el.attributes.getNamedItem('data-format').value
- const chartConfig = format === 'yaml' ? yaml.load(el.innerHTML) : JSON.parse(el.innerHTML)
+ const chartConfig =
+ format === 'yaml'
+ ? yaml.load(el.innerHTML)
+ : JSON.parse(el.innerHTML)
el.innerHTML = ''
const canvas = document.createElement('canvas')
@@ -858,7 +994,12 @@ export default class MarkdownPreview extends React.Component {
_.forEach(
this.refs.root.contentWindow.document.querySelectorAll('.mermaid'),
el => {
- mermaidRender(el, htmlTextHelper.decodeEntities(el.innerHTML), theme, mermaidHTMLLabel)
+ mermaidRender(
+ el,
+ htmlTextHelper.decodeEntities(el.innerHTML),
+ theme,
+ mermaidHTMLLabel
+ )
}
)
@@ -880,20 +1021,14 @@ export default class MarkdownPreview extends React.Component {
autoplay = 0
}
- render(
-
,
- el
- )
+ render(
, el)
}
)
const markdownPreviewIframe = document.querySelector('.MarkdownPreview')
const rect = markdownPreviewIframe.getBoundingClientRect()
const config = { attributes: true, subtree: true }
- const imgObserver = new MutationObserver((mutationList) => {
+ const imgObserver = new MutationObserver(mutationList => {
for (const mu of mutationList) {
if (mu.target.className === 'carouselContent-enter-done') {
this.setImgOnClickEventHelper(mu.target, rect)
@@ -902,26 +1037,32 @@ export default class MarkdownPreview extends React.Component {
}
})
- const imgList = markdownPreviewIframe.contentWindow.document.body.querySelectorAll('img')
+ const imgList = markdownPreviewIframe.contentWindow.document.body.querySelectorAll(
+ 'img'
+ )
for (const img of imgList) {
const parentEl = img.parentElement
this.setImgOnClickEventHelper(img, rect)
imgObserver.observe(parentEl, config)
}
- const aList = markdownPreviewIframe.contentWindow.document.body.querySelectorAll('a')
+ const aList = markdownPreviewIframe.contentWindow.document.body.querySelectorAll(
+ 'a'
+ )
for (const a of aList) {
a.removeEventListener('click', this.linkClickHandler)
a.addEventListener('click', this.linkClickHandler)
}
}
- setImgOnClickEventHelper (img, rect) {
+ setImgOnClickEventHelper(img, rect) {
img.onclick = () => {
const widthMagnification = document.body.clientWidth / img.width
const heightMagnification = document.body.clientHeight / img.height
const baseOnWidth = widthMagnification < heightMagnification
- const magnification = baseOnWidth ? widthMagnification : heightMagnification
+ const magnification = baseOnWidth
+ ? widthMagnification
+ : heightMagnification
const zoomImgWidth = img.width * magnification
const zoomImgHeight = img.height * magnification
@@ -952,10 +1093,7 @@ export default class MarkdownPreview extends React.Component {
width: ${zoomImgWidth};
height: ${zoomImgHeight}px;
`
- zoomImg.animate([
- originalImgRect,
- zoomInImgRect
- ], animationSpeed)
+ zoomImg.animate([originalImgRect, zoomInImgRect], animationSpeed)
const overlay = document.createElement('div')
overlay.style = `
@@ -976,10 +1114,10 @@ export default class MarkdownPreview extends React.Component {
width: ${img.width}px;
height: ${img.height}px;
`
- const zoomOutImgAnimation = zoomImg.animate([
- zoomInImgRect,
- originalImgRect
- ], animationSpeed)
+ const zoomOutImgAnimation = zoomImg.animate(
+ [zoomInImgRect, originalImgRect],
+ animationSpeed
+ )
zoomOutImgAnimation.onfinish = () => overlay.remove()
}
@@ -988,15 +1126,28 @@ export default class MarkdownPreview extends React.Component {
}
}
- focus () {
+ handleResize() {
+ _.forEach(
+ this.refs.root.contentWindow.document.querySelectorAll('svg[ratio]'),
+ el => {
+ el.setAttribute('height', el.clientWidth / el.getAttribute('ratio'))
+ }
+ )
+ }
+
+ focus() {
this.refs.root.focus()
}
- getWindow () {
+ getWindow() {
return this.refs.root.contentWindow
}
- scrollTo (targetRow) {
+ /**
+ * @public
+ * @param {Number} targetRow
+ */
+ scrollToRow(targetRow) {
const blocks = this.getWindow().document.querySelectorAll(
'body>[data-line]'
)
@@ -1006,18 +1157,27 @@ export default class MarkdownPreview extends React.Component {
const row = parseInt(block.getAttribute('data-line'))
if (row > targetRow || index === blocks.length - 1) {
block = blocks[index - 1]
- block != null && this.getWindow().scrollTo(0, block.offsetTop)
+ block != null && this.scrollTo(0, block.offsetTop)
break
}
}
}
- preventImageDroppedHandler (e) {
+ /**
+ * `document.body.scrollTo`
+ * @param {Number} x
+ * @param {Number} y
+ */
+ scrollTo(x, y) {
+ this.getWindow().document.body.scrollTo(x, y)
+ }
+
+ preventImageDroppedHandler(e) {
e.preventDefault()
e.stopPropagation()
}
- notify (title, options) {
+ notify(title, options) {
if (global.process.platform === 'win32') {
options.icon = path.join(
'file://',
@@ -1028,30 +1188,35 @@ export default class MarkdownPreview extends React.Component {
return new window.Notification(title, options)
}
- handleLinkClick (e) {
+ handleLinkClick(e) {
e.preventDefault()
e.stopPropagation()
const rawHref = e.target.getAttribute('href')
- const parser = document.createElement('a')
- parser.href = e.target.getAttribute('href')
- const { href, hash } = parser
- const linkHash = hash === '' ? rawHref : hash // needed because we're having special link formats that are removed by parser e.g. :line:10
-
+ const { dispatch } = this.props
if (!rawHref) return // not checked href because parser will create file://... string for [empty link]()
- const extractId = /(main.html)?#/
- const regexNoteInternalLink = new RegExp(`${extractId.source}(.+)`)
- if (regexNoteInternalLink.test(linkHash)) {
- const targetId = mdurl.encode(linkHash.replace(extractId, ''))
- const targetElement = this.refs.root.contentWindow.document.getElementById(
- targetId
- )
+ const parser = document.createElement('a')
+ parser.href = rawHref
+ const isStartWithHash = rawHref[0] === '#'
+ const { href, hash } = parser
- if (targetElement != null) {
- this.getWindow().scrollTo(0, targetElement.offsetTop)
+ const linkHash = hash === '' ? rawHref : hash // needed because we're having special link formats that are removed by parser e.g. :line:10
+
+ const extractIdRegex = /file:\/\/.*main.?\w*.html#/ // file://path/to/main(.development.)html
+ const regexNoteInternalLink = new RegExp(`${extractIdRegex.source}(.+)`)
+ if (isStartWithHash || regexNoteInternalLink.test(rawHref)) {
+ const posOfHash = linkHash.indexOf('#')
+ if (posOfHash > -1) {
+ const extractedId = linkHash.slice(posOfHash + 1)
+ const targetId = mdurl.encode(extractedId)
+ const targetElement = this.getWindow().document.getElementById(targetId)
+
+ if (targetElement != null) {
+ this.scrollTo(0, targetElement.offsetTop)
+ }
+ return
}
- return
}
// this will match the new uuid v4 hash and the old hash
@@ -1082,11 +1247,29 @@ export default class MarkdownPreview extends React.Component {
return
}
+ const regexIsTagLink = /^:tag:([\w]+)$/
+ if (regexIsTagLink.test(rawHref)) {
+ const tag = rawHref.match(regexIsTagLink)[1]
+ dispatch(push(`/tags/${encodeURIComponent(tag)}`))
+ return
+ }
+
// other case
- shell.openExternal(href)
+ this.openExternal(href)
}
- render () {
+ openExternal(href) {
+ try {
+ const success =
+ shell.openExternal(href) || shell.openExternal(decodeURI(href))
+ if (!success) console.error('failed to open url ' + href)
+ } catch (e) {
+ // URI Error threw from decodeURI
+ console.error(e)
+ }
+ }
+
+ render() {
const { className, style, tabIndex } = this.props
return (
\n\n## Docs :memo:\n- [Boostnote | Boost your happiness, productivity and creativity.](https://hackernoon.com/boostnote-boost-your-happiness-productivity-and-creativity-315034efeebe)\n- [Cloud Syncing & Backups](https://github.com/BoostIO/Boostnote/wiki/Cloud-Syncing-and-Backup)\n- [How to sync your data across Desktop and Mobile apps](https://github.com/BoostIO/Boostnote/wiki/Sync-Data-Across-Desktop-and-Mobile-apps)\n- [Convert data from **Evernote** to Boostnote.](https://github.com/BoostIO/Boostnote/wiki/Evernote)\n- [Keyboard Shortcuts](https://github.com/BoostIO/Boostnote/wiki/Keyboard-Shortcuts)\n- [Keymaps in Editor mode](https://github.com/BoostIO/Boostnote/wiki/Keymaps-in-Editor-mode)\n- [How to set syntax highlight in Snippet note](https://github.com/BoostIO/Boostnote/wiki/Syntax-Highlighting)\n\n---\n\n## Article Archive :books:\n- [Reddit English](http://bit.ly/2mOJPu7)\n- [Reddit Spanish](https://www.reddit.com/r/boostnote_es/)\n- [Reddit Chinese](https://www.reddit.com/r/boostnote_cn/)\n- [Reddit Japanese](https://www.reddit.com/r/boostnote_jp/)\n\n---\n\n## Community :beers:\n- [GitHub](http://bit.ly/2AWWzkD)\n- [Twitter](http://bit.ly/2z8BUJZ)\n- [Facebook Group](http://bit.ly/2jcca8t)'
+ content:
+ '# Welcome to Boostnote!\n## Click here to edit markdown :wave:\n\n
\n\n## Docs :memo:\n- [Boostnote | Boost your happiness, productivity and creativity.](https://hackernoon.com/boostnote-boost-your-happiness-productivity-and-creativity-315034efeebe)\n- [Cloud Syncing & Backups](https://github.com/BoostIO/Boostnote/wiki/Cloud-Syncing-and-Backup)\n- [How to sync your data across Desktop and Mobile apps](https://github.com/BoostIO/Boostnote/wiki/Sync-Data-Across-Desktop-and-Mobile-apps)\n- [Convert data from **Evernote** to Boostnote.](https://github.com/BoostIO/Boostnote/wiki/Evernote)\n- [Keyboard Shortcuts](https://github.com/BoostIO/Boostnote/wiki/Keyboard-Shortcuts)\n- [Keymaps in Editor mode](https://github.com/BoostIO/Boostnote/wiki/Keymaps-in-Editor-mode)\n- [How to set syntax highlight in Snippet note](https://github.com/BoostIO/Boostnote/wiki/Syntax-Highlighting)\n\n---\n\n## Article Archive :books:\n- [Reddit English](http://bit.ly/2mOJPu7)\n- [Reddit Spanish](https://www.reddit.com/r/boostnote_es/)\n- [Reddit Chinese](https://www.reddit.com/r/boostnote_cn/)\n- [Reddit Japanese](https://www.reddit.com/r/boostnote_jp/)\n\n---\n\n## Community :beers:\n- [GitHub](http://bit.ly/2AWWzkD)\n- [Twitter](http://bit.ly/2z8BUJZ)\n- [Facebook Group](http://bit.ly/2jcca8t)'
})
.then(note => {
store.dispatch({
@@ -139,16 +145,16 @@ class Main extends React.Component {
})
}
- componentDidMount () {
+ componentDidMount() {
const { dispatch, config } = this.props
- const supportedThemes = ['dark', 'white', 'solarized-dark', 'monokai', 'dracula']
+ this.refreshTheme = setInterval(() => {
+ const conf = ConfigManager.get()
+ chooseTheme(conf)
+ }, 5 * 1000)
- if (supportedThemes.indexOf(config.ui.theme) !== -1) {
- document.body.setAttribute('data-theme', config.ui.theme)
- } else {
- document.body.setAttribute('data-theme', 'default')
- }
+ chooseTheme(config)
+ applyTheme(config.ui.theme)
if (getLocales().indexOf(config.ui.language) !== -1) {
i18n.setLocale(config.ui.language)
@@ -173,38 +179,52 @@ class Main extends React.Component {
delete CodeMirror.keyMap.emacs['Ctrl-V']
eventEmitter.on('editor:fullscreen', this.toggleFullScreen)
- eventEmitter.on('menubar:togglemenubar', this.toggleMenuBarVisible.bind(this))
+ eventEmitter.on(
+ 'menubar:togglemenubar',
+ this.toggleMenuBarVisible.bind(this)
+ )
+ eventEmitter.on('dispatch:push', this.changeRoutePush.bind(this))
}
- componentWillUnmount () {
+ componentWillUnmount() {
eventEmitter.off('editor:fullscreen', this.toggleFullScreen)
- eventEmitter.off('menubar:togglemenubar', this.toggleMenuBarVisible.bind(this))
+ eventEmitter.off(
+ 'menubar:togglemenubar',
+ this.toggleMenuBarVisible.bind(this)
+ )
+ eventEmitter.off('dispatch:push', this.changeRoutePush.bind(this))
+ clearInterval(this.refreshTheme)
}
- toggleMenuBarVisible () {
+ changeRoutePush(event, destination) {
+ const { dispatch } = this.props
+ dispatch(push(destination))
+ }
+
+ toggleMenuBarVisible() {
const { config } = this.props
const { ui } = config
- const newUI = Object.assign(ui, {showMenuBar: !ui.showMenuBar})
+ const newUI = Object.assign(ui, { showMenuBar: !ui.showMenuBar })
const newConfig = Object.assign(config, newUI)
ConfigManager.set(newConfig)
}
- handleLeftSlideMouseDown (e) {
+ handleLeftSlideMouseDown(e) {
e.preventDefault()
this.setState({
isLeftSliderFocused: true
})
}
- handleRightSlideMouseDown (e) {
+ handleRightSlideMouseDown(e) {
e.preventDefault()
this.setState({
isRightSliderFocused: true
})
}
- handleMouseUp (e) {
+ handleMouseUp(e) {
// Change width of NoteList component.
if (this.state.isRightSliderFocused) {
this.setState(
@@ -244,7 +264,7 @@ class Main extends React.Component {
}
}
- handleMouseMove (e) {
+ handleMouseMove(e) {
if (this.state.isRightSliderFocused) {
const offset = this.refs.body.getBoundingClientRect().left
let newListWidth = e.pageX - offset
@@ -270,7 +290,7 @@ class Main extends React.Component {
}
}
- handleFullScreenButton (e) {
+ handleFullScreenButton(e) {
this.setState({ fullScreen: !this.state.fullScreen }, () => {
const noteDetail = document.querySelector('.NoteDetail')
const noteList = document.querySelector('.NoteList')
@@ -284,7 +304,7 @@ class Main extends React.Component {
})
}
- hideLeftLists (noteDetail, noteList, mainBody) {
+ hideLeftLists(noteDetail, noteList, mainBody) {
this.setState({ noteDetailWidth: noteDetail.style.left })
this.setState({ mainBodyWidth: mainBody.style.left })
noteDetail.style.left = '0px'
@@ -292,13 +312,13 @@ class Main extends React.Component {
noteList.style.display = 'none'
}
- showLeftLists (noteDetail, noteList, mainBody) {
+ showLeftLists(noteDetail, noteList, mainBody) {
noteDetail.style.left = this.state.noteDetailWidth
mainBody.style.left = this.state.mainBodyWidth
noteList.style.display = 'inline'
}
- render () {
+ render() {
const { config } = this.props
// the width of the navigation bar when it is folded/collapsed
@@ -312,10 +332,16 @@ class Main extends React.Component {
onMouseUp={e => this.handleMouseUp(e)}
>
- {!config.isSideNavFolded &&
+ {!config.isSideNavFolded && (
}
+
@@ -870,10 +1164,11 @@ class UiTab extends React.Component {
{i18n.__('LaTeX Block Open Delimiter')}