@craftercms/studio-ui
Version:
Services, components, models & utils to build CrafterCMS authoring extensions.
83 lines (81 loc) • 3.16 kB
JavaScript
/*
* Copyright (C) 2007-2022 Crafter Software Corporation. All Rights Reserved.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Lesser General Public License version 3 as published by
* the Free Software Foundation.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
/*
* Copyright (C) 2007-2022 Crafter Software Corporation. All Rights Reserved.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License version 3 as published by
* the Free Software Foundation.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import React, { useEffect, useState } from 'react';
import { marked } from 'marked';
import hljs from '../../env/hljs';
import Typography from '@mui/material/Typography';
import Link from '@mui/material/Link';
import { FormattedMessage } from 'react-intl';
export function PluginDocumentation(props) {
const { plugin } = props;
const [markdown, setMarkdown] = useState(null);
const [link, setLink] = useState(null);
const [markdownError, setMarkdownError] = useState(null);
useEffect(() => {
if (plugin.documentation) {
marked.setOptions({
highlight: function (code, lang) {
return hljs.highlightAuto(code).value;
},
langPrefix: 'hljs language-'
});
if (/(\/readme$)|(.md$)/.test(plugin.documentation)) {
fetch(plugin.documentation)
.then((r) => r.text())
.then((content) => {
setMarkdown(marked(content));
})
.catch((error) => {
setMarkdownError(true);
});
} else if (plugin.documentation) {
setLink(plugin.documentation);
}
}
}, [plugin]);
return React.createElement(
React.Fragment,
null,
markdown && React.createElement(Typography, { component: 'div', dangerouslySetInnerHTML: { __html: markdown } }),
link && React.createElement(Link, { href: link }, link),
markdownError &&
React.createElement(
Typography,
null,
React.createElement(FormattedMessage, {
id: 'pluginDetails.markdownError',
defaultMessage: 'Unable to render documentation. Visit <a>{link}</a> to view.',
values: { link: plugin.documentation, a: (text) => React.createElement('a', { href: text[0] }, text[0]) }
})
)
);
}
export default PluginDocumentation;