[bug] Incorrect behavior of getRangeClientRects in webkit browsers

[qrohlf]

video demo: https://www.youtube.com/watch?v=TpNzVH5jlcU
live demo: http://codepen.io/qrohlf/pen/YWjzOq?editors=1010#0

getVisibleSelectionRect does not fully work around webkit's bad behavior regarding selection range bounding boxes. Selecting the first word on a wrapped line results in an incorrect bounding box. Bug exists in Chrome 51.0.2704.106 and Safari 9.1.1 (11601.6.17).

You can see the bad behavior this causes in the inline toolbar in Facebook Notes:

normal behavior

oh look, it's the webkit contenteditable selection range bounding box bug (WCESRBBB)

Hopefully once I finish the other functionality in the project I'm using draft for, I can circle back around and fix this bug, but if someone else wants to fix it for me I won't argue :).

[ouchxp]

@qrohlf We have this problem as well. Here is my monkey patch.

import { getVisibleSelectionRect as draftVSR } from 'draft-js';
function getVisibleSelectionRect(window) {
  let selection = draftVSR(window);

  // When selection the first word of the wrapped line, chrome will return two rects
  // And the first rect has 0 width
  if (selection) {
    const selectionRects = window.getSelection().getRangeAt(0).getClientRects();
    if (selectionRects.length === 2 && selectionRects[0].width === 0) {
      selection = selectionRects[1];
    }
  }
  return selection;
}