expose start/end positions of a decorated component within a contentBlock

Summary: In some cases, it's valuable to expose the current position of a decorated component within its content block for styling purposes. (Example: Apply certain styling to a decorated component if a certain entitiy is directly next to that component).

Reviewed By: flarnie

Differential Revision: D6712533

fbshipit-source-id: ea25ae65fafba5283a344a091ac2346fcd4e9bb3

Author: Matthew Mans

src/component/contents/DraftEditorBlock.react.js

@@ -186,10 +186,9 @@ class DraftEditorBlock extends React.Component<Props> {
 
         const decoratorProps = decorator.getPropsForKey(decoratorKey);
         const decoratorOffsetKey = DraftOffsetKey.encode(blockKey, ii, 0);
-        const decoratedText = text.slice(
-          leavesForLeafSet.first().get('start'),
-          leavesForLeafSet.last().get('end'),
-        );
+        const start = leavesForLeafSet.first().get('start');
+        const end = leavesForLeafSet.last().get('end');
+        const decoratedText = text.slice(start, end);
 
         // Resetting dir to the same value on a child node makes Chrome/Firefox
         // confused on cursor movement. See http://jsfiddle.net/d157kLck/3/
@@ -205,6 +204,9 @@ class DraftEditorBlock extends React.Component<Props> {
             decoratedText={decoratedText}
             dir={dir}
             key={decoratorOffsetKey}
+            start={start}
+            end={end}
+            blockKey={blockKey}
             entityKey={block.getEntityAt(leafSet.get('start'))}
             offsetKey={decoratorOffsetKey}>
             {leaves}