From b34d72f21ac2d61aac3b931e4736de5c432c02f8 Mon Sep 17 00:00:00 2001 From: Leo Lam Date: Wed, 3 May 2017 00:29:18 -0400 Subject: [PATCH 1/4] revamp handling of multi-key presses - use keyCodes instead of strings to detect keys - delete key from keyPressed array on key up - fix #540 --- browser/components/MarkdownEditor.js | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/browser/components/MarkdownEditor.js b/browser/components/MarkdownEditor.js index 78904226..43d1a10d 100644 --- a/browser/components/MarkdownEditor.js +++ b/browser/components/MarkdownEditor.js @@ -9,14 +9,16 @@ class MarkdownEditor extends React.Component { constructor (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 = { status: 'PREVIEW', renderValue: props.value, - keyPressed: {}, + keyPressed: new Set(), isLocked: false } @@ -87,7 +89,7 @@ class MarkdownEditor extends React.Component { handleBlur (e) { if (this.state.isLocked) return - this.setState({ keyPressed: [] }) + this.setState({ keyPressed: new Set()}) let { config } = this.props if (config.editor.switchPreview === 'BLUR') { let cursorPosition = this.refs.code.editor.getCursor() @@ -161,11 +163,10 @@ class MarkdownEditor extends React.Component { handleKeyDown (e) { if (this.state.status !== 'CODE') return false - const keyPressed = Object.assign(this.state.keyPressed, { - [e.key]: true - }) + const keyPressed = this.state.keyPressed + keyPressed.add(e.keyCode) 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)) { document.activeElement.blur() } @@ -190,9 +191,8 @@ class MarkdownEditor extends React.Component { } handleKeyUp (e) { - const keyPressed = Object.assign(this.state.keyPressed, { - [e.key]: false - }) + const keyPressed = this.state.keyPressed + keyPressed.delete(e.keyCode) this.setState({ keyPressed }) } From 50ad5e37911b1c166a6d38bd68fc1c4b2212a4a8 Mon Sep 17 00:00:00 2001 From: Leo Lam Date: Wed, 3 May 2017 01:04:50 -0400 Subject: [PATCH 2/4] minor improvement on multi-key detection -check if number of keys pressed is the same as number of keys in a shortcut key combo before matching to avoid incorrect detection --- browser/components/MarkdownEditor.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/browser/components/MarkdownEditor.js b/browser/components/MarkdownEditor.js index 43d1a10d..4f5ab814 100644 --- a/browser/components/MarkdownEditor.js +++ b/browser/components/MarkdownEditor.js @@ -167,10 +167,13 @@ class MarkdownEditor extends React.Component { keyPressed.add(e.keyCode) this.setState({ keyPressed }) 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() } - if (this.supportMdSelectionBold.every(isNoteHandlerKey)) { + if (keyPressed.size === this.supportMdSelectionBold.length && this.supportMdSelectionBold.every(isNoteHandlerKey)) { this.addMdAroundWord('**') } } From aee6541d45cc575c63bb514ff4e91136a02824ed Mon Sep 17 00:00:00 2001 From: Leo Lam Date: Wed, 3 May 2017 01:17:13 -0400 Subject: [PATCH 3/4] fix lint errors --- browser/components/MarkdownEditor.js | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/browser/components/MarkdownEditor.js b/browser/components/MarkdownEditor.js index 4f5ab814..409149ce 100644 --- a/browser/components/MarkdownEditor.js +++ b/browser/components/MarkdownEditor.js @@ -9,10 +9,10 @@ class MarkdownEditor extends React.Component { constructor (props) { super(props) - //char codes for ctrl + w + // char codes for ctrl + w this.escapeFromEditor = [17, 87] - //ctrl + shift + ; + // ctrl + shift + ; this.supportMdSelectionBold = [16, 17, 186] this.state = { @@ -89,7 +89,7 @@ class MarkdownEditor extends React.Component { handleBlur (e) { if (this.state.isLocked) return - this.setState({ keyPressed: new Set()}) + this.setState({ keyPressed: new Set() }) let { config } = this.props if (config.editor.switchPreview === 'BLUR') { let cursorPosition = this.refs.code.editor.getCursor() @@ -167,10 +167,9 @@ class MarkdownEditor extends React.Component { keyPressed.add(e.keyCode) this.setState({ keyPressed }) let isNoteHandlerKey = (el) => { return keyPressed.has(el) } - if (keyPressed.size === this.escapeFromEditor.length - && !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() } if (keyPressed.size === this.supportMdSelectionBold.length && this.supportMdSelectionBold.every(isNoteHandlerKey)) { From a1e71b318c46848ad976c8f72692e29b12eb7622 Mon Sep 17 00:00:00 2001 From: Leo Lam Date: Wed, 3 May 2017 01:20:57 -0400 Subject: [PATCH 4/4] fix lint error again --- browser/components/MarkdownEditor.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/browser/components/MarkdownEditor.js b/browser/components/MarkdownEditor.js index 409149ce..e3704433 100644 --- a/browser/components/MarkdownEditor.js +++ b/browser/components/MarkdownEditor.js @@ -167,7 +167,7 @@ class MarkdownEditor extends React.Component { keyPressed.add(e.keyCode) this.setState({ keyPressed }) let isNoteHandlerKey = (el) => { return keyPressed.has(el) } - if (keyPressed.size === this.escapeFromEditor.length && + if (keyPressed.size === this.escapeFromEditor.length && !this.state.isLocked && this.state.status === 'CODE' && this.escapeFromEditor.every(isNoteHandlerKey)) { document.activeElement.blur()