Benedikt Stebner
3 years ago
8 changed files with 188 additions and 173 deletions
@ -1,146 +0,0 @@ |
|||||
(function () { |
|
||||
|
|
||||
// We'll copy the properties below into the mirror div.
|
|
||||
// Note that some browsers, such as Firefox, do not concatenate properties
|
|
||||
// into their shorthand (e.g. padding-top, padding-bottom etc. -> padding),
|
|
||||
// so we have to list every single property explicitly.
|
|
||||
var properties = [ |
|
||||
'direction', // RTL support
|
|
||||
'boxSizing', |
|
||||
'width', // on Chrome and IE, exclude the scrollbar, so the mirror div wraps exactly as the textarea does
|
|
||||
'height', |
|
||||
'overflowX', |
|
||||
'overflowY', // copy the scrollbar for IE
|
|
||||
|
|
||||
'borderTopWidth', |
|
||||
'borderRightWidth', |
|
||||
'borderBottomWidth', |
|
||||
'borderLeftWidth', |
|
||||
'borderStyle', |
|
||||
|
|
||||
'paddingTop', |
|
||||
'paddingRight', |
|
||||
'paddingBottom', |
|
||||
'paddingLeft', |
|
||||
|
|
||||
// https://developer.mozilla.org/en-US/docs/Web/CSS/font
|
|
||||
'fontStyle', |
|
||||
'fontVariant', |
|
||||
'fontWeight', |
|
||||
'fontStretch', |
|
||||
'fontSize', |
|
||||
'fontSizeAdjust', |
|
||||
'lineHeight', |
|
||||
'fontFamily', |
|
||||
|
|
||||
'textAlign', |
|
||||
'textTransform', |
|
||||
'textIndent', |
|
||||
'textDecoration', // might not make a difference, but better be safe
|
|
||||
|
|
||||
'letterSpacing', |
|
||||
'wordSpacing', |
|
||||
|
|
||||
'tabSize', |
|
||||
'MozTabSize' |
|
||||
|
|
||||
]; |
|
||||
|
|
||||
var isBrowser = (typeof window !== 'undefined'); |
|
||||
var isFirefox = (isBrowser && window.mozInnerScreenX != null); |
|
||||
|
|
||||
|
|
||||
function getCaretCoordinates(element, position, options) { |
|
||||
if (!isBrowser) { |
|
||||
throw new Error('textarea-caret-position#getCaretCoordinates should only be called in a browser'); |
|
||||
} |
|
||||
|
|
||||
var debug = options && options.debug || false; |
|
||||
if (debug) { |
|
||||
var el = document.querySelector('#input-textarea-caret-position-mirror-div'); |
|
||||
if (el) el.parentNode.removeChild(el); |
|
||||
} |
|
||||
|
|
||||
// The mirror div will replicate the textarea's style
|
|
||||
var div = document.createElement('div'); |
|
||||
div.id = 'input-textarea-caret-position-mirror-div'; |
|
||||
document.body.appendChild(div); |
|
||||
|
|
||||
var style = div.style; |
|
||||
var computed = window.getComputedStyle ? window.getComputedStyle(element) : element.currentStyle; // currentStyle for IE < 9
|
|
||||
var isInput = element.nodeName === 'INPUT'; |
|
||||
|
|
||||
// Default textarea styles
|
|
||||
style.whiteSpace = 'pre-wrap'; |
|
||||
if (!isInput) |
|
||||
style.wordWrap = 'break-word'; // only for textarea-s
|
|
||||
|
|
||||
// Position off-screen
|
|
||||
style.position = 'absolute'; // required to return coordinates properly
|
|
||||
if (!debug) |
|
||||
style.visibility = 'hidden'; // not 'display: none' because we want rendering
|
|
||||
|
|
||||
// Transfer the element's properties to the div
|
|
||||
properties.forEach(function (prop) { |
|
||||
if (isInput && prop === 'lineHeight') { |
|
||||
// Special case for <input>s because text is rendered centered and line height may be != height
|
|
||||
if (computed.boxSizing === "border-box") { |
|
||||
var height = parseInt(computed.height); |
|
||||
var outerHeight = |
|
||||
parseInt(computed.paddingTop) + |
|
||||
parseInt(computed.paddingBottom) + |
|
||||
parseInt(computed.borderTopWidth) + |
|
||||
parseInt(computed.borderBottomWidth); |
|
||||
var targetHeight = outerHeight + parseInt(computed.lineHeight); |
|
||||
if (height > targetHeight) { |
|
||||
style.lineHeight = height - outerHeight + "px"; |
|
||||
} else if (height === targetHeight) { |
|
||||
style.lineHeight = computed.lineHeight; |
|
||||
} else { |
|
||||
style.lineHeight = 0; |
|
||||
} |
|
||||
} else { |
|
||||
style.lineHeight = computed.height; |
|
||||
} |
|
||||
} else { |
|
||||
style[prop] = computed[prop]; |
|
||||
} |
|
||||
}); |
|
||||
|
|
||||
if (isFirefox) { |
|
||||
// Firefox lies about the overflow property for textareas: https://bugzilla.mozilla.org/show_bug.cgi?id=984275
|
|
||||
if (element.scrollHeight > parseInt(computed.height)) |
|
||||
style.overflowY = 'scroll'; |
|
||||
} else { |
|
||||
style.overflow = 'hidden'; // for Chrome to not render a scrollbar; IE keeps overflowY = 'scroll'
|
|
||||
} |
|
||||
|
|
||||
div.textContent = element.value.substring(0, position); |
|
||||
// The second special handling for input type="text" vs textarea:
|
|
||||
// spaces need to be replaced with non-breaking spaces - http://stackoverflow.com/a/13402035/1269037
|
|
||||
if (isInput) |
|
||||
div.textContent = div.textContent.replace(/\s/g, '\u00a0'); |
|
||||
|
|
||||
var span = document.createElement('span'); |
|
||||
// Wrapping must be replicated *exactly*, including when a long word gets
|
|
||||
// onto the next line, with whitespace at the end of the line before (#7).
|
|
||||
// The *only* reliable way to do that is to copy the *entire* rest of the
|
|
||||
// textarea's content into the <span> created at the caret position.
|
|
||||
// For inputs, just '.' would be enough, but no need to bother.
|
|
||||
span.textContent = element.value.substring(position) || '.'; // || because a completely empty faux span doesn't render at all
|
|
||||
div.appendChild(span); |
|
||||
|
|
||||
var coordinates = { |
|
||||
top: span.offsetTop + parseInt(computed['borderTopWidth']), |
|
||||
left: span.offsetLeft + parseInt(computed['borderLeftWidth']), |
|
||||
height: parseInt(computed['lineHeight']) |
|
||||
}; |
|
||||
|
|
||||
if (debug) { |
|
||||
span.style.backgroundColor = '#aaa'; |
|
||||
} else { |
|
||||
document.body.removeChild(div); |
|
||||
} |
|
||||
|
|
||||
return coordinates; |
|
||||
} |
|
||||
@ -0,0 +1,149 @@ |
|||||
|
// Based on https://github.com/component/textarea-caret-position/blob/master/index.js
|
||||
|
export class CaretHelper { |
||||
|
public static getCaretCoordinates( |
||||
|
element: HTMLInputElement | HTMLTextAreaElement, |
||||
|
position: number, |
||||
|
options?: { debug: boolean } |
||||
|
) { |
||||
|
if (!isBrowser) { |
||||
|
throw new Error( |
||||
|
"textarea-caret-position#getCaretCoordinates should only be called in a browser" |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
const debug = (options && options.debug) || false; |
||||
|
if (debug) { |
||||
|
const el = document.querySelector( |
||||
|
"#input-textarea-caret-position-mirror-div" |
||||
|
); |
||||
|
if (el) el.parentNode?.removeChild(el); |
||||
|
} |
||||
|
|
||||
|
// The mirror div will replicate the textarea's style
|
||||
|
const div = document.createElement("div"); |
||||
|
div.id = "input-textarea-caret-position-mirror-div"; |
||||
|
document.body.appendChild(div); |
||||
|
|
||||
|
const style = div.style; |
||||
|
const computed = window.getComputedStyle |
||||
|
? window.getComputedStyle(element) |
||||
|
: ((element as any)["currentStyle"] as CSSStyleDeclaration); // currentStyle for IE < 9
|
||||
|
const isInput = element.nodeName === "INPUT"; |
||||
|
|
||||
|
// Default textarea styles
|
||||
|
style.whiteSpace = "pre-wrap"; |
||||
|
if (!isInput) style.wordWrap = "break-word"; // only for textarea-s
|
||||
|
|
||||
|
// Position off-screen
|
||||
|
style.position = "absolute"; // required to return coordinates properly
|
||||
|
if (!debug) style.visibility = "hidden"; // not 'display: none' because we want rendering
|
||||
|
|
||||
|
// Transfer the element's properties to the div
|
||||
|
properties.forEach((prop: string) => { |
||||
|
if (isInput && prop === "lineHeight") { |
||||
|
// Special case for <input>s because text is rendered centered and line height may be != height
|
||||
|
if (computed.boxSizing === "border-box") { |
||||
|
const height = parseInt(computed.height); |
||||
|
const outerHeight = |
||||
|
parseInt(computed.paddingTop) + |
||||
|
parseInt(computed.paddingBottom) + |
||||
|
parseInt(computed.borderTopWidth) + |
||||
|
parseInt(computed.borderBottomWidth); |
||||
|
const targetHeight = outerHeight + parseInt(computed.lineHeight); |
||||
|
if (height > targetHeight) { |
||||
|
style.lineHeight = height - outerHeight + "px"; |
||||
|
} else if (height === targetHeight) { |
||||
|
style.lineHeight = computed.lineHeight; |
||||
|
} else { |
||||
|
style.lineHeight = "0"; |
||||
|
} |
||||
|
} else { |
||||
|
style.lineHeight = computed.height; |
||||
|
} |
||||
|
} else { |
||||
|
(style as any)[prop] = (computed as any)[prop]; |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
if (isFirefox) { |
||||
|
// Firefox lies about the overflow property for textareas: https://bugzilla.mozilla.org/show_bug.cgi?id=984275
|
||||
|
if (element.scrollHeight > parseInt(computed.height)) |
||||
|
style.overflowY = "scroll"; |
||||
|
} else { |
||||
|
style.overflow = "hidden"; // for Chrome to not render a scrollbar; IE keeps overflowY = 'scroll'
|
||||
|
} |
||||
|
|
||||
|
div.textContent = element.value.substring(0, position); |
||||
|
// The second special handling for input type="text" vs textarea:
|
||||
|
// spaces need to be replaced with non-breaking spaces - http://stackoverflow.com/a/13402035/1269037
|
||||
|
if (isInput) div.textContent = div.textContent.replace(/\s/g, "\u00a0"); |
||||
|
|
||||
|
const span = document.createElement("span"); |
||||
|
// Wrapping must be replicated *exactly*, including when a long word gets
|
||||
|
// onto the next line, with whitespace at the end of the line before (#7).
|
||||
|
// The *only* reliable way to do that is to copy the *entire* rest of the
|
||||
|
// textarea's content into the <span> created at the caret position.
|
||||
|
// For inputs, just '.' would be enough, but no need to bother.
|
||||
|
span.textContent = element.value.substring(position) || "."; // || because a completely empty faux span doesn't render at all
|
||||
|
div.appendChild(span); |
||||
|
|
||||
|
const coordinates = { |
||||
|
top: span.offsetTop + parseInt(computed["borderTopWidth"]), |
||||
|
left: span.offsetLeft + parseInt(computed["borderLeftWidth"]), |
||||
|
height: parseInt(computed["lineHeight"]), |
||||
|
}; |
||||
|
|
||||
|
if (debug) { |
||||
|
span.style.backgroundColor = "#aaa"; |
||||
|
} else { |
||||
|
document.body.removeChild(div); |
||||
|
} |
||||
|
|
||||
|
return coordinates; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
var properties = [ |
||||
|
"direction", // RTL support
|
||||
|
"boxSizing", |
||||
|
"width", // on Chrome and IE, exclude the scrollbar, so the mirror div wraps exactly as the textarea does
|
||||
|
"height", |
||||
|
"overflowX", |
||||
|
"overflowY", // copy the scrollbar for IE
|
||||
|
|
||||
|
"borderTopWidth", |
||||
|
"borderRightWidth", |
||||
|
"borderBottomWidth", |
||||
|
"borderLeftWidth", |
||||
|
"borderStyle", |
||||
|
|
||||
|
"paddingTop", |
||||
|
"paddingRight", |
||||
|
"paddingBottom", |
||||
|
"paddingLeft", |
||||
|
|
||||
|
// https://developer.mozilla.org/en-US/docs/Web/CSS/font
|
||||
|
"fontStyle", |
||||
|
"fontVariant", |
||||
|
"fontWeight", |
||||
|
"fontStretch", |
||||
|
"fontSize", |
||||
|
"fontSizeAdjust", |
||||
|
"lineHeight", |
||||
|
"fontFamily", |
||||
|
|
||||
|
"textAlign", |
||||
|
"textTransform", |
||||
|
"textIndent", |
||||
|
"textDecoration", // might not make a difference, but better be safe
|
||||
|
|
||||
|
"letterSpacing", |
||||
|
"wordSpacing", |
||||
|
|
||||
|
"tabSize", |
||||
|
"MozTabSize", |
||||
|
]; |
||||
|
|
||||
|
const isBrowser = typeof window !== "undefined"; |
||||
|
const isFirefox = isBrowser && (window as any).mozInnerScreenX != null; |
||||
Loading…
Reference in new issue