fix(console): html injection through cloud function responses (#6838)

Escapes `cloud.Function` responses in the inspector panel to avoid HTML injection.

Fixes #5129.

apps/wing-console/console/design-system/package.json

@@ -34,6 +34,7 @@
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.13",
     "classnames": "^2.5.1",
+    "lodash.escape": "^4.0.1",
     "lodash.uniq": "^4.5.0",
     "nanoid": "^4.0.2",
     "react": "^18.3.1",
@@ -45,6 +46,7 @@
     "@babel/core": "^7.24.7",
     "@storybook/react": "^7.6.19",
     "@testing-library/react": "^14.3.1",
+    "@types/lodash.escape": "^4.0.9",
     "@types/lodash.uniq": "^4.5.9",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",

apps/wing-console/console/design-system/src/text-highlight.tsx

@@ -1,3 +1,4 @@
+import escape from "lodash.escape";
 import { memo, useEffect, useState } from "react";
 
 import type { Theme } from "./theme-provider.js";
@@ -41,7 +42,7 @@ const highlightJson = (value: string, theme: Theme) => {
         } else if (/null/.test(match)) {
           className = palette.null;
         }
-        return `<span class="${className}">${match}</span>`;
+        return `<span class="${className}">${escape(match)}</span>`;
       },
     )}${formatted.slice(CHAR_LIMIT)}`;
 };