improve highlight positioning

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 { editor } = this.editorRef.current
-      const startPos = editor.charCoords(this.currentSelection.from, 'local')
+      const startPos = editor.charCoords(this.currentSelection.from, 'window')
-      const endPos = editor.charCoords(this.currentSelection.to, 'local')
+      const endPos = editor.charCoords(this.currentSelection.to, 'window')
-      const startWindowPos = editor.charCoords(this.currentSelection.from, 'window')
+
-      const endWindowPos = editor.charCoords(this.currentSelection.to, 'window')
+      const container = this.props.innerRef.current.getBoundingClientRect()
-      const top =
+
-        Math.max(startWindowPos.bottom, endWindowPos.bottom) -
+      const top = Math.max(startPos.bottom, endPos.bottom) - container.top - 3
-        this.props.innerRef.current.getBoundingClientRect().top -
+      const left = (startPos.left + endPos.left) / 2 - container.left - 68
-        3
+
-      const left = (startPos.left + endPos.right) / 2
       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}
         <CodeMirror
+          ref={this.editorRef}
           className={`CodeMirror__container window-theme__${config.windowTheme}`}
           value={this.props.children}
           options={options}