2025-12-25 12:21:58 +00:00
2 changed files with 13 additions and 20 deletions
--- a/experiments/outline-editor/editor.js
+++ b/experiments/outline-editor/editor.js
@ -6,7 +6,6 @@


 //---------------------------------------------------------------------
-// Helpers...

 // XXX do a caret api...

@ -45,9 +44,7 @@ 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 
-// 		pass... but at this point this is not critical (unless we get 
-// 		gigantic blocks)
+// XXX might be a good idea to tweak this just a bit (1/2 letter) to the left...
 // XXX HACK -- is there a better way to do this???
 var getCharOffset = function(elem, x, y, c){
 	c = c ?? 0
@ -55,20 +52,15 @@ var getCharOffset = function(elem, x, y, c){
 	for(var e of [...elem.childNodes]){
 		// text node...
 		if(e instanceof Text){
-			var prev, b
-			for(var i=0; i <= e.length; i++){
+			for(var i=0; i < e.length; i++){
 				r.setStart(e, i)
 				r.setEnd(e, i)
-				prev = b
-				b = r.getBoundingClientRect()
+				var b = r.getBoundingClientRect()
 				// found target...
 				if(b.x >= x 
 						&& b.y <= y 
 						&& b.bottom >= y){
-					// get the closest gap between chars to the click...
-					return Math.abs(b.x - x) <= Math.abs(prev.x - x) ?
-						c + i
-						: c + i - 1 } }
+					return c + i } }
 			c += i
 		// html node...
 		} else {
@ -95,7 +87,7 @@ 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 n=0; n < i; n++, m++){
 		var c = text[n]
 		var p = m
 		// walk to next match...
@ -1115,8 +1107,8 @@ var Outline = {

 	sync: function(){
 		var code = this.code
-		if(code){
-			code.value = this.text() }
+		code 
+			&& (code.innerHTML = this.text())
 		return this },


@ -1485,7 +1477,7 @@ var Outline = {
 		var code = this.code
 		if(code){
 			var t = Date.now()
-			this.load(code.value
+			this.load(code.innerHTML
 				.replace(/&lt;/g, '<')
 				.replace(/&gt;/g, '>')) 
 			console.log(`Parse: ${Date.now() - t}ms`)}
--- a/experiments/outline-editor/index.html
+++ b/experiments/outline-editor/index.html
@ -33,7 +33,7 @@ var setup = function(){
 <body onload="setup()">
 <div class="editor">
 	<!-- code -->
-	<textarea class="code">
+	<pre class="code">
 - # Outline editor prototype
  - An outline-based markdown editor experiment
  - ### Infuences::
@ -45,11 +45,12 @@ var setup = function(){
  - 
 - ## Bugs:
  - BUG: editor: FF seems to update the style every other key press -- should be live...
+  - BUG: last node seems to get trash tags added to it's end...
  -
 - ## ToDo:
  - ASAP: scroll into view is bad...
  - ASAP: mobile browsers behave quite chaotically ignoring parts of the styling...
-  - ASAP: call `.sync()` on all changes...
+  - ASAP: tweak the getCharOffset(..) by about 1/2 a letter to the left...
  - FEATURE: read-only mode
  - export html
    - embed css
@ -276,7 +277,7 @@ var setup = function(){
      - This is a set
        text lines
      - Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text 
-	- </textarea>
+	- </pre>
 	<!-- outline -->
 	<div class="outline"></div>
 	<!-- toolbar (optional) -->