Skip to content

Commit f1d03ac

Browse files
amedoraamedora
committed
Merge branch 'master' into filter-tags-and-folders
# Conflicts: # locales/zh-CN.json
2 parents f577955 + 31ffbd9 commit f1d03ac

39 files changed

+417
-108
lines changed

‎browser/components/CodeEditor.js

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -273,7 +273,7 @@ export default class CodeEditor extends React.Component {
273273
}
274274

275275
componentDidMount () {
276-
const { rulers, enableRulers, enableMarkdownLint } = this.props
276+
const { rulers, enableRulers, enableMarkdownLint, RTL } = this.props
277277
eventEmitter.on('line:jump', this.scrollToLineHandeler)
278278

279279
snippetManager.init()
@@ -294,6 +294,8 @@ export default class CodeEditor extends React.Component {
294294
scrollPastEnd: this.props.scrollPastEnd,
295295
inputStyle: 'textarea',
296296
dragDrop: false,
297+
direction: RTL ? 'rtl' : 'ltr',
298+
rtlMoveVisually: RTL,
297299
foldGutter: true,
298300
lint: enableMarkdownLint ? this.getCodeEditorLintConfig() : false,
299301
gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'CodeMirror-lint-markers'],
@@ -555,6 +557,10 @@ export default class CodeEditor extends React.Component {
555557
if (prevProps.keyMap !== this.props.keyMap) {
556558
needRefresh = true
557559
}
560+
if (prevProps.RTL !== this.props.RTL) {
561+
this.editor.setOption('direction', this.props.RTL ? 'rtl' : 'ltr')
562+
this.editor.setOption('rtlMoveVisually', this.props.RTL)
563+
}
558564
if (prevProps.enableMarkdownLint !== enableMarkdownLint || prevProps.customMarkdownLintConfig !== customMarkdownLintConfig) {
559565
if (!enableMarkdownLint) {
560566
this.editor.setOption('lint', {default: false})
@@ -1219,7 +1225,8 @@ CodeEditor.propTypes = {
12191225
spellCheck: PropTypes.bool,
12201226
enableMarkdownLint: PropTypes.bool,
12211227
customMarkdownLintConfig: PropTypes.string,
1222-
deleteUnusedAttachments: PropTypes.bool
1228+
deleteUnusedAttachments: PropTypes.bool,
1229+
RTL: PropTypes.bool
12231230
}
12241231

12251232
CodeEditor.defaultProps = {
@@ -1235,5 +1242,6 @@ CodeEditor.defaultProps = {
12351242
enableMarkdownLint: DEFAULT_CONFIG.editor.enableMarkdownLint,
12361243
customMarkdownLintConfig: DEFAULT_CONFIG.editor.customMarkdownLintConfig,
12371244
prettierConfig: DEFAULT_CONFIG.editor.prettierConfig,
1238-
deleteUnusedAttachments: DEFAULT_CONFIG.editor.deleteUnusedAttachments
1245+
deleteUnusedAttachments: DEFAULT_CONFIG.editor.deleteUnusedAttachments,
1246+
RTL: false
12391247
}

‎browser/components/MarkdownEditor.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -267,7 +267,7 @@ class MarkdownEditor extends React.Component {
267267
}
268268

269269
render () {
270-
const {className, value, config, storageKey, noteKey, linesHighlighted} = this.props
270+
const {className, value, config, storageKey, noteKey, linesHighlighted, RTL} = this.props
271271

272272
let editorFontSize = parseInt(config.editor.fontSize, 10)
273273
if (!(editorFontSize > 0 && editorFontSize < 101)) editorFontSize = 14
@@ -325,6 +325,7 @@ class MarkdownEditor extends React.Component {
325325
customMarkdownLintConfig={config.editor.customMarkdownLintConfig}
326326
prettierConfig={config.editor.prettierConfig}
327327
deleteUnusedAttachments={config.editor.deleteUnusedAttachments}
328+
RTL={RTL}
328329
/>
329330
<MarkdownPreview styleName={this.state.status === 'PREVIEW'
330331
? 'preview'
@@ -360,6 +361,7 @@ class MarkdownEditor extends React.Component {
360361
allowCustomCSS={config.preview.allowCustomCSS}
361362
lineThroughCheckbox={config.preview.lineThroughCheckbox}
362363
onDrop={(e) => this.handleDropImage(e)}
364+
RTL={RTL}
363365
/>
364366
</div>
365367
)

‎browser/components/MarkdownPreview.js

Lines changed: 44 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import yaml from 'js-yaml'
2121
import { render } from 'react-dom'
2222
import Carousel from 'react-image-carousel'
2323
import ConfigManager from '../main/lib/ConfigManager'
24+
import i18n from 'browser/lib/i18n'
2425

2526
const { remote, shell } = require('electron')
2627
const attachmentManagement = require('../main/lib/dataApi/attachmentManagement')
@@ -63,7 +64,8 @@ function buildStyle (opts) {
6364
scrollPastEnd,
6465
theme,
6566
allowCustomCSS,
66-
customCSS
67+
customCSS,
68+
RTL
6769
} = opts
6870
return `
6971
@font-face {
@@ -100,11 +102,14 @@ ${markdownStyle}
100102
body {
101103
font-family: '${fontFamily.join("','")}';
102104
font-size: ${fontSize}px;
105+
103106
${scrollPastEnd ? `
104107
padding-bottom: 90vh;
105108
box-sizing: border-box;
106109
`
107110
: ''}
111+
${RTL ? 'direction: rtl;' : ''}
112+
${RTL ? 'text-align: right;' : ''}
108113
}
109114
@media print {
110115
body {
@@ -114,6 +119,8 @@ body {
114119
code {
115120
font-family: '${codeBlockFontFamily.join("','")}';
116121
background-color: rgba(0,0,0,0.04);
122+
text-align: left;
123+
direction: ltr;
117124
}
118125
.lineNumber {
119126
${lineNumber && 'display: block !important;'}
@@ -245,6 +252,7 @@ export default class MarkdownPreview extends React.Component {
245252
this.saveAsHtmlHandler = () => this.handleSaveAsHtml()
246253
this.saveAsPdfHandler = () => this.handleSaveAsPdf()
247254
this.printHandler = () => this.handlePrint()
255+
this.resizeHandler = _.throttle(this.handleResize.bind(this), 100)
248256

249257
this.linkClickHandler = this.handleLinkClick.bind(this)
250258
this.initMarkdown = this.initMarkdown.bind(this)
@@ -335,7 +343,8 @@ export default class MarkdownPreview extends React.Component {
335343
scrollPastEnd,
336344
theme,
337345
allowCustomCSS,
338-
customCSS
346+
customCSS,
347+
RTL
339348
} = this.getStyleParams()
340349

341350
const inlineStyles = buildStyle({
@@ -346,9 +355,10 @@ export default class MarkdownPreview extends React.Component {
346355
scrollPastEnd,
347356
theme,
348357
allowCustomCSS,
349-
customCSS
358+
customCSS,
359+
RTL
350360
})
351-
let body = this.markdown.render(noteContent)
361+
let body = this.refs.root.contentWindow.document.body.innerHTML
352362
body = attachmentManagement.fixLocalURLS(
353363
body,
354364
this.props.storagePath
@@ -368,7 +378,7 @@ export default class MarkdownPreview extends React.Component {
368378

369379
let styles = ''
370380
files.forEach(file => {
371-
styles += `<link rel="stylesheet" href="css/${path.basename(file)}">`
381+
styles += `<link rel="stylesheet" href="../css/${path.basename(file)}">`
372382
})
373383

374384
return `<html>
@@ -423,7 +433,8 @@ export default class MarkdownPreview extends React.Component {
423433
.then(res => {
424434
dialog.showMessageBox(remote.getCurrentWindow(), {
425435
type: 'info',
426-
message: `Exported to ${filename}`
436+
message: `Exported to ${filename}`,
437+
buttons: [i18n.__('Ok')]
427438
})
428439
})
429440
.catch(err => {
@@ -538,6 +549,10 @@ export default class MarkdownPreview extends React.Component {
538549
'scroll',
539550
this.scrollHandler
540551
)
552+
this.refs.root.contentWindow.addEventListener(
553+
'resize',
554+
this.resizeHandler
555+
)
541556
eventEmitter.on('export:save-text', this.saveAsTextHandler)
542557
eventEmitter.on('export:save-md', this.saveAsMdHandler)
543558
eventEmitter.on('export:save-html', this.saveAsHtmlHandler)
@@ -576,6 +591,10 @@ export default class MarkdownPreview extends React.Component {
576591
'scroll',
577592
this.scrollHandler
578593
)
594+
this.refs.root.contentWindow.removeEventListener(
595+
'resize',
596+
this.resizeHandler
597+
)
579598
eventEmitter.off('export:save-text', this.saveAsTextHandler)
580599
eventEmitter.off('export:save-md', this.saveAsMdHandler)
581600
eventEmitter.off('export:save-html', this.saveAsHtmlHandler)
@@ -608,7 +627,8 @@ export default class MarkdownPreview extends React.Component {
608627
prevProps.theme !== this.props.theme ||
609628
prevProps.scrollPastEnd !== this.props.scrollPastEnd ||
610629
prevProps.allowCustomCSS !== this.props.allowCustomCSS ||
611-
prevProps.customCSS !== this.props.customCSS
630+
prevProps.customCSS !== this.props.customCSS ||
631+
prevProps.RTL !== this.props.RTL
612632
) {
613633
this.applyStyle()
614634
needsRewriteIframe = true
@@ -632,7 +652,8 @@ export default class MarkdownPreview extends React.Component {
632652
scrollPastEnd,
633653
theme,
634654
allowCustomCSS,
635-
customCSS
655+
customCSS,
656+
RTL
636657
} = this.props
637658
let { fontFamily, codeBlockFontFamily } = this.props
638659
fontFamily = _.isString(fontFamily) && fontFamily.trim().length > 0
@@ -658,7 +679,8 @@ export default class MarkdownPreview extends React.Component {
658679
scrollPastEnd,
659680
theme,
660681
allowCustomCSS,
661-
customCSS
682+
customCSS,
683+
RTL
662684
}
663685
}
664686

@@ -672,7 +694,8 @@ export default class MarkdownPreview extends React.Component {
672694
scrollPastEnd,
673695
theme,
674696
allowCustomCSS,
675-
customCSS
697+
customCSS,
698+
RTL
676699
} = this.getStyleParams()
677700

678701
this.getWindow().document.getElementById(
@@ -686,7 +709,8 @@ export default class MarkdownPreview extends React.Component {
686709
scrollPastEnd,
687710
theme,
688711
allowCustomCSS,
689-
customCSS
712+
customCSS,
713+
RTL
690714
})
691715
}
692716

@@ -995,6 +1019,15 @@ export default class MarkdownPreview extends React.Component {
9951019
}
9961020
}
9971021

1022+
handleResize () {
1023+
_.forEach(
1024+
this.refs.root.contentWindow.document.querySelectorAll('svg[ratio]'),
1025+
el => {
1026+
el.setAttribute('height', el.clientWidth / el.getAttribute('ratio'))
1027+
}
1028+
)
1029+
}
1030+
9981031
focus () {
9991032
this.refs.root.focus()
10001033
}

‎browser/components/MarkdownSplitEditor.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,7 @@ class MarkdownSplitEditor extends React.Component {
137137
}
138138

139139
render () {
140-
const {config, value, storageKey, noteKey, linesHighlighted} = this.props
140+
const {config, value, storageKey, noteKey, linesHighlighted, RTL} = this.props
141141
const storage = findStorage(storageKey)
142142
let editorFontSize = parseInt(config.editor.fontSize, 10)
143143
if (!(editorFontSize > 0 && editorFontSize < 101)) editorFontSize = 14
@@ -183,6 +183,7 @@ class MarkdownSplitEditor extends React.Component {
183183
enableMarkdownLint={config.editor.enableMarkdownLint}
184184
customMarkdownLintConfig={config.editor.customMarkdownLintConfig}
185185
deleteUnusedAttachments={config.editor.deleteUnusedAttachments}
186+
RTL={RTL}
186187
/>
187188
<div styleName='slider' style={{left: this.state.codeEditorWidthInPercent + '%'}} onMouseDown={e => this.handleMouseDown(e)} >
188189
<div styleName='slider-hitbox' />
@@ -213,6 +214,7 @@ class MarkdownSplitEditor extends React.Component {
213214
customCSS={config.preview.customCSS}
214215
allowCustomCSS={config.preview.allowCustomCSS}
215216
lineThroughCheckbox={config.preview.lineThroughCheckbox}
217+
RTL={RTL}
216218
/>
217219
</div>
218220
)

‎browser/components/NoteItem.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import PropTypes from 'prop-types'
55
import React from 'react'
66
import { isArray, sortBy } from 'lodash'
77
import invertColor from 'invert-color'
8+
import Emoji from 'react-emoji-render'
89
import CSSModules from 'browser/lib/CSSModules'
910
import { getTodoStatus } from 'browser/lib/getTodoStatus'
1011
import styles from './NoteItem.styl'
@@ -87,7 +88,7 @@ const NoteItem = ({
8788
: <i styleName='item-title-icon' className='fa fa-fw fa-file-text-o' />}
8889
<div styleName='item-title'>
8990
{note.title.trim().length > 0
90-
? note.title
91+
? <Emoji text={note.title} />
9192
: <span styleName='item-title-empty'>{i18n.__('Empty note')}</span>}
9293
</div>
9394
<div styleName='item-middle'>

0 commit comments

Comments
 (0)