blob: 75da884d4c31366628b2f4f69f003edb65378644 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
const React = require('react');
const ReactSafeHtml = require('react-safe-html');
const htmlTags = require('html-tags');
const entities = require('entities');
const { InjectedComponent } = require('./InjectedComponent');
const DOMProperty = require('react/lib/ReactInjection').DOMProperty;
DOMProperty.injectDOMPropertyConfig({
Properties: {
align: DOMProperty.MUST_USE_ATTRIBUTE
},
isCustomAttribute: (attributeName) => {
return attributeName === 'align';
}
});
/*
HTMLContent is a container for the page HTML that parse the content and
render the right block.
All html elements can be extended using the injected component.
*/
function inject(injectedProps, Component) {
return (props) => {
const cleanProps = {
...props,
className: props['class']
};
delete cleanProps['class'];
return (
<InjectedComponent {...injectedProps(cleanProps)}>
<Component {...cleanProps} />
</InjectedComponent>
);
};
}
const COMPONENTS = {
// Templating blocks are exported as <xblock name="youtube" props="{}" />
'xblock': inject(
({name, props}) => {
props = entities.decodeHTML(props);
return {
matching: { role: `block:${name}` },
props: JSON.parse(props)
};
},
props => <div {...props} />
)
};
htmlTags.forEach(tag => {
COMPONENTS[tag] = inject(
props => {
return {
matching: { role: `html:${tag}` },
props
};
},
props => React.createElement(tag, props)
);
});
const HTMLContent = React.createClass({
propTypes: {
html: React.PropTypes.string.isRequired
},
render() {
const { html } = this.props;
return <ReactSafeHtml html={html} components={COMPONENTS} />;
}
});
module.exports = HTMLContent;
|
