From 9671f8977089cb6c90c01e0b8b45fdb31f05fb20 Mon Sep 17 00:00:00 2001
From: Lykin <137850705+tiny-craft@users.noreply.github.com>
Date: Tue, 28 Nov 2023 01:11:45 +0800
Subject: [PATCH] feat: embedded monaco editor for string

---
 backend/services/browser_service.go           |   6 +-
 frontend/package-lock.json                    | 267 +++++++++---------
 frontend/package.json                         |   3 +-
 frontend/package.json.md5                     |   2 +-
 .../content_value/ContentEditor.vue           | 158 +++++++++++
 .../content_value/ContentValueString.vue      |  86 +++---
 frontend/src/main.js                          |   2 +
 frontend/src/stores/browser.js                |   4 +-
 frontend/src/stores/preferences.js            |  20 +-
 frontend/src/stores/tab.js                    |   4 +-
 frontend/src/utils/monaco_worker.js           |  23 ++
 11 files changed, 389 insertions(+), 186 deletions(-)
 create mode 100644 frontend/src/components/content_value/ContentEditor.vue
 create mode 100644 frontend/src/utils/monaco_worker.js

diff --git a/backend/services/browser_service.go b/backend/services/browser_service.go
index 2d117cf..8369bf9 100644
--- a/backend/services/browser_service.go
+++ b/backend/services/browser_service.go
@@ -1122,9 +1122,9 @@ func (b *browserService) SetKeyValue(param types.SetKeyParam) (resp types.JSResp
 		return
 	}
 	resp.Success = true
-	resp.Data = map[string]any{
-		"value": param.Value,
-	}
+	//resp.Data = map[string]any{
+	//	"value": param.Value,
+	//}
 	return
 }
 
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index fdf7f69..02073f6 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -12,9 +12,10 @@
         "dayjs": "^1.11.10",
         "highlight.js": "^11.9.0",
         "lodash": "^4.17.21",
+        "monaco-editor": "^0.44.0",
         "pinia": "^2.1.7",
         "sass": "^1.69.5",
-        "vue": "^3.3.8",
+        "vue": "^3.3.9",
         "vue-i18n": "^9.7.1",
         "xterm": "^5.3.0",
         "xterm-addon-fit": "^0.8.0"
@@ -46,9 +47,9 @@
       "dev": true
     },
     "node_modules/@babel/parser": {
-      "version": "7.23.0",
-      "resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.23.0.tgz",
-      "integrity": "sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==",
+      "version": "7.23.4",
+      "resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.23.4.tgz",
+      "integrity": "sha512-vf3Xna6UEprW+7t6EtOmFpHNAuxw3xqPZghy+brsnusscJRW5BMUzzHZc5ICjULee81WeUV2jjakG09MDglJXQ==",
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -761,36 +762,36 @@
       }
     },
     "node_modules/@vue/compiler-core": {
-      "version": "3.3.8",
-      "resolved": "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.3.8.tgz",
-      "integrity": "sha512-hN/NNBUECw8SusQvDSqqcVv6gWq8L6iAktUR0UF3vGu2OhzRqcOiAno0FmBJWwxhYEXRlQJT5XnoKsVq1WZx4g==",
+      "version": "3.3.9",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.3.9.tgz",
+      "integrity": "sha512-+/Lf68Vr/nFBA6ol4xOtJrW+BQWv3QWKfRwGSm70jtXwfhZNF4R/eRgyVJYoxFRhdCTk/F6g99BP0ffPgZihfQ==",
       "dependencies": {
-        "@babel/parser": "^7.23.0",
-        "@vue/shared": "3.3.8",
+        "@babel/parser": "^7.23.3",
+        "@vue/shared": "3.3.9",
         "estree-walker": "^2.0.2",
         "source-map-js": "^1.0.2"
       }
     },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.3.8",
-      "resolved": "https://registry.npmmirror.com/@vue/compiler-dom/-/compiler-dom-3.3.8.tgz",
-      "integrity": "sha512-+PPtv+p/nWDd0AvJu3w8HS0RIm/C6VGBIRe24b9hSyNWOAPEUosFZ5diwawwP8ip5sJ8n0Pe87TNNNHnvjs0FQ==",
+      "version": "3.3.9",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-dom/-/compiler-dom-3.3.9.tgz",
+      "integrity": "sha512-nfWubTtLXuT4iBeDSZ5J3m218MjOy42Vp2pmKVuBKo2/BLcrFUX8nCSr/bKRFiJ32R8qbdnnnBgRn9AdU5v0Sg==",
       "dependencies": {
-        "@vue/compiler-core": "3.3.8",
-        "@vue/shared": "3.3.8"
+        "@vue/compiler-core": "3.3.9",
+        "@vue/shared": "3.3.9"
       }
     },
     "node_modules/@vue/compiler-sfc": {
-      "version": "3.3.8",
-      "resolved": "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-3.3.8.tgz",
-      "integrity": "sha512-WMzbUrlTjfYF8joyT84HfwwXo+8WPALuPxhy+BZ6R4Aafls+jDBnSz8PDz60uFhuqFbl3HxRfxvDzrUf3THwpA==",
+      "version": "3.3.9",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-3.3.9.tgz",
+      "integrity": "sha512-wy0CNc8z4ihoDzjASCOCsQuzW0A/HP27+0MDSSICMjVIFzk/rFViezkR3dzH+miS2NDEz8ywMdbjO5ylhOLI2A==",
       "dependencies": {
-        "@babel/parser": "^7.23.0",
-        "@vue/compiler-core": "3.3.8",
-        "@vue/compiler-dom": "3.3.8",
-        "@vue/compiler-ssr": "3.3.8",
-        "@vue/reactivity-transform": "3.3.8",
-        "@vue/shared": "3.3.8",
+        "@babel/parser": "^7.23.3",
+        "@vue/compiler-core": "3.3.9",
+        "@vue/compiler-dom": "3.3.9",
+        "@vue/compiler-ssr": "3.3.9",
+        "@vue/reactivity-transform": "3.3.9",
+        "@vue/shared": "3.3.9",
         "estree-walker": "^2.0.2",
         "magic-string": "^0.30.5",
         "postcss": "^8.4.31",
@@ -798,12 +799,12 @@
       }
     },
     "node_modules/@vue/compiler-ssr": {
-      "version": "3.3.8",
-      "resolved": "https://registry.npmmirror.com/@vue/compiler-ssr/-/compiler-ssr-3.3.8.tgz",
-      "integrity": "sha512-hXCqQL/15kMVDBuoBYpUnSYT8doDNwsjvm3jTefnXr+ytn294ySnT8NlsFHmTgKNjwpuFy7XVV8yTeLtNl/P6w==",
+      "version": "3.3.9",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-ssr/-/compiler-ssr-3.3.9.tgz",
+      "integrity": "sha512-NO5oobAw78R0G4SODY5A502MGnDNiDjf6qvhn7zD7TJGc8XDeIEw4fg6JU705jZ/YhuokBKz0A5a/FL/XZU73g==",
       "dependencies": {
-        "@vue/compiler-dom": "3.3.8",
-        "@vue/shared": "3.3.8"
+        "@vue/compiler-dom": "3.3.9",
+        "@vue/shared": "3.3.9"
       }
     },
     "node_modules/@vue/devtools-api": {
@@ -812,41 +813,41 @@
       "integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q=="
     },
     "node_modules/@vue/reactivity": {
-      "version": "3.3.8",
-      "resolved": "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.3.8.tgz",
-      "integrity": "sha512-ctLWitmFBu6mtddPyOKpHg8+5ahouoTCRtmAHZAXmolDtuZXfjL2T3OJ6DL6ezBPQB1SmMnpzjiWjCiMYmpIuw==",
+      "version": "3.3.9",
+      "resolved": "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.3.9.tgz",
+      "integrity": "sha512-VmpIqlNp+aYDg2X0xQhJqHx9YguOmz2UxuUJDckBdQCNkipJvfk9yA75woLWElCa0Jtyec3lAAt49GO0izsphw==",
       "dependencies": {
-        "@vue/shared": "3.3.8"
+        "@vue/shared": "3.3.9"
       }
     },
     "node_modules/@vue/reactivity-transform": {
-      "version": "3.3.8",
-      "resolved": "https://registry.npmmirror.com/@vue/reactivity-transform/-/reactivity-transform-3.3.8.tgz",
-      "integrity": "sha512-49CvBzmZNtcHua0XJ7GdGifM8GOXoUMOX4dD40Y5DxI3R8OUhMlvf2nvgUAcPxaXiV5MQQ1Nwy09ADpnLQUqRw==",
+      "version": "3.3.9",
+      "resolved": "https://registry.npmmirror.com/@vue/reactivity-transform/-/reactivity-transform-3.3.9.tgz",
+      "integrity": "sha512-HnUFm7Ry6dFa4Lp63DAxTixUp8opMtQr6RxQCpDI1vlh12rkGIeYqMvJtK+IKyEfEOa2I9oCkD1mmsPdaGpdVg==",
       "dependencies": {
-        "@babel/parser": "^7.23.0",
-        "@vue/compiler-core": "3.3.8",
-        "@vue/shared": "3.3.8",
+        "@babel/parser": "^7.23.3",
+        "@vue/compiler-core": "3.3.9",
+        "@vue/shared": "3.3.9",
         "estree-walker": "^2.0.2",
         "magic-string": "^0.30.5"
       }
     },
     "node_modules/@vue/runtime-core": {
-      "version": "3.3.8",
-      "resolved": "https://registry.npmmirror.com/@vue/runtime-core/-/runtime-core-3.3.8.tgz",
-      "integrity": "sha512-qurzOlb6q26KWQ/8IShHkMDOuJkQnQcTIp1sdP4I9MbCf9FJeGVRXJFr2mF+6bXh/3Zjr9TDgURXrsCr9bfjUw==",
+      "version": "3.3.9",
+      "resolved": "https://registry.npmmirror.com/@vue/runtime-core/-/runtime-core-3.3.9.tgz",
+      "integrity": "sha512-xxaG9KvPm3GTRuM4ZyU8Tc+pMVzcu6eeoSRQJ9IE7NmCcClW6z4B3Ij6L4EDl80sxe/arTtQ6YmgiO4UZqRc+w==",
       "dependencies": {
-        "@vue/reactivity": "3.3.8",
-        "@vue/shared": "3.3.8"
+        "@vue/reactivity": "3.3.9",
+        "@vue/shared": "3.3.9"
       }
     },
     "node_modules/@vue/runtime-dom": {
-      "version": "3.3.8",
-      "resolved": "https://registry.npmmirror.com/@vue/runtime-dom/-/runtime-dom-3.3.8.tgz",
-      "integrity": "sha512-Noy5yM5UIf9UeFoowBVgghyGGPIDPy1Qlqt0yVsUdAVbqI8eeMSsTqBtauaEoT2UFXUk5S64aWVNJN4MJ2vRdA==",
+      "version": "3.3.9",
+      "resolved": "https://registry.npmmirror.com/@vue/runtime-dom/-/runtime-dom-3.3.9.tgz",
+      "integrity": "sha512-e7LIfcxYSWbV6BK1wQv9qJyxprC75EvSqF/kQKe6bdZEDNValzeRXEVgiX7AHI6hZ59HA4h7WT5CGvm69vzJTQ==",
       "dependencies": {
-        "@vue/runtime-core": "3.3.8",
-        "@vue/shared": "3.3.8",
+        "@vue/runtime-core": "3.3.9",
+        "@vue/shared": "3.3.9",
         "csstype": "^3.1.2"
       }
     },
@@ -856,21 +857,21 @@
       "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
     },
     "node_modules/@vue/server-renderer": {
-      "version": "3.3.8",
-      "resolved": "https://registry.npmmirror.com/@vue/server-renderer/-/server-renderer-3.3.8.tgz",
-      "integrity": "sha512-zVCUw7RFskvPuNlPn/8xISbrf0zTWsTSdYTsUTN1ERGGZGVnRxM2QZ3x1OR32+vwkkCm0IW6HmJ49IsPm7ilLg==",
+      "version": "3.3.9",
+      "resolved": "https://registry.npmmirror.com/@vue/server-renderer/-/server-renderer-3.3.9.tgz",
+      "integrity": "sha512-w0zT/s5l3Oa3ZjtLW88eO4uV6AQFqU8X5GOgzq7SkQQu6vVr+8tfm+OI2kDBplS/W/XgCBuFXiPw6T5EdwXP0A==",
       "dependencies": {
-        "@vue/compiler-ssr": "3.3.8",
-        "@vue/shared": "3.3.8"
+        "@vue/compiler-ssr": "3.3.9",
+        "@vue/shared": "3.3.9"
       },
       "peerDependencies": {
-        "vue": "3.3.8"
+        "vue": "3.3.9"
       }
     },
     "node_modules/@vue/shared": {
-      "version": "3.3.8",
-      "resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.3.8.tgz",
-      "integrity": "sha512-8PGwybFwM4x8pcfgqEQFy70NaQxASvOC5DJwLQfpArw1UDfUXrJkdxD3BhVTMS+0Lef/TU7YO0Jvr0jJY8T+mw=="
+      "version": "3.3.9",
+      "resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.3.9.tgz",
+      "integrity": "sha512-ZE0VTIR0LmYgeyhurPTpy4KzKsuDyQbMSdM49eKkMnT5X4VfFBLysMzjIZhLEFQYjjOVVfbvUDHckwjDFiO2eA=="
     },
     "node_modules/acorn": {
       "version": "8.10.0",
@@ -1414,6 +1415,11 @@
         "ufo": "^1.3.0"
       }
     },
+    "node_modules/monaco-editor": {
+      "version": "0.44.0",
+      "resolved": "https://registry.npmmirror.com/monaco-editor/-/monaco-editor-0.44.0.tgz",
+      "integrity": "sha512-5SmjNStN6bSuSE5WPT2ZV+iYn1/yI9sd4Igtk23ChvqB7kDk9lZbB9F5frsuvpB+2njdIeGGFf2G4gbE6rCC9Q=="
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.2.tgz",
@@ -2074,15 +2080,15 @@
       }
     },
     "node_modules/vue": {
-      "version": "3.3.8",
-      "resolved": "https://registry.npmmirror.com/vue/-/vue-3.3.8.tgz",
-      "integrity": "sha512-5VSX/3DabBikOXMsxzlW8JyfeLKlG9mzqnWgLQLty88vdZL7ZJgrdgBOmrArwxiLtmS+lNNpPcBYqrhE6TQW5w==",
+      "version": "3.3.9",
+      "resolved": "https://registry.npmmirror.com/vue/-/vue-3.3.9.tgz",
+      "integrity": "sha512-sy5sLCTR8m6tvUk1/ijri3Yqzgpdsmxgj6n6yl7GXXCXqVbmW2RCXe9atE4cEI6Iv7L89v5f35fZRRr5dChP9w==",
       "dependencies": {
-        "@vue/compiler-dom": "3.3.8",
-        "@vue/compiler-sfc": "3.3.8",
-        "@vue/runtime-dom": "3.3.8",
-        "@vue/server-renderer": "3.3.8",
-        "@vue/shared": "3.3.8"
+        "@vue/compiler-dom": "3.3.9",
+        "@vue/compiler-sfc": "3.3.9",
+        "@vue/runtime-dom": "3.3.9",
+        "@vue/server-renderer": "3.3.9",
+        "@vue/shared": "3.3.9"
       },
       "peerDependencies": {
         "typescript": "*"
@@ -2198,9 +2204,9 @@
       "dev": true
     },
     "@babel/parser": {
-      "version": "7.23.0",
-      "resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.23.0.tgz",
-      "integrity": "sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw=="
+      "version": "7.23.4",
+      "resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.23.4.tgz",
+      "integrity": "sha512-vf3Xna6UEprW+7t6EtOmFpHNAuxw3xqPZghy+brsnusscJRW5BMUzzHZc5ICjULee81WeUV2jjakG09MDglJXQ=="
     },
     "@babel/runtime": {
       "version": "7.23.1",
@@ -2595,36 +2601,36 @@
       "requires": {}
     },
     "@vue/compiler-core": {
-      "version": "3.3.8",
-      "resolved": "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.3.8.tgz",
-      "integrity": "sha512-hN/NNBUECw8SusQvDSqqcVv6gWq8L6iAktUR0UF3vGu2OhzRqcOiAno0FmBJWwxhYEXRlQJT5XnoKsVq1WZx4g==",
+      "version": "3.3.9",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.3.9.tgz",
+      "integrity": "sha512-+/Lf68Vr/nFBA6ol4xOtJrW+BQWv3QWKfRwGSm70jtXwfhZNF4R/eRgyVJYoxFRhdCTk/F6g99BP0ffPgZihfQ==",
       "requires": {
-        "@babel/parser": "^7.23.0",
-        "@vue/shared": "3.3.8",
+        "@babel/parser": "^7.23.3",
+        "@vue/shared": "3.3.9",
         "estree-walker": "^2.0.2",
         "source-map-js": "^1.0.2"
       }
     },
     "@vue/compiler-dom": {
-      "version": "3.3.8",
-      "resolved": "https://registry.npmmirror.com/@vue/compiler-dom/-/compiler-dom-3.3.8.tgz",
-      "integrity": "sha512-+PPtv+p/nWDd0AvJu3w8HS0RIm/C6VGBIRe24b9hSyNWOAPEUosFZ5diwawwP8ip5sJ8n0Pe87TNNNHnvjs0FQ==",
+      "version": "3.3.9",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-dom/-/compiler-dom-3.3.9.tgz",
+      "integrity": "sha512-nfWubTtLXuT4iBeDSZ5J3m218MjOy42Vp2pmKVuBKo2/BLcrFUX8nCSr/bKRFiJ32R8qbdnnnBgRn9AdU5v0Sg==",
       "requires": {
-        "@vue/compiler-core": "3.3.8",
-        "@vue/shared": "3.3.8"
+        "@vue/compiler-core": "3.3.9",
+        "@vue/shared": "3.3.9"
       }
     },
     "@vue/compiler-sfc": {
-      "version": "3.3.8",
-      "resolved": "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-3.3.8.tgz",
-      "integrity": "sha512-WMzbUrlTjfYF8joyT84HfwwXo+8WPALuPxhy+BZ6R4Aafls+jDBnSz8PDz60uFhuqFbl3HxRfxvDzrUf3THwpA==",
+      "version": "3.3.9",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-3.3.9.tgz",
+      "integrity": "sha512-wy0CNc8z4ihoDzjASCOCsQuzW0A/HP27+0MDSSICMjVIFzk/rFViezkR3dzH+miS2NDEz8ywMdbjO5ylhOLI2A==",
       "requires": {
-        "@babel/parser": "^7.23.0",
-        "@vue/compiler-core": "3.3.8",
-        "@vue/compiler-dom": "3.3.8",
-        "@vue/compiler-ssr": "3.3.8",
-        "@vue/reactivity-transform": "3.3.8",
-        "@vue/shared": "3.3.8",
+        "@babel/parser": "^7.23.3",
+        "@vue/compiler-core": "3.3.9",
+        "@vue/compiler-dom": "3.3.9",
+        "@vue/compiler-ssr": "3.3.9",
+        "@vue/reactivity-transform": "3.3.9",
+        "@vue/shared": "3.3.9",
         "estree-walker": "^2.0.2",
         "magic-string": "^0.30.5",
         "postcss": "^8.4.31",
@@ -2632,12 +2638,12 @@
       }
     },
     "@vue/compiler-ssr": {
-      "version": "3.3.8",
-      "resolved": "https://registry.npmmirror.com/@vue/compiler-ssr/-/compiler-ssr-3.3.8.tgz",
-      "integrity": "sha512-hXCqQL/15kMVDBuoBYpUnSYT8doDNwsjvm3jTefnXr+ytn294ySnT8NlsFHmTgKNjwpuFy7XVV8yTeLtNl/P6w==",
+      "version": "3.3.9",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-ssr/-/compiler-ssr-3.3.9.tgz",
+      "integrity": "sha512-NO5oobAw78R0G4SODY5A502MGnDNiDjf6qvhn7zD7TJGc8XDeIEw4fg6JU705jZ/YhuokBKz0A5a/FL/XZU73g==",
       "requires": {
-        "@vue/compiler-dom": "3.3.8",
-        "@vue/shared": "3.3.8"
+        "@vue/compiler-dom": "3.3.9",
+        "@vue/shared": "3.3.9"
       }
     },
     "@vue/devtools-api": {
@@ -2646,41 +2652,41 @@
       "integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q=="
     },
     "@vue/reactivity": {
-      "version": "3.3.8",
-      "resolved": "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.3.8.tgz",
-      "integrity": "sha512-ctLWitmFBu6mtddPyOKpHg8+5ahouoTCRtmAHZAXmolDtuZXfjL2T3OJ6DL6ezBPQB1SmMnpzjiWjCiMYmpIuw==",
+      "version": "3.3.9",
+      "resolved": "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.3.9.tgz",
+      "integrity": "sha512-VmpIqlNp+aYDg2X0xQhJqHx9YguOmz2UxuUJDckBdQCNkipJvfk9yA75woLWElCa0Jtyec3lAAt49GO0izsphw==",
       "requires": {
-        "@vue/shared": "3.3.8"
+        "@vue/shared": "3.3.9"
       }
     },
     "@vue/reactivity-transform": {
-      "version": "3.3.8",
-      "resolved": "https://registry.npmmirror.com/@vue/reactivity-transform/-/reactivity-transform-3.3.8.tgz",
-      "integrity": "sha512-49CvBzmZNtcHua0XJ7GdGifM8GOXoUMOX4dD40Y5DxI3R8OUhMlvf2nvgUAcPxaXiV5MQQ1Nwy09ADpnLQUqRw==",
+      "version": "3.3.9",
+      "resolved": "https://registry.npmmirror.com/@vue/reactivity-transform/-/reactivity-transform-3.3.9.tgz",
+      "integrity": "sha512-HnUFm7Ry6dFa4Lp63DAxTixUp8opMtQr6RxQCpDI1vlh12rkGIeYqMvJtK+IKyEfEOa2I9oCkD1mmsPdaGpdVg==",
       "requires": {
-        "@babel/parser": "^7.23.0",
-        "@vue/compiler-core": "3.3.8",
-        "@vue/shared": "3.3.8",
+        "@babel/parser": "^7.23.3",
+        "@vue/compiler-core": "3.3.9",
+        "@vue/shared": "3.3.9",
         "estree-walker": "^2.0.2",
         "magic-string": "^0.30.5"
       }
     },
     "@vue/runtime-core": {
-      "version": "3.3.8",
-      "resolved": "https://registry.npmmirror.com/@vue/runtime-core/-/runtime-core-3.3.8.tgz",
-      "integrity": "sha512-qurzOlb6q26KWQ/8IShHkMDOuJkQnQcTIp1sdP4I9MbCf9FJeGVRXJFr2mF+6bXh/3Zjr9TDgURXrsCr9bfjUw==",
+      "version": "3.3.9",
+      "resolved": "https://registry.npmmirror.com/@vue/runtime-core/-/runtime-core-3.3.9.tgz",
+      "integrity": "sha512-xxaG9KvPm3GTRuM4ZyU8Tc+pMVzcu6eeoSRQJ9IE7NmCcClW6z4B3Ij6L4EDl80sxe/arTtQ6YmgiO4UZqRc+w==",
       "requires": {
-        "@vue/reactivity": "3.3.8",
-        "@vue/shared": "3.3.8"
+        "@vue/reactivity": "3.3.9",
+        "@vue/shared": "3.3.9"
       }
     },
     "@vue/runtime-dom": {
-      "version": "3.3.8",
-      "resolved": "https://registry.npmmirror.com/@vue/runtime-dom/-/runtime-dom-3.3.8.tgz",
-      "integrity": "sha512-Noy5yM5UIf9UeFoowBVgghyGGPIDPy1Qlqt0yVsUdAVbqI8eeMSsTqBtauaEoT2UFXUk5S64aWVNJN4MJ2vRdA==",
+      "version": "3.3.9",
+      "resolved": "https://registry.npmmirror.com/@vue/runtime-dom/-/runtime-dom-3.3.9.tgz",
+      "integrity": "sha512-e7LIfcxYSWbV6BK1wQv9qJyxprC75EvSqF/kQKe6bdZEDNValzeRXEVgiX7AHI6hZ59HA4h7WT5CGvm69vzJTQ==",
       "requires": {
-        "@vue/runtime-core": "3.3.8",
-        "@vue/shared": "3.3.8",
+        "@vue/runtime-core": "3.3.9",
+        "@vue/shared": "3.3.9",
         "csstype": "^3.1.2"
       },
       "dependencies": {
@@ -2692,18 +2698,18 @@
       }
     },
     "@vue/server-renderer": {
-      "version": "3.3.8",
-      "resolved": "https://registry.npmmirror.com/@vue/server-renderer/-/server-renderer-3.3.8.tgz",
-      "integrity": "sha512-zVCUw7RFskvPuNlPn/8xISbrf0zTWsTSdYTsUTN1ERGGZGVnRxM2QZ3x1OR32+vwkkCm0IW6HmJ49IsPm7ilLg==",
+      "version": "3.3.9",
+      "resolved": "https://registry.npmmirror.com/@vue/server-renderer/-/server-renderer-3.3.9.tgz",
+      "integrity": "sha512-w0zT/s5l3Oa3ZjtLW88eO4uV6AQFqU8X5GOgzq7SkQQu6vVr+8tfm+OI2kDBplS/W/XgCBuFXiPw6T5EdwXP0A==",
       "requires": {
-        "@vue/compiler-ssr": "3.3.8",
-        "@vue/shared": "3.3.8"
+        "@vue/compiler-ssr": "3.3.9",
+        "@vue/shared": "3.3.9"
       }
     },
     "@vue/shared": {
-      "version": "3.3.8",
-      "resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.3.8.tgz",
-      "integrity": "sha512-8PGwybFwM4x8pcfgqEQFy70NaQxASvOC5DJwLQfpArw1UDfUXrJkdxD3BhVTMS+0Lef/TU7YO0Jvr0jJY8T+mw=="
+      "version": "3.3.9",
+      "resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.3.9.tgz",
+      "integrity": "sha512-ZE0VTIR0LmYgeyhurPTpy4KzKsuDyQbMSdM49eKkMnT5X4VfFBLysMzjIZhLEFQYjjOVVfbvUDHckwjDFiO2eA=="
     },
     "acorn": {
       "version": "8.10.0",
@@ -3128,6 +3134,11 @@
         "ufo": "^1.3.0"
       }
     },
+    "monaco-editor": {
+      "version": "0.44.0",
+      "resolved": "https://registry.npmmirror.com/monaco-editor/-/monaco-editor-0.44.0.tgz",
+      "integrity": "sha512-5SmjNStN6bSuSE5WPT2ZV+iYn1/yI9sd4Igtk23ChvqB7kDk9lZbB9F5frsuvpB+2njdIeGGFf2G4gbE6rCC9Q=="
+    },
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.2.tgz",
@@ -3575,15 +3586,15 @@
       }
     },
     "vue": {
-      "version": "3.3.8",
-      "resolved": "https://registry.npmmirror.com/vue/-/vue-3.3.8.tgz",
-      "integrity": "sha512-5VSX/3DabBikOXMsxzlW8JyfeLKlG9mzqnWgLQLty88vdZL7ZJgrdgBOmrArwxiLtmS+lNNpPcBYqrhE6TQW5w==",
+      "version": "3.3.9",
+      "resolved": "https://registry.npmmirror.com/vue/-/vue-3.3.9.tgz",
+      "integrity": "sha512-sy5sLCTR8m6tvUk1/ijri3Yqzgpdsmxgj6n6yl7GXXCXqVbmW2RCXe9atE4cEI6Iv7L89v5f35fZRRr5dChP9w==",
       "requires": {
-        "@vue/compiler-dom": "3.3.8",
-        "@vue/compiler-sfc": "3.3.8",
-        "@vue/runtime-dom": "3.3.8",
-        "@vue/server-renderer": "3.3.8",
-        "@vue/shared": "3.3.8"
+        "@vue/compiler-dom": "3.3.9",
+        "@vue/compiler-sfc": "3.3.9",
+        "@vue/runtime-dom": "3.3.9",
+        "@vue/server-renderer": "3.3.9",
+        "@vue/shared": "3.3.9"
       }
     },
     "vue-i18n": {
diff --git a/frontend/package.json b/frontend/package.json
index 0afbc88..f50b863 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -13,9 +13,10 @@
     "dayjs": "^1.11.10",
     "highlight.js": "^11.9.0",
     "lodash": "^4.17.21",
+    "monaco-editor": "^0.44.0",
     "pinia": "^2.1.7",
     "sass": "^1.69.5",
-    "vue": "^3.3.8",
+    "vue": "^3.3.9",
     "vue-i18n": "^9.7.1",
     "xterm": "^5.3.0",
     "xterm-addon-fit": "^0.8.0"
diff --git a/frontend/package.json.md5 b/frontend/package.json.md5
index a215651..b879042 100755
--- a/frontend/package.json.md5
+++ b/frontend/package.json.md5
@@ -1 +1 @@
-13b88be029994e83241098ae7c3ee1c4
\ No newline at end of file
+3dc6322e376d91c1cb4a6bd5312d176f
\ No newline at end of file
diff --git a/frontend/src/components/content_value/ContentEditor.vue b/frontend/src/components/content_value/ContentEditor.vue
new file mode 100644
index 0000000..815e50e
--- /dev/null
+++ b/frontend/src/components/content_value/ContentEditor.vue
@@ -0,0 +1,158 @@
+<script setup>
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+import * as monaco from 'monaco-editor'
+import usePreferencesStore from 'stores/preferences.js'
+import { useThemeVars } from 'naive-ui'
+
+const props = defineProps({
+    content: {
+        type: String,
+    },
+    language: {
+        type: String,
+        default: 'json',
+    },
+    readonly: {
+        type: String,
+    },
+    loading: {
+        type: Boolean,
+    },
+    showLineNum: {
+        type: Boolean,
+        default: true,
+    },
+    border: {
+        type: Boolean,
+        default: false,
+    },
+})
+
+const emit = defineEmits(['reset', 'input'])
+
+const themeVars = useThemeVars()
+/** @type {HTMLElement|null} */
+const editorRef = ref(null)
+/** @type monaco.editor.IStandaloneCodeEditor */
+let editorNode = null
+
+const destroyEditor = () => {
+    if (editorNode != null && editorNode.dispose != null) {
+        const model = editorNode.getModel()
+        if (model != null) {
+            model.dispose()
+        }
+        editorNode.dispose()
+        editorNode = null
+    }
+}
+
+const readonlyValue = computed(() => {
+    return props.readonly || props.loading
+})
+
+const pref = usePreferencesStore()
+onMounted(async () => {
+    if (editorRef.value != null) {
+        const { fontSize, fontFamily = undefined } = pref.generalFont
+        editorNode = monaco.editor.create(editorRef.value, {
+            // value: props.content,
+            language: props.language,
+            lineNumbers: props.showLineNum ? 'on' : 'off',
+            readOnly: readonlyValue.value,
+            colorDecorators: true,
+            accessibilitySupport: 'off',
+            wordWrap: 'on',
+            tabSize: 2,
+            fontFamily,
+            fontSize,
+            scrollBeyondLastLine: false,
+            automaticLayout: true,
+            scrollbar: {
+                useShadows: false,
+                verticalScrollbarSize: '10px',
+            },
+            // formatOnType: true,
+            contextmenu: false,
+            lineNumbersMinChars: 2,
+            lineDecorationsWidth: 0,
+            minimap: {
+                enabled: false,
+            },
+            selectionHighlight: false,
+            renderLineHighlight: 'gutter',
+        })
+
+        // editorNode.onDidChangeModelLanguageConfiguration(() => {
+        //     editorNode?.getAction('editor.action.formatDocument')?.run()
+        // })
+
+        if (editorNode.onDidChangeModelContent) {
+            editorNode.onDidChangeModelContent(() => {
+                emit('input', editorNode.getValue())
+            })
+        }
+    }
+})
+
+watch(
+    () => props.content,
+    async (content) => {
+        if (editorNode != null) {
+            editorNode.setValue(content)
+            await nextTick(() => emit('reset', content))
+        }
+    },
+)
+
+watch(
+    () => readonlyValue.value,
+    (readOnly) => {
+        if (editorNode != null) {
+            editorNode.updateOptions({
+                readOnly,
+            })
+        }
+    },
+)
+
+watch(
+    () => props.language,
+    (language) => {
+        if (editorNode != null) {
+            const model = editorNode.getModel()
+            if (model != null) {
+                monaco.editor.setModelLanguage(model, language)
+            }
+        }
+    },
+)
+
+watch(
+    () => pref.isDark,
+    (dark) => {
+        if (editorNode != null) {
+            editorNode.updateOptions({
+                theme: dark ? 'vs-dark' : 'vs',
+            })
+        }
+    },
+)
+
+onUnmounted(() => {
+    destroyEditor()
+})
+</script>
+
+<template>
+    <div ref="editorRef" :class="{ 'editor-border': props.border === true }" />
+</template>
+
+<style lang="scss" scoped>
+.editor-border {
+    border: 1px solid v-bind('themeVars.borderColor');
+    border-radius: v-bind('themeVars.borderRadius');
+    padding: 3px;
+    box-sizing: border-box;
+}
+</style>
diff --git a/frontend/src/components/content_value/ContentValueString.vue b/frontend/src/components/content_value/ContentValueString.vue
index 136726f..90af829 100644
--- a/frontend/src/components/content_value/ContentValueString.vue
+++ b/frontend/src/components/content_value/ContentValueString.vue
@@ -6,15 +6,14 @@ import Copy from '@/components/icons/Copy.vue'
 import Save from '@/components/icons/Save.vue'
 import { useThemeVars } from 'naive-ui'
 import { decodeTypes, formatTypes } from '@/consts/value_view_type.js'
-import Close from '@/components/icons/Close.vue'
 import { types as redisTypes } from '@/consts/support_redis_type.js'
 import { ClipboardSetText } from 'wailsjs/runtime/runtime.js'
 import { isEmpty, toLower } from 'lodash'
-import EditFile from '@/components/icons/EditFile.vue'
 import bytes from 'bytes'
 import useBrowserStore from 'stores/browser.js'
 import { decodeRedisKey } from '@/utils/key_convert.js'
 import FormatSelector from '@/components/content_value/FormatSelector.vue'
+import ContentEditor from '@/components/content_value/ContentEditor.vue'
 
 const i18n = useI18n()
 const themeVars = useThemeVars()
@@ -63,6 +62,11 @@ const viewAs = reactive({
     decode: decodeTypes.NONE,
 })
 
+const editingContent = ref('')
+
+const enableSave = computed(() => {
+    return editingContent.value !== viewAs.value && !props.loading
+})
 const displayValue = computed(() => {
     if (props.loading) {
         return ''
@@ -89,7 +93,7 @@ const onFormatChanged = async (decode = '', format = '') => {
         decode,
         format,
     })
-    viewAs.value = value
+    editingContent.value = viewAs.value = value
     viewAs.decode = decode || retDecode
     viewAs.format = format || retFormat
 }
@@ -109,23 +113,17 @@ const onCopyValue = () => {
         })
 }
 
-const editValue = ref('')
-const inEdit = ref(false)
-const onEditValue = () => {
-    editValue.value = displayValue.value
-    inEdit.value = true
-}
-
-const onCancelEdit = () => {
-    inEdit.value = false
-}
-
 /**
  * Save value
  */
 const browserStore = useBrowserStore()
 const saving = ref(false)
-const onSaveValue = async () => {
+
+const onInput = (content) => {
+    editingContent.value = content
+}
+
+const onSave = async () => {
     saving.value = true
     try {
         const { success, msg } = await browserStore.setKey({
@@ -133,13 +131,13 @@ const onSaveValue = async () => {
             db: props.db,
             key: keyName.value,
             keyType: toLower(keyType),
-            value: editValue.value,
+            value: editingContent.value,
             ttl: -1,
             format: viewAs.format,
             decode: viewAs.decode,
         })
         if (success) {
-            await browserStore.loadKeyDetail({ server: props.name, db: props.db, key: keyName.value })
+            // await browserStore.loadKeyDetail({ server: props.name, db: props.db, key: keyName.value })
             $message.success(i18n.t('dialogue.save_value_succ'))
         } else {
             $message.error(msg)
@@ -147,7 +145,6 @@ const onSaveValue = async () => {
     } catch (e) {
         $message.error(e.message)
     } finally {
-        inEdit.value = false
         saving.value = false
     }
 }
@@ -155,7 +152,7 @@ const onSaveValue = async () => {
 defineExpose({
     reset: () => {
         viewAs.value = ''
-        inEdit.value = false
+        editingContent.value = ''
     },
     beforeShow: () => onFormatChanged(),
 })
@@ -177,55 +174,46 @@ defineExpose({
             @rename="emit('rename')" />
         <div class="tb2 value-item-part flex-box-h">
             <div class="flex-item-expand"></div>
-            <n-button-group v-if="!inEdit">
-                <n-button :focusable="false" @click="onCopyValue">
+            <n-button-group>
+                <n-button :disabled="saving" :focusable="false" @click="onCopyValue">
                     <template #icon>
                         <n-icon :component="Copy" size="18" />
                     </template>
                     {{ $t('interface.copy_value') }}
                 </n-button>
-                <n-button :focusable="false" plain @click="onEditValue">
-                    <template #icon>
-                        <n-icon :component="EditFile" size="18" />
-                    </template>
-                    {{ $t('interface.edit_value') }}
-                </n-button>
-            </n-button-group>
-            <n-button-group v-else>
-                <n-button :focusable="false" :loading="saving" plain @click="onSaveValue">
+                <n-button
+                    :disabled="!enableSave"
+                    :loading="saving"
+                    :secondary="enableSave"
+                    :type="enableSave ? 'primary' : ''"
+                    @click="onSave">
                     <template #icon>
                         <n-icon :component="Save" size="18" />
                     </template>
-                    {{ $t('interface.save_update') }}
-                </n-button>
-                <n-button :focusable="false" :loading="saving" plain @click="onCancelEdit">
-                    <template #icon>
-                        <n-icon :component="Close" size="18" />
-                    </template>
-                    {{ $t('common.cancel') }}
+                    {{ $t('common.save') }}
                 </n-button>
             </n-button-group>
         </div>
         <div class="value-wrapper value-item-part flex-item-expand flex-box-v">
-            <n-scrollbar v-if="!inEdit" class="flex-item-expand">
-                <n-code :code="displayValue" :language="viewLanguage" style="cursor: text" word-wrap />
-            </n-scrollbar>
-            <n-input
-                v-else
-                v-model:value="editValue"
-                :disabled="saving"
-                :resizable="false"
+            <n-spin :show="props.loading" />
+            <content-editor
+                v-show="!props.loading"
+                :content="displayValue"
+                :language="viewLanguage"
+                :loading="props.loading"
                 class="flex-item-expand"
-                type="textarea" />
+                style="height: 100%"
+                @input="onInput"
+                @reset="onInput" />
         </div>
         <div class="value-footer flex-box-h">
             <n-text v-if="!isNaN(props.length)">{{ $t('interface.length') }}: {{ props.length }}</n-text>
             <n-divider v-if="!isNaN(props.length)" vertical />
             <n-text v-if="!isNaN(props.size)">{{ $t('interface.memory_usage') }}: {{ bytes(props.size) }}</n-text>
-            <div class="flex-item-expand"></div>
+            <div class="flex-item-expand" />
             <format-selector
                 :decode="viewAs.decode"
-                :disabled="inEdit"
+                :disabled="enableSave"
                 :format="viewAs.format"
                 @format-changed="onFormatChanged" />
         </div>
@@ -234,7 +222,7 @@ defineExpose({
 
 <style lang="scss" scoped>
 .value-wrapper {
-    overflow: hidden;
+    //overflow: hidden;
     border-top: v-bind('themeVars.borderColor') 1px solid;
     padding: 5px;
 }
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 98c87ed..288b082 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -9,6 +9,7 @@ import { i18n } from '@/utils/i18n.js'
 import { setupDiscreteApi } from '@/utils/discrete.js'
 import usePreferencesStore from 'stores/preferences.js'
 import { loadEnvironment } from '@/utils/platform.js'
+import { setupMonacoWorker } from '@/utils/monaco_worker.js'
 
 dayjs.extend(duration)
 dayjs.extend(relativeTime)
@@ -19,6 +20,7 @@ async function setupApp() {
     app.use(createPinia())
 
     await loadEnvironment()
+    setupMonacoWorker()
     const prefStore = usePreferencesStore()
     await prefStore.loadPreferences()
     await setupDiscreteApi()
diff --git a/frontend/src/stores/browser.js b/frontend/src/stores/browser.js
index 4a806f4..e7d2226 100644
--- a/frontend/src/stores/browser.js
+++ b/frontend/src/stores/browser.js
@@ -979,13 +979,15 @@ const useBrowserStore = defineStore('browser', {
                     decode,
                 })
                 if (success) {
-                    const { value } = data
+                    // const { value } = data
                     // update tree view data
                     const { newKey = 0 } = this._addKeyNodes(server, db, [key], true)
                     if (newKey > 0) {
                         this._tidyNode(server, db, key)
                         this._updateDBMaxKeys(server, db, newKey)
                     }
+                    const tab = useTabStore()
+                    tab.updateValue({ server, db, key, value })
                     return {
                         success,
                         nodeKey: `${server}/db${db}#${ConnectionType.RedisValue}/${key}`,
diff --git a/frontend/src/stores/preferences.js b/frontend/src/stores/preferences.js
index 2dea9ff..6f527c5 100644
--- a/frontend/src/stores/preferences.js
+++ b/frontend/src/stores/preferences.js
@@ -113,7 +113,7 @@ const usePreferencesStore = defineStore('preferences', {
 
         /**
          * current font selection
-         * @returns {{fontSize: string}}
+         * @returns {{fontSize: string, fontFamily?: string}}
          */
         generalFont() {
             const fontStyle = {
@@ -128,6 +128,24 @@ const usePreferencesStore = defineStore('preferences', {
             return fontStyle
         },
 
+        /**
+         * current editor font
+         * @return {{fontSize: string, fontFamily?: string}}
+         */
+        editorFont() {
+            const fontStyle = {
+                fontSize: (this.editor.fontSize || 14) + 'px',
+            }
+            if (!isEmpty(this.editor.font) && this.editor.font !== 'none') {
+                const font = find(this.fontList, { name: this.editor.font })
+                if (font != null) {
+                    fontStyle['fontFamily'] = `${font.name}`
+                }
+            }
+            fontStyle['fontFamily'] = fontStyle['fontFamily'] || 'monaco'
+            return fontStyle
+        },
+
         /**
          * get current language setting
          * @return {string}
diff --git a/frontend/src/stores/tab.js b/frontend/src/stores/tab.js
index d7ecab0..37cdeb5 100644
--- a/frontend/src/stores/tab.js
+++ b/frontend/src/stores/tab.js
@@ -212,7 +212,7 @@ const useTabStore = defineStore('tab', {
          * @param {string} [format]
          * @param {string] [decode]
          * @param {string} [matchPattern]
-         * @param {boolean} reset
+         * @param {boolean} [reset]
          * @param {boolean} [end] keep end status if not set
          */
         updateValue({ server, db, key, value, format, decode, matchPattern, reset, end }) {
@@ -227,7 +227,7 @@ const useTabStore = defineStore('tab', {
             if (typeof end === 'boolean') {
                 tabData.end = end
             }
-            if (!reset && typeof value === 'object') {
+            if (!!!reset && typeof value === 'object') {
                 if (value instanceof Array) {
                     tabData.value = tabData.value || []
                     tabData.value.push(...value)
diff --git a/frontend/src/utils/monaco_worker.js b/frontend/src/utils/monaco_worker.js
new file mode 100644
index 0000000..ccb0199
--- /dev/null
+++ b/frontend/src/utils/monaco_worker.js
@@ -0,0 +1,23 @@
+import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
+import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
+import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
+import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
+
+export const setupMonacoWorker = () => {
+    window.MonacoEnvironment = {
+        getWorker: (_, label) => {
+            switch (label) {
+                case 'json':
+                    return new jsonWorker()
+                case 'css':
+                case 'scss':
+                case 'less':
+                    return new cssWorker()
+                case 'html':
+                    return new htmlWorker()
+                default:
+                    return new editorWorker()
+            }
+        },
+    }
+}