add markdown codeblock renderer extension point (#1492)

Introduces a new extension point that allows developers to overwrite the default syntax highlighting renderer for specific code blocks defined in markdown. The extension point is dynamic and follows the pattern "markdown-renderer.code.{language}".
This feature lays the groundwork for the scm-markdown-plantuml-plugin.
This commit is contained in:
Konstantin Schaper
2021-01-07 09:25:31 +01:00
committed by GitHub
parent 8eb599ff94
commit 831c8b0271
7 changed files with 292 additions and 5035 deletions

View File

@@ -27,12 +27,12 @@ import { RouteComponentProps, withRouter } from "react-router-dom";
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 { create } from "./MarkdownLinkRenderer";
import { useTranslation, WithTranslation, withTranslation } from "react-i18next";
import Notification from "./Notification";
import { createTransformer } from "./remarkChangesetShortLinkParser";
import MarkdownCodeRenderer from "./MarkdownCodeRenderer";
type Props = RouteComponentProps &
WithTranslation & {
@@ -81,13 +81,13 @@ const MarkdownErrorNotification: FC = () => {
class MarkdownView extends React.Component<Props, State> {
static defaultProps: Partial<Props> = {
enableAnchorHeadings: false,
skipHtml: false
skipHtml: false,
};
constructor(props: Props) {
super(props);
this.state = {
contentRef: null
contentRef: null,
};
}
@@ -137,12 +137,12 @@ class MarkdownView extends React.Component<Props, State> {
}
if (!rendererList.code) {
rendererList.code = SyntaxHighlighter;
rendererList.code = MarkdownCodeRenderer;
}
return (
<ErrorBoundary fallback={MarkdownErrorNotification}>
<div ref={el => this.setState({ contentRef: el })}>
<div ref={(el) => this.setState({ contentRef: el })}>
<Markdown
className="content is-word-break"
skipHtml={skipHtml}