now crop path is clickable in web component...

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

experiments/outline-editor/editor.css

@@ -284,17 +284,17 @@
 			border: none;
 			background: none;
 
-			&>.text {
+			.text {
 				display: none;
 			}
 		}
 		&,
 		&[cropped] {
 			margin-left: 0;
-
+		}
-			& .text {
+		/* XXX nesting this in &[cropped] for some reaon breaks things... */
-				display: block;
+		&[cropped] .text {
-			}
+			display: block;
 		}
 	}
 

experiments/outline-editor/editor.js

@@ -1255,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(' / ')
@@ -2177,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){