fix render of youtube links and images in docs pages (#11105)

Author: riknoll

.vscode/launch.json

@@ -219,6 +219,29 @@
 			"sourceMaps": false,
 			"outFiles": []
 		},
+		{
+			"name": "pxt serve (core)",
+			"type": "node",
+			"request": "launch",
+			"program": "${workspaceRoot}/built/pxt.js",
+			"stopOnEntry": false,
+			"args": [
+				"serve",
+				"--rebundle",
+				"--noauth"
+			],
+			"cwd": "${workspaceRoot}",
+			"runtimeExecutable": null,
+			"runtimeArgs": [
+				"--nolazy"
+			],
+			"env": {
+				"NODE_ENV": "development"
+			},
+			"console": "integratedTerminal",
+			"sourceMaps": false,
+			"outFiles": []
+		},
 		{
 			"name": "pxt serve (bedrock)",
 			"type": "node",

cli/cli.ts

@@ -41,6 +41,7 @@ pxt.docs.requireDOMSanitizer = () => {
     const sanitizeHtml = require("sanitize-html");
     const defaults = sanitizeHtml.defaults || {};
     const baseAllowedAttrs = defaults.allowedAttributes || {};
+    const allowedTags = defaults.allowedTags || [];
 
     const mergeClassAttribute = (tag: string, ...otherAttributes: string[]) => {
         const existing: string[] = baseAllowedAttrs[tag] || [];
@@ -49,6 +50,7 @@ pxt.docs.requireDOMSanitizer = () => {
 
     const options = {
         ...defaults,
+        allowedTags: [...allowedTags, "img"],
         allowedAttributes: {
             ...baseAllowedAttrs,
             code: mergeClassAttribute("code"),

pxtlib/docsrender.ts

@@ -728,7 +728,7 @@ ${opts.repo.name.replace(/^pxt-/, '')}=github:${opts.repo.fullName}#${opts.repo.
             return r;
         }
 
-        html = html.replace(/<h(\d)[^>]+>\s*([~@])?\s*(.*?)<\/h\d>/g, (full: string, lvl: string, tp: string | undefined, body: string) => {
+        html = html.replace(/<h(\d)[^>]*>\s*([~@])?\s*(.*?)<\/h\d>/g, (full: string, lvl: string, tp: string | undefined, body: string) => {
             let m = /^(\w+)\s+(.*)/.exec(body)
             let cmd = m ? m[1] : body
             let args = m ? m[2] : ""