From 7510dcb5ea061258f1a058262e7be382fad16744 Mon Sep 17 00:00:00 2001
From: Mike Fix <mrfix84@gmail.com>
Date: Sat, 10 Aug 2019 10:48:04 -0700
Subject: [PATCH] refactor onGutterClick to remove editorRef

---
 components/Carbon.js | 38 +++++++++++++++++++++-----------------
 1 file changed, 21 insertions(+), 17 deletions(-)

diff --git a/components/Carbon.js b/components/Carbon.js
index a06b3a4..bc5a049 100644
--- a/components/Carbon.js
+++ b/components/Carbon.js
@@ -109,11 +109,10 @@ class Carbon extends React.PureComponent {
           />
         ) : null}
         <CodeMirror
-          ref={this.props.editorRef}
           className={`CodeMirror__container window-theme__${config.windowTheme}`}
-          onBeforeChange={this.onBeforeChange}
           value={this.props.children}
           options={options}
+          onBeforeChange={this.onBeforeChange}
           onGutterClick={this.props.onGutterClick}
         />
         {config.watermark && <Watermark light={light} />}
@@ -305,27 +304,16 @@ function selectedLinesReducer({ prevLine, selected }, { type, lineNumber, numLin
   }
 }
 
-function CarbonContainer(props, ref) {
-  useModeLoader()
-
+function useGutterClickHandler(props) {
+  const editorRef = React.useRef(null)
   const [state, dispatch] = React.useReducer(selectedLinesReducer, {
     prevLine: null,
     selected: {}
   })
 
-  function onGutterClick(editor, lineNumber, gutter, e) {
-    const numLines = editor.display.view.length
-    if (e.shiftKey) {
-      dispatch({ type: 'GROUP', lineNumber, numLines })
-    } else {
-      dispatch({ type: 'LINE', lineNumber, numLines })
-    }
-  }
-
-  const editorRef = React.useRef(null)
   React.useEffect(() => {
     if (editorRef.current) {
-      editorRef.current.editor.display.view.forEach((line, i) => {
+      editorRef.current.display.view.forEach((line, i) => {
         if (line.text && line.gutter) {
           line.text.style.opacity = state.selected[i] === false ? 0.5 : 1
           line.gutter.style.opacity = state.selected[i] === false ? 0.5 : 1
@@ -334,7 +322,23 @@ function CarbonContainer(props, ref) {
     }
   }, [state.selected, props.children, props.config])
 
-  return <Carbon {...props} innerRef={ref} editorRef={editorRef} onGutterClick={onGutterClick} />
+  return function onGutterClick(editor, lineNumber, gutter, e) {
+    editorRef.current = editor
+
+    const numLines = editor.display.view.length
+    if (e.shiftKey) {
+      dispatch({ type: 'GROUP', lineNumber, numLines })
+    } else {
+      dispatch({ type: 'LINE', lineNumber, numLines })
+    }
+  }
+}
+
+function CarbonContainer(props, ref) {
+  useModeLoader()
+  const onGutterClick = useGutterClickHandler(props)
+
+  return <Carbon {...props} innerRef={ref} onGutterClick={onGutterClick} />
 }
 
 export default React.forwardRef(CarbonContainer)