From f3edbef55a7d9f88dedc77e96df9874be611a60d Mon Sep 17 00:00:00 2001 From: satyasaibhushan Date: Thu, 25 Feb 2021 15:16:38 +0530 Subject: [PATCH 1/7] removed INDENTATION_AMOUNT to avoid cursor jump --- client/modules/IDE/components/Editor.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/modules/IDE/components/Editor.jsx b/client/modules/IDE/components/Editor.jsx index 558590d962..274d9bbe6d 100644 --- a/client/modules/IDE/components/Editor.jsx +++ b/client/modules/IDE/components/Editor.jsx @@ -359,7 +359,7 @@ class Editor extends React.Component { this._cm.focus(); this._cm.doc.setCursor({ line: currentPosition.line, - ch: currentPosition.ch + INDENTATION_AMOUNT + ch: currentPosition.ch }); } From 218e046ce3c040363e2c7b882966c33ede596708 Mon Sep 17 00:00:00 2001 From: satyasaibhushan Date: Thu, 4 Mar 2021 20:10:04 +0530 Subject: [PATCH 2/7] added prettier to tidy code --- client/modules/IDE/components/Editor.jsx | 28 ++++++++++++++---------- 1 file changed, 16 insertions(+), 12 deletions(-) diff --git a/client/modules/IDE/components/Editor.jsx b/client/modules/IDE/components/Editor.jsx index 274d9bbe6d..f098e3fcf6 100644 --- a/client/modules/IDE/components/Editor.jsx +++ b/client/modules/IDE/components/Editor.jsx @@ -2,7 +2,10 @@ import PropTypes from 'prop-types'; import React from 'react'; import CodeMirror from 'codemirror'; import emmet from '@emmetio/codemirror-plugin'; -import beautifyJS from 'js-beautify'; +import prettier from 'prettier'; +import parserBabel from 'prettier/parser-babel'; +import htmlParser from 'prettier/parser-html'; +import cssParser from 'prettier/parser-postcss'; import { withTranslation } from 'react-i18next'; import 'codemirror/mode/css/css'; import 'codemirror/addon/selection/active-line'; @@ -59,14 +62,10 @@ import * as ConsoleActions from '../actions/console'; emmet(CodeMirror); -const beautifyCSS = beautifyJS.css; -const beautifyHTML = beautifyJS.html; - window.JSHINT = JSHINT; window.CSSLint = CSSLint; window.HTMLHint = HTMLHint; -const IS_TAB_INDENT = false; const INDENTATION_AMOUNT = 2; class Editor extends React.Component { @@ -337,23 +336,28 @@ class Editor extends React.Component { } tidyCode() { - const beautifyOptions = { - indent_size: INDENTATION_AMOUNT, - indent_with_tabs: IS_TAB_INDENT - }; const mode = this._cm.getOption('mode'); const currentPosition = this._cm.doc.getCursor(); if (mode === 'javascript') { this._cm.doc.setValue( - beautifyJS(this._cm.doc.getValue(), beautifyOptions) + prettier.format(this._cm.doc.getValue(), { + parser: 'babel', + plugins: [parserBabel] + }) ); } else if (mode === 'css') { this._cm.doc.setValue( - beautifyCSS(this._cm.doc.getValue(), beautifyOptions) + prettier.format(this._cm.doc.getValue(), { + parser: 'css', + plugins: [cssParser] + }) ); } else if (mode === 'htmlmixed') { this._cm.doc.setValue( - beautifyHTML(this._cm.doc.getValue(), beautifyOptions) + prettier.format(this._cm.doc.getValue(), { + parser: 'html', + plugins: [htmlParser] + }) ); } this._cm.focus(); From 5c78c2f525bc4754c209710dc14b366d4d7bf455 Mon Sep 17 00:00:00 2001 From: satyasaibhushan Date: Thu, 4 Mar 2021 20:11:50 +0530 Subject: [PATCH 3/7] made prettier a normal dependency, removed beautify-js --- package-lock.json | 3 +-- package.json | 3 +-- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index 27f88b1719..64bcea080d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -32809,8 +32809,7 @@ "prettier": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.2.1.tgz", - "integrity": "sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q==", - "dev": true + "integrity": "sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q==" }, "prettier-linter-helpers": { "version": "1.0.0", diff --git a/package.json b/package.json index 23c4ad9ef1..c8486e7548 100644 --- a/package.json +++ b/package.json @@ -122,7 +122,6 @@ "postcss-focus": "^4.0.0", "postcss-loader": "^4.2.0", "postcss-preset-env": "^6.7.0", - "prettier": "^2.2.1", "react-test-renderer": "^16.12.0", "rimraf": "^2.7.1", "sass-loader": "^10.1.1", @@ -177,7 +176,6 @@ "i18next-http-backend": "^1.0.21", "is-url": "^1.2.4", "jest-express": "^1.11.0", - "js-beautify": "^1.10.3", "jsdom": "^9.8.3", "jshint": "^2.11.0", "lodash": "^4.17.19", @@ -194,6 +192,7 @@ "passport-google-oauth20": "^1.0.0", "passport-http": "^0.3.0", "passport-local": "^1.0.0", + "prettier": "^2.2.1", "pretty-bytes": "^3.0.1", "primer-tooltips": "^1.5.11", "prop-types": "^15.6.2", From 0da016ef534f663b526fa3d9ebda8d70d0c562f7 Mon Sep 17 00:00:00 2001 From: satyasaibhushan Date: Thu, 4 Mar 2021 23:52:05 +0530 Subject: [PATCH 4/7] retains cursor position when tydying code --- client/modules/IDE/components/Editor.jsx | 43 +++++++++++------------- 1 file changed, 19 insertions(+), 24 deletions(-) diff --git a/client/modules/IDE/components/Editor.jsx b/client/modules/IDE/components/Editor.jsx index f098e3fcf6..392bd6d5e3 100644 --- a/client/modules/IDE/components/Editor.jsx +++ b/client/modules/IDE/components/Editor.jsx @@ -3,7 +3,7 @@ import React from 'react'; import CodeMirror from 'codemirror'; import emmet from '@emmetio/codemirror-plugin'; import prettier from 'prettier'; -import parserBabel from 'prettier/parser-babel'; +import babelParser from 'prettier/parser-babel'; import htmlParser from 'prettier/parser-html'; import cssParser from 'prettier/parser-postcss'; import { withTranslation } from 'react-i18next'; @@ -335,36 +335,31 @@ class Editor extends React.Component { this._cm.execCommand('replace'); } + prettierFormatWithCursor(parser, plugins) { + const { formatted, cursorOffset } = prettier.formatWithCursor( + this._cm.doc.getValue(), + { + cursorOffset: this._cm.doc.indexFromPos(this._cm.doc.getCursor()), + parser, + plugins + } + ); + this._cm.doc.setValue(formatted); + return cursorOffset; + } + tidyCode() { const mode = this._cm.getOption('mode'); - const currentPosition = this._cm.doc.getCursor(); + let cursorOffset; if (mode === 'javascript') { - this._cm.doc.setValue( - prettier.format(this._cm.doc.getValue(), { - parser: 'babel', - plugins: [parserBabel] - }) - ); + cursorOffset = this.prettierFormatWithCursor('babel', [babelParser]); } else if (mode === 'css') { - this._cm.doc.setValue( - prettier.format(this._cm.doc.getValue(), { - parser: 'css', - plugins: [cssParser] - }) - ); + cursorOffset = this.prettierFormatWithCursor('css', [cssParser]); } else if (mode === 'htmlmixed') { - this._cm.doc.setValue( - prettier.format(this._cm.doc.getValue(), { - parser: 'html', - plugins: [htmlParser] - }) - ); + cursorOffset = this.prettierFormatWithCursor('html', [htmlParser]); } this._cm.focus(); - this._cm.doc.setCursor({ - line: currentPosition.line, - ch: currentPosition.ch - }); + this._cm.doc.setCursor(this._cm.doc.posFromIndex(cursorOffset)); } initializeDocuments(files) { From 43f5054699f6bf505d27e7c05dae7db3fae8a05d Mon Sep 17 00:00:00 2001 From: satyasaibhushan Date: Fri, 5 Mar 2021 00:42:34 +0530 Subject: [PATCH 5/7] ignoring errors on syntax errors --- client/modules/IDE/components/Editor.jsx | 27 ++++++++++++++---------- 1 file changed, 16 insertions(+), 11 deletions(-) diff --git a/client/modules/IDE/components/Editor.jsx b/client/modules/IDE/components/Editor.jsx index 392bd6d5e3..25070dbe01 100644 --- a/client/modules/IDE/components/Editor.jsx +++ b/client/modules/IDE/components/Editor.jsx @@ -336,16 +336,20 @@ class Editor extends React.Component { } prettierFormatWithCursor(parser, plugins) { - const { formatted, cursorOffset } = prettier.formatWithCursor( - this._cm.doc.getValue(), - { - cursorOffset: this._cm.doc.indexFromPos(this._cm.doc.getCursor()), - parser, - plugins - } - ); - this._cm.doc.setValue(formatted); - return cursorOffset; + try { + const { formatted, cursorOffset } = prettier.formatWithCursor( + this._cm.doc.getValue(), + { + cursorOffset: this._cm.doc.indexFromPos(this._cm.doc.getCursor()), + parser, + plugins + } + ); + this._cm.doc.setValue(formatted); + return cursorOffset; + } catch (error) { + return null; + } } tidyCode() { @@ -359,7 +363,8 @@ class Editor extends React.Component { cursorOffset = this.prettierFormatWithCursor('html', [htmlParser]); } this._cm.focus(); - this._cm.doc.setCursor(this._cm.doc.posFromIndex(cursorOffset)); + if (cursorOffset) + this._cm.doc.setCursor(this._cm.doc.posFromIndex(cursorOffset)); } initializeDocuments(files) { From d5c661a0e45ba3f8b4a65125c5e6ef898c59e65f Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Thu, 4 Mar 2021 18:25:15 -0500 Subject: [PATCH 6/7] [#1223] Move setting cursor offet to prettierFormatWithCursor --- client/modules/IDE/components/Editor.jsx | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/client/modules/IDE/components/Editor.jsx b/client/modules/IDE/components/Editor.jsx index 25070dbe01..09191c679f 100644 --- a/client/modules/IDE/components/Editor.jsx +++ b/client/modules/IDE/components/Editor.jsx @@ -346,25 +346,23 @@ class Editor extends React.Component { } ); this._cm.doc.setValue(formatted); - return cursorOffset; + if (cursorOffset) { + this._cm.doc.setCursor(this._cm.doc.posFromIndex(cursorOffset)); + } } catch (error) { - return null; + console.error(error); } } tidyCode() { const mode = this._cm.getOption('mode'); - let cursorOffset; if (mode === 'javascript') { - cursorOffset = this.prettierFormatWithCursor('babel', [babelParser]); + this.prettierFormatWithCursor('babel', [babelParser]); } else if (mode === 'css') { - cursorOffset = this.prettierFormatWithCursor('css', [cssParser]); + this.prettierFormatWithCursor('css', [cssParser]); } else if (mode === 'htmlmixed') { - cursorOffset = this.prettierFormatWithCursor('html', [htmlParser]); + this.prettierFormatWithCursor('html', [htmlParser]); } - this._cm.focus(); - if (cursorOffset) - this._cm.doc.setCursor(this._cm.doc.posFromIndex(cursorOffset)); } initializeDocuments(files) { From 2e8ba08854b230648848de83b329577ca5a559a0 Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Fri, 5 Mar 2021 14:51:13 -0500 Subject: [PATCH 7/7] [#1223] re-add editor focus --- client/modules/IDE/components/Editor.jsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/client/modules/IDE/components/Editor.jsx b/client/modules/IDE/components/Editor.jsx index 09191c679f..5be24e3ff9 100644 --- a/client/modules/IDE/components/Editor.jsx +++ b/client/modules/IDE/components/Editor.jsx @@ -346,9 +346,8 @@ class Editor extends React.Component { } ); this._cm.doc.setValue(formatted); - if (cursorOffset) { - this._cm.doc.setCursor(this._cm.doc.posFromIndex(cursorOffset)); - } + this._cm.focus(); + this._cm.doc.setCursor(this._cm.doc.posFromIndex(cursorOffset)); } catch (error) { console.error(error); }