renderElement (html, id, value) {
var htmlToReactParser = new HtmlToReact.Parser();
var processNodeDefinitions = new HtmlToReact.ProcessNodeDefinitions(React);
var updateOption = this.updateOption;
var isValidNode = function () {
return true;
};
var processingInstructions = [
{
shouldProcessNode: function (node) {
return node.name === 'input' || node.name === 'select';
},
processNode: function (node, children, index) {
node.attribs.id = id;
node.attribs.value = value;
node.attribs.onChange = updateOption;
return processNodeDefinitions.processDefaultNode(node, children, index);
}
},
{
shouldProcessNode: function (node) {
return true;
},
processNode: processNodeDefinitions.processDefaultNode
}
];
var reactElement = htmlToReactParser.parseWithInstructions(html, isValidNode, processingInstructions);
return reactElement;
}
processNode: (node, children) => {
if (!counts[node.name]) {
counts[node.name] = 0
}
counts[node.name]++
const attrs = {
key: node.name + '-' + counts[node.name],
...node.attribs
}
if (
imageContainers.indexOf(node.name) !== -1 &&
children && children.length
) {
const img = children.find(child => child.type === 'img')
const index = children.indexOf(img)
if (index !== -1) {
return createImageContainer(node, attrs, children, index)
}
}
if (node.type === 'text') {
return entities.decodeHTML(node.data)
}
if (node.name === 'img') {
attrs.style = { clear: 'both' }
if (attrs.class) {
const classes = attrs.class.split(' ')
if (classes.indexOf('alignleft') !== -1) {
attrs.style.float = 'left'
} else if (classes.indexOf('alignright') !== -1) {
attrs.style.float = 'right'
}
attrs.class = ''
}
return React.createElement(node.name, attrs, node.data)
}
if (
node.name == 'a' &&
// Ignore `mailto:` links
attrs.href.indexOf('mailto') === -1 &&
// Ignore any href that is not pointing to our WP instance
attrs.href.indexOf(config.wordpress) === 0
) {
attrs.href = ''
return <Link to={node.attribs.href} {...attrs}>{children}</Link>
}
if (Object.keys(voidElements).indexOf(node.name) !== -1) {
return React.createElement(node.name, attrs, node.data)
}
return processNodeDefinitions.processDefaultNode(node, children)
}
processNode: function (node, children, index) {
node.attribs.id = id;
node.attribs.value = value;
node.attribs.onChange = updateOption;
return processNodeDefinitions.processDefaultNode(node, children, index);
}