Skip to content

Commit 3e2b6e9

Browse files
catarakcatarak
authored
Merge branch 'develop' into highlight-text
2 parents e9f65e6 + b51ba27 commit 3e2b6e9

23 files changed

+276
-262
lines changed

‎.env.example

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@ EXAMPLE_USER_PASSWORD=hellop5js
1010
GG_EXAMPLES_USERNAME=generativedesign
1111
GG_EXAMPLES_EMAIL=benedikt.gross@generative-gestaltung.de
1212
GG_EXAMPLES_PASS=generativedesign
13-
ML5_EXAMPLES_USERNAME=ml5
14-
ML5_EXAMPLES_EMAIL=examples@ml5js.org
15-
ML5_EXAMPLES_PASS=helloml5
13+
ML5_LIBRARY_USERNAME=ml5
14+
ML5_LIBRARY_EMAIL=examples@ml5js.org
15+
ML5_LIBRARY_PASS=helloml5
1616
GITHUB_ID=<your-github-client-id>
1717
GITHUB_SECRET=<your-github-client-secret>
1818
GOOGLE_ID=<your-google-client-id> (use google+ api)

‎client/components/Nav.jsx

Lines changed: 3 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -42,9 +42,7 @@ class Nav extends React.PureComponent {
4242
this.handleFind = this.handleFind.bind(this);
4343
this.handleAddFile = this.handleAddFile.bind(this);
4444
this.handleAddFolder = this.handleAddFolder.bind(this);
45-
this.handleFindNext = this.handleFindNext.bind(this);
4645
this.handleRun = this.handleRun.bind(this);
47-
this.handleFindPrevious = this.handleFindPrevious.bind(this);
4846
this.handleReplace = this.handleReplace.bind(this);
4947
this.handleStop = this.handleStop.bind(this);
5048
this.handleStartAccessible = this.handleStartAccessible.bind(this);
@@ -128,16 +126,6 @@ class Nav extends React.PureComponent {
128126
this.setDropdown('none');
129127
}
130128

131-
handleFindNext() {
132-
this.props.cmController.findNext();
133-
this.setDropdown('none');
134-
}
135-
136-
handleFindPrevious() {
137-
this.props.cmController.findPrev();
138-
this.setDropdown('none');
139-
}
140-
141129
handleReplace() {
142130
this.props.cmController.showReplace();
143131
this.setDropdown('none');
@@ -434,7 +422,9 @@ class Nav extends React.PureComponent {
434422
onBlur={this.handleBlur}
435423
>
436424
{this.props.t('Nav.Edit.TidyCode')}
437-
<span className="nav__keyboard-shortcut">{'\u21E7'}+Tab</span>
425+
<span className="nav__keyboard-shortcut">
426+
{metaKeyName}+{'\u21E7'}+F
427+
</span>
438428
</button>
439429
</li>
440430
<li className="nav__dropdown-item">
@@ -447,28 +437,6 @@ class Nav extends React.PureComponent {
447437
<span className="nav__keyboard-shortcut">{metaKeyName}+F</span>
448438
</button>
449439
</li>
450-
<li className="nav__dropdown-item">
451-
<button
452-
onClick={this.handleFindNext}
453-
onFocus={this.handleFocusForEdit}
454-
onBlur={this.handleBlur}
455-
>
456-
{this.props.t('Nav.Edit.FindNext')}
457-
<span className="nav__keyboard-shortcut">{metaKeyName}+G</span>
458-
</button>
459-
</li>
460-
<li className="nav__dropdown-item">
461-
<button
462-
onClick={this.handleFindPrevious}
463-
onFocus={this.handleFocusForEdit}
464-
onBlur={this.handleBlur}
465-
>
466-
{this.props.t('Nav.Edit.FindPrevious')}
467-
<span className="nav__keyboard-shortcut">
468-
{'\u21E7'}+{metaKeyName}+G
469-
</span>
470-
</button>
471-
</li>
472440
<li className="nav__dropdown-item">
473441
<button
474442
onClick={this.handleReplace}

‎client/components/__test__/Nav.test.jsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,8 @@ describe('Nav', () => {
4646
},
4747
t: jest.fn(),
4848
setLanguage: jest.fn(),
49-
language: 'en-US'
49+
language: 'en-US',
50+
isUserOwner: true
5051
};
5152

5253
it('renders correctly', () => {

‎client/components/__test__/__snapshots__/Nav.test.jsx.snap

Lines changed: 1 addition & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ exports[`Nav renders correctly 1`] = `
8585
<span
8686
class="nav__keyboard-shortcut"
8787
>
88-
⇧+Tab
88+
⌃+⇧+F
8989
</span>
9090
</button>
9191
</li>
@@ -100,28 +100,6 @@ exports[`Nav renders correctly 1`] = `
100100
</span>
101101
</button>
102102
</li>
103-
<li
104-
class="nav__dropdown-item"
105-
>
106-
<button>
107-
<span
108-
class="nav__keyboard-shortcut"
109-
>
110-
⌃+G
111-
</span>
112-
</button>
113-
</li>
114-
<li
115-
class="nav__dropdown-item"
116-
>
117-
<button>
118-
<span
119-
class="nav__keyboard-shortcut"
120-
>
121-
⇧+⌃+G
122-
</span>
123-
</button>
124-
</li>
125103
<li
126104
class="nav__dropdown-item"
127105
>

‎client/modules/IDE/components/Editor.jsx

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import PropTypes from 'prop-types';
22
import React from 'react';
33
import CodeMirror from 'codemirror';
4+
import emmet from '@emmetio/codemirror-plugin';
45
import beautifyJS from 'js-beautify';
56
import { withTranslation } from 'react-i18next';
67
import 'codemirror/mode/css/css';
@@ -56,13 +57,14 @@ import * as UserActions from '../../User/actions';
5657
import * as ToastActions from '../actions/toast';
5758
import * as ConsoleActions from '../actions/console';
5859

60+
emmet(CodeMirror);
61+
5962
const beautifyCSS = beautifyJS.css;
6063
const beautifyHTML = beautifyJS.html;
6164

6265
window.JSHINT = JSHINT;
6366
window.CSSLint = CSSLint;
6467
window.HTMLHint = HTMLHint;
65-
delete CodeMirror.keyMap.sublime['Shift-Tab'];
6668

6769
const IS_TAB_INDENT = false;
6870
const INDENTATION_AMOUNT = 2;
@@ -107,6 +109,11 @@ class Editor extends React.Component {
107109
keyMap: 'sublime',
108110
highlightSelectionMatches: true, // highlight current search match
109111
matchBrackets: true,
112+
emmet: {
113+
preview: ['html'],
114+
markTagPairs: true,
115+
autoRenameTags: true
116+
},
110117
autoCloseBrackets: this.props.autocloseBracketsQuotes,
111118
styleSelectedText: true,
112119
lint: {
@@ -129,6 +136,7 @@ class Editor extends React.Component {
129136
metaKey === 'Ctrl' ? `${metaKey}-H` : `${metaKey}-Option-F`;
130137
this._cm.setOption('extraKeys', {
131138
Tab: (cm) => {
139+
if (!cm.execCommand('emmetExpandAbbreviation')) return;
132140
// might need to specify and indent more?
133141
const selection = cm.doc.getSelection();
134142
if (selection.length > 0) {
@@ -137,6 +145,8 @@ class Editor extends React.Component {
137145
cm.replaceSelection(' '.repeat(INDENTATION_AMOUNT));
138146
}
139147
},
148+
Enter: 'emmetInsertLineBreak',
149+
Esc: 'emmetResetAbbreviation',
140150
[`${metaKey}-Enter`]: () => null,
141151
[`Shift-${metaKey}-Enter`]: () => null,
142152
[`${metaKey}-F`]: 'findPersistent',
@@ -168,8 +178,14 @@ class Editor extends React.Component {
168178
});
169179

170180
this._cm.on('keydown', (_cm, e) => {
171-
// 9 === Tab
172-
if (e.keyCode === 9 && e.shiftKey) {
181+
// 70 === f
182+
if (
183+
((metaKey === 'Cmd' && e.metaKey) ||
184+
(metaKey === 'Ctrl' && e.ctrlKey)) &&
185+
e.shiftKey &&
186+
e.keyCode === 70
187+
) {
188+
e.preventDefault();
173189
this.tidyCode();
174190
}
175191
});
@@ -284,7 +300,7 @@ class Editor extends React.Component {
284300
mode = 'javascript';
285301
} else if (fileName.match(/.+\.css$/i)) {
286302
mode = 'css';
287-
} else if (fileName.match(/.+\.html$/i)) {
303+
} else if (fileName.match(/.+\.(html|xml)$/i)) {
288304
mode = 'htmlmixed';
289305
} else if (fileName.match(/.+\.json$/i)) {
290306
mode = 'application/json';

‎client/modules/IDE/components/KeyboardShortcutModal.jsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,9 @@ function KeyboardShortcutModal() {
2424
</p>
2525
<ul className="keyboard-shortcuts__list">
2626
<li className="keyboard-shortcut-item">
27-
<span className="keyboard-shortcut__command">{'\u21E7'} + Tab</span>
27+
<span className="keyboard-shortcut__command">
28+
{metaKeyName} + {'\u21E7'} + F
29+
</span>
2830
<span>{t('KeyboardShortcuts.CodeEditing.Tidy')}</span>
2931
</li>
3032
<li className="keyboard-shortcut-item">

‎client/modules/IDE/reducers/files.js

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ function draw() {
1212
const defaultHTML = `<!DOCTYPE html>
1313
<html lang="en">
1414
<head>
15-
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
16-
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/addons/p5.sound.min.js"></script>
15+
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.js"></script>
16+
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/addons/p5.sound.min.js"></script>
1717
<link rel="stylesheet" type="text/css" href="style.css">
1818
<meta charset="utf-8" />
1919
@@ -167,8 +167,7 @@ const files = (state, action) => {
167167
return [...action.files];
168168
case ActionTypes.RESET_PROJECT:
169169
return initialState();
170-
case ActionTypes.CREATE_FILE: // eslint-disable-line
171-
{
170+
case ActionTypes.CREATE_FILE: {
172171
const newState = [
173172
...updateParent(state, action),
174173
{

‎client/styles/components/_editor.scss

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -422,3 +422,42 @@ pre.CodeMirror-line {
422422
.editor__unsaved-changes {
423423
margin-left: #{2 / $base-font-size}rem;
424424
}
425+
426+
/** Inline abbreviation preview */
427+
428+
.emmet-abbreviation-preview {
429+
@extend %modal;
430+
position: absolute;
431+
@include themify() {
432+
background: getThemifyVariable('background-color');
433+
}
434+
& .CodeMirror-lines {
435+
padding: 0;
436+
}
437+
& .CodeMirror {
438+
height: auto;
439+
max-width: #{400 / $base-font-size}rem;
440+
max-height: #{300 / $base-font-size}rem;
441+
border: none;
442+
}
443+
}
444+
445+
.emmet-abbreviation-preview:not(.has-error) .emmet-abbreviation-preview-error {
446+
display: none;
447+
}
448+
449+
.emmet-abbreviation-preview.has-error .CodeMirror {
450+
display: none;
451+
}
452+
453+
.emmet-abbreviation-preview .CodeMirror-cursors {
454+
visibility: hidden !important;
455+
}
456+
457+
.emmet-abbreviation-preview .emmet-error-snippet-message {
458+
padding: 5px;
459+
}
460+
461+
.emmet-open-tag, .emmet-close-tag {
462+
text-decoration: underline;
463+
}

‎client/styles/components/_toolbar.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -149,6 +149,11 @@
149149
font-size: #{12 / $base-font-size}rem;
150150
}
151151

152+
.toolbar__autorefresh {
153+
display: flex;
154+
align-items: center;
155+
}
156+
152157
.checkbox__autorefresh{
153158
cursor: pointer;
154159
}

‎package-lock.json

Lines changed: 14 additions & 15 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -142,6 +142,7 @@
142142
"@babel/core": "^7.8.4",
143143
"@babel/polyfill": "^7.8.3",
144144
"@babel/register": "^7.8.3",
145+
"@emmetio/codemirror-plugin": "^1.2.1",
145146
"archiver": "^1.1.0",
146147
"async": "^2.6.3",
147148
"axios": "^0.21.1",
@@ -216,8 +217,6 @@
216217
"redux-devtools-dock-monitor": "^1.1.3",
217218
"redux-devtools-log-monitor": "^1.4.0",
218219
"redux-thunk": "^2.3.0",
219-
"request": "^2.88.2",
220-
"request-promise": "^4.2.5",
221220
"reselect": "^4.0.0",
222221
"s3-policy-v4": "0.0.3",
223222
"sass-extract": "^2.1.0",

0 commit comments

Comments
 (0)