Skip to content

Commit 8218d5e

Browse files
Rokt33rRokt33r
authored
Merge pull request #3282 from ibraude/master
Added rtl toggle button
2 parents 1dd71fc + 7fe6925 commit 8218d5e

14 files changed

+186
-18
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: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,8 @@ function buildStyle (opts) {
6464
scrollPastEnd,
6565
theme,
6666
allowCustomCSS,
67-
customCSS
67+
customCSS,
68+
RTL
6869
} = opts
6970
return `
7071
@font-face {
@@ -101,11 +102,14 @@ ${markdownStyle}
101102
body {
102103
font-family: '${fontFamily.join("','")}';
103104
font-size: ${fontSize}px;
105+
104106
${scrollPastEnd ? `
105107
padding-bottom: 90vh;
106108
box-sizing: border-box;
107109
`
108110
: ''}
111+
${RTL ? 'direction: rtl;' : ''}
112+
${RTL ? 'text-align: right;' : ''}
109113
}
110114
@media print {
111115
body {
@@ -115,6 +119,8 @@ body {
115119
code {
116120
font-family: '${codeBlockFontFamily.join("','")}';
117121
background-color: rgba(0,0,0,0.04);
122+
text-align: left;
123+
direction: ltr;
118124
}
119125
.lineNumber {
120126
${lineNumber && 'display: block !important;'}
@@ -337,7 +343,8 @@ export default class MarkdownPreview extends React.Component {
337343
scrollPastEnd,
338344
theme,
339345
allowCustomCSS,
340-
customCSS
346+
customCSS,
347+
RTL
341348
} = this.getStyleParams()
342349

343350
const inlineStyles = buildStyle({
@@ -348,7 +355,8 @@ export default class MarkdownPreview extends React.Component {
348355
scrollPastEnd,
349356
theme,
350357
allowCustomCSS,
351-
customCSS
358+
customCSS,
359+
RTL
352360
})
353361
let body = this.refs.root.contentWindow.document.body.innerHTML
354362
body = attachmentManagement.fixLocalURLS(
@@ -619,7 +627,8 @@ export default class MarkdownPreview extends React.Component {
619627
prevProps.theme !== this.props.theme ||
620628
prevProps.scrollPastEnd !== this.props.scrollPastEnd ||
621629
prevProps.allowCustomCSS !== this.props.allowCustomCSS ||
622-
prevProps.customCSS !== this.props.customCSS
630+
prevProps.customCSS !== this.props.customCSS ||
631+
prevProps.RTL !== this.props.RTL
623632
) {
624633
this.applyStyle()
625634
needsRewriteIframe = true
@@ -643,7 +652,8 @@ export default class MarkdownPreview extends React.Component {
643652
scrollPastEnd,
644653
theme,
645654
allowCustomCSS,
646-
customCSS
655+
customCSS,
656+
RTL
647657
} = this.props
648658
let { fontFamily, codeBlockFontFamily } = this.props
649659
fontFamily = _.isString(fontFamily) && fontFamily.trim().length > 0
@@ -669,7 +679,8 @@ export default class MarkdownPreview extends React.Component {
669679
scrollPastEnd,
670680
theme,
671681
allowCustomCSS,
672-
customCSS
682+
customCSS,
683+
RTL
673684
}
674685
}
675686

@@ -683,7 +694,8 @@ export default class MarkdownPreview extends React.Component {
683694
scrollPastEnd,
684695
theme,
685696
allowCustomCSS,
686-
customCSS
697+
customCSS,
698+
RTL
687699
} = this.getStyleParams()
688700

689701
this.getWindow().document.getElementById(
@@ -697,7 +709,8 @@ export default class MarkdownPreview extends React.Component {
697709
scrollPastEnd,
698710
theme,
699711
allowCustomCSS,
700-
customCSS
712+
customCSS,
713+
RTL
701714
})
702715
}
703716

‎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/main/Detail/MarkdownNoteDetail.js

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ import { confirmDeleteNote } from 'browser/lib/confirmDeleteNote'
3131
import markdownToc from 'browser/lib/markdown-toc-generator'
3232
import queryString from 'query-string'
3333
import { replace } from 'connected-react-router'
34+
import ToggleDirectionButton from 'browser/main/Detail/ToggleDirectionButton'
3435

3536
class MarkdownNoteDetail extends React.Component {
3637
constructor (props) {
@@ -46,7 +47,8 @@ class MarkdownNoteDetail extends React.Component {
4647
isLockButtonShown: props.config.editor.type !== 'SPLIT',
4748
isLocked: false,
4849
editorType: props.config.editor.type,
49-
switchPreview: props.config.editor.switchPreview
50+
switchPreview: props.config.editor.switchPreview,
51+
RTL: false
5052
}
5153

5254
this.dispatchTimer = null
@@ -61,6 +63,7 @@ class MarkdownNoteDetail extends React.Component {
6163

6264
componentDidMount () {
6365
ee.on('topbar:togglelockbutton', this.toggleLockButton)
66+
ee.on('topbar:toggledirectionbutton', () => this.handleSwitchDirection())
6467
ee.on('topbar:togglemodebutton', () => {
6568
const reversedType = this.state.editorType === 'SPLIT' ? 'EDITOR_PREVIEW' : 'SPLIT'
6669
this.handleSwitchMode(reversedType)
@@ -99,6 +102,7 @@ class MarkdownNoteDetail extends React.Component {
99102

100103
componentWillUnmount () {
101104
ee.off('topbar:togglelockbutton', this.toggleLockButton)
105+
ee.on('topbar:toggledirectionbutton', this.handleSwitchDirection)
102106
ee.off('code:generate-toc', this.generateToc)
103107
if (this.saveQueue != null) this.saveNow()
104108
}
@@ -354,6 +358,12 @@ class MarkdownNoteDetail extends React.Component {
354358
})
355359
}
356360

361+
handleSwitchDirection () {
362+
// If in split mode, hide the lock button
363+
const direction = this.state.RTL
364+
this.setState({ RTL: !direction })
365+
}
366+
357367
handleDeleteNote () {
358368
this.handleTrashButtonClick()
359369
}
@@ -393,6 +403,7 @@ class MarkdownNoteDetail extends React.Component {
393403
onChange={this.handleUpdateContent.bind(this)}
394404
isLocked={this.state.isLocked}
395405
ignorePreviewPointerEvents={ignorePreviewPointerEvents}
406+
RTL={this.state.RTL}
396407
/>
397408
} else {
398409
return <MarkdownSplitEditor
@@ -404,6 +415,7 @@ class MarkdownNoteDetail extends React.Component {
404415
linesHighlighted={note.linesHighlighted}
405416
onChange={this.handleUpdateContent.bind(this)}
406417
ignorePreviewPointerEvents={ignorePreviewPointerEvents}
418+
RTL={this.state.RTL}
407419
/>
408420
}
409421
}
@@ -472,7 +484,7 @@ class MarkdownNoteDetail extends React.Component {
472484
</div>
473485
<div styleName='info-right'>
474486
<ToggleModeButton onClick={(e) => this.handleSwitchMode(e)} editorType={editorType} />
475-
487+
<ToggleDirectionButton onClick={(e) => this.handleSwitchDirection(e)} isRTL={this.state.RTL} />
476488
<StarButton
477489
onClick={(e) => this.handleStarButtonClick(e)}
478490
isActive={note.isStarred}
@@ -518,6 +530,7 @@ class MarkdownNoteDetail extends React.Component {
518530
print={this.print}
519531
/>
520532
</div>
533+
521534
</div>
522535

523536
return (

‎browser/main/Detail/MarkdownNoteDetail.styl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
.control-lockButton
1616
topBarButtonRight()
1717
position absolute
18-
right 225px
18+
right 265px
1919
&:hover .tooltip
2020
opacity 1
2121

‎browser/main/Detail/ToggleDirectionButton.js

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import PropTypes from 'prop-types'
2+
import React from 'react'
3+
import CSSModules from 'browser/lib/CSSModules'
4+
import styles from './ToggleDirectionButton.styl'
5+
import i18n from 'browser/lib/i18n'
6+
7+
const ToggleDirectionButton = ({
8+
onClick, isRTL
9+
}) => (
10+
<div styleName='control-toggleModeButton'>
11+
<div styleName={isRTL ? 'active' : undefined} onClick={() => onClick()}>
12+
<img src={!isRTL ? '../resources/icon/icon-left-to-right.svg' : ''} />
13+
</div>
14+
<div styleName={!isRTL ? 'active' : undefined} onClick={() => onClick()}>
15+
<img src={!isRTL ? '' : '../resources/icon/icon-right-to-left.svg'} />
16+
</div>
17+
<span lang={i18n.locale} styleName='tooltip'>{i18n.__('Toggle Direction')}</span>
18+
</div>
19+
)
20+
21+
ToggleDirectionButton.propTypes = {
22+
onClick: PropTypes.func.isRequired,
23+
isRTL: PropTypes.string.isRequired
24+
}
25+
26+
export default CSSModules(ToggleDirectionButton, styles)

0 commit comments

Comments
 (0)