@ -39,7 +39,6 @@ class Carbon extends React.PureComponent {
onGutterClick : noop
onGutterClick : noop
}
}
state = { }
state = { }
editorRef = React . createRef ( )
handleLanguageChange = debounce (
handleLanguageChange = debounce (
( newCode , language ) => {
( newCode , language ) => {
@ -101,7 +100,7 @@ class Carbon extends React.PureComponent {
onMouseUp = ( ) => {
onMouseUp = ( ) => {
if ( this . currentSelection ) {
if ( this . currentSelection ) {
const { editor } = this . . current
const { editor } = this . props. editorRef. current
const startPos = editor . charCoords ( this . currentSelection . from , 'window' )
const startPos = editor . charCoords ( this . currentSelection . from , 'window' )
const endPos = editor . charCoords ( this . currentSelection . to , 'window' )
const endPos = editor . charCoords ( this . currentSelection . to , 'window' )
@ -129,7 +128,7 @@ class Carbon extends React.PureComponent {
]
]
. filter ( Boolean )
. filter ( Boolean )
. join ( '; ' )
. join ( '; ' )
this . . current . editor . doc . markText (
this . props. editorRef. current . editor . doc . markText (
this . state . selectionAt . from ,
this . state . selectionAt . from ,
this . state . selectionAt . to ,
this . state . selectionAt . to ,
{ css }
{ css }
@ -181,7 +180,7 @@ class Carbon extends React.PureComponent {
/ >
/ >
) : null }
) : null }
< CodeMirror
< CodeMirror
ref = { this . }
ref = { this . props. editorRef}
className = { ` CodeMirror__container window-theme__ ${ config . windowTheme } ` }
className = { ` CodeMirror__container window-theme__ ${ config . windowTheme } ` }
value = { this . props . children }
value = { this . props . children }
options = { options }
options = { options }
@ -377,13 +376,21 @@ function useHighlightLoader() {
} , [ ] )
} , [ ] )
} }
function selectedLinesReducer ( { prevLine , selected } , { type , lineNumber , numLines } ) { function selectedLinesReducer (
{ prevLine , selected } ,
{ type , lineNumber , numLines , selectedLines }
) {
const newState = { }
const newState = { }
if ( type === 'GROUP' && prevLine ) {
if ( type === 'GROUP' && prevLine ) {
for ( let i = Math . min ( prevLine , lineNumber ) ; i < Math . max ( prevLine , lineNumber ) + 1 ; i ++ ) {
for ( let i = Math . min ( prevLine , lineNumber ) ; i < Math . max ( prevLine , lineNumber ) + 1 ; i ++ ) {
newState [ i ] = selected [ prevLine ]
newState [ i ] = selected [ prevLine ]
}
}
}
if ( type === 'MULTILINE' ) {
for ( let i = 0 ; i < selectedLines . length ; i ++ ) {
newState [ selectedLines [ i ] - 1 ] = true
}
} else {
} else {
for ( let i = 0 ; i < numLines ; i ++ ) {
for ( let i = 0 ; i < numLines ; i ++ ) {
if ( i != lineNumber ) {
if ( i != lineNumber ) {
@ -402,27 +409,31 @@ function selectedLinesReducer({ prevLine, selected }, { type, lineNumber, numLin
}
}
} }
function useGutterClickHandler ( props ) { function useSelectedLines ( props , editorRef ) {
const editorRef = React . useRef ( null )
const [ state , dispatch ] = React . useReducer ( selectedLinesReducer , {
const [ state , dispatch ] = React . useReducer ( selectedLinesReducer , {
prevLine : null ,
prevLine : null ,
selected : { }
selected : { }
} )
} )
React . useEffect ( ( ) => {
React . useEffect ( ( ) => {
if ( editorRef . current ) {
if ( editorRef . current && Object . keys ( state . selected ) . length > 0 ) {
editorRef . current . display . view . forEach ( ( line , i ) => {
editorRef . current . editor . display . view . forEach ( ( line , i ) => {
if ( line . text && line . gutter ) {
if ( line . text ) {
line . text . style . opacity = state . selected [ i ] === false ? 0.5 : 1
line . text . style . opacity = state . selected [ i ] === true ? 1 : 0.5
line . gutter . style . opacity = state . selected [ i ] === false ? 0.5 : 1
}
if ( line . gutter ) {
line . gutter . style . opacity = state . selected [ i ] === true ? 1 : 0.5
}
}
} )
} )
}
}
} , [ state . selected , props . children , props . config )
} , [ state . selected , props . children , props . config , editorRef ])
return React . useCallback ( function onGutterClick ( editor , lineNumber , gutter , e ) {
React . useEffect ( ( ) => {
editorRef . current = editor
let selectedLines = props . config . selectedLines || [ ]
dispatch ( { type : 'MULTILINE' , selectedLines } )
} , [ props . config . selectedLines ] )
return React . useCallback ( function onGutterClick ( editor , lineNumber , gutter , e ) {
const numLines = editor . display . view . length
const numLines = editor . display . view . length
if ( e . shiftKey ) {
if ( e . shiftKey ) {
dispatch ( { type : 'GROUP' , lineNumber , numLines } )
dispatch ( { type : 'GROUP' , lineNumber , numLines } )
@ -435,9 +446,10 @@ function useGutterClickHandler(props) {
function CarbonContainer ( props , ref ) { function CarbonContainer ( props , ref ) {
useModeLoader ( )
useModeLoader ( )
useHighlightLoader ( )
useHighlightLoader ( )
const onGutterClick = useGutterClickHandler ( props )
const editorRef = React . createRef ( )
const onGutterClick = useSelectedLines ( props , editorRef )
return < Carbon { ... props } innerRef = { ref } = { onGutterClick } / >
return < Carbon { ... props } innerRef = { ref } editorRef= { editorRef } onGutterClick= { onGutterClick } / >
} }
export default React . forwardRef ( CarbonContainer ) export default React . forwardRef ( CarbonContainer )
Viktor Nemes
5 years ago
committed by
Michael Fix