deshiknaves / caret-pos Goto Github PK
View Code? Open in Web Editor NEWLocate the current position of the caret. A plain JavaScript version of Caret.js.
License: MIT License
Locate the current position of the caret. A plain JavaScript version of Caret.js.
License: MIT License
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.
Lines 8 to 11 in 94657c8
jest
testing), the only way to access this attribute is via element.getAttribute("contenteditable")
. This is also supported by any other browsers and DOM environments, and should be changed to support more projects ๐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.
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:
Lines 82 to 95 in 2e73b47
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.