[#1522] Add updates to emmet config

Author: catarak

client/modules/IDE/components/Editor.jsx

@@ -110,10 +110,10 @@ class Editor extends React.Component {
       keyMap: 'sublime',
       highlightSelectionMatches: true, // highlight current search match
       matchBrackets: true,
-      mode: 'text/html',
       emmet: {
-        preview: true,
-        markTagPairs: true
+        preview: ['html'],
+        markTagPairs: true,
+        autoRenameTags: true
       },
       autoCloseBrackets: this.props.autocloseBracketsQuotes,
       styleSelectedText: true,

client/styles/components/_editor.scss

@@ -423,6 +423,41 @@ pre.CodeMirror-line {
   margin-left: #{2 / $base-font-size}rem;
 }
 
-.emmet-close-tag,.emmet-open-tag{
-  text-decoration: underline;
-}
+/** 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;
+}