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

Merge with upstream

Browse Source
This commit is contained in:
Florian Scholdei
2020-03-24 12:01:36 +01:00
parent 8a94a7e634 fc94c786a1
commit 4392ec1c02
11 changed files with 617 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -28,19 +28,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} />
</>
));

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

@@ -21,13 +21,16 @@
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
import React from "react";
import React, { FC } from "react";
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";
import { useTranslation } from "react-i18next";
import Notification from "./Notification";
type Props = RouteComponentProps & {
content: string;
@@ -37,6 +40,35 @@ type Props = RouteComponentProps & {
enableAnchorHeadings?: boolean;
};
const xmlMarkupSample = `\`\`\`xml
<your>
<xml>
<content/>
</xml>
</your>
\`\`\``;
const MarkdownErrorNotification: FC = () => {
const [t] = useTranslation("commons");
return (
<Notification type="danger">
<div className="content">
<p className="subtitle">{t("markdownErrorNotification.title")}</p>
<p>{t("markdownErrorNotification.description")}</p>
<pre>
<code>{xmlMarkupSample}</code>
</pre>
<p>
{t("markdownErrorNotification.spec")}:{" "}
<a href="https://github.github.com/gfm/" target="_blank">
GitHub Flavored Markdown Spec
</a>
</p>
</div>
</Notification>
);
};
class MarkdownView extends React.Component<Props> {
static defaultProps: Partial<Props> = {
enableAnchorHeadings: false,
@@ -87,15 +119,17 @@ class MarkdownView extends React.Component<Props> {
}
return (
<div ref={el => (this.contentRef = el)}>
<Markdown
className="content is-word-break"
skipHtml={skipHtml}
escapeHtml={skipHtml}
source={content}
renderers={rendererList}
/>
</div>
<ErrorBoundary fallback={MarkdownErrorNotification}>
<div ref={el => (this.contentRef = el)}>
<Markdown
className="content is-word-break"
skipHtml={skipHtml}
escapeHtml={skipHtml}
source={content}
renderers={rendererList}
/>
</div>
</ErrorBoundary>
);
}
}

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

@@ -0,0 +1,47 @@
/*
* 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 `# 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>`;

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

@@ -0,0 +1,49 @@
/*
* 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 `# 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>
\`\`\``;

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

@@ -33768,6 +33768,426 @@ func main() {
</div>
`;
exports[`Storyshots MarkdownView Inline Xml 1`] = `
<div
className="MarkdownViewstories__Spacing-sc-1hk90gd-0 eqTNCI"
>
<h1
className="title"
>
Inline Xml
</h1>
<h2
className="subtitle"
>
Inline xml outside of a code block is not supported
</h2>
<div
className="notification is-danger"
>
<div
className="content"
>
<p
className="subtitle"
>
markdownErrorNotification.title
</p>
<p>
markdownErrorNotification.description
</p>
<pre>
<code>
\`\`\`xml
&lt;your&gt;
&lt;xml&gt;
&lt;content/&gt;
&lt;/xml&gt;
&lt;/your&gt;
\`\`\`
</code>
</pre>
<p>
markdownErrorNotification.spec
:
<a
href="https://github.github.com/gfm/"
target="_blank"
>
GitHub Flavored Markdown Spec
</a>
</p>
</div>
</div>
</div>
`;
exports[`Storyshots MarkdownView Xml Code Block 1`] = `
<div
className="MarkdownViewstories__Spacing-sc-1hk90gd-0 eqTNCI"
>
<div>
<div
className="content"
>
<h1>
Xml Code Block in Markdown
</h1>
<pre
style={
Object {
"background": "#FFFFFF",
"color": "#434f54",
"display": "block",
"overflowX": "auto",
"padding": "0.5em",
}
}
>
<code>
<span
className="hljs-tag"
style={Object {}}
>
&lt;
<span
style={
Object {
"color": "#00979D",
}
}
>
project
</span>
[
<span
className="hljs-attr"
style={Object {}}
>
...
</span>
]&gt;
</span>
[...]
<span
className="hljs-tag"
style={Object {}}
>
&lt;
<span
style={
Object {
"color": "#00979D",
}
}
>
build
</span>
&gt;
</span>
<span
className="hljs-tag"
style={Object {}}
>
&lt;
<span
style={
Object {
"color": "#00979D",
}
}
>
plugins
</span>
&gt;
</span>
[...]
<span
className="hljs-tag"
style={Object {}}
>
&lt;
<span
style={
Object {
"color": "#00979D",
}
}
>
plugin
</span>
&gt;
</span>
<span
className="hljs-tag"
style={Object {}}
>
&lt;
<span
style={
Object {
"color": "#00979D",
}
}
>
groupId
</span>
&gt;
</span>
org.apache.maven.plugins
<span
className="hljs-tag"
style={Object {}}
>
&lt;/
<span
style={
Object {
"color": "#00979D",
}
}
>
groupId
</span>
&gt;
</span>
<span
className="hljs-tag"
style={Object {}}
>
&lt;
<span
style={
Object {
"color": "#00979D",
}
}
>
artifactId
</span>
&gt;
</span>
maven-enforcer-plugin
<span
className="hljs-tag"
style={Object {}}
>
&lt;/
<span
style={
Object {
"color": "#00979D",
}
}
>
artifactId
</span>
&gt;
</span>
<span
className="hljs-tag"
style={Object {}}
>
&lt;/
<span
style={
Object {
"color": "#00979D",
}
}
>
plugin
</span>
&gt;
</span>
<span
className="hljs-tag"
style={Object {}}
>
&lt;
<span
style={
Object {
"color": "#00979D",
}
}
>
plugin
</span>
&gt;
</span>
<span
className="hljs-tag"
style={Object {}}
>
&lt;
<span
style={
Object {
"color": "#00979D",
}
}
>
groupId
</span>
&gt;
</span>
org.codehaus.mojo
<span
className="hljs-tag"
style={Object {}}
>
&lt;/
<span
style={
Object {
"color": "#00979D",
}
}
>
groupId
</span>
&gt;
</span>
<span
className="hljs-tag"
style={Object {}}
>
&lt;
<span
style={
Object {
"color": "#00979D",
}
}
>
artifactId
</span>
&gt;
</span>
animal-sniffer-maven-plugin
<span
className="hljs-tag"
style={Object {}}
>
&lt;/
<span
style={
Object {
"color": "#00979D",
}
}
>
artifactId
</span>
&gt;
</span>
<span
className="hljs-tag"
style={Object {}}
>
&lt;/
<span
style={
Object {
"color": "#00979D",
}
}
>
plugin
</span>
&gt;
</span>
<span
className="hljs-tag"
style={Object {}}
>
&lt;/
<span
style={
Object {
"color": "#00979D",
}
}
>
plugins
</span>
&gt;
</span>
<span
className="hljs-tag"
style={Object {}}
>
&lt;/
<span
style={
Object {
"color": "#00979D",
}
}
>
build
</span>
&gt;
</span>
[...]
<span
className="hljs-tag"
style={Object {}}
>
&lt;/
<span
style={
Object {
"color": "#00979D",
}
}
>
project
</span>
&gt;
</span>
</code>
</pre>
</div>
</div>
</div>
`;
exports[`Storyshots SyntaxHighlighter Go 1`] = `
<div
className="SyntaxHighlighterstories__Spacing-sc-1dcldp5-0 eofOgh"