diff --git a/browser/components/MarkdownEditor.js b/browser/components/MarkdownEditor.js index 55e145d7..a00a87bf 100644 --- a/browser/components/MarkdownEditor.js +++ b/browser/components/MarkdownEditor.js @@ -3,6 +3,7 @@ import CSSModules from 'browser/lib/CSSModules' import styles from './MarkdownEditor.styl' import CodeEditor from 'browser/components/CodeEditor' import MarkdownPreview from 'browser/components/MarkdownPreview' +import eventEmitter from 'browser/main/lib/eventEmitter' class MarkdownEditor extends React.Component { constructor (props) { @@ -13,12 +14,16 @@ class MarkdownEditor extends React.Component { this.state = { status: 'PREVIEW', renderValue: props.value, - keyPressed: {} + keyPressed: {}, + isLocked: false } + + this.lockEditorCode = () => this.handleLockEditor() } componentDidMount () { this.value = this.refs.code.value + eventEmitter.on('editor:lock', this.lockEditorCode) } componentDidUpdate () { @@ -33,6 +38,7 @@ class MarkdownEditor extends React.Component { componentWillUnmount () { this.cancelQueue() + eventEmitter.off('editor:lock', this.lockEditorCode) } queueRendering (value) { @@ -72,11 +78,13 @@ class MarkdownEditor extends React.Component { this.refs.code.blur() this.refs.preview.focus() } + eventEmitter.emit('topbar:showlockbutton') }) } } handleBlur (e) { + if (this.state.isLocked) return this.setState({ keyPressed: [] }) let { config } = this.props if (config.editor.switchPreview === 'BLUR') { @@ -87,6 +95,7 @@ class MarkdownEditor extends React.Component { this.refs.preview.focus() this.refs.preview.scrollTo(cursorPosition.line) }) + eventEmitter.emit('topbar:showlockbutton') } } @@ -102,6 +111,7 @@ class MarkdownEditor extends React.Component { }, () => { this.refs.code.focus() }) + eventEmitter.emit('topbar:showlockbutton') } } @@ -138,6 +148,7 @@ class MarkdownEditor extends React.Component { } else { this.refs.code.focus() } + eventEmitter.emit('topbar:showlockbutton') } reload () { @@ -152,7 +163,7 @@ class MarkdownEditor extends React.Component { }) this.setState({ keyPressed }) let isNoteHandlerKey = (el) => { return this.state.keyPressed[el] } - if (this.state.status === 'CODE' && this.escapeFromEditor.every(isNoteHandlerKey)) { + if (!this.state.isLocked && this.state.status === 'CODE' && this.escapeFromEditor.every(isNoteHandlerKey)) { document.activeElement.blur() } } @@ -164,6 +175,10 @@ class MarkdownEditor extends React.Component { this.setState({ keyPressed }) } + handleLockEditor () { + this.setState({ isLocked: !this.state.isLocked }) + } + render () { let { className, value, config } = this.props diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js index 65821962..8b5a15ed 100644 --- a/browser/main/Detail/MarkdownNoteDetail.js +++ b/browser/main/Detail/MarkdownNoteDetail.js @@ -25,15 +25,23 @@ class MarkdownNoteDetail extends React.Component { note: Object.assign({ title: '', content: '' - }, props.note) + }, props.note), + editorStatus: false, + isLocked: false } this.dispatchTimer = null + + this.showLockButton = this.handleShowLockButton.bind(this) } focus () { this.refs.content.focus() } + componentDidMount () { + ee.on('topbar:showlockbutton', this.showLockButton) + } + componentWillReceiveProps (nextProps) { if (nextProps.note.key !== this.props.note.key && !this.isMovingNote) { if (this.saveQueue != null) this.saveNow() @@ -50,6 +58,10 @@ class MarkdownNoteDetail extends React.Component { if (this.saveQueue != null) this.saveNow() } + componentDidUnmount () { + ee.off('topbar:lock', this.showLockButton) + } + findTitle (value) { let splitted = value.split('\n') let title = null @@ -200,10 +212,28 @@ class MarkdownNoteDetail extends React.Component { } } + handleLockButtonMouseDown (e) { + e.preventDefault() + ee.emit('editor:lock') + this.setState({ isLocked: !this.state.isLocked }) + } + + getToggleLockButton () { + return this.state.isLocked ? 'fa-lock' : 'fa-unlock-alt' + } + handleDeleteKeyDown (e) { if (e.keyCode === 27) this.handleDeleteCancelButtonClick(e) } + handleShowLockButton () { + this.setState({editorStatus: this.refs.content.state.status}) + } + + handleFocus (e) { + this.focus() + } + render () { let { data, config } = this.props let { note } = this.state @@ -235,6 +265,19 @@ class MarkdownNoteDetail extends React.Component { />
+ {(() => { + const faClassName=`fa ${this.getToggleLockButton()}` + const lockButtonComponent = + + return ( + this.state.editorStatus === 'CODE' ? lockButtonComponent : '' + ) + })()}