experiments/outline-editor/editor.js

@@ -29,84 +29,52 @@ function clickPoint(x,y){
 // box corresponds the to desired coordinates. This accounts for nested 
 // elements.
 //
-// XXX do a binary search?? 
-var getCharOffset = function(elem, x, y, data){
-	data = data ?? {}
+// XXX it would be a better idea to do a binary search instead of a liner 
+// 		pass...
+// 		...though b-search will get us to the target, we stll need to count...
+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 c = data.c = 
-				data.c 
-					?? 0
-			var prev, rect, cursor_line, line_start, offset
-			for(var i=0; i < e.length; i++){
+			var prev, rect, cursor_line, col
+			for(var i=0; i <= e.length; i++){
 				r.setStart(e, i)
 				r.setEnd(e, i)
 				prev = rect 
-					?? data.prev
+					?? options.prev
 				rect = r.getBoundingClientRect()
 				// line change...
 				// NOTE: this is almost identical to .getTextOffsetAt(..) see
 				// 		that for more docs...
-				line_start = prev 
-					&& prev.y != rect.y
-				if(line_start){
+				if(prev 
+						&& prev.y != rect.y){
 					if(cursor_line){
-						return offset 
+						return col 
 							?? c + i - 2 } 
-					offset = undefined }
+					col = undefined }
 				cursor_line = 
 					rect.y <= y 
 						&& rect.bottom >= y
-				if(offset == null
+				if(col == null
 						&& rect.x >= x){
-					// get closest edge of element under cursor...
-					var dp = Math.abs(
-						(line_start ? 
-							elem_rect 
-							: prev).x 
-						- x) 
-					var dx = Math.abs(rect.x - x)
-					offset = dx <= dp ?
+					col = (c + i == 0 
+							|| Math.abs(rect.x - x) <= Math.abs(prev.x - x)) ?
 						c + i
 						: c + i - 1
 					if(cursor_line){
-						return offset } } }
-			data.c += i
-			data.last = e.data[i-1]
+						return col } } }
+			options.c += c - 1
 		// html node...
 		} else {
-			prev = data.prev = 
-				prev 
-				?? data.prev
-			// 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 } } }
+			options.prev = prev
+			options = getCharOffset(e, x, y, options)
+			if(typeof(options) != 'object'){
+				return options } } }
 	// no result was found...
-	console.log('---', data)
-	return data.c ?? data
 	return arguments.length > 3 ?
-		data
+		options
 		: null }
 
 
@@ -119,13 +87,12 @@ var getCharOffset = function(elem, x, y, data){
 //		                  |
 //		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 t=0; t <= i; t++, m++){
-		var c = text[t]
+	for(var n=0; n <= i; n++, m++){
+		var c = text[n]
 		var p = m
 		// walk to next match...
 		while(c != markdown[m] && m < markdown.length){
@@ -134,7 +101,7 @@ var getMarkdownOffset = function(markdown, text, i){
 		// entity, symbol, ...)
 		if(m >= markdown.length){
 			m = p } }
-	return m - t }
+	return m - n }
 
 
 
@@ -2074,7 +2041,6 @@ 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,45 +48,6 @@ 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