Merge with upstream

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

@@ -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>
     );
   }
 }