Chore/emmet integration

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';
@@ -56,6 +57,8 @@ import * as UserActions from '../../User/actions';
 import * as ToastActions from '../actions/toast';
 import * as ConsoleActions from '../actions/console';
 
+emmet(CodeMirror);
+
 const beautifyCSS = beautifyJS.css;
 const beautifyHTML = beautifyJS.html;
 
@@ -106,6 +109,11 @@ class Editor extends React.Component {
       keyMap: 'sublime',
       highlightSelectionMatches: true, // highlight current search match
       matchBrackets: true,
+      emmet: {
+        preview: ['html'],
+        markTagPairs: true,
+        autoRenameTags: true
+      },
       autoCloseBrackets: this.props.autocloseBracketsQuotes,
       styleSelectedText: true,
       lint: {
@@ -128,6 +136,7 @@ class Editor extends React.Component {
       metaKey === 'Ctrl' ? `${metaKey}-H` : `${metaKey}-Option-F`;
     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) {
@@ -136,6 +145,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',

client/styles/components/_editor.scss

@@ -422,3 +422,42 @@ pre.CodeMirror-line {
 .editor__unsaved-changes {
   margin-left: #{2 / $base-font-size}rem;
 }
+
+/** Inline abbreviation preview */
+
+.emmet-abbreviation-preview {
+  @extend %modal;
+  position: absolute;
+  @include themify() {
+    background: getThemifyVariable('background-color');
+  }
+  & .CodeMirror-lines {
+    padding: 0;
+  }
+  & .CodeMirror {
+    height: auto;
+    max-width: #{400 / $base-font-size}rem;
+    max-height: #{300 / $base-font-size}rem;
+    border: none;
+  }
+}
+
+.emmet-abbreviation-preview:not(.has-error) .emmet-abbreviation-preview-error {
+    display: none;
+}
+
+.emmet-abbreviation-preview.has-error .CodeMirror {
+    display: none;
+}
+
+.emmet-abbreviation-preview .CodeMirror-cursors {
+    visibility: hidden !important;
+}
+
+.emmet-abbreviation-preview .emmet-error-snippet-message {
+    padding: 5px;
+}
+
+.emmet-open-tag, .emmet-close-tag {
+    text-decoration: underline;
+}

package.json

@@ -142,6 +142,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.21.1",