Render images from repository correctly

This adds a markdown renderer for images, so that images
that are referenced by their repository path are resolved
correctly. In this case, the content rest endpoint is
rendered as source url. For this, two new contexts
(RepositoryContext and RepositoryRevisionContext)
have been added, that make the repository and the
current revision available, so that the content url can
be resolved properly. These new contexts may be used
by plugins like the scm-readme-plugin.

Co-authored-by: Eduard Heimbuch <eduard.heimbuch@cloudogu.com>

Reviewed-by: Eduard Heimbuch <eduard.heimbuch@cloudogu.com>

gradle/changelog/render_images_in_md.yaml

@@ -0,0 +1,2 @@
+- type: added
+  description: Markdown component to render images from repository correctly

scm-plugins/scm-git-plugin/src/main/java/sonia/scm/repository/spi/GitCatCommand.java

@@ -91,6 +91,9 @@ public class GitCatCommand extends AbstractGitCommand implements CatCommand {
   private Loader getLoader(CatCommandRequest request) throws IOException {
     org.eclipse.jgit.lib.Repository repo = open();
     ObjectId revId = getCommitOrDefault(repo, request.getRevision());
+    if (revId == null) {
+      throw notFound(entity("Revision", request.getRevision()).in(repository));
+    }
     logger.info("loading content for file {} for revision {} in repository {}", request.getPath(), revId, repository);
     return getLoader(repo, revId, request.getPath());
   }

scm-ui/ui-api/src/RepositoryContext.tsx

@@ -0,0 +1,34 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { createContext, FC, useContext } from "react";
+import { Repository } from "@scm-manager/ui-types";
+
+const Context = createContext<Repository | undefined>(undefined);
+
+export const useRepositoryContext = () => useContext(Context);
+
+export const RepositoryContextProvider: FC<{ repository: Repository }> = ({ repository, children }) => (
+  <Context.Provider value={repository}>{children}</Context.Provider>
+);

scm-ui/ui-api/src/RepositoryRevisionContext.tsx

@@ -0,0 +1,33 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { createContext, FC, useContext } from "react";
+
+const Context = createContext<string | undefined>(undefined);
+
+export const useRepositoryRevisionContext = () => useContext(Context);
+
+export const RepositoryRevisionContextProvider: FC<{ revision?: string }> = ({ revision, children }) => (
+  <Context.Provider value={revision}>{children}</Context.Provider>
+);

scm-ui/ui-api/src/index.ts

@@ -71,3 +71,5 @@ export * from "./ApiProvider";
 
 export * from "./LegacyContext";
 export * from "./NamespaceAndNameContext";
+export * from "./RepositoryContext";
+export * from "./RepositoryRevisionContext";

scm-ui/ui-components/src/__resources__/markdown-images.md.ts

@@ -0,0 +1,46 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+export default `# Images
+
+Show case for different possibilities to render image src links.
+Please note that some of the images do not work in storybook,
+the story is mostly for checking if the src links are rendered correct.
+
+## External
+
+External images should be rendered with the unaltered link:
+
+![external image](https://github.com/scm-manager/scm-manager/blob/develop/docs/en/logo/scm-manager_logo.png)
+
+## Images from repository
+
+Images from the repository should be resolved to an api url:
+
+![relative path](some_image.jpg)
+
+![path starting with a '.'](./some_image.jpg)
+
+![absolute image path](/path/with/some_image.jpg)
+`;

scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap

@@ -14437,6 +14437,87 @@ and this project adheres to
 </div>
 `;
 
+exports[`Storyshots MarkdownView Images 1`] = `
+<div
+  className="MarkdownViewstories__Spacing-sc-1lofakk-0 isVeYs"
+>
+  <div
+    className="LazyMarkdownView__HorizontalScrollDiv-sc-w02jj8-0 iAcXxX content"
+  >
+    <div>
+      <h1
+        id="images"
+      >
+        Images
+      </h1>
+      
+
+      <p>
+        Show case for different possibilities to render image src links.
+Please note that some of the images do not work in storybook,
+the story is mostly for checking if the src links are rendered correct.
+      </p>
+      
+
+      <h2
+        id="external"
+      >
+        External
+      </h2>
+      
+
+      <p>
+        External images should be rendered with the unaltered link:
+      </p>
+      
+
+      <p>
+        <img
+          alt="external image"
+          src="https://github.com/scm-manager/scm-manager/blob/develop/docs/en/logo/scm-manager_logo.png"
+        />
+      </p>
+      
+
+      <h2
+        id="images-from-repository"
+      >
+        Images from repository
+      </h2>
+      
+
+      <p>
+        Images from the repository should be resolved to an api url:
+      </p>
+      
+
+      <p>
+        <img
+          alt="relative path"
+          src="https://my.scm/scm/api/v2/some/repository/content/42/some_image.jpg"
+        />
+      </p>
+      
+
+      <p>
+        <img
+          alt="path starting with a '.'"
+          src="https://my.scm/scm/api/v2/some/repository/content/42/./some_image.jpg"
+        />
+      </p>
+      
+
+      <p>
+        <img
+          alt="absolute image path"
+          src="https://my.scm/scm/api/v2/some/repository/content/42/path/with/some_image.jpg"
+        />
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Storyshots MarkdownView Inline Xml 1`] = `
 <div
   className="MarkdownViewstories__Spacing-sc-1lofakk-0 isVeYs"

scm-ui/ui-components/src/markdown/LazyMarkdownView.tsx

@@ -33,6 +33,7 @@ import { BinderContext } from "@scm-manager/ui-extensions";
 import ErrorBoundary from "../ErrorBoundary";
 import { create as createMarkdownHeadingRenderer } from "./MarkdownHeadingRenderer";
 import { create as createMarkdownLinkRenderer } from "./MarkdownLinkRenderer";
+import { create as createMarkdownImageRenderer } from "./MarkdownImageRenderer";
 import { useTranslation, WithTranslation, withTranslation } from "react-i18next";
 import Notification from "../Notification";
 import { createTransformer as createChangesetShortlinkParser } from "./remarkChangesetShortLinkParser";
@@ -173,6 +174,8 @@ class LazyMarkdownView extends React.Component<Props, State> {
       remarkRendererList.heading = createMarkdownHeadingRenderer(permalink);
     }
 
+    remarkRendererList.image = createMarkdownImageRenderer(basePath);
+
     let protocolLinkRendererExtensions: ProtocolLinkRendererExtensionMap = {};
     if (!remarkRendererList.link) {
       const extensionPoints = this.context.getExtensions(

scm-ui/ui-components/src/markdown/MarkdownImageRenderer.tsx

@@ -0,0 +1,116 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React, { FC } from "react";
+import { useLocation } from "react-router-dom";
+import { Link } from "@scm-manager/ui-types";
+import {
+  isAbsolute,
+  isExternalLink,
+  isInternalScmRepoLink,
+  isLinkWithProtocol,
+  isSubDirectoryOf,
+  join,
+  normalizePath
+} from "./paths";
+import { useRepositoryContext, useRepositoryRevisionContext } from "@scm-manager/ui-api";
+
+export const createLocalLink = (
+  basePath: string,
+  contentLink: string,
+  revision: string,
+  currentPath: string,
+  link: string
+) => {
+  const apiBasePath = contentLink.replace("{revision}", revision);
+  if (isInternalScmRepoLink(link)) {
+    return link;
+  }
+  if (isAbsolute(link)) {
+    return apiBasePath.replace("{path}", link.substring(1));
+  }
+  if (!isSubDirectoryOf(basePath, currentPath)) {
+    return apiBasePath.replace("{path}", link);
+  }
+  const relativePath = currentPath.substring(basePath.length);
+  let path = relativePath;
+  if (currentPath.endsWith("/")) {
+    path = relativePath.substring(0, relativePath.length - 1);
+  }
+  const lastSlash = path.lastIndexOf("/");
+  if (lastSlash < 0) {
+    path = "";
+  } else {
+    path = path.substring(0, lastSlash);
+  }
+  return apiBasePath.replace("{path}", normalizePath(join(path, link)));
+};
+
+type LinkProps = {
+  src: string;
+  alt: string;
+};
+
+type Props = LinkProps & {
+  base?: string;
+  contentLink?: string;
+};
+
+const MarkdownImageRenderer: FC<Props> = ({ src = "", alt = "", base, contentLink, children, ...props }) => {
+  const location = useLocation();
+  const repository = useRepositoryContext();
+  const revision = useRepositoryRevisionContext();
+
+  if (isExternalLink(src) || isLinkWithProtocol(src)) {
+    return (
+      <img src={src} alt={alt}>
+        {children}
+      </img>
+    );
+  } else if (base && repository && revision) {
+    const localLink = createLocalLink(base, (repository._links.content as Link).href, revision, location.pathname, src);
+    return (
+      <img src={localLink} alt={alt}>
+        {children}
+      </img>
+    );
+  } else if (src) {
+    return (
+      <img src={src} alt={alt}>
+        {children}
+      </img>
+    );
+  } else {
+    return <img {...props}>{children}</img>;
+  }
+};
+
+// we use a factory method, because react-markdown does not pass
+// base as prop down to our link component.
+export const create = (base: string | undefined): FC<LinkProps> => {
+  return (props) => {
+    return <MarkdownImageRenderer base={base}{...props} />;
+  };
+};
+
+export default MarkdownImageRenderer;

scm-ui/ui-components/src/markdown/MarkdownLinkRenderer.test.tsx

@@ -21,13 +21,8 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import {
+import { isAnchorLink, isExternalLink, isLinkWithProtocol, isInternalScmRepoLink } from "./paths";
-  isAnchorLink,
+import { createLocalLink } from "./MarkdownLinkRenderer";
-  isExternalLink,
-  isLinkWithProtocol,
-  createLocalLink,
-  isInternalScmRepoLink,
-} from "./MarkdownLinkRenderer";
 
 describe("test isAnchorLink", () => {
   it("should return true", () => {

scm-ui/ui-components/src/markdown/MarkdownLinkRenderer.tsx

@@ -26,59 +26,15 @@ import { Link, useLocation } from "react-router-dom";
 import ExternalLink from "../navigation/ExternalLink";
 import { urls } from "@scm-manager/ui-api";
 import { ProtocolLinkRendererExtensionMap } from "./markdownExtensions";
-
+import {
-const externalLinkRegex = new RegExp("^http(s)?://");
+  isAbsolute, isAnchorLink,
-export const isExternalLink = (link: string) => {
+  isExternalLink,
-  return externalLinkRegex.test(link);
+  isInternalScmRepoLink,
-};
+  isLinkWithProtocol,
-
+  isSubDirectoryOf,
-export const isAnchorLink = (link: string) => {
+  join,
-  return link.startsWith("#");
+  normalizePath
-};
+} from "./paths";
-
-export const isInternalScmRepoLink = (link: string) => {
-  return link.startsWith("/repo/");
-};
-
-const linkWithProtocolRegex = new RegExp("^([a-z]+):(.+)");
-export const isLinkWithProtocol = (link: string) => {
-  const match = link.match(linkWithProtocolRegex);
-  return match && { protocol: match[1], link: match[2] };
-};
-
-const join = (left: string, right: string) => {
-  if (left.endsWith("/") && right.startsWith("/")) {
-    return left + right.substring(1);
-  } else if (!left.endsWith("/") && !right.startsWith("/")) {
-    return left + "/" + right;
-  }
-  return left + right;
-};
-
-const normalizePath = (path: string) => {
-  const stack = [];
-  const parts = path.split("/");
-  for (const part of parts) {
-    if (part === "..") {
-      stack.pop();
-    } else if (part !== ".") {
-      stack.push(part);
-    }
-  }
-  const normalizedPath = stack.join("/");
-  if (normalizedPath.startsWith("/")) {
-    return normalizedPath;
-  }
-  return "/" + normalizedPath;
-};
-
-const isAbsolute = (link: string) => {
-  return link.startsWith("/");
-};
-
-const isSubDirectoryOf = (basePath: string, currentPath: string) => {
-  return currentPath.startsWith(basePath);
-};
 
 export const createLocalLink = (basePath: string, currentPath: string, link: string) => {
   if (isInternalScmRepoLink(link)) {
@@ -100,7 +56,7 @@ export const createLocalLink = (basePath: string, currentPath: string, link: str
   } else {
     path = path.substring(0, lastSlash);
   }
-  return normalizePath(join(path, link));
+  return "/" + normalizePath(join(path, link));
 };
 
 type LinkProps = {

scm-ui/ui-components/src/markdown/MarkdownView.stories.tsx

@@ -32,6 +32,7 @@ import MarkdownXmlCodeBlock from "../__resources__/markdown-xml-codeblock.md";
 import MarkdownUmlCodeBlock from "../__resources__/markdown-uml-codeblock.md";
 import MarkdownInlineXml from "../__resources__/markdown-inline-xml.md";
 import MarkdownLinks from "../__resources__/markdown-links.md";
+import MarkdownImages from "../__resources__/markdown-images.md";
 import MarkdownCommitLinks from "../__resources__/markdown-commit-link.md";
 import MarkdownXss from "../__resources__/markdown-xss.md";
 import MarkdownChangelog from "../__resources__/markdown-changelog.md";
@@ -40,6 +41,7 @@ import { Subtitle } from "../layout";
 import { MemoryRouter } from "react-router-dom";
 import { Binder, BinderContext, extensionPoints } from "@scm-manager/ui-extensions";
 import { ProtocolLinkRendererProps } from "./markdownExtensions";
+import { RepositoryContextProvider, RepositoryRevisionContextProvider } from "@scm-manager/ui-api";
 
 const Spacing = styled.div`
   padding: 2em;
@@ -114,7 +116,19 @@ storiesOf("MarkdownView", module)
       </BinderContext.Provider>
     );
   })
-  .add("XSS Prevention", () => <MarkdownView content={MarkdownXss} skipHtml={false} />);
+  .add("XSS Prevention", () => <MarkdownView content={MarkdownXss} skipHtml={false} />)
+  .add("Images", () => (
+    <RepositoryContextProvider
+      // @ts-ignore We do not need a valid repository here, only one with a content link
+      repository={{
+        _links: { content: { href: "https://my.scm/scm/api/v2/some/repository/content/{revision}/{path}" } }
+      }}
+    >
+      <RepositoryRevisionContextProvider revision={"42"}>
+        <MarkdownView basePath={"/scm/"} content={MarkdownImages} />
+      </RepositoryRevisionContextProvider>
+    </RepositoryContextProvider>
+  ));
 
 export const ProtocolLinkRenderer: FC<ProtocolLinkRendererProps<"scw">> = ({ protocol, href, children }) => {
   return (

scm-ui/ui-components/src/markdown/paths.ts

@@ -0,0 +1,76 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const externalLinkRegex = new RegExp("^http(s)?://");
+export const isExternalLink = (link: string) => {
+  return externalLinkRegex.test(link);
+};
+
+export const isAnchorLink = (link: string) => {
+  return link.startsWith("#");
+};
+
+export const isInternalScmRepoLink = (link: string) => {
+  return link.startsWith("/repo/");
+};
+
+const linkWithProtocolRegex = new RegExp("^([a-z]+):(.+)");
+export const isLinkWithProtocol = (link: string) => {
+  const match = link.match(linkWithProtocolRegex);
+  return match && { protocol: match[1], link: match[2] };
+};
+
+export const join = (left: string, right: string) => {
+  if (left.endsWith("/") && right.startsWith("/")) {
+    return left + right.substring(1);
+  } else if (!left.endsWith("/") && !right.startsWith("/")) {
+    return left + "/" + right;
+  }
+  return left + right;
+};
+
+export const normalizePath = (path: string) => {
+  const stack = [];
+  const parts = path.split("/");
+  for (const part of parts) {
+    if (part === "..") {
+      stack.pop();
+    } else if (part !== ".") {
+      stack.push(part);
+    }
+  }
+  const normalizedPath = stack.join("/");
+  if (normalizedPath.startsWith("/")) {
+    return normalizedPath.substring(1);
+  }
+  return normalizedPath;
+};
+
+export const isAbsolute = (link: string) => {
+  return link.startsWith("/");
+};
+
+export const isSubDirectoryOf = (basePath: string, currentPath: string) => {
+  return currentPath.startsWith(basePath);
+};

scm-ui/ui-webapp/src/repos/containers/ChangesetView.tsx

@@ -27,7 +27,7 @@ import { Changeset, Repository } from "@scm-manager/ui-types";
 import { ErrorPage, Loading } from "@scm-manager/ui-components";
 import ChangesetDetails from "../components/changesets/ChangesetDetails";
 import { FileControlFactory } from "@scm-manager/ui-components";
-import { useChangeset } from "@scm-manager/ui-api";
+import { RepositoryRevisionContextProvider, useChangeset } from "@scm-manager/ui-api";
 import { useParams } from "react-router-dom";
 
 type Props = {
@@ -53,11 +53,13 @@ const ChangesetView: FC<Props> = ({ repository, fileControlFactoryFactory }) =>
   }
 
   return (
-    <ChangesetDetails
+    <RepositoryRevisionContextProvider revision={changeset.id}>
-      changeset={changeset}
+      <ChangesetDetails
-      repository={repository}
+        changeset={changeset}
-      fileControlFactory={fileControlFactoryFactory && fileControlFactoryFactory(changeset)}
+        repository={repository}
-    />
+        fileControlFactory={fileControlFactoryFactory && fileControlFactoryFactory(changeset)}
+      />
+    </RepositoryRevisionContextProvider>
   );
 };
 

scm-ui/ui-webapp/src/repos/containers/ChangesetsRoot.tsx

@@ -28,6 +28,7 @@ import { Repository, Branch } from "@scm-manager/ui-types";
 import CodeActionBar from "../codeSection/components/CodeActionBar";
 import { urls } from "@scm-manager/ui-components";
 import Changesets from "./Changesets";
+import { RepositoryRevisionContextProvider } from "@scm-manager/ui-api";
 
 type Props = {
   repository: Repository;
@@ -66,7 +67,7 @@ const ChangesetRoot: FC<Props> = ({ repository, baseUrl, branches, selectedBranc
   };
 
   return (
-    <>
+    <RepositoryRevisionContextProvider revision={selectedBranch}>
       <CodeActionBar
         branches={branches}
         selectedBranch={!isBranchAvailable() ? selectedBranch : defaultBranch?.name}
@@ -76,7 +77,7 @@ const ChangesetRoot: FC<Props> = ({ repository, baseUrl, branches, selectedBranc
       <Route path={`${url}/:page?`}>
         <Changesets repository={repository} branch={branches?.filter(b => b.name === selectedBranch)[0]} url={url} />
       </Route>
-    </>
+    </RepositoryRevisionContextProvider>
   );
 };
 

scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx

@@ -60,7 +60,7 @@ import SourceExtensions from "../sources/containers/SourceExtensions";
 import TagsOverview from "../tags/container/TagsOverview";
 import CompareRoot from "../compare/CompareRoot";
 import TagRoot from "../tags/container/TagRoot";
-import { useIndexLinks, useNamespaceAndNameContext, useRepository } from "@scm-manager/ui-api";
+import { RepositoryContextProvider, useIndexLinks, useNamespaceAndNameContext, useRepository } from "@scm-manager/ui-api";
 import styled from "styled-components";
 import { useShortcut } from "@scm-manager/ui-shortcuts";
 
@@ -265,149 +265,151 @@ const RepositoryRoot = () => {
 
   return (
     <StateMenuContextProvider>
-      <Page
+      <RepositoryContextProvider repository={repository}>
-        title={titleComponent}
+        <Page
-        documentTitle={`${repository.namespace}/${repository.name}`}
+          title={titleComponent}
-        afterTitle={
+          documentTitle={`${repository.namespace}/${repository.name}`}
-          <MobileWrapped className="is-flex is-align-items-center">
+          afterTitle={
-            <ExtensionPoint name="repository.afterTitle" props={{ repository }} />
+            <MobileWrapped className="is-flex is-align-items-center">
-            <TagGroup className="has-text-weight-bold">
+              <ExtensionPoint name="repository.afterTitle" props={{ repository }} />
-              <RepositoryFlags repository={repository} tooltipLocation="bottom" />
+              <TagGroup className="has-text-weight-bold">
-            </TagGroup>
+                <RepositoryFlags repository={repository} tooltipLocation="bottom" />
-          </MobileWrapped>
+              </TagGroup>
-        }
+            </MobileWrapped>
-      >
+          }
-        {modal}
+        >
-        <CustomQueryFlexWrappedColumns>
+          {modal}
-          <PrimaryContentColumn>
+          <CustomQueryFlexWrappedColumns>
-            <Switch>
+            <PrimaryContentColumn>
-              <Redirect exact from={urls.escapeUrlForRoute(match.url)} to={urls.escapeUrlForRoute(redirectedUrl)} />
+              <Switch>
+                <Redirect exact from={urls.escapeUrlForRoute(match.url)} to={urls.escapeUrlForRoute(redirectedUrl)} />
 
-              {/* redirect pre 2.0.0-rc2 links */}
+                {/* redirect pre 2.0.0-rc2 links */}
-              <Redirect from={`${escapedUrl}/changeset/:id`} to={`${url}/code/changeset/:id`} />
+                <Redirect from={`${escapedUrl}/changeset/:id`} to={`${url}/code/changeset/:id`} />
-              <Redirect exact from={`${escapedUrl}/sources`} to={`${url}/code/sources`} />
+                <Redirect exact from={`${escapedUrl}/sources`} to={`${url}/code/sources`} />
-              <Redirect from={`${escapedUrl}/sources/:revision/:path*`} to={`${url}/code/sources/:revision/:path*`} />
+                <Redirect from={`${escapedUrl}/sources/:revision/:path*`} to={`${url}/code/sources/:revision/:path*`} />
-              <Redirect exact from={`${escapedUrl}/changesets`} to={`${url}/code/changesets`} />
+                <Redirect exact from={`${escapedUrl}/changesets`} to={`${url}/code/changesets`} />
-              <Redirect
+                <Redirect
-                from={`${escapedUrl}/branch/:branch/changesets`}
+                  from={`${escapedUrl}/branch/:branch/changesets`}
-                to={`${url}/code/branch/:branch/changesets/`}
+                  to={`${url}/code/branch/:branch/changesets/`}
-              />
+                />
 
-              <Route path={`${escapedUrl}/info`} exact>
+                <Route path={`${escapedUrl}/info`} exact>
-                <RepositoryDetails repository={repository} />
+                  <RepositoryDetails repository={repository} />
-              </Route>
+                </Route>
-              <Route path={`${escapedUrl}/settings/general`}>
+                <Route path={`${escapedUrl}/settings/general`}>
-                <EditRepo repository={repository} />
+                  <EditRepo repository={repository} />
-              </Route>
+                </Route>
-              <Route path={`${escapedUrl}/settings/permissions`}>
+                <Route path={`${escapedUrl}/settings/permissions`}>
-                <Permissions namespaceOrRepository={repository} />
+                  <Permissions namespaceOrRepository={repository} />
-              </Route>
+                </Route>
-              <Route exact path={`${escapedUrl}/code/changeset/:id`}>
+                <Route exact path={`${escapedUrl}/code/changeset/:id`}>
-                <ChangesetView repository={repository} fileControlFactoryFactory={fileControlFactoryFactory} />
+                  <ChangesetView repository={repository} fileControlFactoryFactory={fileControlFactoryFactory} />
-              </Route>
+                </Route>
-              <Route path={`${escapedUrl}/code/sourceext/:extension`} exact={true}>
+                <Route path={`${escapedUrl}/code/sourceext/:extension`} exact={true}>
-                <SourceExtensions repository={repository} />
+                  <SourceExtensions repository={repository} />
-              </Route>
+                </Route>
-              <Route path={`${escapedUrl}/code/sourceext/:extension/:revision/:path*`}>
+                <Route path={`${escapedUrl}/code/sourceext/:extension/:revision/:path*`}>
-                <SourceExtensions repository={repository} baseUrl={`${url}/code/sources`} />
+                  <SourceExtensions repository={repository} baseUrl={`${url}/code/sources`} />
-              </Route>
+                </Route>
-              <Route path={`${escapedUrl}/code`}>
+                <Route path={`${escapedUrl}/code`}>
-                <CodeOverview baseUrl={`${url}/code`} repository={repository} />
+                  <CodeOverview baseUrl={`${url}/code`} repository={repository} />
-              </Route>
+                </Route>
-              <Route path={`${escapedUrl}/branch/:branch`}>
+                <Route path={`${escapedUrl}/branch/:branch`}>
-                <BranchRoot repository={repository} />
+                  <BranchRoot repository={repository} />
-              </Route>
+                </Route>
-              <Route path={`${escapedUrl}/branches`} exact={true}>
+                <Route path={`${escapedUrl}/branches`} exact={true}>
-                <BranchesOverview repository={repository} baseUrl={`${url}/branch`} />
+                  <BranchesOverview repository={repository} baseUrl={`${url}/branch`} />
-              </Route>
+                </Route>
-              <Route path={`${escapedUrl}/branches/create`}>
+                <Route path={`${escapedUrl}/branches/create`}>
-                <CreateBranch repository={repository} />
+                  <CreateBranch repository={repository} />
-              </Route>
+                </Route>
-              <Route path={`${escapedUrl}/tag/:tag`}>
+                <Route path={`${escapedUrl}/tag/:tag`}>
-                <TagRoot repository={repository} baseUrl={`${url}/tag`} />
+                  <TagRoot repository={repository} baseUrl={`${url}/tag`} />
-              </Route>
+                </Route>
-              <Route path={`${escapedUrl}/tags`} exact={true}>
+                <Route path={`${escapedUrl}/tags`} exact={true}>
-                <TagsOverview repository={repository} baseUrl={`${url}/tag`} />
+                  <TagsOverview repository={repository} baseUrl={`${url}/tag`} />
-              </Route>
+                </Route>
-              <Route path={`${escapedUrl}/compare/:sourceType/:sourceName`}>
+                <Route path={`${escapedUrl}/compare/:sourceType/:sourceName`}>
-                <CompareRoot repository={repository} baseUrl={`${url}/compare`} />
+                  <CompareRoot repository={repository} baseUrl={`${url}/compare`} />
-              </Route>
+                </Route>
-              <ExtensionPoint<extensionPoints.RepositoryRoute>
+                <ExtensionPoint<extensionPoints.RepositoryRoute>
-                name="repository.route"
+                  name="repository.route"
-                props={{
+                  props={{
-                  repository,
+                    repository,
-                  url: urls.escapeUrlForRoute(url),
+                    url: urls.escapeUrlForRoute(url),
-                  indexLinks,
+                    indexLinks,
-                }}
+                  }}
-                renderAll={true}
+                  renderAll={true}
-              />
+                />
-            </Switch>
+              </Switch>
-          </PrimaryContentColumn>
+            </PrimaryContentColumn>
-          <SecondaryNavigationColumn>
+            <SecondaryNavigationColumn>
-            <SecondaryNavigation label={t("repositoryRoot.menu.navigationLabel")}>
+              <SecondaryNavigation label={t("repositoryRoot.menu.navigationLabel")}>
-              <ExtensionPoint<extensionPoints.RepositoryNavigationTopLevel>
+                <ExtensionPoint<extensionPoints.RepositoryNavigationTopLevel>
-                name="repository.navigation.topLevel"
+                  name="repository.navigation.topLevel"
-                props={extensionProps}
-                renderAll={true}
-              />
-              <NavLink
-                to={`${url}/info`}
-                icon="fas fa-info-circle"
-                label={t("repositoryRoot.menu.informationNavLink")}
-                title={t("repositoryRoot.menu.informationNavLink")}
-              />
-              <RepositoryNavLink
-                repository={repository}
-                linkName="branches"
-                to={`${url}/branches/`}
-                icon="fas fa-code-branch"
-                label={t("repositoryRoot.menu.branchesNavLink")}
-                activeWhenMatch={matchesBranches}
-                activeOnlyWhenExact={false}
-                title={t("repositoryRoot.menu.branchesNavLink")}
-              />
-              <RepositoryNavLink
-                repository={repository}
-                linkName="tags"
-                to={`${url}/tags/`}
-                icon="fas fa-tags"
-                label={t("repositoryRoot.menu.tagsNavLink")}
-                activeWhenMatch={matchesTags}
-                activeOnlyWhenExact={false}
-                title={t("repositoryRoot.menu.tagsNavLink")}
-              />
-              <RepositoryNavLink
-                repository={repository}
-                linkName={codeLinkname}
-                to={evaluateDestinationForCodeLink()}
-                icon="fas fa-code"
-                label={t("repositoryRoot.menu.sourcesNavLink")}
-                activeWhenMatch={matchesCode}
-                activeOnlyWhenExact={false}
-                title={t("repositoryRoot.menu.sourcesNavLink")}
-              />
-              <ExtensionPoint<extensionPoints.RepositoryNavigation>
-                name="repository.navigation"
-                props={extensionProps}
-                renderAll={true}
-              />
-              <SubNavigation
-                to={`${url}/settings/general`}
-                label={t("repositoryRoot.menu.settingsNavLink")}
-                title={t("repositoryRoot.menu.settingsNavLink")}
-              >
-                <EditRepoNavLink repository={repository} editUrl={`${url}/settings/general`} />
-                <PermissionsNavLink permissionUrl={`${url}/settings/permissions`} repository={repository} />
-                <ExtensionPoint<extensionPoints.RepositorySetting>
-                  name="repository.setting"
                   props={extensionProps}
                   renderAll={true}
                 />
-              </SubNavigation>
+                <NavLink
-            </SecondaryNavigation>
+                  to={`${url}/info`}
-          </SecondaryNavigationColumn>
+                  icon="fas fa-info-circle"
-        </CustomQueryFlexWrappedColumns>
+                  label={t("repositoryRoot.menu.informationNavLink")}
-      </Page>
+                  title={t("repositoryRoot.menu.informationNavLink")}
+                />
+                <RepositoryNavLink
+                  repository={repository}
+                  linkName="branches"
+                  to={`${url}/branches/`}
+                  icon="fas fa-code-branch"
+                  label={t("repositoryRoot.menu.branchesNavLink")}
+                  activeWhenMatch={matchesBranches}
+                  activeOnlyWhenExact={false}
+                  title={t("repositoryRoot.menu.branchesNavLink")}
+                />
+                <RepositoryNavLink
+                  repository={repository}
+                  linkName="tags"
+                  to={`${url}/tags/`}
+                  icon="fas fa-tags"
+                  label={t("repositoryRoot.menu.tagsNavLink")}
+                  activeWhenMatch={matchesTags}
+                  activeOnlyWhenExact={false}
+                  title={t("repositoryRoot.menu.tagsNavLink")}
+                />
+                <RepositoryNavLink
+                  repository={repository}
+                  linkName={codeLinkname}
+                  to={evaluateDestinationForCodeLink()}
+                  icon="fas fa-code"
+                  label={t("repositoryRoot.menu.sourcesNavLink")}
+                  activeWhenMatch={matchesCode}
+                  activeOnlyWhenExact={false}
+                  title={t("repositoryRoot.menu.sourcesNavLink")}
+                />
+                <ExtensionPoint<extensionPoints.RepositoryNavigation>
+                  name="repository.navigation"
+                  props={extensionProps}
+                  renderAll={true}
+                />
+                <SubNavigation
+                  to={`${url}/settings/general`}
+                  label={t("repositoryRoot.menu.settingsNavLink")}
+                  title={t("repositoryRoot.menu.settingsNavLink")}
+                >
+                  <EditRepoNavLink repository={repository} editUrl={`${url}/settings/general`} />
+                  <PermissionsNavLink permissionUrl={`${url}/settings/permissions`} repository={repository} />
+                  <ExtensionPoint<extensionPoints.RepositorySetting>
+                    name="repository.setting"
+                    props={extensionProps}
+                    renderAll={true}
+                  />
+                </SubNavigation>
+              </SecondaryNavigation>
+            </SecondaryNavigationColumn>
+          </CustomQueryFlexWrappedColumns>
+        </Page>
+      </RepositoryContextProvider>
     </StateMenuContextProvider>
   );
 };

scm-ui/ui-webapp/src/repos/sources/components/content/SwitchableMarkdownViewer.tsx

@@ -23,7 +23,7 @@
  */
 import React, { FC, useState } from "react";
 import MarkdownViewer from "./MarkdownViewer";
-import { File } from "@scm-manager/ui-types";
+import { File, Repository } from "@scm-manager/ui-types";
 import { ErrorNotification, Loading, SyntaxHighlighter } from "@scm-manager/ui-components";
 import { useTranslation } from "react-i18next";
 import { useFileContent } from "@scm-manager/ui-api";
@@ -34,9 +34,10 @@ import classNames from "classnames";
 type Props = {
   file: File;
   basePath: string;
+  repository: Repository;
 };
 
-const SwitchableMarkdownViewer: FC<Props> = ({ file, basePath }) => {
+const SwitchableMarkdownViewer: FC<Props> = ({ file, basePath, repository }) => {
   const { isLoading, error, data: content } = useFileContent(file);
   const { t } = useTranslation("repos");
   const location = useLocation();
@@ -68,7 +69,13 @@ const SwitchableMarkdownViewer: FC<Props> = ({ file, basePath }) => {
         </ul>
       </div>
       {renderMarkdown ? (
-        <MarkdownViewer content={content || ""} basePath={basePath} permalink={permalink} />
+        <MarkdownViewer
+          content={content || ""}
+          basePath={basePath}
+          permalink={permalink}
+          revision={file.revision}
+          repository={repository}
+        />
       ) : (
         <SyntaxHighlighter language="markdown" value={content || ""} permalink={permalink} />
       )}

scm-ui/ui-webapp/src/repos/sources/containers/Sources.tsx

@@ -24,7 +24,7 @@
 import React, { FC, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { useHistory, useLocation, useParams } from "react-router-dom";
-import { useSources } from "@scm-manager/ui-api";
+import { RepositoryRevisionContextProvider, useSources } from "@scm-manager/ui-api";
 import { Branch, Repository } from "@scm-manager/ui-types";
 import { Breadcrumb, ErrorNotification, Loading, Notification } from "@scm-manager/ui-components";
 import FileTree from "../components/FileTree";
@@ -178,7 +178,7 @@ const Sources: FC<Props> = ({ repository, branches, selectedBranch, baseUrl }) =
   };
 
   return (
-    <>
+    <RepositoryRevisionContextProvider revision={revision}>
       {hasBranchesWhenSupporting(repository) && (
         <CodeActionBar
           selectedBranch={selectedBranch}
@@ -193,7 +193,7 @@ const Sources: FC<Props> = ({ repository, branches, selectedBranch, baseUrl }) =
         />
       )}
       {renderPanelContent()}
-    </>
+    </RepositoryRevisionContextProvider>
   );
 };
 

scm-ui/ui-webapp/src/repos/sources/containers/SourcesView.tsx

@@ -66,7 +66,7 @@ const SourcesView: FC<Props> = ({ file, repository, revision }) => {
   if (contentType.startsWith("image/")) {
     sources = <ImageViewer file={file} />;
   } else if (contentType.includes("markdown") || (language && language.toLowerCase() === "markdown")) {
-    sources = <SwitchableMarkdownViewer file={file} basePath={basePath} />;
+    sources = <SwitchableMarkdownViewer file={file} basePath={basePath} repository={repository} />;
   } else if (language) {
     sources = <SourcecodeViewer file={file} language={language} />;
   } else if (contentType.startsWith("text/")) {

scm-webapp/src/main/java/sonia/scm/api/v2/resources/RepositoryToRepositoryDtoMapper.java

@@ -170,6 +170,7 @@ public abstract class RepositoryToRepositoryDtoMapper extends BaseMapper<Reposit
     }
     linksBuilder.single(link("changesets", resourceLinks.changeset().all(repository.getNamespace(), repository.getName())));
     linksBuilder.single(link("sources", resourceLinks.source().selfWithoutRevision(repository.getNamespace(), repository.getName())));
+    linksBuilder.single(link("content", resourceLinks.source().content(repository.getNamespace(), repository.getName())));
     linksBuilder.single(link("paths", resourceLinks.repository().paths(repository.getNamespace(), repository.getName())));
     if (RepositoryPermissions.healthCheck(repository).isPermitted() && !healthCheckService.checkRunning(repository)) {
       linksBuilder.single(link("runHealthCheck", resourceLinks.repository().runHealthCheck(repository.getNamespace(), repository.getName())));

scm-webapp/src/main/java/sonia/scm/api/v2/resources/ResourceLinks.java

@@ -780,6 +780,12 @@ class ResourceLinks {
     public String content(String namespace, String name, String revision, String path) {
       return addPath(sourceLinkBuilder.method("getRepositoryResource").parameters(namespace, name).method("content").parameters().method("get").parameters(revision, "").href(), path);
     }
+
+    public String content(String namespace, String name) {
+      return content(namespace, name, "_REVISION_", "_PATH_")
+        .replace("_REVISION_", "{revision}")
+        .replace("_PATH_", "{path}");
+    }
   }
 
   public AnnotateLinks annotate() {

scm-webapp/src/test/java/sonia/scm/api/v2/resources/RepositoryToRepositoryDtoMapperTest.java

@@ -225,6 +225,14 @@ public class RepositoryToRepositoryDtoMapperTest {
       dto.getLinks().getLinkBy("sources").get().getHref());
   }
 
+  @Test
+  public void shouldCreateContentLink() {
+    RepositoryDto dto = mapper.map(createTestRepository());
+    assertEquals(
+      "http://example.com/base/v2/repositories/testspace/test/content/{revision}/{path}",
+      dto.getLinks().getLinkBy("content").get().getHref());
+  }
+
   @Test
   public void shouldCreatePermissionsLink() {
     RepositoryDto dto = mapper.map(createTestRepository());