[TS Workbench] Correctly HTML escape rendered code

Author: MichaelMitchell-at

packages/playground/src/ds/createDesignSystem.ts

@@ -1,5 +1,6 @@
 import type { Sandbox } from "@typescript/sandbox"
 import type { DiagnosticRelatedInformation, Node } from "typescript"
+import { htmlEscape } from "../htmlEscape"
 
 export type LocalStorageOption = {
   blurb: string
@@ -154,7 +155,7 @@ export const createDesignSystem = (sandbox: Sandbox) => {
       createCodePre.setAttribute("tabindex", "0")
       const codeElement = document.createElement("code")
 
-      codeElement.innerHTML = code
+      codeElement.innerHTML = htmlEscape(code)
 
       createCodePre.appendChild(codeElement)
       container.appendChild(createCodePre)

packages/playground/src/htmlEscape.ts

@@ -0,0 +1,3 @@
+export function htmlEscape(str: string) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;")
+}

packages/playground/src/sidebar/runtime.ts

@@ -1,5 +1,6 @@
 import { PlaygroundPlugin, PluginFactory } from ".."
 import { createUI } from "../createUI"
+import { htmlEscape } from "../htmlEscape"
 import { localize } from "../localizeWithFallback"
 
 let allLogs: string[] = []
@@ -259,7 +260,3 @@ function rewireLoggingToElement(
 function sanitizeJS(code: string) {
   return code.replace(`import "reflect-metadata"`, "").replace(`require("reflect-metadata")`, "")
 }
-
-function htmlEscape(str: string) {
-  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;")
-}