Skip to content

Commit 416c52d

Browse files
catarakcatarak
committed
Merge develop
2 parents b59d735 + f1eee4b commit 416c52d

File tree

14 files changed

+123
-49
lines changed

14 files changed

+123
-49
lines changed

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,8 +52,9 @@ class SketchList extends React.Component {
5252
};
5353

5454
inCollection = (sketch) =>
55-
this.props.collection.items.find((item) => item.project.id === sketch.id) !=
56-
null;
55+
this.props.collection.items.find((item) =>
56+
item.isDeleted ? false : item.project.id === sketch.id
57+
) != null;
5758

5859
render() {
5960
const hasSketches = this.props.sketches.length > 0;

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

Lines changed: 35 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
import PropTypes from 'prop-types';
22
import React from 'react';
33
import CodeMirror from 'codemirror';
4-
import beautifyJS from 'js-beautify';
4+
import emmet from '@emmetio/codemirror-plugin';
5+
import prettier from 'prettier';
6+
import babelParser from 'prettier/parser-babel';
7+
import htmlParser from 'prettier/parser-html';
8+
import cssParser from 'prettier/parser-postcss';
59
import { withTranslation } from 'react-i18next';
610
import 'codemirror/mode/css/css';
711
import 'codemirror/addon/selection/active-line';
@@ -56,14 +60,12 @@ import * as UserActions from '../../User/actions';
5660
import * as ToastActions from '../actions/toast';
5761
import * as ConsoleActions from '../actions/console';
5862

59-
const beautifyCSS = beautifyJS.css;
60-
const beautifyHTML = beautifyJS.html;
63+
emmet(CodeMirror);
6164

6265
window.JSHINT = JSHINT;
6366
window.CSSLint = CSSLint;
6467
window.HTMLHint = HTMLHint;
6568

66-
const IS_TAB_INDENT = false;
6769
const INDENTATION_AMOUNT = 2;
6870

6971
class Editor extends React.Component {
@@ -106,6 +108,11 @@ class Editor extends React.Component {
106108
keyMap: 'sublime',
107109
highlightSelectionMatches: true, // highlight current search match
108110
matchBrackets: true,
111+
emmet: {
112+
preview: ['html'],
113+
markTagPairs: true,
114+
autoRenameTags: true
115+
},
109116
autoCloseBrackets: this.props.autocloseBracketsQuotes,
110117
styleSelectedText: true,
111118
lint: {
@@ -128,6 +135,7 @@ class Editor extends React.Component {
128135
metaKey === 'Ctrl' ? `${metaKey}-H` : `${metaKey}-Option-F`;
129136
this._cm.setOption('extraKeys', {
130137
Tab: (cm) => {
138+
if (!cm.execCommand('emmetExpandAbbreviation')) return;
131139
// might need to specify and indent more?
132140
const selection = cm.doc.getSelection();
133141
if (selection.length > 0) {
@@ -136,6 +144,8 @@ class Editor extends React.Component {
136144
cm.replaceSelection(' '.repeat(INDENTATION_AMOUNT));
137145
}
138146
},
147+
Enter: 'emmetInsertLineBreak',
148+
Esc: 'emmetResetAbbreviation',
139149
[`${metaKey}-Enter`]: () => null,
140150
[`Shift-${metaKey}-Enter`]: () => null,
141151
[`${metaKey}-F`]: 'findPersistent',
@@ -325,31 +335,33 @@ class Editor extends React.Component {
325335
this._cm.execCommand('replace');
326336
}
327337

338+
prettierFormatWithCursor(parser, plugins) {
339+
try {
340+
const { formatted, cursorOffset } = prettier.formatWithCursor(
341+
this._cm.doc.getValue(),
342+
{
343+
cursorOffset: this._cm.doc.indexFromPos(this._cm.doc.getCursor()),
344+
parser,
345+
plugins
346+
}
347+
);
348+
this._cm.doc.setValue(formatted);
349+
this._cm.focus();
350+
this._cm.doc.setCursor(this._cm.doc.posFromIndex(cursorOffset));
351+
} catch (error) {
352+
console.error(error);
353+
}
354+
}
355+
328356
tidyCode() {
329-
const beautifyOptions = {
330-
indent_size: INDENTATION_AMOUNT,
331-
indent_with_tabs: IS_TAB_INDENT
332-
};
333357
const mode = this._cm.getOption('mode');
334-
const currentPosition = this._cm.doc.getCursor();
335358
if (mode === 'javascript') {
336-
this._cm.doc.setValue(
337-
beautifyJS(this._cm.doc.getValue(), beautifyOptions)
338-
);
359+
this.prettierFormatWithCursor('babel', [babelParser]);
339360
} else if (mode === 'css') {
340-
this._cm.doc.setValue(
341-
beautifyCSS(this._cm.doc.getValue(), beautifyOptions)
342-
);
361+
this.prettierFormatWithCursor('css', [cssParser]);
343362
} else if (mode === 'htmlmixed') {
344-
this._cm.doc.setValue(
345-
beautifyHTML(this._cm.doc.getValue(), beautifyOptions)
346-
);
363+
this.prettierFormatWithCursor('html', [htmlParser]);
347364
}
348-
this._cm.focus();
349-
this._cm.doc.setCursor({
350-
line: currentPosition.line,
351-
ch: currentPosition.ch + INDENTATION_AMOUNT
352-
});
353365
}
354366

355367
initializeDocuments(files) {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ function parseFileName(name) {
1616
const nameArray = name.split('.');
1717
if (nameArray.length > 1) {
1818
const extension = `.${nameArray[nameArray.length - 1]}`;
19-
const baseName = nameArray.slice(0, -1).join('');
19+
const baseName = nameArray.slice(0, -1).join('.');
2020
const firstLetter = baseName[0];
2121
const lastLetter = baseName[baseName.length - 1];
2222
const middleText = baseName.slice(1, -1);

‎client/modules/IDE/pages/IDEView.jsx

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -378,10 +378,7 @@ class IDEView extends React.Component {
378378
</main>
379379
{this.props.ide.modalIsVisible && <NewFileModal />}
380380
{this.props.ide.newFolderModalVisible && (
381-
<NewFolderModal
382-
closeModal={this.props.closeNewFolderModal}
383-
createFolder={this.props.createFolder}
384-
/>
381+
<NewFolderModal closeModal={this.props.closeNewFolderModal} />
385382
)}
386383
{this.props.ide.uploadFileModalVisible && (
387384
<UploadFileModal closeModal={this.props.closeUploadFileModal} />
@@ -505,9 +502,6 @@ IDEView.propTypes = {
505502
}),
506503
updatedAt: PropTypes.string
507504
}).isRequired,
508-
editorAccessibility: PropTypes.shape({
509-
lintMessages: PropTypes.objectOf(PropTypes.shape()).isRequired
510-
}).isRequired,
511505
preferences: PropTypes.shape({
512506
autosave: PropTypes.bool.isRequired,
513507
fontSize: PropTypes.number.isRequired,
@@ -564,7 +558,6 @@ IDEView.propTypes = {
564558
newFolder: PropTypes.func.isRequired,
565559
closeNewFolderModal: PropTypes.func.isRequired,
566560
closeNewFileModal: PropTypes.func.isRequired,
567-
createFolder: PropTypes.func.isRequired,
568561
closeShareModal: PropTypes.func.isRequired,
569562
closeKeyboardShortcutModal: PropTypes.func.isRequired,
570563
toast: PropTypes.shape({

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

Lines changed: 2 additions & 2 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.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>
15+
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.0/p5.js"></script>
16+
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.0/addons/p5.sound.min.js"></script>
1717
<link rel="stylesheet" type="text/css" href="style.css">
1818
<meta charset="utf-8" />
1919

‎client/styles/abstracts/_variables.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,8 @@ $themes: (
8383
input-text-color: $dark,
8484
input-background-color: $lightest,
8585
input-secondary-background-color: $lightest,
86+
input-selection-text-color: $dark,
87+
input-selection-background-color: $medium-light,
8688
input-border-color: $middle-light,
8789
search-background-color: $lightest,
8890
search-clear-background-color: $light,
@@ -163,6 +165,8 @@ $themes: (
163165
input-text-color: $lightest,
164166
input-background-color: $dark,
165167
input-secondary-background-color: $medium-dark,
168+
input-selection-text-color: $darkest,
169+
input-selection-background-color: $lightest,
166170
input-border-color: $middle-dark,
167171
search-background-color: $lightest,
168172
search-clear-background-color: $medium-dark,
@@ -241,6 +245,8 @@ $themes: (
241245
input-text-color: $lightest,
242246
input-background-color: $dark,
243247
input-secondary-background-color: $medium-dark,
248+
input-selection-text-color: $darkest,
249+
input-selection-background-color: $lightest,
244250
input-border-color: $middle-dark,
245251
search-background-color: $white,
246252
search-clear-background-color: $medium-dark,

‎client/styles/base/_base.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,14 @@ textarea {
4444
}
4545
}
4646

47+
input::selection,
48+
textarea::selection {
49+
@include themify() {
50+
color: getThemifyVariable('input-selection-text-color');
51+
background-color: getThemifyVariable('input-selection-background-color');
52+
}
53+
}
54+
4755
button[type="submit"],
4856
input[type="submit"] {
4957
@include themify() {

‎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+
}

‎package-lock.json

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

‎package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "p5.js-web-editor",
3-
"version": "1.2.2",
3+
"version": "1.3.1",
44
"description": "The web editor for p5.js.",
55
"scripts": {
66
"clean": "rimraf dist",
@@ -122,7 +122,6 @@
122122
"postcss-focus": "^4.0.0",
123123
"postcss-loader": "^4.2.0",
124124
"postcss-preset-env": "^6.7.0",
125-
"prettier": "^2.2.1",
126125
"react-test-renderer": "^16.12.0",
127126
"rimraf": "^2.7.1",
128127
"sass-loader": "^10.1.1",
@@ -142,6 +141,7 @@
142141
"@babel/core": "^7.8.4",
143142
"@babel/polyfill": "^7.8.3",
144143
"@babel/register": "^7.8.3",
144+
"@emmetio/codemirror-plugin": "^1.2.1",
145145
"archiver": "^1.1.0",
146146
"async": "^2.6.3",
147147
"axios": "^0.21.1",
@@ -176,7 +176,6 @@
176176
"i18next-http-backend": "^1.0.21",
177177
"is-url": "^1.2.4",
178178
"jest-express": "^1.11.0",
179-
"js-beautify": "^1.10.3",
180179
"jsdom": "^9.8.3",
181180
"jshint": "^2.11.0",
182181
"lodash": "^4.17.19",
@@ -193,6 +192,7 @@
193192
"passport-google-oauth20": "^1.0.0",
194193
"passport-http": "^0.3.0",
195194
"passport-local": "^1.0.0",
195+
"prettier": "^2.2.1",
196196
"pretty-bytes": "^3.0.1",
197197
"primer-tooltips": "^1.5.11",
198198
"prop-types": "^15.6.2",

0 commit comments

Comments
 (0)