feat: 代码编辑器支持emmet插件 --story=115432867

packages/editor/package.json

@@ -57,6 +57,7 @@
     "@tmagic/utils": "1.3.8",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
+    "emmet-monaco-es": "^5.3.0",
     "events": "^3.3.0",
     "gesto": "^1.19.1",
     "keycon": "^1.4.0",

packages/editor/src/layouts/CodeEditor.vue

@@ -22,12 +22,12 @@
 import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import { FullScreen } from '@element-plus/icons-vue';
 import { throttle } from 'lodash-es';
-import * as monaco from 'monaco-editor';
 import serialize from 'serialize-javascript';
 
 import { TMagicButton } from '@tmagic/design';
 
 import { getConfig } from '@editor/utils/config';
+import monaco from '@editor/utils/monaco-editor';
 
 defineOptions({
   name: 'MEditorCodeEditor',

packages/editor/src/utils/monaco-editor.ts

@@ -0,0 +1,8 @@
+import { emmetCSS, emmetHTML } from 'emmet-monaco-es';
+import * as monaco from 'monaco-editor';
+
+// 注册emmet插件
+emmetHTML(monaco);
+emmetCSS(monaco, ['css', 'scss']);
+
+export default monaco;

pnpm-lock.yaml

@@ -315,6 +315,9 @@ importers:
       color:
         specifier: ^3.1.3
         version: 3.1.3
+      emmet-monaco-es:
+        specifier: ^5.3.0
+        version: 5.3.0(monaco-editor@0.41.0)
       events:
         specifier: ^3.3.0
         version: 3.3.0
@@ -3830,6 +3833,22 @@ packages:
     dependencies:
       vue: 3.3.8(typescript@5.0.4)
 
+  /@emmetio/abbreviation@2.3.3:
+    resolution: {integrity: sha512-mgv58UrU3rh4YgbE/TzgLQwJ3pFsHHhCLqY20aJq+9comytTXUDNGG/SMtSeMJdkpxgXSXunBGLD8Boka3JyVA==}
+    dependencies:
+      '@emmetio/scanner': 1.0.4
+    dev: false
+
+  /@emmetio/css-abbreviation@2.1.8:
+    resolution: {integrity: sha512-s9yjhJ6saOO/uk1V74eifykk2CBYi01STTK3WlXWGOepyKa23ymJ053+DNQjpFcy1ingpaO7AxCcwLvHFY9tuw==}
+    dependencies:
+      '@emmetio/scanner': 1.0.4
+    dev: false
+
+  /@emmetio/scanner@1.0.4:
+    resolution: {integrity: sha512-IqRuJtQff7YHHBk4G8YZ45uB9BaAGcwQeVzgj/zj8/UdOhtQpEIupUhSk8dys6spFIWVZVeK20CzGEnqR5SbqA==}
+    dev: false
+
   /@esbuild/android-arm64@0.17.19:
     resolution: {integrity: sha512-KBMWvEZooR7+kzY0BtbTQn0OAYY7CsiydT63pVEaPtVYF0hXbUaOyZog37DKxK7NF3XacBJOpYT4adIJh+avxA==}
     engines: {node: '>=12'}
@@ -6629,6 +6648,22 @@ packages:
     transitivePeerDependencies:
       - '@vue/composition-api'
 
+  /emmet-monaco-es@5.3.0(monaco-editor@0.41.0):
+    resolution: {integrity: sha512-+Somf9sB9Smzfl2FV9E19/DA5osHq488dv8KaGavozkv2fo69Y2rY0EoL4vWQk5FpMBc0YfdtiRsuw48Sdxs5g==}
+    peerDependencies:
+      monaco-editor: '>=0.22.0'
+    dependencies:
+      emmet: 2.4.6
+      monaco-editor: 0.41.0
+    dev: false
+
+  /emmet@2.4.6:
+    resolution: {integrity: sha512-dJfbdY/hfeTyf/Ef7Y7ubLYzkBvPQ912wPaeVYpAxvFxkEBf/+hJu4H6vhAvFN6HlxqedlfVn2x1S44FfQ97pg==}
+    dependencies:
+      '@emmetio/abbreviation': 2.3.3
+      '@emmetio/css-abbreviation': 2.1.8
+    dev: false
+
   /emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}