Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-11-09 15:05:44 +01:00
Code Issues Packages Projects Releases Activity

Added ErrorBoundary to MarkdownView to avoid invalid markdown crashes the entire page

Browse Source
This commit is contained in:
Sebastian Sdorra
2020-03-24 07:38:07 +01:00
parent c86efe1a24
commit d3a8af7a52
4 changed files with 76 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
scm-ui/ui-components/src/MarkdownView.stories.tsx
View File

@@ -5,19 +5,24 @@ import styled from "styled-components";
import TestPage from "./__resources__/test-page.md";
import MarkdownWithoutLang from "./__resources__/markdown-without-lang.md";
import MarkdownXmlCodeBlock from "./__resources__/markdown-xml-codeblock.md";
import MarkdownInlineXml from "./__resources__/markdown-inline-xml.md";
import Title from "./layout/Title";
import { Subtitle } from "./layout";
const Spacing = styled.div`
padding: 2em;
`;
storiesOf("MarkdownView", module)
.add("Default", () => (
<Spacing>
<MarkdownView content={TestPage} skipHtml={false} />
</Spacing>
))
.add("Code without Lang", () => (
<Spacing>
<MarkdownView content={MarkdownWithoutLang} skipHtml={false} />
</Spacing>
.addDecorator(story => <Spacing>{story()}</Spacing>)
.add("Default", () => <MarkdownView content={TestPage} skipHtml={false} />)
.add("Code without Lang", () => <MarkdownView content={MarkdownWithoutLang} skipHtml={false} />)
.add("Xml Code Block", () => <MarkdownView content={MarkdownXmlCodeBlock} />)
.add("Inline Xml", () => (
<>
<Title title="Inline Xml" />
<Subtitle subtitle="Inline xml outside of a code block is not supported" />
<MarkdownView content={MarkdownInlineXml} />
</>
));

3
scm-ui/ui-components/src/MarkdownView.tsx
View File

@@ -3,6 +3,7 @@ import { withRouter, RouteComponentProps } from "react-router-dom";
// @ts-ignore
import Markdown from "react-markdown/with-html";
import { binder } from "@scm-manager/ui-extensions";
import ErrorBoundary from "./ErrorBoundary";
import SyntaxHighlighter from "./SyntaxHighlighter";
import MarkdownHeadingRenderer from "./MarkdownHeadingRenderer";
@@ -64,6 +65,7 @@ class MarkdownView extends React.Component<Props> {
}
return (
<ErrorBoundary>
<div ref={el => (this.contentRef = el)}>
<Markdown
className="content"
@@ -73,6 +75,7 @@ class MarkdownView extends React.Component<Props> {
renderers={rendererList}
/>
</div>
</ErrorBoundary>
);
}
}

24
scm-ui/ui-components/src/__resources__/markdown-inline-xml.md.ts Normal file
View File

@@ -0,0 +1,24 @@
export default `# Xml in Markdown
<project [...]>
[...]
<build>
<plugins>
[...]
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-enforcer-plugin</artifactId>
</plugin>
<plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>animal-sniffer-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
[...]
</project>`;

26
scm-ui/ui-components/src/__resources__/markdown-xml-codeblock.md.ts Normal file
View File

@@ -0,0 +1,26 @@
export default `# Xml Code Block in Markdown
\`\`\`xml
<project [...]>
[...]
<build>
<plugins>
[...]
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-enforcer-plugin</artifactId>
</plugin>
<plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>animal-sniffer-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
[...]
</project>
\`\`\``;