Canvas.jsx

import React, { Component } from 'react'
import { withStyles } from 'material-ui/styles';
import Button from 'material-ui/Button';
import AddIcon from 'material-ui-icons/Add';
import Dialog from 'material-ui/Dialog';
import AppBar from 'material-ui/AppBar';
import Toolbar from 'material-ui/Toolbar';
import IconButton from 'material-ui/IconButton';
import Typography from 'material-ui/Typography';
import CloseIcon from 'material-ui-icons/Close';
import classNames from 'classnames';

const styles = {
    appBar: {
        position: 'relative',
    },
    flex: {
        flex: 1,
    },
};

@withStyles(styles)
export default class Canvas extends Component {
    state = {
        content: ''
    };

    componentDidMount() {
        setTimeout(() => {
            this.myScript = MyScript.register(this.editor, {
                recognitionParams: {
                    type: 'MATH',
                    server: {
                        applicationKey: '3759944e-1a5f-4d38-9663-ff471f292804',
                        hmacKey: 'a299da94-244a-4571-95b7-fea8174e1bce'
                    },
                    ondemand: true
                }
            });

            this.editor.addEventListener('exported', (event) => {
                this.setState({
                    content: event.detail.exports['application/x-latex']
                });
            });

            this.resize = () => {
                this.myScript.resize();

                this.setState({
                    canvasHeight: document.body.clientHeight - 200
                })
            };

            this.resize();

            window.addEventListener('resize', this.resize);
        });
    };

    componentDidUpdate(prevProps, prevState) {
        this.props.mq.StaticMath(this.formula);

        if (this.state.canvasWidth != prevState.canvasWidth) {
            this.myScript.resize();
        }
    }

    componentWillUnmount() {
        window.removeEventListener('resize', this.resize);
    }

    addSpace = () => {
        this.setState({
            canvasWidth: this.editor.clientWidth + 300
        });
    };

    handleClose = () => {
        this.props.onClose();
    };

    save = () => {
        this.props.input.write(this.state.content);   
        this.props.onClose();
    }

    render() {
        const { classes } = this.props;

        return (
            <Dialog
                fullScreen
                open={true}
                onClose={this.handleClose}
            >
                <AppBar className={classes.appBar}>
                    <Toolbar>
                        <IconButton color="inherit" onClick={this.handleClose} aria-label="Close">
                            <CloseIcon />
                        </IconButton>
                        <Typography variant="title" color="inherit" className={classes.flex}>
                            Canvas
                        </Typography>
                        <Button color="inherit" onClick={this.save}>
                            save
                        </Button>
                    </Toolbar>
                </AppBar>
                <div className='canvas'>
                    <Button
                        variant="fab"
                        color="primary"
                        className='save-btn'
                        aria-label="save"
                        onClick={this.addSpace}
                    >
                        <AddIcon />
                    </Button>
                    <div className='formula' ref={(e) => { this.formula = e }}>{this.state.content}</div>
                    <div className='canvas-content grey-scrollbar'>
                        <div style={{ height: '500px', width: this.state.canvasWidth, padding: 5 }}>
                            {/* draw-area has `touch-action: none` css property */}
                            <div className='draw-area' ref={(e) => { this.editor = e }}></div>
                        </div>
                    </div>
                </div>
            </Dialog>
        )
    }
}