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}
{config.watermark && }
@@ -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
+ 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
}
export default React.forwardRef(CarbonContainer)