Use monaco editor for Request Body in Query Editor (#4516)

Motivation:

Update the debug form to use Microsoft's well-known `Monaco Editor`.

Modifications:

- Integrate Monaco editor to be used in the request body text editor.
  - Easy-to-use editor with bracket highlight, auto-close tags, etc.
  - Enable JSON syntax highlighting
  - Show JSON syntax errors (For future, we will generate JSON schemas for protos to verify the object syntax as well)

Result:

https://user-images.githubusercontent.com/7023385/201191726-1cc4d893-0394-4392-b6be-8e981583b20e.mov

The example used is `GrpcDocServiceTest` the method is `UnaryMethod`. 
This PR is required to enable auto-complete:
- #4518


- Part of #2844 

<!--
Visit this URL to learn more about how to write a pull request description:
https://armeria.dev/community/developer-guide#how-to-write-pull-request-description
-->

docs-client/build.gradle

@@ -9,8 +9,7 @@ if (rootProject.hasProperty('noWeb')) {
 }
 
 node {
-    version = '16.14.0'
-    npmVersion = '8.5.2'
+    version = '16.19.1'
     download = true
     npmInstallCommand = "ci"
 
@@ -21,6 +20,9 @@ node {
     }
 }
 
+// Add the option that works around the dependency conflicts.
+tasks.npmInstall.args.add('--legacy-peer-deps')
+
 task buildWeb(type: NpmTask) {
     dependsOn tasks.npmInstall