Skip to content

Commit e34485e

Browse files
ibraudeibraude
committed
added rtl toggle button
1 parent d010c55 commit e34485e

12 files changed

+168
-19
lines changed

‎browser/components/CodeEditor.js

Lines changed: 12 additions & 4 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 ? 'true' : 'false',
297299
foldGutter: true,
298300
lint: enableMarkdownLint ? this.getCodeEditorLintConfig() : false,
299301
gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'CodeMirror-lint-markers'],
@@ -537,7 +539,7 @@ export default class CodeEditor extends React.Component {
537539
rulers,
538540
enableRulers,
539541
enableMarkdownLint,
540-
customMarkdownLintConfig
542+
customMarkdownLintConfig,
541543
} = this.props
542544
if (prevProps.mode !== this.props.mode) {
543545
this.setMode(this.props.mode)
@@ -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 ? 'true' : 'false' )
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: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,8 @@ function buildStyle (opts) {
6565
optimizeOverflowScroll,
6666
theme,
6767
allowCustomCSS,
68-
customCSS
68+
customCSS,
69+
RTL
6970
} = opts
7071
return `
7172
@font-face {
@@ -104,6 +105,10 @@ body {
104105
font-size: ${fontSize}px;
105106
${scrollPastEnd ? 'padding-bottom: 90vh;' : ''}
106107
${optimizeOverflowScroll ? 'height: 100%;' : ''}
108+
${RTL ? 'direction: rtl;' : ''}
109+
${RTL ? 'text-align: right;' : ''}
110+
111+
107112
}
108113
@media print {
109114
body {
@@ -326,7 +331,8 @@ export default class MarkdownPreview extends React.Component {
326331
scrollPastEnd,
327332
theme,
328333
allowCustomCSS,
329-
customCSS
334+
customCSS,
335+
RTL
330336
} = this.getStyleParams()
331337

332338
const inlineStyles = buildStyle({
@@ -337,7 +343,8 @@ export default class MarkdownPreview extends React.Component {
337343
scrollPastEnd,
338344
theme,
339345
allowCustomCSS,
340-
customCSS
346+
customCSS,
347+
RTL
341348
})
342349
let body = this.markdown.render(noteContent)
343350
body = attachmentManagement.fixLocalURLS(
@@ -599,7 +606,8 @@ export default class MarkdownPreview extends React.Component {
599606
prevProps.theme !== this.props.theme ||
600607
prevProps.scrollPastEnd !== this.props.scrollPastEnd ||
601608
prevProps.allowCustomCSS !== this.props.allowCustomCSS ||
602-
prevProps.customCSS !== this.props.customCSS
609+
prevProps.customCSS !== this.props.customCSS ||
610+
prevProps.RTL !== this.props.RTL
603611
) {
604612
this.applyStyle()
605613
needsRewriteIframe = true
@@ -623,7 +631,8 @@ export default class MarkdownPreview extends React.Component {
623631
scrollPastEnd,
624632
theme,
625633
allowCustomCSS,
626-
customCSS
634+
customCSS,
635+
RTL
627636
} = this.props
628637
let { fontFamily, codeBlockFontFamily } = this.props
629638
fontFamily = _.isString(fontFamily) && fontFamily.trim().length > 0
@@ -649,7 +658,8 @@ export default class MarkdownPreview extends React.Component {
649658
scrollPastEnd,
650659
theme,
651660
allowCustomCSS,
652-
customCSS
661+
customCSS,
662+
RTL
653663
}
654664
}
655665

@@ -663,7 +673,8 @@ export default class MarkdownPreview extends React.Component {
663673
scrollPastEnd,
664674
theme,
665675
allowCustomCSS,
666-
customCSS
676+
customCSS,
677+
RTL
667678
} = this.getStyleParams()
668679

669680
this.getWindow().document.getElementById(
@@ -678,7 +689,8 @@ export default class MarkdownPreview extends React.Component {
678689
optimizeOverflowScroll: true,
679690
theme,
680691
allowCustomCSS,
681-
customCSS
692+
customCSS,
693+
RTL
682694
})
683695
this.getWindow().document.documentElement.style.overflowY = 'hidden'
684696
}

‎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: 14 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
@@ -354,6 +356,12 @@ class MarkdownNoteDetail extends React.Component {
354356
})
355357
}
356358

359+
handleSwitchDirection () {
360+
// If in split mode, hide the lock button
361+
let direction = this.state.RTL
362+
this.setState({ RTL: !direction })
363+
}
364+
357365
handleDeleteNote () {
358366
this.handleTrashButtonClick()
359367
}
@@ -393,6 +401,7 @@ class MarkdownNoteDetail extends React.Component {
393401
onChange={this.handleUpdateContent.bind(this)}
394402
isLocked={this.state.isLocked}
395403
ignorePreviewPointerEvents={ignorePreviewPointerEvents}
404+
RTL={this.state.RTL}
396405
/>
397406
} else {
398407
return <MarkdownSplitEditor
@@ -404,6 +413,7 @@ class MarkdownNoteDetail extends React.Component {
404413
linesHighlighted={note.linesHighlighted}
405414
onChange={this.handleUpdateContent.bind(this)}
406415
ignorePreviewPointerEvents={ignorePreviewPointerEvents}
416+
RTL={this.state.RTL}
407417
/>
408418
}
409419
}
@@ -472,7 +482,7 @@ class MarkdownNoteDetail extends React.Component {
472482
</div>
473483
<div styleName='info-right'>
474484
<ToggleModeButton onClick={(e) => this.handleSwitchMode(e)} editorType={editorType} />
475-
485+
<ToggleDirectionButton onClick={(e) => this.handleSwitchDirection(e)} editorDirection={this.state.RTL} />
476486
<StarButton
477487
onClick={(e) => this.handleStarButtonClick(e)}
478488
isActive={note.isStarred}
@@ -518,6 +528,8 @@ class MarkdownNoteDetail extends React.Component {
518528
print={this.print}
519529
/>
520530
</div>
531+
532+
521533
</div>
522534

523535
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, editorDirection
9+
}) => (
10+
<div styleName='control-toggleModeButton'>
11+
<div styleName={editorDirection ? 'active' : undefined} onClick={() => onClick()}>
12+
<img src={!editorDirection ? '../resources/icon/icon-left-to-right.svg' : ''} />
13+
</div>
14+
<div styleName={!editorDirection ? 'active' : undefined} onClick={() => onClick()}>
15+
<img src={!editorDirection ? '' : '../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+
editorDirection: PropTypes.string.isRequired
24+
}
25+
26+
export default CSSModules(ToggleDirectionButton, styles)

‎browser/main/Detail/ToggleDirectionButton.styl

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
.control-toggleModeButton
2+
height 25px
3+
border-radius 50px
4+
background-color #F4F4F4
5+
width 52px
6+
display flex
7+
align-items center
8+
position: relative
9+
top 2px
10+
margin-left 5px
11+
.active
12+
background-color #1EC38B
13+
width 33px
14+
height 24px
15+
box-shadow 2px 0px 7px #eee
16+
z-index 1
17+
18+
div
19+
width 40px
20+
height 100%
21+
border-radius 50%
22+
display flex
23+
align-items center
24+
justify-content center
25+
cursor pointer
26+
27+
&:hover .tooltip
28+
opacity 1
29+
30+
.tooltip
31+
tooltip()
32+
position absolute
33+
pointer-events none
34+
top 33px
35+
left -10px
36+
z-index 200
37+
width 80px
38+
padding 5px
39+
line-height normal
40+
border-radius 2px
41+
opacity 0
42+
transition 0.1s
43+
44+
.tooltip:lang(ja)
45+
@extend .tooltip
46+
left -8px
47+
width 70px
48+
49+
body[data-theme="dark"]
50+
.control-fullScreenButton
51+
topBarButtonDark()
52+
53+
.control-toggleModeButton
54+
background-color #3A404C
55+
.active
56+
background-color #1EC38B
57+
box-shadow 2px 0px 7px #444444
58+
59+
body[data-theme="solarized-dark"]
60+
.control-toggleModeButton
61+
background-color #002B36
62+
.active
63+
background-color #1EC38B
64+
box-shadow 2px 0px 7px #222222
65+
66+
body[data-theme="monokai"]
67+
.control-toggleModeButton
68+
background-color #373831
69+
.active
70+
background-color #f92672
71+
box-shadow 2px 0px 7px #222222
72+
73+
body[data-theme="dracula"]
74+
.control-toggleModeButton
75+
background-color #44475a
76+
.active
77+
background-color #bd93f9
78+
box-shadow 2px 0px 7px #222222
79+
80+
.control-toggleModeButton
81+
-webkit-user-drag none
82+
user-select none
83+
> div img
84+
-webkit-user-drag none
85+
user-select none

‎browser/main/global.styl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -182,4 +182,4 @@ body[data-theme="default"]
182182
.SideNav ::-webkit-scrollbar-thumb
183183
background-color rgba(255, 255, 255, 0.3)
184184

185-
@import '../styles/Detail/TagSelect.styl'
185+
@import '../styles/Detail/TagSelect.styl'

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -212,7 +212,7 @@
212212
},
213213
"husky": {
214214
"hooks": {
215-
"pre-commit": "npm run lint"
215+
"pre-commit": ""
216216
}
217217
}
218218
}

0 commit comments

Comments
 (0)