Support presigned image URLs in markdown

webui/package.json

@@ -41,10 +41,15 @@
     "react-router-dom": "^6.20.1",
     "react-simple-code-editor": "^0.13.1",
     "react-syntax-highlighter": "^15.5.0",
-    "rehype-raw": "^6.1.1",
+    "rehype-raw": "^7.0.0",
+    "rehype-react": "^8.0.0",
+    "rehype-wrap": "^1.1.0",
     "remark": "^14.0.2",
-    "remark-gfm": "^3.0.1",
+    "remark-gfm": "^4.0.0",
     "remark-html": "^15.0.1",
+    "remark-parse": "^11.0.0",
+    "remark-rehype": "^11.1.0",
+    "unified": "^11.0.4",
     "unist-util-visit": "^4.1.2",
     "usehooks-ts": "^2.9.1",
     "validator": "^13.11.0"
@@ -76,7 +81,6 @@
     "sass": "^1.69.5",
     "typescript": "^5.3.3",
     "typesync": "^0.11.1",
-    "unified": "^10.1.2",
     "vite": "^5.2.8",
     "vite-plugin-eslint": "^1.8.1",
     "vitest": "^1.5.0"

webui/src/lib/remark-plugins/imageUriReplacer.spec.ts

@@ -20,14 +20,15 @@ Text and whatever and hey look at this image:
     const markdownWithReplacedImage = `# README
 
 Text and whatever and hey look at this image:
-![lakefs://image.png](${getImageUrl(TEST_REPO, TEST_REF, TEST_FILE_NAME)})
+![lakefs://image.png](${await getImageUrl(TEST_REPO, TEST_REF, TEST_FILE_NAME, false)})
 `;
 
     const result = await remark()
       .use(imageUriReplacer, {
         repo: TEST_REPO,
         ref: TEST_REF,
         path: "",
+        presign: false,
       })
       .process(markdown);
     expect(result.toString()).toEqual(markdownWithReplacedImage);
@@ -43,22 +44,22 @@ Text and whatever and hey look at this image:
     const markdownWithReplacedImage = `# README
 
 Text and whatever and hey look at this image:
-![lakefs://image.png](${getImageUrl(
+![lakefs://image.png](${await getImageUrl(
       TEST_REPO,
       TEST_REF,
-      `${ADDITIONAL_PATH}/${TEST_FILE_NAME}`
+      `${ADDITIONAL_PATH}/${TEST_FILE_NAME}`,
+      false,
     )})
 `;
 
     const result = await remark()
-      .use([
-        imageUriReplacer,
+      .use(imageUriReplacer,
         {
           repo: TEST_REPO,
           ref: TEST_REF,
           path: "",
-        },
-      ])
+          presign: false,
+        })
       .process(markdown);
     expect(result.toString()).toEqual(markdownWithReplacedImage);
   });
@@ -73,14 +74,15 @@ Text and whatever and hey look at this image:
     const markdownWithReplacedImage = `# README
 
 Text and whatever and hey look at this image:
-![lakefs://image.png](${getImageUrl(TEST_REPO, TEST_REF, TEST_FILE_NAME)})
+![lakefs://image.png](${await getImageUrl(TEST_REPO, TEST_REF, TEST_FILE_NAME, false)})
 `;
 
     const result = await remark()
       .use(imageUriReplacer, {
         repo: TEST_REPO,
         ref: TEST_REF,
         path: "",
+        presign: false,
       })
       .process(markdown);
     expect(result.toString()).toEqual(markdownWithReplacedImage);
@@ -96,14 +98,15 @@ Text and whatever and hey look at this image:
     const markdownWithReplacedImage = `# README
 
 Text and whatever and hey look at this image:
-![lakefs://image.png](${getImageUrl(TEST_REPO, TEST_REF, TEST_FILE_NAME)})
+![lakefs://image.png](${await getImageUrl(TEST_REPO, TEST_REF, TEST_FILE_NAME, false)})
 `;
 
     const result = await remark()
       .use(imageUriReplacer, {
         repo: TEST_REPO,
         ref: TEST_REF,
         path: "",
+        presign: false,
       })
       .process(markdown);
     expect(result.toString()).toEqual(markdownWithReplacedImage);
@@ -120,10 +123,11 @@ Text and whatever and hey look at this image:
     const markdownWithReplacedImage = `# README
 
 Text and whatever and hey look at this image:
-![lakefs://image.png](${getImageUrl(
+![lakefs://image.png](${await getImageUrl(
       TEST_REPO,
       TEST_REF,
-      `${markdownFilePath}/${TEST_FILE_NAME}`
+      `${markdownFilePath}/${TEST_FILE_NAME}`,
+      false,
     )})
 `;
 
@@ -132,6 +136,7 @@ Text and whatever and hey look at this image:
         repo: TEST_REPO,
         ref: TEST_REF,
         path: `${markdownFilePath}/test.md`,
+        presign: false,
       })
       .process(markdown);
     expect(result.toString()).toEqual(markdownWithReplacedImage);

webui/src/lib/remark-plugins/imageUriReplacer.ts

@@ -1,51 +1,69 @@
 import { visit } from "unist-util-visit";
 import type { Node } from "unist";
-import type { Root } from "mdast";
-import type { Plugin } from "unified";
+import {objects} from "../api";
 
 type ImageUriReplacerOptions = {
   repo: string;
   ref: string;
   path: string;
+  presign: boolean;
 };
 
 const ABSOLUTE_URL_REGEX = /^(https?):\/\/.*/;
 const qs = (queryParts: { [key: string]: string }) => {
   const parts = Object.keys(queryParts).map((key) => [key, queryParts[key]]);
   return new URLSearchParams(parts).toString();
 };
-export const getImageUrl = (
+export const getImageUrl = async (
   repo: string,
   ref: string,
-  path: string
-): string => {
+  path: string,
+  presign: boolean,
+): Promise<string> => {
+  if (presign) {
+    try {
+      const obj = await objects.getStat(repo, ref, path, true);
+      return obj.physical_address;
+    } catch(e) {
+      console.error("failed to fetch presigned URL", e);
+      return ""
+    }
+  }
+
   const query = qs({ path });
   return `/api/v1/repositories/${encodeURIComponent(
     repo
   )}/refs/${encodeURIComponent(ref)}/objects?${query}`;
 };
 
-const imageUriReplacer: Plugin<[ImageUriReplacerOptions], Root> =
-  (options) => (tree) => {
-    visit(tree, "image", (node: Node & { url: string }) => {
+const imageUriReplacer =
+  (options: ImageUriReplacerOptions) => async (tree: Node) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const promises: any[] = [];
+    visit(tree, "image", visitor);
+    await Promise.all(promises);
+
+    function visitor(node: Node & { url: string }) {
       if (node.url.startsWith("lakefs://")) {
         const [repo, ref, ...imgPath] = node.url.split("/").slice(2);
-        node.url = getImageUrl(repo, ref, imgPath.join("/"));
+        const p = getImageUrl(repo, ref, imgPath.join("/"), options.presign).then((url) => node.url = url);
+        promises.push(p);
       } else if (!node.url.match(ABSOLUTE_URL_REGEX)) {
         // If the image is not an absolute URL, we assume it's a relative path
         // relative to repo and ref
         if (node.url.startsWith("/")) {
-          node.url = node.url.slice(1);
+            node.url = node.url.slice(1);
         }
         // relative to MD file location
         if (node.url.startsWith("./")) {
           node.url = `${options.path.split("/").slice(0, -1)}/${node.url.slice(
             2
           )}`;
         }
-        node.url = getImageUrl(options.repo, options.ref, node.url);
+        const p = getImageUrl(options.repo, options.ref, node.url, options.presign).then((url) => node.url = url);
+        promises.push(p);
       }
-    });
+    }
   };
 
 export default imageUriReplacer;

webui/src/pages/repositories/repository/fileRenderers/CustomMarkdownRenderer.jsx

@@ -0,0 +1,29 @@
+import React from "react";
+import SyntaxHighlighter from "react-syntax-highlighter";
+import { github as syntaxHighlightStyle } from "react-syntax-highlighter/dist/esm/styles/hljs";
+
+export const CustomMarkdownCodeComponent = ({
+  inline,
+  className,
+  children,
+  ...props
+}) => {
+  const hasLang = /language-(\w+)/.exec(className || "");
+
+  return !inline && hasLang ? (
+    <SyntaxHighlighter
+      style={syntaxHighlightStyle}
+      language={hasLang[1]}
+      PreTag="div"
+      className="codeStyle"
+      showLineNumbers={false}
+      useInlineStyles={true}
+    >
+      {String(children).replace(/\n$/, "")}
+    </SyntaxHighlighter>
+  ) : (
+    <code className={className} {...props}>
+      {children}
+    </code>
+  );
+};

webui/src/pages/repositories/repository/fileRenderers/rehype-wrap.d.ts

@@ -0,0 +1 @@
+declare module "rehype-wrap";

webui/src/pages/repositories/repository/fileRenderers/simple.tsx

@@ -4,23 +4,18 @@ import { humanSize } from "../../../../lib/components/repository/tree";
 import { useAPI } from "../../../../lib/hooks/api";
 import { objects, qs } from "../../../../lib/api";
 import { AlertError, Loading } from "../../../../lib/components/controls";
-import ReactMarkdown from "react-markdown";
-import remarkGfm from "remark-gfm";
-import remarkHtml from "remark-html";
-import rehypeRaw from "rehype-raw";
 import SyntaxHighlighter from "react-syntax-highlighter";
 import { githubGist as syntaxHighlightStyle } from "react-syntax-highlighter/dist/esm/styles/hljs";
 import { IpynbRenderer as NbRenderer } from "react-ipynb-renderer";
 import { guessLanguage } from "./index";
-import { CustomMarkdownRenderer } from "./CustomMarkdownRenderer";
 import {
   RendererComponent,
   RendererComponentWithText,
   RendererComponentWithTextCallback,
 } from "./types";
-import imageUriReplacer from "../../../../lib/remark-plugins/imageUriReplacer";
 
 import "react-ipynb-renderer/dist/styles/default.css";
+import { useMarkdownProcessor } from "./useMarkdownProcessor";
 
 export const ObjectTooLarge: FC<RendererComponent> = ({ path, sizeBytes }) => {
   return (
@@ -76,28 +71,9 @@ export const MarkdownRenderer: FC<RendererComponentWithText> = ({
   repoId,
   refId,
   path,
+  presign = false,
 }) => {
-  return (
-    <ReactMarkdown
-      className="object-viewer-markdown"
-      components={CustomMarkdownRenderer}
-      remarkPlugins={[
-        [
-          imageUriReplacer,
-          {
-            repo: repoId,
-            ref: refId,
-            path,
-          },
-        ],
-        remarkGfm,
-        remarkHtml,
-      ]}
-      rehypePlugins={[rehypeRaw]}
-    >
-      {text}
-    </ReactMarkdown>
-  );
+  return useMarkdownProcessor(text, repoId, refId, path, presign);
 };
 
 export const TextRenderer: FC<RendererComponentWithText> = ({

webui/src/pages/repositories/repository/fileRenderers/useMarkdownProcessor.tsx

@@ -0,0 +1,50 @@
+import {Fragment, createElement, useEffect, useState} from 'react'
+import * as prod from 'react/jsx-runtime'
+import remarkParse from 'remark-parse'
+import remarkRehype from 'remark-rehype'
+import remarkGfm from "remark-gfm";
+import remarkHtml from "remark-html";
+import rehypeRaw from "rehype-raw";
+import rehypeReact from 'rehype-react';
+import rehypeWrap from "rehype-wrap";
+import {unified} from "unified";
+import imageUriReplacer from "../../../../lib/remark-plugins/imageUriReplacer";
+import {CustomMarkdownCodeComponent} from "./CustomMarkdownRenderer";
+
+// @ts-expect-error: the react types are missing.
+const options: Options = {Fragment: prod.Fragment, jsx: prod.jsx, jsxs: prod.jsxs, passNode: true};
+options.components = {
+    code: CustomMarkdownCodeComponent,
+};
+
+/**
+ * @param {string} text
+ * @returns {JSX.Element}
+ */
+export function useMarkdownProcessor(text: string, repoId: string, refId: string, path: string, presign: boolean): JSX.Element {
+    const [content, setContent] = useState(createElement(Fragment));
+
+    useEffect(() => {
+        (async () => {
+            const file = await unified()
+                .use(remarkParse)
+                .use(imageUriReplacer, {
+                    repo: repoId,
+                    ref: refId,
+                    path,
+                    presign,
+                  })
+                .use(remarkGfm)
+                .use(remarkHtml)
+                .use(remarkRehype, { allowDangerousHtml: true })
+                .use(rehypeRaw)
+                .use(rehypeReact, options)
+                .use(rehypeWrap, {wrapper: "div.object-viewer-markdown"})
+                .process(text);
+
+            setContent(file.result);
+        })();
+    }, [text]);
+
+    return content;
+}