import parser from 'html-react-parser';
import attributesToProps from 'html-react-parser/lib/attributes-to-props';
import domToReact from 'html-react-parser/lib/dom-to-react';
import PropTypes from 'prop-types';
import { PureComponent } from 'react';
import Image from 'Component/Image';
import Link from 'Component/Link';
import WidgetFactory from 'Component/WidgetFactory';
import { hash } from 'Util/Request/Hash';
/** @namespace Component/Html/Component */
export class Html extends PureComponent {
content: PropTypes.string.isRequired
query: { name: ['widget'] },
replace: this.replaceWidget
replace: this.replaceLinks
query: { name: ['img'] },
replace: this.replaceImages
// [...] logic for replacing elements with components
attributesToProps(attribs) {...}
replaceLinks({ attribs, children }) {
const { href, ...attrs } = attribs;
<Link { ...attributesToProps({ ...attrs, to: href }) }>
{ domToReact(children, this.parserOptions) }
replaceImages({ attribs }) {
const attributes = attributesToProps(attribs);
return <Image { ...attributes } />;
replaceWidget({ attribs }) {
return <WidgetFactory { ...this.attributesToProps(attribs) } />;
const { content } = this.props;
return parser(content, this.parserOptions);