deshiknaves / caret-pos Goto Github PK

Congrats its was very useful for me, following is my (incomplete) types for anyone have interest
index.d.ts

type Offset = {
    left: number;
    height: number; 
    top: number;
}

type Pos= {
pos: number;
} & Offset

export function position(element: HTMLElement,pos?:number): Pos;
export function offset(element: HTMLElement): Offset;

(im not create a PR cause types it's incomplete and i don't want anyone blame me for trashing his/her code)

I got the above image by debugging right after element.parentNode.insertBefore(mirror, element.nextSibling); in initializeHTML, and I add color: red; to the mirror element. I also remove the low z-index to show it.

Then we see that after the | element, text mirror has an offset. This is not a real issue here, but if the input is narrower, then the mirror is wrapping, and not the original input.
Setting a max-width for this element seems to work, but I don't want to interfere with existing behavior.

Similar to ichord/Caret.js#6

In here you're accessing the attribute contentEditable directly via the element.

Thanks for this project, extremely handy.

I noticed this module provides a UMD module, I grabbed it via the jsdelivr CDN. However the named export is caret-pos and javascript functions can't have hyphens in them, I don't use rollup but I believe the fix would be changing it in rollup.config.js

When using the caret-pos library to get the caret position with noShadowCaret set to true there is an issue with contenteditable elements.

When the caret is set to a blank line (i.e. no content) inside the contenteditable element the offset for the caret inside the element is not calculated which leads to a top value of NaN.

For now we have patched the getOffset method locally by doing two updates. We have updated the following check from:
if (range.endOffset - 1 > 0 && range.endContainer !== element || hasCustomPos) {
to:
if (range.endContainer !== element || hasCustomPos) {

We have also set fixedPosition to 1 in this scenario (i.e. startOffset=0, endOffset=1). The reason is that there seems to be an additional issue within chrome (haven't tested other browsers) that leads to an incorrect bounding client rect calculation when startOffset and endOffset is set to 0 for the cloned RangeObject on a blank line.

This issue could be solved by passing the customPos option, but we don't want to pass the custom position in other scenarios other than when the caret is on a blank line.

For more information, see this fiddle: https://jsfiddle.net/khvcsw50/1
Use the arrow keys together with the console.log to see the different outputs from the position method on different lines.

I'm getting undefined:

The position is wrong, or understated, when the textarea the font size is scaled. I could just do a workaround myself if only I could find a way to know the if the font is scaled in the textarea.

Thanks for fixing #14.

Here's a minimal demo to show a bug I'm experiencing: https://jsfiddle.net/8b3e4hmw/3/ In it I create a fake caret (in red) and position it where caret-pos says the caret is, if both positions are the same the caret should cover the eixsting caret. In certain locations but not all the fake caret is in completely the wrong location.

I've tested in chrome and firefox, both display the bug but on different lines.

Sorry I haven't had a chance to debug myself.

Hi @deshiknaves - first, thanks for this lib! It really came through for me.

I'm wondering if you'd be open to add an option to not mutate the DOM with a shadow caret when getting an element's offset. Essentially, an option that would not do this:

The motivation for me is when using this lib in sites (that I do not own, I'll be using it in a browser extension) which listen for DOM mutations (eg. when editing Facebook statuses). With these lines in place, chaos ensues when just getting the offset (elements lose focus, the caret changes position unexpectedly, etc.)

So I was thinking something along the lines of: offset(el, {noShadowCaret: true})

I'd be happy to whip up a PR implementing this. Wdyt?