import _utilJs from "./util.js";
import _statefulArticleEditorJsx from "./stateful-article-editor.jsx";
import _articleEditorJsx from "./article-editor.jsx";
import _react from "react";
var _module_ = {
exports: {}
};
var exports = _module_.exports;
/**
* Demonstrates the rendered result of a Perseus article
*/
const React = _react;
const ArticleEditor = _articleEditorJsx;
const StatefulArticleEditor = _statefulArticleEditorJsx;
const Util = _utilJs;
const defaultArticle = [
{
content: "",
images: {},
widgets: {},
},
];
const ArticleDemo = createReactClass({
propTypes: {
content: PropTypes.any.isRequired,
},
getDefaultProps() {
return {
content: defaultArticle,
};
},
getInitialState: function() {
return {
isMobile: navigator.userAgent.indexOf("Mobile") !== -1,
};
},
componentDidMount: function() {
window.addEventListener("resize", this._handleResize);
},
componentWillUnmount: function() {
window.removeEventListener("resize", this._handleResize);
},
serialize: function() {
console.log(JSON.stringify(this.refs.editor.serialize(), null, 4)); // eslint-disable-line no-console
},
scorePreview: function() {
console.log(this.refs.editor.scorePreview()); // eslint-disable-line no-console
},
_getContentHash: function() {
return Util.strongEncodeURIComponent(
JSON.stringify(this.refs.editor.serialize())
);
},
permalink: function(e) {
window.location.hash = `content=${this._getContentHash()}`;
e.preventDefault();
},
_handleResize() {
const isMobile = navigator.userAgent.indexOf("Mobile") !== -1;
if (this.state.isMobile !== isMobile) {
this.setState({isMobile});
}
},
getEditorProps() {
const {isMobile} = this.state;
return {
json: this.props.content,
imageUploader: function(image, callback) {
setTimeout(callback, 1000, "http://fake.image.url");
},
apiOptions: {
customKeypad: isMobile,
onFocusChange: function(newPath, oldPath) {
console.log("onFocusChange", newPath, oldPath); // eslint-disable-line no-console
},
trackInteraction: function(trackData) {
console.log( // eslint-disable-line no-console
"Interaction with",
trackData.type,
trackData
);
},
isMobile,
},
useNewStyles: true,
componentClass: ArticleEditor,
/* eslint-disable max-len */
frameSource: `
`,
/* eslint-enable max-len */
};
},
render: function() {
return (
);
},
});
_module_.exports = ArticleDemo;
export default _module_.exports;