Skip to content

Commit 87a737b

Browse files
committed
Make rtl optional
1 parent a27ddd7 commit 87a737b

File tree

4 files changed

+49
-21
lines changed

4 files changed

+49
-21
lines changed

browser/components/MarkdownEditor.js

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable camelcase */
12
import PropTypes from 'prop-types'
23
import React from 'react'
34
import CSSModules from 'browser/lib/CSSModules'
@@ -29,20 +30,23 @@ class MarkdownEditor extends React.Component {
2930
isLocked: props.isLocked
3031
}
3132

32-
this.lockEditorCode = () => this.handleLockEditor()
33+
this.lockEditorCode = this.handleLockEditor.bind(this)
34+
this.focusEditor = this.focusEditor.bind(this)
35+
36+
this.previewRef = React.createRef()
3337
}
3438

3539
componentDidMount() {
3640
this.value = this.refs.code.value
3741
eventEmitter.on('editor:lock', this.lockEditorCode)
38-
eventEmitter.on('editor:focus', this.focusEditor.bind(this))
42+
eventEmitter.on('editor:focus', this.focusEditor)
3943
}
4044

4145
componentDidUpdate() {
4246
this.value = this.refs.code.value
4347
}
4448

45-
componentWillReceiveProps(props) {
49+
UNSAFE_componentWillReceiveProps(props) {
4650
if (props.value !== this.props.value) {
4751
this.queueRendering(props.value)
4852
}
@@ -51,7 +55,7 @@ class MarkdownEditor extends React.Component {
5155
componentWillUnmount() {
5256
this.cancelQueue()
5357
eventEmitter.off('editor:lock', this.lockEditorCode)
54-
eventEmitter.off('editor:focus', this.focusEditor.bind(this))
58+
eventEmitter.off('editor:focus', this.focusEditor)
5559
}
5660

5761
focusEditor() {
@@ -60,6 +64,9 @@ class MarkdownEditor extends React.Component {
6064
status: 'CODE'
6165
},
6266
() => {
67+
if (this.refs.code == null) {
68+
return
69+
}
6370
this.refs.code.focus()
6471
}
6572
)
@@ -104,7 +111,7 @@ class MarkdownEditor extends React.Component {
104111
if (newStatus === 'CODE') {
105112
this.refs.code.focus()
106113
} else {
107-
this.refs.preview.focus()
114+
this.previewRef.current.focus()
108115
}
109116
eventEmitter.emit('topbar:togglelockbutton', this.state.status)
110117

@@ -131,8 +138,8 @@ class MarkdownEditor extends React.Component {
131138
status: 'PREVIEW'
132139
},
133140
() => {
134-
this.refs.preview.focus()
135-
this.refs.preview.scrollToRow(cursorPosition.line)
141+
this.previewRef.current.focus()
142+
this.previewRef.current.scrollToRow(cursorPosition.line)
136143
}
137144
)
138145
eventEmitter.emit('topbar:togglelockbutton', this.state.status)
@@ -379,6 +386,7 @@ class MarkdownEditor extends React.Component {
379386
RTL={RTL}
380387
/>
381388
<MarkdownPreview
389+
ref={this.previewRef}
382390
styleName={
383391
this.state.status === 'PREVIEW' ? 'preview' : 'preview--hide'
384392
}
@@ -397,7 +405,6 @@ class MarkdownEditor extends React.Component {
397405
breaks={config.preview.breaks}
398406
sanitize={config.preview.sanitize}
399407
mermaidHTMLLabel={config.preview.mermaidHTMLLabel}
400-
ref='preview'
401408
onContextMenu={e => this.handleContextMenu(e)}
402409
onDoubleClick={e => this.handleDoubleClick(e)}
403410
tabIndex='0'

browser/main/Detail/MarkdownNoteDetail.js

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable camelcase */
12
import PropTypes from 'prop-types'
23
import React from 'react'
34
import CSSModules from 'browser/lib/CSSModules'
@@ -57,7 +58,8 @@ class MarkdownNoteDetail extends React.Component {
5758
this.dispatchTimer = null
5859

5960
this.toggleLockButton = this.handleToggleLockButton.bind(this)
60-
this.generateToc = () => this.handleGenerateToc()
61+
this.generateToc = this.handleGenerateToc.bind(this)
62+
this.handleUpdateContent = this.handleUpdateContent.bind(this)
6163
}
6264

6365
focus() {
@@ -76,7 +78,7 @@ class MarkdownNoteDetail extends React.Component {
7678
ee.on('code:generate-toc', this.generateToc)
7779
}
7880

79-
componentWillReceiveProps(nextProps) {
81+
UNSAFE_componentWillReceiveProps(nextProps) {
8082
const isNewNote = nextProps.note.key !== this.props.note.key
8183
const hasDeletedTags =
8284
nextProps.note.tags.length < this.props.note.tags.length
@@ -392,6 +394,9 @@ class MarkdownNoteDetail extends React.Component {
392394
}
393395

394396
handleSwitchDirection() {
397+
if (!this.props.config.editor.rtlEnabled) {
398+
return
399+
}
395400
// If in split mode, hide the lock button
396401
const direction = this.state.RTL
397402
this.setState({ RTL: !direction })
@@ -436,10 +441,10 @@ class MarkdownNoteDetail extends React.Component {
436441
storageKey={note.storage}
437442
noteKey={note.key}
438443
linesHighlighted={note.linesHighlighted}
439-
onChange={this.handleUpdateContent.bind(this)}
444+
onChange={this.handleUpdateContent}
440445
isLocked={this.state.isLocked}
441446
ignorePreviewPointerEvents={ignorePreviewPointerEvents}
442-
RTL={this.state.RTL}
447+
RTL={config.editor.rtlEnabled && this.state.RTL}
443448
/>
444449
)
445450
} else {
@@ -451,9 +456,9 @@ class MarkdownNoteDetail extends React.Component {
451456
storageKey={note.storage}
452457
noteKey={note.key}
453458
linesHighlighted={note.linesHighlighted}
454-
onChange={this.handleUpdateContent.bind(this)}
459+
onChange={this.handleUpdateContent}
455460
ignorePreviewPointerEvents={ignorePreviewPointerEvents}
456-
RTL={this.state.RTL}
461+
RTL={config.editor.rtlEnabled && this.state.RTL}
457462
/>
458463
)
459464
}
@@ -536,10 +541,12 @@ class MarkdownNoteDetail extends React.Component {
536541
onClick={e => this.handleSwitchMode(e)}
537542
editorType={editorType}
538543
/>
539-
<ToggleDirectionButton
540-
onClick={e => this.handleSwitchDirection(e)}
541-
isRTL={this.state.RTL}
542-
/>
544+
{this.props.config.editor.rtlEnabled && (
545+
<ToggleDirectionButton
546+
onClick={e => this.handleSwitchDirection(e)}
547+
isRTL={this.state.RTL}
548+
/>
549+
)}
543550
<StarButton
544551
onClick={e => this.handleStarButtonClick(e)}
545552
isActive={note.isStarred}

browser/main/lib/ConfigManager.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export const DEFAULT_CONFIG = {
3333
hotkey: {
3434
toggleMain: OSX ? 'Command + Alt + L' : 'Super + Alt + E',
3535
toggleMode: OSX ? 'Command + Alt + M' : 'Ctrl + M',
36-
toggleDirection: OSX ? 'Command + Alt + Right' : 'Ctrl + Right',
36+
toggleDirection: OSX ? 'Command + Alt + Right' : 'Ctrl + Alt + Right',
3737
deleteNote: OSX
3838
? 'Command + Shift + Backspace'
3939
: 'Ctrl + Shift + Backspace',
@@ -85,7 +85,8 @@ export const DEFAULT_CONFIG = {
8585
"semi": false,
8686
"singleQuote": true
8787
}`,
88-
deleteUnusedAttachments: true
88+
deleteUnusedAttachments: true,
89+
rtlEnabled: false
8990
},
9091
preview: {
9192
fontSize: '14',

browser/main/modals/PreferencesModal/UiTab.js

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,8 @@ class UiTab extends React.Component {
127127
.getCodeMirror()
128128
.getValue(),
129129
prettierConfig: this.prettierConfigCM.getCodeMirror().getValue(),
130-
deleteUnusedAttachments: this.refs.deleteUnusedAttachments.checked
130+
deleteUnusedAttachments: this.refs.deleteUnusedAttachments.checked,
131+
rtlEnabled: this.refs.rtlEnabled.checked
131132
},
132133
preview: {
133134
fontSize: this.refs.previewFontSize.value,
@@ -742,6 +743,18 @@ class UiTab extends React.Component {
742743
)}
743744
</label>
744745
</div>
746+
<div styleName='group-checkBoxSection'>
747+
<label>
748+
<input
749+
onChange={e => this.handleUIChange(e)}
750+
checked={this.state.config.editor.rtlEnabled}
751+
ref='rtlEnabled'
752+
type='checkbox'
753+
/>
754+
&nbsp;
755+
{i18n.__('Enable right to left direction(RTL)')}
756+
</label>
757+
</div>
745758

746759
<div styleName='group-section'>
747760
<div styleName='group-section-label'>

0 commit comments

Comments
 (0)