@shopgate/engage
Version:
Shopgate's ENGAGE library.
88 lines (87 loc) • 2.06 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import { HtmlSanitizer } from '@shopgate/engage/components';
import { makeStyles } from '@shopgate/engage/styles';
import { jsx as _jsx } from "react/jsx-runtime";
const useStyles = makeStyles()(theme => ({
root: {
width: '100%',
'& > :first-child/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */': {
marginTop: 0
},
'& > :last-child/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */': {
marginBottom: 0
},
'& p': {
margin: '0px 0px 1rem 0px',
':empty': {
minHeight: '1rem'
}
},
'ul, ol': {
paddingLeft: '40px'
},
'ul li': {
listStyleType: 'disc'
},
'ol li': {
listStyleType: 'decimal'
},
h1: {
...theme.typography.h1,
margin: '0px 0px 1rem 0px'
},
h2: {
...theme.typography.h2,
margin: '0px 0px 1rem 0px'
},
h3: {
...theme.typography.h3,
margin: '0px 0px 1rem 0px'
},
h4: {
...theme.typography.h4,
margin: '0px 0px 1rem 0px'
},
h5: {
...theme.typography.h5,
margin: '0px 0px 1rem 0px'
},
h6: {
...theme.typography.h6,
margin: '0px 0px 1rem 0px'
},
a: {
color: 'var(--color-primary)'
}
}
}));
/**
* @param {Object} props The component props.
* @param {string} props.content The rich text content.
* @param {string} [props.className] An optional class name.
* @returns {JSX.Element}
*/
const WidgetRichText = ({
content,
className
}) => {
const {
cx,
classes
} = useStyles();
if (!content) return null;
return /*#__PURE__*/_jsx(HtmlSanitizer, {
processStyles: true,
settings: {
html: content
},
className: cx(classes.root, className),
children: content
});
};
WidgetRichText.defaultProps = {
content: '',
className: null
};
export default WidgetRichText;