For example, if I've written something like this:
This is a dummy draftjs
editor impersonation, so this
line is longer in width than the
above one, and I'll keep doing it, until
I've made my point clearer than the madagascar waters.
^ ^
| |
I want to be able to find the exact text content length of the longest (_in the above case _the last line) text line's (a.k.a content block?) width.
How could I find it ?
Hi, gdad-s-river!
First off, huge kudos to you for starting something really awesome. I am really excited to see where you take it! :)
getBoundingClientRect()is a method which you can apply on a DOM element; to get a corresponding DOMRect object (representing that particular DOM element) with eight properties: left, top, right, bottom, x, y, width, height. You can read the documentation on MDN for more info.Coming to your question; assuming each line is a content block; you can use the
getBoundingClientRect()method on the DOM elements which respectively represent the content blocks in the DraftJS editor instance; information from the corresponding DOMRect objects can be compared to find the content block (DOM element) with the longest width.Once you zero in on the content block with the longest width, you can use DraftJS'
getText()method (draftjs.org/docs/api-reference-content-block.html) on that particular content block, and find the length of the string to calculate the desired result.Let me know if that helps! :)