diff --git a/components/Carbon.js b/components/Carbon.js index b1af4f9..1a3309e 100644 --- a/components/Carbon.js +++ b/components/Carbon.js @@ -36,6 +36,7 @@ class Carbon extends React.PureComponent { onGutterClick: noop } state = {} + editorRef = React.createRef() handleLanguageChange = debounce( (newCode, language) => { @@ -93,16 +94,15 @@ class Carbon extends React.PureComponent { onMouseUp = () => { if (this.currentSelection) { - const { editor } = this.props.editorRef.current - const startPos = editor.charCoords(this.currentSelection.from, 'local') - const endPos = editor.charCoords(this.currentSelection.to, 'local') - const startWindowPos = editor.charCoords(this.currentSelection.from, 'window') - const endWindowPos = editor.charCoords(this.currentSelection.to, 'window') - const top = - Math.max(startWindowPos.bottom, endWindowPos.bottom) - - this.props.innerRef.current.getBoundingClientRect().top - - 3 - const left = (startPos.left + endPos.right) / 2 + const { editor } = this.editorRef.current + const startPos = editor.charCoords(this.currentSelection.from, 'window') + const endPos = editor.charCoords(this.currentSelection.to, 'window') + + const container = this.props.innerRef.current.getBoundingClientRect() + + const top = Math.max(startPos.bottom, endPos.bottom) - container.top - 3 + const left = (startPos.left + endPos.left) / 2 - container.left - 68 + this.setState({ selectionAt: { top, left } }) // this.currentSelection = null } else { @@ -121,7 +121,7 @@ class Carbon extends React.PureComponent { ] .filter(Boolean) .join('; ') - this.props.editorRef.current.editor.doc.markText( + this.editorRef.current.editor.doc.markText( this.currentSelection.from, this.currentSelection.to, { css } @@ -172,6 +172,7 @@ class Carbon extends React.PureComponent { /> ) : null}