minor fix...

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

experiments/outline-editor/editor.js

@@ -1947,7 +1947,25 @@ var Outline = {
 	// XXX move the code here into methods/actions...
 	// XXX use keyboard.js...
 	__overtravel_timeout: undefined,
+	// XXX this needs to be dropped on any edit keyboard input, not sure 
+	// 		how to do this cleanly (including focus clicks)...
+	__caret_x: undefined,
 	keyboard: {
+		// XXX might be a good feature to add to keyboard.js...
+		// 		...might even be fun to extend this and add key classes, 
+		// 		like: 
+		// 			Modifier
+		// 			Function
+		// 			Letter
+		// 			Number
+		// 			...
+		Any: function(evt, key){
+			if(this.__caret_x
+					&& this.get('edited') 
+					&& key != 'ArrowUp' 
+					&& key != 'ArrowDown'){
+				this.__caret_x = undefined } },
+
 		// vertical navigation...
 		// XXX this is a bit hacky but it works -- the caret blinks at 
 		// 		start/end of block before switching to next, would be 
@@ -1968,10 +1986,29 @@ var Outline = {
 
 			var edited = this.get('edited')
 			if(edited){
-				var line = edited.getTextGeometry().line
+				var g = edited.getTextGeometry()
-				if(line == 0){
+				if(g.line == 0){
 					evt.preventDefault() 
-					that.edit('prev') }
+					//var left = edited.getBoundingClientRect().x + g.offsetLeft
+					var left = this.__caret_x = 
+						this.__caret_x 
+							?? edited.getBoundingClientRect().x + g.offsetLeft
+					edited = that.edit('prev') 
+					// keep caret horizontally constrained...
+					var bottom = edited.getBoundingClientRect().bottom
+					/*/ XXX CARET_V_MOVE this is not correct yet...
+					var view = this.get(edited).querySelector('.view')
+					var c = getCharOffset(view, left, bottom - 1)
+					var m = getMarkdownOffset(edited.value, view.innerText, c)
+					console.log('---', c, m)
+					edited.selectionStart = 
+						edited.selectionEnd = 
+							c - m }
+					/*/
+					edited.selectionStart = 
+						edited.selectionEnd = 
+							edited.getTextOffsetAt(left, bottom - 1) }
+					//*/
 			} else {
 				evt.preventDefault() 
 				this.focus('focused', -1) } },
@@ -1991,10 +2028,29 @@ var Outline = {
 
 			var edited = this.get('edited')
 			if(edited){
-				var {line, lines} = edited.getTextGeometry()
+				var g = edited.getTextGeometry()
-				if(lines == 0 || line == lines - 1){
+				if(g.lines == 0 || g.line == g.lines - 1){
 					evt.preventDefault() 
-					that.edit('next') }
+					//var left = edited.getBoundingClientRect().x + g.offsetLeft
+					var left = this.__caret_x = 
+						this.__caret_x 
+							?? edited.getBoundingClientRect().x + g.offsetLeft
+					edited = that.edit('next') 
+					// keep caret horizontally constrained...
+					var top = edited.getBoundingClientRect().y
+					/* XXX CARET_V_MOVE this needs fixing...
+					var view = this.get(edited).querySelector('.view')
+					var c = getCharOffset(view, left, top - 1)
+					var m = getMarkdownOffset(edited.value, view.innerText, c)
+					console.log('---', c, m)
+					edited.selectionStart = 
+						edited.selectionEnd = 
+							c - m }
+					/*/
+					edited.selectionStart = 
+						edited.selectionEnd = 
+							edited.getTextOffsetAt(left, top + 1) }
+					//*/
 			} else {
 				evt.preventDefault() 
 				this.focus('focused', 1) } },
@@ -2305,11 +2361,11 @@ var Outline = {
 				// place the cursor where the user clicked in code/text...
 				if(elem.classList.contains('code') 
 						&& document.activeElement !== elem){
+					that.__caret_x = undefined
 					var view = that.get(elem).querySelector('.view')
 					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()
@@ -2398,7 +2454,13 @@ var Outline = {
 				var elem = evt.target
 				if(that.runPlugins('__keydown__', evt, that, evt.target) !== true){
 					return }
+
 				// handle keyboard...
+				// 'Any' key...
+				if('Any' in that.keyboard){
+					if(that.keyboard.Any.call(that, evt, evt.key) === false){
+						return } }
+				// keys/mods...
 				var keys = []
 				evt.ctrlKey
 					&& keys.push('c_' + evt.key)
@@ -2417,7 +2479,7 @@ var Outline = {
 				keys.push(evt.key)
 				for(var k of keys){
 					if(k in that.keyboard){
-						that.keyboard[k].call(that, evt)
+						that.keyboard[k].call(that, evt, k)
 						break } } })
 		// update code block...
 		outline.addEventListener('keyup', 

experiments/outline-editor/generic.js

@@ -109,29 +109,33 @@ HTMLTextAreaElement.prototype.getTextGeometry = function(func){
 	var style = getComputedStyle(this)
 	var paddingV = parseFloat(style.paddingTop) + parseFloat(style.paddingBottom)
 
-	var carret = document.createElement('span')
+	var caret = document.createElement('span')
-	carret.innerText = '|' 
+	caret.innerText = '|' 
-	carret.style.margin = '0px'
+	caret.style.margin = '0px'
-	carret.style.padding = '0px'
+	caret.style.padding = '0px'
 
 	var span = cloneAsOffscreenSpan(this)
 	span.append(
 		text.slice(0, offset),
-		carret,
+		caret,
-		// NOTE: wee need the rest of the text for the carret to be typeset
+		// NOTE: wee need the rest of the text for the caret to be typeset
 		// 		to the correct line...
 		text.slice(offset))
 	document.body.append(span)
 
 	var res = {
 		length: text.length,
+
 		lines: Math.floor(
 			(this.offsetHeight - paddingV) 
-				/ carret.offsetHeight),
+				/ caret.offsetHeight),
-		line: Math.floor(carret.offsetTop / carret.offsetHeight),
+		line: Math.floor(caret.offsetTop / caret.offsetHeight),
+
+		caretHeight: caret.offsetHeight,
+
 		offset: offset,
-		offsetLeft: carret.offsetLeft,
+		offsetLeft: caret.offsetLeft,
-		offsetTop: carret.offsetTop,
+		offsetTop: caret.offsetTop,
 	}
 
 	if(typeof(func) == 'function'){

experiments/outline-editor/index.html

@@ -48,6 +48,13 @@ var setup = function(){
   - 
 - ## Bugs:
   focused:: true
+  - BUG: can't move down out of a code block
+    - edit this line, then move down
+    - ```
+      code
+      ```
+    - this node can't be reached.
+    - _this appears to be due to how we are resizing the text to view -- should this happen in edit mode???_
   - BUG: caret positioning broken
     - *TODO*::
       - text text text
@@ -118,8 +125,7 @@ var setup = function(){
     - _also this would be a nice opportunity to start the move to a newer electron version_
   - might be a good idea to make the heading level depend on its depth...
   - might be a good idea to think how to avoid the constant selections on focus...
-  - Q: do we want to place the caret when moving between nodes???
+  - Q: when moving up/down between nodes do we want to place the caret relative to markdown (current) or to view? (see: CARET_V_MOVE)
-    - _would be nice to remember the caret horizontal offset for vertical movement_
   - Q: should we use `HTMLTextAreaElement.autoUpdateSize(..)` or handle it globally in setup???
     - _...I'm leaning towards the later..._
   - Q: can we place a cursor in a table correctly???
@@ -221,6 +227,7 @@ var setup = function(){
       - `<editable/>` -- field marker
       - each child node will copy the template and allow editing of only fields
       - not clear how to handle template changes...
+  - DONE place the caret when moving between nodes
   - DONE selecting expanded code by _click-n-drag_
     collapsed:: true
     - # this is a test