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)