experiments/outline-editor/editor.js

@@ -1947,25 +1947,7 @@ 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 
@@ -1986,29 +1968,10 @@ var Outline = {
 
 			var edited = this.get('edited')
 			if(edited){
-				var g = edited.getTextGeometry()
+				var line = edited.getTextGeometry().line
-				if(g.line == 0){
+				if(line == 0){
 					evt.preventDefault() 
-					//var left = edited.getBoundingClientRect().x + g.offsetLeft
+					that.edit('prev') }
-					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) } },
@@ -2028,29 +1991,10 @@ var Outline = {
 
 			var edited = this.get('edited')
 			if(edited){
-				var g = edited.getTextGeometry()
+				var {line, lines} = edited.getTextGeometry()
-				if(g.lines == 0 || g.line == g.lines - 1){
+				if(lines == 0 || line == lines - 1){
 					evt.preventDefault() 
-					//var left = edited.getBoundingClientRect().x + g.offsetLeft
+					that.edit('next') }
-					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) } },
@@ -2361,11 +2305,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()
@@ -2454,13 +2398,7 @@ 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)
@@ -2479,7 +2417,7 @@ var Outline = {
 				keys.push(evt.key)
 				for(var k of keys){
 					if(k in that.keyboard){
-						that.keyboard[k].call(that, evt, k)
+						that.keyboard[k].call(that, evt)
 						break } } })
 		// update code block...
 		outline.addEventListener('keyup', 

experiments/outline-editor/generic.js

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

experiments/outline-editor/index.html

@@ -48,13 +48,6 @@ 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
@@ -125,7 +118,8 @@ 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: when moving up/down between nodes do we want to place the caret relative to markdown (current) or to view? (see: CARET_V_MOVE)
+  - Q: do we want to place the caret when moving between nodes???
+    - _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???
@@ -227,7 +221,6 @@ 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