public/Boostnote
1
0
Fork 0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-13 17:56:25 +00:00
Code Issues Releases Wiki Activity

Merge pull request #545 from LeoLamCY/revamp-keypress-handling

Browse Source 
Revamp handling of multiple key press
This commit is contained in:
SuenagaRyota
2017-05-04 10:59:28 -07:00
committed by GitHub
parent e37e28a22e a1e71b318c
commit efd80d5c0c
1 changed files with 15 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
browser/components/MarkdownEditor.js
View File

@@ -9,14 +9,16 @@ class MarkdownEditor extends React.Component {
constructor (props) { constructor (props) {
super(props) super(props)
this.escapeFromEditor = ['Control', 'w'] // char codes for ctrl + w
this.escapeFromEditor = [17, 87]
this.supportMdSelectionBold = ['Control', ':'] // ctrl + shift + ;
this.supportMdSelectionBold = [16, 17, 186]
this.state = { this.state = {
status: 'PREVIEW', status: 'PREVIEW',
renderValue: props.value, renderValue: props.value,
keyPressed: {}, keyPressed: new Set(),
isLocked: false isLocked: false
} }
@@ -87,7 +89,7 @@ class MarkdownEditor extends React.Component {
handleBlur (e) { handleBlur (e) {
if (this.state.isLocked) return if (this.state.isLocked) return
this.setState({ keyPressed: [] }) this.setState({ keyPressed: new Set() })
let { config } = this.props let { config } = this.props
if (config.editor.switchPreview === 'BLUR') { if (config.editor.switchPreview === 'BLUR') {
let cursorPosition = this.refs.code.editor.getCursor() let cursorPosition = this.refs.code.editor.getCursor()
@@ -161,15 +163,16 @@ class MarkdownEditor extends React.Component {
handleKeyDown (e) { handleKeyDown (e) {
if (this.state.status !== 'CODE') return false if (this.state.status !== 'CODE') return false
const keyPressed = Object.assign(this.state.keyPressed, { const keyPressed = this.state.keyPressed
[e.key]: true keyPressed.add(e.keyCode)
})
this.setState({ keyPressed }) this.setState({ keyPressed })
let isNoteHandlerKey = (el) => { return this.state.keyPressed[el] } let isNoteHandlerKey = (el) => { return keyPressed.has(el) }
if (!this.state.isLocked && this.state.status === 'CODE' && this.escapeFromEditor.every(isNoteHandlerKey)) { if (keyPressed.size === this.escapeFromEditor.length &&
!this.state.isLocked && this.state.status === 'CODE' &&
this.escapeFromEditor.every(isNoteHandlerKey)) {
document.activeElement.blur() document.activeElement.blur()
} }
if (this.supportMdSelectionBold.every(isNoteHandlerKey)) { if (keyPressed.size === this.supportMdSelectionBold.length && this.supportMdSelectionBold.every(isNoteHandlerKey)) {
this.addMdAroundWord('**') this.addMdAroundWord('**')
} }
} }
@@ -190,9 +193,8 @@ class MarkdownEditor extends React.Component {
} }
handleKeyUp (e) { handleKeyUp (e) {
const keyPressed = Object.assign(this.state.keyPressed, { const keyPressed = this.state.keyPressed
[e.key]: false keyPressed.delete(e.keyCode)
})
this.setState({ keyPressed }) this.setState({ keyPressed })
} }