clean up <Carbon/> - remove resize-observer

components/Carbon.js

@@ -1,7 +1,6 @@
 import React from 'react'
 import dynamic from 'next/dynamic'
 import * as hljs from 'highlight.js'
-import ResizeObserver from 'resize-observer-polyfill'
 import debounce from 'lodash.debounce'
 import ms from 'ms'
 import { Controlled as CodeMirror } from 'react-codemirror2'
@@ -22,16 +21,21 @@ const Watermark = dynamic(() => import('../components/svg/Watermark'), {
 class Carbon extends React.PureComponent {
   static defaultProps = {
     onAspectRatioChange: () => {},
-    updateCode: () => {},
+    onChange: () => {},
     innerRef: () => {}
   }
 
   componentDidMount() {
-    const ro = new ResizeObserver(entries => {
-      const cr = entries[0].contentRect
-      this.props.onAspectRatioChange(cr.width / cr.height)
+    const node = this.exportContainerNode
+    this.mo = new MutationObserver(() => {
+      const ratio = node.clientWidth / node.clientHeight
+      this.props.onAspectRatioChange(ratio)
     })
-    ro.observe(this.exportContainerNode)
+    this.mo.observe(node, { attributes: true, childList: true, subtree: true })
+  }
+
+  componentWillUnmount() {
+    this.mo.disconnect()
   }
 
   handleLanguageChange = debounce(
@@ -58,7 +62,7 @@ class Carbon extends React.PureComponent {
 
   onBeforeChange = (editor, meta, code) => {
     if (!this.props.readOnly) {
-      this.props.updateCode(code)
+      this.props.onChange(code)
     }
   }
 

components/Editor.js

@@ -384,7 +384,7 @@ class Editor extends React.Component {
                 <Carbon
                   key={language}
                   config={this.state}
-                  updateCode={this.updateCode}
+                  onChange={this.updateCode}
                   onAspectRatioChange={this.updateAspectRatio}
                   titleBar={titleBar}
                   updateTitleBar={this.updateTitleBar}

package.json

@@ -47,7 +47,6 @@
     "react-image-crop": "6.0.0",
     "react-spinner": "^0.2.7",
     "react-syntax-highlight": "^15.3.1",
-    "resize-observer-polyfill": "^1.5.1",
     "tohash": "^1.0.2",
     "url": "^0.11.0"
   },

pages/embed.js

@@ -105,7 +105,7 @@ class Embed extends React.Component {
             config={this.state}
             readOnly={this.state.readOnly}
             copyable={this.state.copyable}
-            updateCode={this.updateCode}
+            onChange={this.updateCode}
           >
             {this.state.code}
           </Carbon>

yarn.lock

@@ -6112,11 +6112,6 @@ require-main-filename@^1.0.1:
   resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-1.0.1.tgz#97f717b69d48784f5f526a6c5aa8ffdda055a4d1"
   integrity sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE=
 
-resize-observer-polyfill@^1.5.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
-  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
-
 resolve-from@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748"