fixed text positioning...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

experiments/outline-editor/generic.js

@@ -40,6 +40,7 @@ HTMLTextAreaElement.prototype.getTextGeometry = function(){
 
 	// get the relevant styles...
 	var style = getComputedStyle(this)
+	var paddingV = parseFloat(style.paddingTop) + parseFloat(style.paddingBottom)
 	var s = {}
 	for(var i=0; i < style.length; i++){
 		var k = style[i]
@@ -54,7 +55,6 @@ HTMLTextAreaElement.prototype.getTextGeometry = function(){
 	carret.style.padding = '0px'
 
 	var span = document.createElement('span')
-	span.innerText = text.slice(0, offset)
 	Object.assign(span.style, {
 		...s,
 
@@ -62,24 +62,28 @@ HTMLTextAreaElement.prototype.getTextGeometry = function(){
 		display: 'block',
 		top: '-100%',
 		left: '-100%',
-		width: this.offsetWidth + 'px',
-		height: this.scrollHeight + 'px',
+		width: style.width,
+		height: style.height,
 
 		padding: style.padding,
 
+		boxSizing: style.boxSizing,
+
 		outline: 'solid 1px red',
 
 		pointerEvents: 'none',
 	})
-	span.append(carret)
+	span.append(
+		text.slice(0, offset),
+		carret,
+		text.slice(offset))
 
 	document.body.append(span)
 
-	var padding = parseFloat(style.paddingTop) + parseFloat(style.paddingBottom)
 	var res = {
 		length: text.length,
 		lines: Math.floor(
-			(this.offsetHeight - padding) 
+			(this.offsetHeight - paddingV) 
 				/ carret.offsetHeight),
 		line: Math.floor(carret.offsetTop / carret.offsetHeight),
 		offset: offset,

experiments/outline-editor/index.html

@@ -246,7 +246,6 @@ var setup = function(){
             - z
           - c
       - > quote
-	    id::quote-example
       - Notes
           - NOTE: a note text
           - NOTE: