refactor widthhandler a bit

components/Editor.js

@@ -89,12 +89,13 @@ class Editor extends React.Component {
     leading: true,
   })
 
-  updateState = updates => this.setState(updates, () => this.onUpdate(this.state))
+  sync = () => this.onUpdate(this.state)
+
+  updateState = updates => this.setState(updates, this.sync)
 
   updateCode = code => this.updateState({ code })
   updateTitleBar = titleBar => this.updateState({ titleBar })
   updateWidth = width => this.setState({ widthAdjustment: false, width })
-  confirmWidth = () => this.onUpdate(this.state)
 
   getCarbonImage = async (
     {
@@ -408,7 +409,7 @@ class Editor extends React.Component {
                   <WidthHandler
                     innerRef={this.carbonNode}
                     onChange={this.updateWidth}
-                    onConfirm={this.confirmWidth}
+                    onChangeComplete={this.sync}
                     paddingHorizontal={config.paddingHorizontal}
                   />
                 }

components/WidthHandler.js

@@ -13,7 +13,7 @@ function clamp(value, min, max) {
   return value
 }
 
-export default function WidthHandler({ onChange, onConfirm, innerRef, paddingHorizontal }) {
+export default function WidthHandler({ onChange, onChangeComplete, innerRef, paddingHorizontal }) {
   const startX = React.useRef(null)
   const startWidth = React.useRef(null)
 
@@ -35,11 +35,11 @@ export default function WidthHandler({ onChange, onConfirm, innerRef, paddingHor
   React.useEffect(() => {
     function handleMouseUp() {
       startX.current = null
-      onConfirm()
+      onChangeComplete()
     }
     window.addEventListener('mouseup', handleMouseUp)
     return () => window.removeEventListener('mouseup', handleMouseUp)
-  }, [onConfirm])
+  }, [onChangeComplete])
 
   return (
     // eslint-disable-next-line