experiments/outline-editor/editor.css

@@ -156,17 +156,13 @@
 				height: calc(2 * var(--item-padding) + 1em);
 				overflow: hidden;
 				resize: none;
-				opacity: 0;
-
 				/* show/hide node's view/code... */
-				&:focus {
+				/*&:focus+.view,*/
-					position: relative;
+				&:not(:focus) {
-					opacity: 1;
+					opacity: 0;
 				}
 				/* hide .view content but show before/after -- keep bulets and touch zones... */
 				&:focus+.view {
-					position: absolute;
-					top: 0;
 					visibility: hidden;
 
 					&:before,
@@ -179,7 +175,6 @@
 			}
 
 			/* click through the .view text to the .code */
-			/* NOTE: .view visibility is handled in .code above... */
 			&>.view {
 				position: relative;
 				pointer-events: none;
@@ -283,16 +278,14 @@
 			padding: 0;
 			border: none;
 			background: none;
-
+		}
-			.text {
+		&:not([cropped])>.text {
-				display: none;
+			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,6 +8,22 @@
 //---------------------------------------------------------------------
 // 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
@@ -1255,7 +1271,7 @@ var Outline = {
 				+ this.path(...arguments, 'text')
 					.slice(0, -1)
 					.map(function(s, i, {length}){
-						return `<span class="path-item" uncrop="${ length-i }">${
+						return `<span class="path-item" onclick="editor.uncrop(${ length-i })">${
 							plugin.encode(s)
 						}</span> ` })
 					.join(' / ')
@@ -2177,14 +2193,6 @@ 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,6 +48,8 @@ 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
@@ -57,7 +59,6 @@ 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...