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')
@@ -1219,7 +1293,8 @@ CodeEditor.propTypes = {
spellCheck: PropTypes.bool,
enableMarkdownLint: PropTypes.bool,
customMarkdownLintConfig: PropTypes.string,
- deleteUnusedAttachments: PropTypes.bool
+ deleteUnusedAttachments: PropTypes.bool,
+ RTL: PropTypes.bool
}
CodeEditor.defaultProps = {
@@ -1235,5 +1310,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 5c2ddbdb..a8b88891 100644
--- a/browser/components/MarkdownEditor.js
+++ b/browser/components/MarkdownEditor.js
@@ -10,7 +10,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,7 +20,10 @@ 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
@@ -29,133 +32,153 @@ class MarkdownEditor extends React.Component {
this.lockEditorCode = () => this.handleLockEditor()
}
- componentDidMount () {
+ componentDidMount() {
this.value = this.refs.code.value
eventEmitter.on('editor:lock', this.lockEditorCode)
eventEmitter.on('editor:focus', this.focusEditor.bind(this))
}
- componentDidUpdate () {
+ componentDidUpdate() {
this.value = this.refs.code.value
}
- componentWillReceiveProps (props) {
+ 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))
}
- focusEditor () {
- this.setState({
- status: 'CODE'
- }, () => {
- this.refs.code.focus()
- })
+ focusEditor() {
+ this.setState(
+ {
+ status: 'CODE'
+ },
+ () => {
+ 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.refs.preview.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.scrollToRow(cursorPosition.line)
- })
+ this.setState(
+ {
+ status: 'PREVIEW'
+ },
+ () => {
+ this.refs.preview.focus()
+ this.refs.preview.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 +187,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 +204,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 +261,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 +325,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 +376,11 @@ 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 7c88f562..4306b0cf 100755
--- a/browser/components/MarkdownPreview.js
+++ b/browser/components/MarkdownPreview.js
@@ -11,6 +11,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'
@@ -21,10 +22,13 @@ import yaml from 'js-yaml'
import { render } from 'react-dom'
import Carousel from 'react-image-carousel'
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')
@@ -54,7 +58,7 @@ const CSS_FILES = [
* @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,
@@ -63,7 +67,8 @@ function buildStyle (opts) {
scrollPastEnd,
theme,
allowCustomCSS,
- customCSS
+ customCSS,
+ RTL
} = opts
return `
@font-face {
@@ -100,11 +105,17 @@ ${markdownStyle}
body {
font-family: '${fontFamily.join("','")}';
font-size: ${fontSize}px;
- ${scrollPastEnd ? `
+
+ ${
+ scrollPastEnd
+ ? `
padding-bottom: 90vh;
box-sizing: border-box;
`
- : ''}
+ : ''
+ }
+ ${RTL ? 'direction: rtl;' : ''}
+ ${RTL ? 'text-align: right;' : ''}
}
@media print {
body {
@@ -114,6 +125,8 @@ body {
code {
font-family: '${codeBlockFontFamily.join("','")}';
background-color: rgba(0,0,0,0.04);
+ text-align: left;
+ direction: ltr;
}
.lineNumber {
${lineNumber && 'display: block !important;'}
@@ -144,14 +157,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 {
@@ -174,10 +195,12 @@ ${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);
}
@@ -187,10 +210,12 @@ const scrollBarStyle = `
`
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);
}
@@ -217,7 +242,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) {
@@ -228,7 +253,7 @@ function getSourceLineNumberByElement (element) {
}
export default class MarkdownPreview extends React.Component {
- constructor (props) {
+ constructor(props) {
super(props)
this.contextMenuHandler = e => this.handleContextMenu(e)
@@ -245,13 +270,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,
@@ -260,17 +286,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') {
@@ -280,17 +306,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) {
@@ -306,10 +336,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
@@ -317,15 +348,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,
@@ -335,7 +366,8 @@ export default class MarkdownPreview extends React.Component {
scrollPastEnd,
theme,
allowCustomCSS,
- customCSS
+ customCSS,
+ RTL
} = this.getStyleParams()
const inlineStyles = buildStyle({
@@ -346,13 +378,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') {
@@ -368,7 +398,7 @@ export default class MarkdownPreview extends React.Component {
let styles = ''
files.forEach(file => {
- styles += `
`
+ styles += `
`
})
return `
@@ -383,14 +413,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) => {
@@ -403,11 +443,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']
@@ -423,7 +463,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 => {
@@ -437,7 +478,7 @@ export default class MarkdownPreview extends React.Component {
})
}
- fixDecodedURI (node) {
+ fixDecodedURI(node) {
if (
node &&
node.children.length === 1 &&
@@ -454,17 +495,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)
@@ -474,21 +516,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')
@@ -538,6 +574,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)
@@ -545,7 +582,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(
@@ -576,6 +613,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)
@@ -583,7 +624,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
@@ -608,7 +649,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
@@ -624,7 +666,7 @@ export default class MarkdownPreview extends React.Component {
}
}
- getStyleParams () {
+ getStyleParams() {
const {
fontSize,
lineNumber,
@@ -632,22 +674,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,
@@ -658,11 +702,12 @@ export default class MarkdownPreview extends React.Component {
scrollPastEnd,
theme,
allowCustomCSS,
- customCSS
+ customCSS,
+ RTL
}
}
- applyStyle () {
+ applyStyle() {
const {
fontFamily,
fontSize,
@@ -672,7 +717,8 @@ export default class MarkdownPreview extends React.Component {
scrollPastEnd,
theme,
allowCustomCSS,
- customCSS
+ customCSS,
+ RTL
} = this.getStyleParams()
this.getWindow().document.getElementById(
@@ -686,11 +732,12 @@ export default class MarkdownPreview extends React.Component {
scrollPastEnd,
theme,
allowCustomCSS,
- customCSS
+ customCSS,
+ RTL
})
}
- getCodeThemeLink (name) {
+ getCodeThemeLink(name) {
const theme = consts.THEMES.find(theme => theme.name === name)
return theme != null
@@ -698,7 +745,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"]'
@@ -756,7 +803,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'),
@@ -842,7 +891,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')
@@ -865,7 +917,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
+ )
}
)
@@ -887,20 +944,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)
@@ -909,26 +960,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
@@ -959,10 +1016,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 = `
@@ -983,10 +1037,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()
}
@@ -995,11 +1049,20 @@ 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
}
@@ -1007,7 +1070,7 @@ export default class MarkdownPreview extends React.Component {
* @public
* @param {Number} targetRow
*/
- scrollToRow (targetRow) {
+ scrollToRow(targetRow) {
const blocks = this.getWindow().document.querySelectorAll(
'body>[data-line]'
)
@@ -1028,16 +1091,16 @@ export default class MarkdownPreview extends React.Component {
* @param {Number} x
* @param {Number} y
*/
- scrollTo (x, y) {
+ scrollTo(x, y) {
this.getWindow().document.body.scrollTo(x, y)
}
- preventImageDroppedHandler (e) {
+ preventImageDroppedHandler(e) {
e.preventDefault()
e.stopPropagation()
}
- notify (title, options) {
+ notify(title, options) {
if (global.process.platform === 'win32') {
options.icon = path.join(
'file://',
@@ -1048,7 +1111,7 @@ export default class MarkdownPreview extends React.Component {
return new window.Notification(title, options)
}
- handleLinkClick (e) {
+ handleLinkClick(e) {
e.preventDefault()
e.stopPropagation()
@@ -1069,9 +1132,7 @@ export default class MarkdownPreview extends React.Component {
if (posOfHash > -1) {
const extractedId = linkHash.slice(posOfHash + 1)
const targetId = mdurl.encode(extractedId)
- const targetElement = this.getWindow().document.getElementById(
- targetId
- )
+ const targetElement = this.getWindow().document.getElementById(targetId)
if (targetElement != null) {
this.scrollTo(0, targetElement.offsetTop)
@@ -1109,10 +1170,21 @@ export default class MarkdownPreview extends React.Component {
}
// 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({
@@ -140,7 +145,7 @@ class Main extends React.Component {
})
}
- componentDidMount () {
+ componentDidMount() {
const { dispatch, config } = this.props
this.refreshTheme = setInterval(() => {
@@ -173,38 +178,44 @@ 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)
+ )
}
- componentWillUnmount () {
+ componentWillUnmount() {
eventEmitter.off('editor:fullscreen', this.toggleFullScreen)
- eventEmitter.off('menubar:togglemenubar', this.toggleMenuBarVisible.bind(this))
+ eventEmitter.off(
+ 'menubar:togglemenubar',
+ this.toggleMenuBarVisible.bind(this)
+ )
}
- toggleMenuBarVisible () {
+ 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 +255,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 +281,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 +295,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 +303,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 +323,16 @@ class Main extends React.Component {
onMouseUp={e => this.handleMouseUp(e)}
>
- {!config.isSideNavFolded &&
+ {!config.isSideNavFolded && (
}
+
@@ -935,10 +1113,11 @@ class UiTab extends React.Component {
{i18n.__('LaTeX Inline Open Delimiter')}