remove mutation observer (#723)

components/BackgroundSelect.js

@@ -18,7 +18,7 @@ class BackgroundSelect extends React.PureComponent {
   handlePickColor = ({ rgb }) => this.props.onChange({ backgroundColor: stringifyRGBA(rgb) })
 
   render() {
-    const { color, mode, image, onChange, aspectRatio, isVisible, toggleVisibility } = this.props
+    const { color, mode, image, onChange, isVisible, toggleVisibility, carbonRef } = this.props
 
     let background = typeof color === 'string' ? escape(color).replace(/\//g, '/') : color
 
@@ -26,6 +26,8 @@ class BackgroundSelect extends React.PureComponent {
       background = DEFAULT_BG_COLOR
     }
 
+    const aspectRatio = carbonRef ? carbonRef.clientWidth / carbonRef.clientHeight : 1
+
     return (
       <div className="bg-select-container">
         <div className={`bg-select-display ${isVisible ? 'is-visible' : ''}`}>

components/Carbon.js

@@ -30,23 +30,9 @@ function searchLanguage(l) {
 
 class Carbon extends React.PureComponent {
   static defaultProps = {
-    onAspectRatioChange: () => {},
     onChange: () => {}
   }
 
-  componentDidMount() {
-    const node = this.props.innerRef.current
-    this.mo = new MutationObserver(() => {
-      const ratio = node.clientWidth / node.clientHeight
-      this.props.onAspectRatioChange(ratio)
-    })
-    this.mo.observe(node, { attributes: true, childList: true, subtree: true })
-  }
-
-  componentWillUnmount() {
-    this.mo.disconnect()
-  }
-
   handleLanguageChange = debounce(
     (newCode, language) => {
       if (language === 'auto') {

components/Editor.js

@@ -101,8 +101,6 @@ class Editor extends React.Component {
 
   updateCode = code => this.updateState({ code })
 
-  updateAspectRatio = aspectRatio => this.updateState({ aspectRatio })
-
   async getCarbonImage(
     {
       format,
@@ -277,12 +275,11 @@ class Editor extends React.Component {
       backgroundColor,
       backgroundImage,
       backgroundMode,
-      aspectRatio,
       code,
       exportSize
     } = this.state
 
-    const config = omit(this.state, ['code', 'aspectRatio'])
+    const config = omit(this.state, ['code'])
 
     return (
       <div className="editor">
@@ -304,7 +301,7 @@ class Editor extends React.Component {
             mode={backgroundMode}
             color={backgroundColor}
             image={backgroundImage}
-            aspectRatio={aspectRatio}
+            carbonRef={this.carbonNode.current}
           />
           <Settings
             {...config}
@@ -337,7 +334,6 @@ class Editor extends React.Component {
                 ref={this.carbonNode}
                 config={this.state}
                 onChange={this.updateCode}
-                onAspectRatioChange={this.updateAspectRatio}
                 loading={this.state.loading}
               >
                 {code != null ? code : DEFAULT_CODE}