confirm width state on mouse up

components/Carbon.js

@@ -225,9 +225,11 @@ class Carbon extends React.PureComponent {
                 <div className="bg" />
               </div>
 
+              {/* TODO define innerRef in Editor, and pass in this child as a prop to Carbon */}
               <WidthHandler
                 innerRef={this.props.innerRef}
                 onChange={this.props.updateWidth}
+                onConfirm={this.props.confirmWidth}
                 paddingHorizontal={config.paddingHorizontal}
               />
             </div>

components/Editor.js

@@ -93,6 +93,7 @@ class Editor extends React.Component {
   updateCode = code => this.updateState({ code })
   updateTitleBar = titleBar => this.updateState({ titleBar })
   updateWidth = width => this.setState({ widthAdjustment: false, width })
+  confirmWidth = () => this.onUpdate(this.state)
 
   getCarbonImage = async (
     {
@@ -399,6 +400,7 @@ class Editor extends React.Component {
                 config={this.state}
                 onChange={this.updateCode}
                 updateWidth={this.updateWidth}
+                confirmWidth={this.confirmWidth}
                 loading={this.state.loading}
                 theme={theme}
                 titleBar={titleBar}

components/WidthHandler.js

@@ -13,9 +13,7 @@ function clamp(value, min, max) {
   return value
 }
 
-export default function WidthHandler(props) {
-  const { onChange, innerRef, paddingHorizontal } = props
-
+export default function WidthHandler({ onChange, onConfirm, innerRef, paddingHorizontal }) {
   const startX = React.useRef(null)
   const startWidth = React.useRef(null)
 
@@ -34,6 +32,15 @@ export default function WidthHandler(props) {
     return () => window.removeEventListener('mousemove', handleMouseMove)
   }, [innerRef, onChange])
 
+  React.useEffect(() => {
+    function handleMouseUp() {
+      startX.current = null
+      onConfirm()
+    }
+    window.addEventListener('mouseup', handleMouseUp)
+    return () => window.removeEventListener('mouseup', handleMouseUp)
+  }, [onConfirm])
+
   return (
     // eslint-disable-next-line
     <div
@@ -42,9 +49,6 @@ export default function WidthHandler(props) {
         startX.current = e.pageX
         startWidth.current = innerRef.current.clientWidth
       }}
-      onMouseUp={() => {
-        startX.current = null
-      }}
       role="separator"
       aria-orientation="vertical"
       aria-valuemin={minWidth}