feat: add emmet

Author: KaelWD

package.json

@@ -35,11 +35,15 @@
   "homepage": "https://github.com/vuetifyjs/vue-repl#readme",
   "devDependencies": {
     "@babel/types": "^7.15.6",
+    "@emmetio/abbreviation": "^2.3.3",
+    "@emmetio/codemirror-plugin": "^1.2.4",
+    "@emmetio/css-abbreviation": "^2.1.8",
     "@microsoft/api-extractor": "^7.19.2",
     "@types/codemirror": "^5.60.2",
     "@types/node": "^16.11.12",
     "@vitejs/plugin-vue": "^3.0.0",
     "codemirror": "^5.62.3",
+    "emmet": "^2.4.4",
     "fflate": "^0.7.3",
     "hash-sum": "^2.0.0",
     "rimraf": "^3.0.2",

pnpm-lock.yaml

@@ -29,7 +29,19 @@ onMounted(() => {
     autoCloseBrackets: true,
     autoCloseTags: true,
     foldGutter: true,
-    gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter']
+    gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
+    extraKeys: {
+      'Tab': 'emmetExpandAbbreviation',
+      'Esc': 'emmetResetAbbreviation',
+      'Enter': 'emmetInsertLineBreak'
+    },
+    emmet: {
+      mark: true,
+      markTagPairs: true,
+      previewOpenTag: true,
+      preview: true,
+      autoRenameTags: true,
+    }
   }
 
   const editor = CodeMirror(el.value!, {
@@ -39,6 +51,7 @@ onMounted(() => {
     tabSize: 2,
     lineWrapping: true,
     lineNumbers: true,
+    inputStyle: 'contenteditable',
     ...addonOptions
   })
 

src/codemirror/CodeMirror.vue

@@ -249,6 +249,9 @@
 .cm-s-default .cm-meta {
   color: #555;
 }
+.cm-s-default .cm-mustache {
+  color: var(--base);
+}
 .cm-s-default .cm-qualifier {
   color: var(--qualifier);
 }
@@ -520,3 +523,43 @@ div.CodeMirror-dragcursors {
 span.CodeMirror-selectedtext {
   background: none;
 }
+
+/* Emmet */
+.emmet-abbreviation {
+  border-bottom: 1px solid rgba(0, 180, 0, 0.3);
+  border-radius: 2px;
+}
+
+.emmet-abbreviation-preview {
+  background: #111;
+  border-radius: 4px;
+  overflow: hidden;
+  z-index: 2;
+}
+
+.emmet-abbreviation-preview .CodeMirror-cursors {
+  display: none;
+}
+
+.emmet-abbreviation-preview .CodeMirror-vscrollbar {
+  overflow: hidden;
+}
+
+.emmet-abbreviation-preview .CodeMirror-sizer {
+  border-right: 0;
+}
+
+.emmet-open-tag, .emmet-close-tag {
+  text-decoration: underline;
+}
+
+.emmet-tag-preview {
+  background: #117700;
+  color: #ffffff;
+  border-radius: 2px;
+  padding: 2px 4px;
+  font-size: 0.8em;
+  opacity: 0.6;
+  margin-top: -16px;
+  margin-left: 2px;
+}

src/codemirror/codemirror.css

@@ -5,6 +5,7 @@ import './codemirror.css'
 import 'codemirror/mode/javascript/javascript.js'
 import 'codemirror/mode/css/css.js'
 import 'codemirror/mode/htmlmixed/htmlmixed.js'
+import 'codemirror/mode/vue/vue.js'
 
 // addons
 import 'codemirror/addon/edit/closebrackets.js'
@@ -16,4 +17,8 @@ import 'codemirror/addon/fold/brace-fold.js'
 import 'codemirror/addon/fold/indent-fold.js'
 import 'codemirror/addon/fold/comment-fold.js'
 
+import emmet from '@emmetio/codemirror-plugin'
+
+emmet(CodeMirror)
+
 export default CodeMirror

src/codemirror/codemirror.ts

@@ -14,10 +14,9 @@ const onChange = debounce((code: string) => {
 
 const activeMode = computed(() => {
   const { filename } = store.state.activeFile
-  return filename.endsWith('.vue') || filename.endsWith('.html')
-    ? 'htmlmixed'
-    : filename.endsWith('.css')
-    ? 'css'
+  return filename.endsWith('.vue') ? 'vue'
+    : filename.endsWith('.html') ? 'htmlmixed'
+    : filename.endsWith('.css') ? 'css'
     : 'javascript'
 })
 </script>