From bd8cb2a66eca6c09ca687e79aa66af4ed76285fa Mon Sep 17 00:00:00 2001
From: Mike Fix <mrfix84@gmail.com>
Date: Sun, 12 Jun 2022 20:12:06 -0700
Subject: [PATCH] confirm width state on mouse up

---
 components/Carbon.js       |  2 ++
 components/Editor.js       |  2 ++
 components/WidthHandler.js | 16 ++++++++++------
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/components/Carbon.js b/components/Carbon.js
index 3266cf5..6164b36 100644
--- a/components/Carbon.js
+++ b/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>
diff --git a/components/Editor.js b/components/Editor.js
index 1234ced..a7e0734 100644
--- a/components/Editor.js
+++ b/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}
diff --git a/components/WidthHandler.js b/components/WidthHandler.js
index 29f9c6f..138f981 100644
--- a/components/WidthHandler.js
+++ b/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}