Discussion on: How do you detect what line it is in wrapped text elements?

[Erik]

hi Arnav, did you ever get this figured out?

[Arnav Bansal]

Hey Erik! I did figure out a solution, for variable sized divs

getLinePosition = () => {
    let r = getSelection().getRangeAt(0);
    let s = document.createElement('span');
    r.insertNode(s);
    let top = ((s.offsetTop - s.parentNode.offsetTop) === 0);
    let bottom = ((s.offsetTop - s.parentElement.offsetTop + s.offsetHeight) >= s.parentElement.offsetHeight);
    s.parentNode.removeChild(s);
    return {top, bottom};
  }

This returns an object {top: Boolean, bottom: Boolean} which works just enough for my purpose.

It can be modified to return the exact line number too if needed. s.offsetTop-s.parentNode.offsetTop returns a number that's fontHeight*lineNumber, which when divided by font height returns the line number.

I'm sure there's a less messy way of doing this that doesn't require adding a span.

Apologies for not replying sooner!

[Erik]

looks great! is this running live anywhere?

[Arnav Bansal]

Just deployed it. You can try the functionality here: laughing-gates-6a6364.netlify.com

If you press the up/down arrows, you move between the paragraphs (two separate contenteditable divs) only on the first and last lines.

(It's not a completely usable editor yet; still needs much fixing)

[Erik]

very nice. Is this mostly just an exercise or do you have plans for this kind of feature?

[Arnav Bansal]

I'm developing a platform where I need an editor with some custom features. I felt the need to understand all the moving parts of an editor.

My platform: deeplink.space