fix: fixed issue of Improper encoding of curly braces in Request Sample

examples/react-cra/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "es2021",
     "lib": [
       "dom",
       "dom.iterable",

packages/elements-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stoplight/elements-core",
-  "version": "9.0.0",
+  "version": "9.0.1",
   "sideEffects": [
     "web-components.min.js",
     "src/web-components/**",

packages/elements-core/src/components/RequestSamples/convertRequestToSample.ts

@@ -16,8 +16,34 @@ export const convertRequestToSample = async (
     } else {
       converted = converted || null;
     }
+
+    // This code checks if the 'converted' string is a valid string, decodes any URL-encoded curly braces in it,
+    // and then iterates through each query parameter in the request's query string. For any query parameter
+    // containing curly braces, it selectively encodes the characters while preserving the curly braces.
+    // The decoded query string is then replaced with the fully encoded query in the 'converted' string to ensure
+    // proper encoding of the query parameters while keeping curly braces intact.
+
     if (typeof converted === 'string') {
       converted = converted.replace(/%7B/g, '{').replace(/%7D/g, '}');
+
+      if (request?.queryString?.length) {
+        for (const query of request.queryString) {
+          if (query?.value.includes('{') || query?.value.includes('}')) {
+            let encodeValue = '';
+            for (const val of query?.value) {
+              if (val !== '{' && val !== '}') {
+                encodeValue += encodeURIComponent(val);
+              } else {
+                encodeValue += val;
+              }
+            }
+            const decodedQuery = `${query?.name}=${encodeValue}`;
+            const encodedQuery = `${query?.name}=${encodeURIComponent(query?.value)}`;
+
+            converted = converted.replace(decodedQuery, encodedQuery);
+          }
+        }
+      }
     }
 
     return converted;

packages/elements-dev-portal/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stoplight/elements-dev-portal",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "UI components for composing beautiful developer documentation.",
   "keywords": [],
   "sideEffects": [

packages/elements/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stoplight/elements",
-  "version": "9.0.0",
+  "version": "9.0.1",
   "description": "UI components for composing beautiful developer documentation.",
   "keywords": [],
   "sideEffects": [
@@ -63,7 +63,7 @@
     ]
   },
   "dependencies": {
-    "@stoplight/elements-core": "~9.0.0",
+    "@stoplight/elements-core": "~9.0.1",
     "@stoplight/http-spec": "^7.1.0",
     "@stoplight/json": "^3.18.1",
     "@stoplight/mosaic": "^1.53.4",