feat(ui): monaco editor

Author: LHRUN

cmdb-ui/config/plugin.config.js

@@ -1,46 +1,90 @@
+const webpack = require('webpack')
 const ThemeColorReplacer = require('webpack-theme-color-replacer')
 const generate = require('@ant-design/colors/lib/generate').default
+const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
 
-const getAntdSerials = (color) => {
+const webpackPlugins = [
+  // Ignore all locale files of moment.js
+  new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+  new MonacoWebpackPlugin({
+    languages: ['python', 'shell', 'powershell', 'json', 'bat']
+  })
+]
+
+function isMonacoAsset(assetName, asset) {
+  if (!/\.js$/i.test(assetName)) {
+    return false
+  }
+
+  if (/(^|[\\/])(editor|json|ts)\.worker\.js$/i.test(assetName)) {
+    return true
+  }
+
+  try {
+    const source = asset?.source?.()?.toString?.() || ''
+    return source.includes('MonacoEnvironment') || source.includes('editorSimpleWorker')
+  } catch (error) {
+    return false
+  }
+}
+
+function getAntdSerials(color) {
   // Lighten (similar to less's tint)
   const lightens = new Array(9).fill().map((t, i) => {
     return ThemeColorReplacer.varyColor.lighten(color, i / 10)
   })
   const colorPalettes = generate(color)
-  const rgb = ThemeColorReplacer.varyColor.toNum3(color.replace('#', '')).join(',')
-  return lightens.concat(colorPalettes).concat(rgb)
+  return lightens.concat(colorPalettes)
 }
 
-const themePluginOption = {
-  fileName: 'css/theme-colors-[contenthash:8].css',
-  matchColors: getAntdSerials('#2f54eb'), // primary color series
-  // change style selectors to solve style override issues
-  changeSelector (selector) {
-    switch (selector) {
-      case '.ant-calendar-today .ant-calendar-date':
-        return ':not(.ant-calendar-selected-date):not(.ant-calendar-selected-day)' + selector
-      case '.ant-btn:focus,.ant-btn:hover':
-        return '.ant-btn:focus:not(.ant-btn-primary):not(.ant-btn-danger),.ant-btn:hover:not(.ant-btn-primary):not(.ant-btn-danger)'
-      case '.ant-btn.active,.ant-btn:active':
-        return '.ant-btn.active:not(.ant-btn-primary):not(.ant-btn-danger),.ant-btn:active:not(.ant-btn-primary):not(.ant-btn-danger)'
-      case '.ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon':
-      case '.ant-steps-item-process .ant-steps-item-icon>.ant-steps-icon':
-        return ':not(.ant-steps-item-process)' + selector
-      case '.ant-menu-horizontal>.ant-menu-item-active,.ant-menu-horizontal>.ant-menu-item-open,.ant-menu-horizontal>.ant-menu-item-selected,.ant-menu-horizontal>.ant-menu-item:hover,.ant-menu-horizontal>.ant-menu-submenu-active,.ant-menu-horizontal>.ant-menu-submenu-open,.ant-menu-horizontal>.ant-menu-submenu-selected,.ant-menu-horizontal>.ant-menu-submenu:hover':
-      case '.ant-menu-horizontal > .ant-menu-item-active,.ant-menu-horizontal > .ant-menu-item-open,.ant-menu-horizontal > .ant-menu-item-selected,.ant-menu-horizontal > .ant-menu-item:hover,.ant-menu-horizontal > .ant-menu-submenu-active,.ant-menu-horizontal > .ant-menu-submenu-open,.ant-menu-horizontal > .ant-menu-submenu-selected,.ant-menu-horizontal > .ant-menu-submenu:hover':
-        return '.ant-menu-horizontal > .ant-menu-item-active,.ant-menu-horizontal > .ant-menu-item-open,.ant-menu-horizontal > .ant-menu-item-selected,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item:hover,.ant-menu-horizontal > .ant-menu-submenu-active,.ant-menu-horizontal > .ant-menu-submenu-open,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-selected,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu:hover'
-      case '.ant-menu-horizontal > .ant-menu-item-selected > a':
-      case '.ant-menu-horizontal>.ant-menu-item-selected>a':
-        return '.ant-menu-horizontal:not(ant-menu-light):not(.ant-menu-dark) > .ant-menu-item-selected > a'
-      case '.ant-menu-horizontal > .ant-menu-item > a:hover':
-      case '.ant-menu-horizontal>.ant-menu-item>a:hover':
-        return '.ant-menu-horizontal:not(ant-menu-light):not(.ant-menu-dark) > .ant-menu-item > a:hover'
-      default :
-        return selector
+function createThemeColorReplacer() {
+  // generate theme color replacement styles
+  const plugin = new ThemeColorReplacer({
+    fileName: 'css/theme-colors-[contenthash:8].css',
+    matchColors: getAntdSerials('#2f54eb'), // primary color series
+    // change style selectors to solve style override issues
+    changeSelector(selector) {
+      switch (selector) {
+        case '.ant-calendar-today .ant-calendar-date':
+          return ':not(.ant-calendar-selected-date):not(.ant-calendar-selected-day)' + selector
+        case '.ant-btn:focus,.ant-btn:hover':
+          return '.ant-btn:focus:not(.ant-btn-primary),.ant-btn:hover:not(.ant-btn-primary)'
+        case '.ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon':
+          return ':not(.ant-steps-item-process)' + selector
+        case '.ant-btn.active,.ant-btn:active':
+          return '.ant-btn.active:not(.ant-btn-primary),.ant-btn:active:not(.ant-btn-primary)'
+        case '.ant-menu-horizontal>.ant-menu-item-active,.ant-menu-horizontal>.ant-menu-item-open,.ant-menu-horizontal>.ant-menu-item-selected,.ant-menu-horizontal>.ant-menu-item:hover,.ant-menu-horizontal>.ant-menu-submenu-active,.ant-menu-horizontal>.ant-menu-submenu-open,.ant-menu-horizontal>.ant-menu-submenu-selected,.ant-menu-horizontal>.ant-menu-submenu:hover':
+        case '.ant-menu-horizontal > .ant-menu-item-active,.ant-menu-horizontal > .ant-menu-item-open,.ant-menu-horizontal > .ant-menu-item-selected,.ant-menu-horizontal > .ant-menu-item:hover,.ant-menu-horizontal > .ant-menu-submenu-active,.ant-menu-horizontal > .ant-menu-submenu-open,.ant-menu-horizontal > .ant-menu-submenu-selected,.ant-menu-horizontal > .ant-menu-submenu:hover':
+          return '.ant-menu-horizontal > .ant-menu-item-active,.ant-menu-horizontal > .ant-menu-item-open,.ant-menu-horizontal > .ant-menu-item-selected,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item:hover,.ant-menu-horizontal > .ant-menu-submenu-active,.ant-menu-horizontal > .ant-menu-submenu-open,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-selected,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu:hover'
+        case '.ant-menu-horizontal > .ant-menu-item-selected > a':
+          return ':not(.ant-menu-horizontal)' + selector
+        case '.ant-menu-horizontal > .ant-menu-item > a:hover':
+          return ':not(.ant-menu-horizontal)' + selector
+        default:
+          return selector
+      }
+    },
+  })
+
+  const assetsExtractor = plugin.handler?.assetsExtractor
+  const originalExtractAsset = assetsExtractor.extractAsset.bind(assetsExtractor)
+  assetsExtractor.extractAsset = function(assetName, asset) {
+    // Monaco generates a large runtime/worker bundle; this plugin scans all JavaScript files as potential CSS containers.
+    // Skip Monaco-related artifacts to avoid stack overflow caused by excessive regular expression/recursive parsing during the build process.
+    if (isMonacoAsset(assetName, asset)) {
+      return []
     }
+
+    return originalExtractAsset(assetName, asset)
   }
+
+  return plugin
 }
 
-const createThemeColorReplacerPlugin = () => new ThemeColorReplacer(themePluginOption)
+webpackPlugins.push(
+  createThemeColorReplacer()
+)
 
-module.exports = createThemeColorReplacerPlugin
+module.exports = {
+  webpackPlugins
+}

cmdb-ui/package.json

@@ -23,7 +23,6 @@
     "axios": "0.18.0",
     "babel-eslint": "^8.2.2",
     "butterfly-dag": "^4.3.26",
-    "codemirror": "^5.65.13",
     "core-js": "^3.31.0",
     "echarts": "^5.3.2",
     "element-ui": "^2.15.10",
@@ -38,6 +37,9 @@
     "lodash.pick": "^4.4.0",
     "md5": "^2.2.1",
     "moment": "^2.24.0",
+    "monaco-editor": "^0.28.1",
+    "monaco-editor-webpack-plugin": "^4.2.0",
+    "monaco-vim": "^0.4.4",
     "nprogress": "^0.2.0",
     "relation-graph": "^2.1.42",
     "snabbdom": "^3.5.1",
@@ -47,7 +49,6 @@
     "vue": "2.6.11",
     "vue-clipboard2": "^0.3.3",
     "vue-cli-plugin-style-resources-loader": "^0.1.5",
-    "vue-codemirror": "^4.0.6",
     "vue-cropper": "^0.6.2",
     "vue-grid-layout": "2.3.12",
     "vue-i18n": "8.28.2",