render images in view

microsoft · Jan 28, 2025 · 1e3f4e8 · 1e3f4e8
1 parent daefed2
commit 1e3f4e8
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 39 deletions.
diff --git a/packages/vscode/src/webview.ts b/packages/vscode/src/webview.ts
@@ -63,8 +63,8 @@ export async function createWebview(
         const csp = `
             default-src 'none'; 
             frame-src ${cspUrl} ${cspSource} https:; 
-            img-src ${cspUrl} ${cspSource} https:;
-            media-src ${cspUrl} ${cspSource} https:;
+            img-src ${cspUrl} ${cspSource} https: data:;
+            media-src ${cspUrl} ${cspSource} https: data:;
             connect-src ${cspUrl} ${wsCspUrl};
             script-src ${cspUrl} ${cspSource} 'nonce-${nonce}'; 
             style-src 'unsafe-inline' ${cspUrl} ${cspSource};

diff --git a/packages/web/src/Markdown.tsx b/packages/web/src/Markdown.tsx
@@ -13,6 +13,37 @@ import { ErrorBoundary } from "react-error-boundary"
 import rehypeHighlight from "rehype-highlight"
 import Code from "./Code"
 
+const genaiscriptSchema = Object.freeze({
+    ...defaultSchema,
+    tagNames: [...defaultSchema.tagNames, "blockquote", "svg", "path"],
+    protocols: {
+        ...defaultSchema.protocols,
+        src: ["http", "https", "data"],
+    },
+    attributes: {
+        ...defaultSchema.attributes,
+        blockquote: [["className", /^markdown-./], /^aria-./],
+        p: [["className", /^markdown-./]],
+        svg: [
+            ["className", "octicon", /^markdown-./],
+            "viewBox",
+            "width",
+            "height",
+            /^aria-./,
+        ],
+        path: ["d", /^aria-./],
+        code: [
+            [
+                "className",
+                /^language-./,
+                /^aria-./,
+                "math-inline",
+                "math-display",
+            ],
+        ],
+    },
+})
+
 export default function Markdown(props: { className?: string; children: any }) {
     const { className, children } = props
     return children ? (
@@ -28,45 +59,13 @@ export default function Markdown(props: { className?: string; children: any }) {
                             return <Code {...props}>{children}</Code>
                         },
                     }}
+                    urlTransform={url => {
+                        console.log(url)
+                        return url
+                    }}
                     rehypePlugins={[
                         rehypeRaw,
-                        [
-                            rehypeSanitize,
-                            {
-                                ...defaultSchema,
-                                tagNames: [
-                                    ...defaultSchema.tagNames,
-                                    "blockquote",
-                                    "svg",
-                                    "path",
-                                ],
-                                attributes: {
-                                    ...defaultSchema.attributes,
-                                    blockquote: [
-                                        ["className", /^markdown-./],
-                                        /^aria-./,
-                                    ],
-                                    p: [["className", /^markdown-./]],
-                                    svg: [
-                                        ["className", "octicon", /^markdown-./],
-                                        "viewBox",
-                                        "width",
-                                        "height",
-                                        /^aria-./,
-                                    ],
-                                    path: ["d", /^aria-./],
-                                    code: [
-                                        [
-                                            "className",
-                                            /^language-./,
-                                            /^aria-./,
-                                            "math-inline",
-                                            "math-display",
-                                        ],
-                                    ],
-                                },
-                            },
-                        ],
+                        [rehypeSanitize, genaiscriptSchema],
                         rehypeMathML,
                         [rehypeHighlight, { ignoreMissing: true }],
                     ]}