70 lines
1.8 KiB
JavaScript
70 lines
1.8 KiB
JavaScript
// @flow
|
|
|
|
import React from 'react';
|
|
import mammoth from 'mammoth';
|
|
import LoadingScreen from 'component/common/loading-screen';
|
|
|
|
type Props = {
|
|
source: string,
|
|
};
|
|
|
|
type State = {
|
|
error: boolean,
|
|
loading: boolean,
|
|
content: ?string,
|
|
};
|
|
|
|
class DocxViewer extends React.PureComponent<Props, State> {
|
|
constructor(props: Props) {
|
|
super(props);
|
|
this.state = {
|
|
error: false,
|
|
content: null,
|
|
loading: true,
|
|
};
|
|
}
|
|
componentDidMount() {
|
|
const { source } = this.props;
|
|
|
|
// Overwrite element and styles
|
|
const options = {
|
|
styleMap: [
|
|
"p[style-name='Title'] => h1:fresh",
|
|
"p[style-name='Heading 1'] => h1:fresh",
|
|
"p[style-name='Heading 2'] => h2:fresh",
|
|
"p[style-name='Heading 3'] => h3:fresh",
|
|
"p[style-name='Section Title'] => h1:fresh",
|
|
"p[style-name='Subsection Title'] => h2:fresh",
|
|
"p[style-name='Aside Heading'] => div.aside > h2:fresh",
|
|
"p[style-name='Aside Text'] => div.aside > p:fresh",
|
|
],
|
|
};
|
|
|
|
// Parse docx to html
|
|
mammoth
|
|
.convertToHtml({ path: source }, options)
|
|
.then(result => {
|
|
this.setState({ content: result.value, loading: false });
|
|
})
|
|
.catch(() => {
|
|
this.setState({ error: true, loading: false });
|
|
})
|
|
.done();
|
|
}
|
|
|
|
render() {
|
|
const { content, error, loading } = this.state;
|
|
const loadingMessage = __('Rendering document.');
|
|
const errorMessage = __("Sorry, looks like we can't load the document.");
|
|
|
|
return (
|
|
<div className="file-viewer file-viewer--document">
|
|
{loading && <LoadingScreen status={loadingMessage} spinner />}
|
|
{error && <LoadingScreen status={errorMessage} spinner={false} />}
|
|
{content && <div className="file-render__content" dangerouslySetInnerHTML={{ __html: content }} />}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default DocxViewer;
|