From 021062315bdda0ff467b52c97e6d2f24db67d5a0 Mon Sep 17 00:00:00 2001
From: "Alex A. Naanou" <alex.nanou@gmail.com>
Date: Thu, 19 Oct 2023 00:08:21 +0300
Subject: [PATCH] bugfix...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
---
 experiments/outline-editor/editor.js | 30 +++++++++++++++++++++++++---
 1 file changed, 27 insertions(+), 3 deletions(-)

diff --git a/experiments/outline-editor/editor.js b/experiments/outline-editor/editor.js
index 095681d..f49a7d1 100755
--- a/experiments/outline-editor/editor.js
+++ b/experiments/outline-editor/editor.js
@@ -38,6 +38,13 @@ function clickPoint(x,y){
 //*/
 
 
+// Get the character offset at coordinates...
+//
+// This is done by moving a range down the element until its bounding 
+// box corresponds the to desired coordinates. This accounts for nested 
+// elements.
+//
+// XXX HACK -- is there a better way to do this???
 var getCharOffset = function(elem, x, y, c){
 	c = c ?? 0
 	var r = document.createRange()
@@ -62,14 +69,31 @@ var getCharOffset = function(elem, x, y, c){
 	return arguments.length > 3 ?
 		[c, null]
 		: null }
+
+
+// Get offset in markdown relative to the resulting text...
+//                     
+//					    v <----- position
+//		text:		'Hea|ding'
+//					    |
+//		                +-+ <--- offset in markdown
+//		                  |
+//		markdown:	'# Hea|ding'
+//
 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++){
 		var c = text[n]
-		while(c != markdown[m]){
-			m++ } }
+		var p = m
+		// walk to next match...
+		while(c != markdown[m] && m < markdown.length){
+			m++ } 
+		// reached something unrepresentable directly in markdown (html 
+		// entity, symbol, ...)
+		if(m >= markdown.length){
+			m = p } }
 	return m - n }
 
 
@@ -1302,7 +1326,7 @@ var Outline = {
 		outline.addEventListener('mousedown', 
 			function(evt){
 				var elem = evt.target
-				// correct offset in editor...
+				// place the cursor where the user clicked in code/text...
 				if(elem.classList.contains('code') 
 						&& document.activeElement !== elem){
 					evt.preventDefault()