<blockquote>
Is there a way to grab the bounding rect of a sentence in draft? Or do I need to setup some kind of decorator/custom block function to get that information?
</blockquote>
This question has originally been asked on the official DraftJS slack group.
<hr />
The blocks in DraftJS are converted to content editable <code>div</code>s. You might need the bounding client of a block for a variety of reasons — one instance: getting the positional information to place a widget along side the block appropriately.
The top level node of all content blocks in a DraftJS editor instance are <code>div</code>s with <code>data-offset-key</code> attributes, with values of the form <code>ijkl-0-0</code> where <code>ijkl</code> is equal to the <code>key</code> prop of the content block.
Using the above information, and the following snippet of code, one can easily get the bounding rect information of a content block:
<pre><code>document.querySelector(
 `div[data-offset-key="${blockKey}-0-0"]`
).getBoundingClientRect();
</code></pre><code>blockKey</code> is the key of the corresponding content block.

> Is there a way to grab the bounding rect of a sentence in draft? Or do I need to setup some kind of decorator/custom block function to get that information?

_This question has originally been asked on the official DraftJS slack group._

---

The blocks in DraftJS are converted to content editable `div`s. You might need the bounding client of a block for a variety of reasons — one instance: getting the positional information to place a widget along side the block appropriately.

The top level node of all content blocks in a DraftJS editor instance are `div`s with `data-offset-key` attributes, with values of the form `ijkl-0-0` where `ijkl` is equal to the `key` prop of the content block.

Using the above information, and the following snippet of code, one can easily get the bounding rect information of a content block:

```
document.querySelector(
    `div[data-offset-key="${blockKey}-0-0"]`
).getBoundingClientRect();
```

`blockKey` is the key of the corresponding content block.


DraftJS Tip — Getting the bounding rect of a content block in DraftJS