adding emmet integration

Author: neelesh7singh

client/modules/IDE/components/Editor.jsx

@@ -1,6 +1,7 @@
 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 { withTranslation } from 'react-i18next';
 import 'codemirror/mode/css/css';
@@ -54,6 +55,7 @@ import * as ToastActions from '../actions/toast';
 import * as ConsoleActions from '../actions/console';
 
 search(CodeMirror);
+emmet(CodeMirror);
 
 const beautifyCSS = beautifyJS.css;
 const beautifyHTML = beautifyJS.html;
@@ -103,6 +105,11 @@ class Editor extends React.Component {
       keyMap: 'sublime',
       highlightSelectionMatches: true, // highlight current search match
       matchBrackets: true,
+      mode: 'text/html',
+      emmet: {
+        preview: true,
+        markTagPairs: true,
+      },
       lint: {
         onUpdateLinting: ((annotations) => {
           this.props.hideRuntimeErrorWarning();
@@ -121,6 +128,7 @@ class Editor extends React.Component {
 
     this._cm.setOption('extraKeys', {
       Tab: (cm) => {
+        if (!cm.execCommand('emmetExpandAbbreviation')) return;
         // might need to specify and indent more?
         const selection = cm.doc.getSelection();
         if (selection.length > 0) {
@@ -129,6 +137,8 @@ class Editor extends React.Component {
           cm.replaceSelection(' '.repeat(INDENTATION_AMOUNT));
         }
       },
+      Enter: 'emmetInsertLineBreak',
+      Esc: 'emmetResetAbbreviation',
       [`${metaKey}-Enter`]: () => null,
       [`Shift-${metaKey}-Enter`]: () => null,
       [`${metaKey}-F`]: 'findPersistent',
@@ -184,7 +194,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();

client/styles/components/_editor.scss

@@ -395,3 +395,7 @@ pre.CodeMirror-line {
 .editor__unsaved-changes {
   margin-left: #{2 / $base-font-size}rem;
 }
+
+.emmet-close-tag,.emmet-open-tag{
+  text-decoration: underline;
+}

package-lock.json

@@ -140,6 +140,7 @@
     "@babel/core": "^7.8.4",
     "@babel/polyfill": "^7.8.3",
     "@babel/register": "^7.8.3",
+    "@emmetio/codemirror-plugin": "^1.2.1",
     "archiver": "^1.1.0",
     "async": "^2.6.3",
     "axios": "^0.18.1",