notes...

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

experiments/outline-editor/editor.js

@@ -29,52 +29,84 @@ function clickPoint(x,y){
 // box corresponds the to desired coordinates. This accounts for nested 
 // elements.
 //
-// XXX it would be a better idea to do a binary search instead of a liner 
+// XXX do a binary search?? 
-// 		pass...
+var getCharOffset = function(elem, x, y, data){
-// 		...though b-search will get us to the target, we stll need to count...
+	data = data ?? {}
-var getCharOffset = function(elem, x, y, options={}){
 	var r = document.createRange()
+	var elem_rect = data.elem_rect = 
+		data.elem_rect 
+			?? elem.getBoundingClientRect()
 	for(var e of [...elem.childNodes]){
-		var c = options.c ?? 0
 		// text node...
 		if(e instanceof Text){
-			var prev, rect, cursor_line, col
+			var c = data.c = 
-			for(var i=0; i <= e.length; i++){
+				data.c 
+					?? 0
+			var prev, rect, cursor_line, line_start, offset
+			for(var i=0; i < e.length; i++){
 				r.setStart(e, i)
 				r.setEnd(e, i)
 				prev = rect 
-					?? options.prev
+					?? data.prev
 				rect = r.getBoundingClientRect()
 				// line change...
 				// NOTE: this is almost identical to .getTextOffsetAt(..) see
 				// 		that for more docs...
-				if(prev 
+				line_start = prev 
-						&& prev.y != rect.y){
+					&& prev.y != rect.y
+				if(line_start){
 					if(cursor_line){
-						return col 
+						return offset 
 							?? c + i - 2 } 
-					col = undefined }
+					offset = undefined }
 				cursor_line = 
 					rect.y <= y 
 						&& rect.bottom >= y
-				if(col == null
+				if(offset == null
 						&& rect.x >= x){
-					col = (c + i == 0 
+					// get closest edge of element under cursor...
-							|| Math.abs(rect.x - x) <= Math.abs(prev.x - x)) ?
+					var dp = Math.abs(
+						(line_start ? 
+							elem_rect 
+							: prev).x 
+						- x) 
+					var dx = Math.abs(rect.x - x)
+					offset = dx <= dp ?
 						c + i
 						: c + i - 1
 					if(cursor_line){
-						return col } } }
+						return offset } } }
-			options.c += c - 1
+			data.c += i
+			data.last = e.data[i-1]
 		// html node...
 		} else {
-			options.prev = prev
+			prev = data.prev = 
-			options = getCharOffset(e, x, y, options)
+				prev 
-			if(typeof(options) != 'object'){
+				?? data.prev
-				return options } } }
+			// special case: line break between cursor line and next element...
+			if(prev 
+					// cursor line...
+					&& prev.y <= y 
+					&& prev.bottom >= y
+					// line break...
+					&& prev.y < e.getBoundingClientRect().y
+					// no whitespace at end, no compensation needed... (XXX test)
+					&& ' \t\n'.includes(data.last)){
+				return data.c - 1 }
+			// block element -- compensate for a lacking '\n'... 
+			if(['block', 'table', 'flex', 'grid']
+					.includes(
+						getComputedStyle(e).display)){
+				data.c += 1 }
+			// handle the node...
+			data = getCharOffset(e, x, y, data)
+			if(typeof(data) != 'object'){
+				return data } } }
 	// no result was found...
+	console.log('---', data)
+	return data.c ?? data
 	return arguments.length > 3 ?
-		options
+		data
 		: null }
 
 
@@ -87,12 +119,13 @@ var getCharOffset = function(elem, x, y, options={}){
 //		                  |
 //		markdown:	'# Hea|ding'
 //
+// XXX we are not checking both lengths of markdown AND text...
 var getMarkdownOffset = function(markdown, text, i){
 	i = i ?? text.length
 	var m = 0
 	// walk both strings skipping/counting non-matching stuff...
-	for(var n=0; n <= i; n++, m++){
+	for(var t=0; t <= i; t++, m++){
-		var c = text[n]
+		var c = text[t]
 		var p = m
 		// walk to next match...
 		while(c != markdown[m] && m < markdown.length){
@@ -101,7 +134,7 @@ var getMarkdownOffset = function(markdown, text, i){
 		// entity, symbol, ...)
 		if(m >= markdown.length){
 			m = p } }
-	return m - n }
+	return m - t }
 
 
 
@@ -2041,6 +2074,7 @@ var Outline = {
 					var initial = elem.selectionStart
 					var c = getCharOffset(view, evt.clientX, evt.clientY)
 					var m = getMarkdownOffset(elem.value, view.innerText, c)
+					console.log('---', c, m)
 					// selecting an element with text offset by markup...
 					if(m != 0){
 						evt.preventDefault()

experiments/outline-editor/index.html

@@ -48,6 +48,45 @@ var setup = function(){
   - 
 - ## Bugs:
   focused:: true
+  - BUG: caret positioning broken
+    - Example:
+      - text text text
+        <div>
+        block element
+        </div>
+        this line, and above placement of completely broken
+        - _this seems to be an issue with: `.getMarkdownOffset(..)`_
+          - ```
+            m = `text text text
+            <div>
+            block element
+            </div>
+            this line, and above placement of completely broken`
+            t = 'text text text\n\n\nblock element\n\n\nthis line, and above placement of completely broken '
+            getMarkdownOffset(m, t, 26) 
+            ```
+            this returns `69` while it should return `5`
+            _...replacing `\n\n\n` with `\n\n` seems to fix the issue (also works with spaces)_
+            (BUG also the above line is not italic -- can't reproduce)
+      - DONE clicking right of this line will select last line of block
+        ```
+        text text text
+        ```
+        this line, placement is offset by 2
+      - DONE text text text
+        _text text text_
+        text text text
+      - DONE M
+        M can't place cursor before first char
+        M
+  - BUG: parser: code blocks do not ignore single back-quotes...
+    - ```
+      x = `moo`
+      ```
+    - _this also leads to double quoting of html..._
+      ```
+      x = `<i>moo</i>`
+      ```
   - BUG: mobile browsers behave quite chaotically ignoring parts of the styling...
     - FF:
       - zooming on edited field