Skip to content

Add Cmd+Shift+F as tidy code shortcut and prevent browser default behaviour #1732

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 14 commits into from
Feb 24, 2021
Merged

Add Cmd+Shift+F as tidy code shortcut and prevent browser default behaviour #1732

Changes from 1 commit
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
ecefaa8
Add Cmd+Shift+F astidy code shortcut and prevent browser default beha…
vulongphan Jan 8, 2021
25f3ffa
Merge remote-tracking branch 'upstream/develop' into update/tidy-code…
vulongphan Jan 21, 2021
f801d1f
make use of variable metaKey
vulongphan Jan 21, 2021
0ef3880
Merge develop
catarak Feb 1, 2021
e53f956
use KeyboardEvent to check for shortcut to tidyCode
vulongphan Feb 3, 2021
0be0c85
use KeyboardEvent to check for shortcut to tidyCode
vulongphan Feb 3, 2021
059b171
use KeyboardEvent to check for shortcut to tidyCode
vulongphan Feb 3, 2021
afec089
use metaKey to check for Windows/MacOs
vulongphan Feb 4, 2021
7005999
update TidyCode shortcut modal
vulongphan Feb 18, 2021
e3ea72a
Merge branch 'develop' into update/tidy-code-shortcut
catarak Feb 19, 2021
38db3b0
Merge remote-tracking branch 'upstream/develop' into update/tidy-code…
vulongphan Feb 20, 2021
11f27f9
update Nav bar with the short cut for tidy code
vulongphan Feb 20, 2021
1cb1aa6
Merge branch 'update/tidy-code-shortcut' of https://github.com/vulong…
vulongphan Feb 20, 2021
3cef359
[#1711] Update Nav snapshot
catarak Feb 24, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 21 additions & 5 deletions client/modules/IDE/components/Editor.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,11 @@ const beautifyHTML = beautifyJS.html;
window.JSHINT = JSHINT;
window.CSSLint = CSSLint;
window.HTMLHint = HTMLHint;
delete CodeMirror.keyMap.sublime['Shift-Tab'];


// delete CodeMirror.keyMap.sublime['Shift-Cmd-F'];

console.log(CodeMirror.keyMap.sublime);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you delete this console.log and the commented out code?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes!


const IS_TAB_INDENT = false;
const INDENTATION_AMOUNT = 2;
Expand All @@ -88,6 +92,7 @@ class Editor extends React.Component {
this.findPrev = this.findPrev.bind(this);
this.showReplace = this.showReplace.bind(this);
this.getContent = this.getContent.bind(this);
this.handleKey = this.handleKey.bind(this);
}

componentDidMount() {
Expand Down Expand Up @@ -155,14 +160,21 @@ class Editor extends React.Component {
}
}, 1000));

this._cm.on('keyup', () => {
this.map = {};

this._cm.on('keyup', (_cm, e) => {
const temp = this.props.t('Editor.KeyUpLineNumber', { lineNumber: parseInt((this._cm.getCursor().line) + 1, 10) });
document.getElementById('current-line').innerHTML = temp;
this.handleKey(this.map, e);
});

this._cm.on('keydown', (_cm, e) => {
// 9 === Tab
if (e.keyCode === 9 && e.shiftKey) {
this.handleKey(this.map, e);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure how using this function this.handleKey is helping in this scenario? Just from reading this it seems like it's adding some intermediate code that is unnecessary, but please explain if I'm wrong!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The reason why I use this function is because to detect shortcut Cmd+Shift+F the following conditional statement would not work

if (e.keyCode === 91 && e.keyCode === 16 && e.keyCode === 70){ }

I guess the reason is because the browser cannot detect multiple key press. To solve this, I used an object called this.map to store the keydown state of the keyboard. For example, if the shortcut Cmd+Shift+F is pressed, this.map will be

{91: true, 16: true, 70: true}

and when we release the shortcut, this.map will be

{91: false, 16: false, 70: false}

I wonder if there is a better way to get around this.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

there is! if you look at the documentation for a KeyboardEvent, you'll see that it contains metaKey, which will be true if Command is pressed, ctrlKey, which will be true if Control is pressed, and shiftKey, which will be true if Shift is pressed.

// 91 === Cmd
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's a variable that's imported to this file called metaKey which will be set to 'Cmd' if the user is on Mac, and 'Ctrl' if the user is on Windows/Linux. I think you should use this variable rather than just 'Cmd' since 'Cmd' doesn't exist on Windows/Linux!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, I will incorporate the use of metaKey in my changes!

// 16 === Shift
// 70 === f
if (this.map[91] && this.map[16] && this.map[70]) {
e.preventDefault(); // prevent browser's default behaviour
this.tidyCode();
}
});
Expand Down Expand Up @@ -192,7 +204,7 @@ class Editor extends React.Component {

componentDidUpdate(prevProps) {
if (this.props.file.content !== prevProps.file.content &&
this.props.file.content !== this._cm.getValue()) {
this.props.file.content !== this._cm.getValue()) {
const oldDoc = this._cm.swapDoc(this._docs[this.props.file.id]);
this._docs[prevProps.file.id] = oldDoc;
this._cm.focus();
Expand Down Expand Up @@ -327,6 +339,10 @@ class Editor extends React.Component {
}
}

handleKey(map, e) { // update the state of each key pressed and released
map[e.keyCode] = e.type === 'keydown';
}

render() {
const editorSectionClass = classNames({
'editor': true,
Expand Down