notes...

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

experiments/outline-editor/editor.css

@@ -156,13 +156,17 @@
 				height: calc(2 * var(--item-padding) + 1em);
 				overflow: hidden;
 				resize: none;
+				opacity: 0;
+
 				/* show/hide node's view/code... */
-				/*&:focus+.view,*/
-				&:not(:focus) {
-					opacity: 0;
+				&:focus {
+					position: relative;
+					opacity: 1;
 				}
 				/* hide .view content but show before/after -- keep bulets and touch zones... */
 				&:focus+.view {
+					position: absolute;
+					top: 0;
 					visibility: hidden;
 
 					&:before,
@@ -175,6 +179,7 @@
 			}
 
 			/* click through the .view text to the .code */
+			/* NOTE: .view visibility is handled in .code above... */
 			&>.view {
 				position: relative;
 				pointer-events: none;
@@ -278,14 +283,16 @@
 			padding: 0;
 			border: none;
 			background: none;
-		}
-		&:not([cropped])>.text {
-			display: none;
+
+			.text {
+				display: none;
+			}
 		}
 		&,
 		&[cropped] {
 			margin-left: 0;
 		}
+		/* XXX nesting this in &[cropped] for some reaon breaks things... */
 		&[cropped] .text {
 			display: block;
 		}

experiments/outline-editor/editor.js

@@ -8,22 +8,6 @@
 //---------------------------------------------------------------------
 // Helpers...
 
-// XXX do a caret api...
-
-// XXX only for text areas...
-var atLine = function(elem, index){
-	// XXX add support for range...
-	var text = elem.value
-	var lines = text.split(/\n/g).length
-	var line = elem.caretLine 
-
-	// XXX STUB index handling...
-	if((index == -1 && line == lines) 
-			|| (index == 0 && line == 1)){
-		return true }
-	return false }
-
-
 /*
 function clickPoint(x,y){
 	document
@@ -1271,7 +1255,7 @@ var Outline = {
 				+ this.path(...arguments, 'text')
 					.slice(0, -1)
 					.map(function(s, i, {length}){
-						return `<span class="path-item" onclick="editor.uncrop(${ length-i })">${
+						return `<span class="path-item" uncrop="${ length-i }">${
 							plugin.encode(s)
 						}</span> ` })
 					.join(' / ')
@@ -2193,6 +2177,14 @@ var Outline = {
 			function(evt){
 				that.__change__() })
 
+		// header...
+		var header = this.header
+		header.addEventListener('click', 
+			function(evt){
+				var elem = evt.target
+				if(elem.classList.contains('path-item')){
+					that.uncrop(elem.getAttribute('uncrop') ?? 'all') } })
+
 		// toolbar...
 		var toolbar = this.toolbar
 		if(toolbar){

experiments/outline-editor/index.html

@@ -48,8 +48,6 @@ var setup = function(){
   - 
 - ## Bugs:
   focused:: true
-  - BUG: if changing style expands the block vertically it will not update size...
-    - # when edited, the text here will get re-wrapped but will not get resized
   - BUG: mobile browsers behave quite chaotically ignoring parts of the styling...
     - FF:
       - zooming on edited field
@@ -59,6 +57,7 @@ var setup = function(){
   -
 - ## ToDo:
   - custom element / web component
+    - BUG: selecting by _click-n-drag_ or _double/triple click_ for some reason does not work...
     - BUG/race: the non-value versions of custom elem seem to sometimes get loaded as empty...
     - Q: can we get rid of the editor block??:
       - CSS breaks if we do...