moved remove action to a method + cleanup and fixes...

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

experiments/outline-editor/editor.css

@@ -1,17 +1,30 @@
 
 :root {
+	--button-size: 5em;
+
 	font-family: sans-serif;
 	font-size: 5mm;
 }
 
-.editor [tabindex] {
+.editor {
+	display: block;
 	position: relative;
 }
-.editor div [tabindex] {
+
+.editor .outline {
+	display: block;
+	position: relative;
+	width: calc(100% - var(--button-size));
+}
+
+.editor .outline [tabindex] {
+	position: relative;
+}
+.editor .outline div [tabindex] {
 	margin-left: 2em;
 }
-.editor [tabindex]>span,
-.editor [tabindex]>textarea {
+.editor .outline [tabindex]>span,
+.editor .outline [tabindex]>textarea {
 	--padding: 0.2em;
 
 	display: block;
@@ -28,41 +41,61 @@
 	outline: none;
 	border: none;
 }
-.editor [tabindex]>textarea {
+.editor .outline [tabindex]>textarea {
 	height: calc(2 * var(--padding) + 1em);
 	overflow: hidden;
 	resize: none;
 }
 
 /* show/hide node's view/code... */
-.editor [tabindex]>span+textarea:not(:focus),
+.editor .outline [tabindex]>span+textarea:not(:focus),
 /* XXX not sure how to do this without :has(..)... */
-.editor [tabindex]:has(>span+textarea:focus)>span:has(+textarea),
-.editor [tabindex]:focus>span+textarea {
+.editor .outline [tabindex]:has(>span+textarea:focus)>span:has(+textarea),
+.editor .outline [tabindex]:focus>span+textarea {
 	position: absolute;
 	opacity: 0;
 	top: 0;
 }
 
-.editor div[collapsed] {
+/* focus... */
+.editor .outline [tabindex]:focus {
+	/*outline: solid 0.2em silver;*/
+	outline: none;
+}
+.editor .outline [tabindex]:focus>span,
+.editor .outline [tabindex]:focus>textarea {
+	background: rgba(0,0,0,0.1);
+}
+.editor .outline [tabindex].focused:not(:focus)>span,
+.editor .outline [tabindex].focused:not(:focus)>textarea {
+	background: rgba(0,0,0,0.05);
+}
+
+
+.editor .outline div[collapsed] {
 	border-bottom: solid 1px silver;
 }
-.editor div[collapsed] div {
+.editor .outline div[collapsed] div {
 	display: none;
 }
 
 /* XXX are we selecting subtrees or blocks??? */
-.editor [selected] {
+.editor .outline [selected] {
 	background: silver;
 }
 
-.editor div:focus {
-	/*outline: solid 0.2em silver;*/
-	outline: none;
+
+.editor .toolbar {
+	display: inline-block;
+	position: absolute; 
+	top: 1em;
+	right: 1em;
 }
-.editor div:focus>span,
-.editor div:focus>textarea {
-	background: rgba(0,0,0,0.1);
+.editor .toolbar button {
+	display: block;
+	width: var(--button-size);
+	height: var(--button-size);
 }
 
 
+

experiments/outline-editor/editor.js

@@ -121,6 +121,7 @@ var Outline = {
 	// 		-> <nodes>
 	//
 	// XXX add support for node ID...
+	// XXX need to be able to get the next elem on same level...
 	get: function(node='focused', offset){
 		var that = this
 
@@ -167,7 +168,8 @@ var Outline = {
 				this.at(node)
 			: node == 'focused' ?
 				(this.dom.querySelector(`[tabindex]:focus`)
-					|| this.dom.querySelector(`textarea:focus`)?.parentElement)
+					|| this.dom.querySelector(`textarea:focus`)?.parentElement
+					|| this.dom.querySelector('[tabindex].focused'))
 			: node == 'parent' ?
 				this.get('focused')?.parentElement
 			: node 
@@ -192,6 +194,12 @@ var Outline = {
 					return elem.getAttribute('tabindex') != null }) }
 
 		// offset...
+		offset = 
+			offset == 'next' ? 
+				1
+			: offset == 'prev' ?
+				-1
+			: offset
 		if(typeof(offset) == 'number'){
 			nodes = this.get('visible')
 			var i = nodes.indexOf(node) + offset
@@ -206,8 +214,8 @@ var Outline = {
 	at: function(index, nodes='visible'){
 		return this.get(nodes).at(index) },
 
-	focus: function(node='focused'){},
-	edit: function(node='focused'){},
+	focus: function(node='focused', offset){},
+	edit: function(node='focused', offset){},
 
 	indent: function(node='focused', indent=true){
 		// .indent(<indent>)
@@ -221,7 +229,7 @@ var Outline = {
 		// deindent...
 		if(!indent){
 			var parent = cur.parentElement
-			if(!parent.classList.contains('.editor')){
+			if(!parent.classList.contains('.outline')){
 				var children = siblings.slice(siblings.indexOf(cur)+1)
 				parent.after(cur)
 				children.length > 0
@@ -260,9 +268,16 @@ var Outline = {
 				elem.updateSize() } }
 		return node },
 
-	// XXX
-	remove: function(node){
-	},
+	remove: function(node='focused', offset){
+		var elem = this.get(...arguments)
+		var next 
+		if(elem.classList.contains('focused')){
+			// XXX need to be able to get the next elem on same level...
+			this.toggleCollapse(elem)
+			next = this.get(elem, 'next') }
+		elem?.remove()
+		next?.focus()
+		return this },
 
 	// block serialization...
 	__code2html__: function(code){
@@ -333,7 +348,7 @@ var Outline = {
 		// horizontal navigation / collapse...
 		// XXX if at start/end of element move to prev/next...
 		ArrowLeft: function(evt){
-			if(this.dom.querySelector('.editor textarea:focus')){
+			if(this.dom.querySelector('.outline textarea:focus')){
 				// XXX if at end of element move to next...
 				return }
 			;((this.left_key_collapses 
@@ -343,7 +358,7 @@ var Outline = {
 				this.toggleCollapse(true)
 				: this.get('parent')?.focus() },
 		ArrowRight: function(evt){
-			if(this.dom.querySelector('.editor textarea:focus')){
+			if(this.dom.querySelector('.outline textarea:focus')){
 				// XXX if at end of element move to next...
 				return }
 			if(this.right_key_expands){
@@ -392,10 +407,7 @@ var Outline = {
 		Delete: function(evt){
 			if(evt.target.isContentEditable){
 				return }
-			this.toggleCollapse(true)
-			var next = this.get('next')
-			this.get()?.remove() 
-			next?.focus() },
+			this.remove() },
 
 		// select...
 		// XXX add:
@@ -414,20 +426,26 @@ var Outline = {
 	setup: function(dom){
 		var that = this
 		this.dom = dom
+		var outline = dom.querySelector('.outline')
 		// update stuff already in DOM...
-		for(var elem of [...dom.querySelectorAll('.editor textarea')]){
+		for(var elem of [...outline.querySelectorAll('textarea')]){
 			elem.autoUpdateSize() } 
 
 		// heboard handling...
-		dom.addEventListener('keydown', 
+		outline.addEventListener('keydown', 
 			function(evt){
 				evt.key in that.keyboard 
 					&& that.keyboard[evt.key].call(that, evt) })
 
 		// toggle view/code of nodes...
-		dom.addEventListener('focusin', 
+		outline.addEventListener('focusin', 
 			function(evt){
 				var node = evt.target
+				// handle focus...
+				for(var e of [...that.dom.querySelectorAll('.focused')]){
+					e.classList.remove('focused') }
+				that.get('focused')?.classList?.add('focused')
+				// textarea...
 				if(node.nodeName == 'TEXTAREA' 
 						&& node?.previousElementSibling?.nodeName == 'SPAN'){
 					node.value = 
@@ -435,7 +453,7 @@ var Outline = {
 							that.__html2code__(node.previousElementSibling.innerHTML)
 							: node.previousElementSibling.innerHTML 
 					node.updateSize() } })
-		dom.addEventListener('focusout', 
+		outline.addEventListener('focusout', 
 			function(evt){
 				var node = evt.target
 				if(node.nodeName == 'TEXTAREA' 

experiments/outline-editor/index.html

@@ -21,31 +21,40 @@ var setup = function(){
 </head>
 <body onload="setup()">
 <div class="editor">
-	<div tabindex=0>
-		<span><i>root</i></span><textarea></textarea>
-		<div tabindex=0 collapsed>
-			<span>A</span><textarea></textarea>
-			<div tabindex=0><span>a</span><textarea></textarea>
+	<div class="outline">
+		<div tabindex=0>
+			<span><i>root</i></span><textarea></textarea>
+			<div tabindex=0 collapsed>
+				<span>A</span><textarea></textarea>
+				<div tabindex=0><span>a</span><textarea></textarea>
+				</div>
+				<div tabindex=0><span>b</span><textarea></textarea>
+				</div>
+				<div tabindex=0><span>c</span><textarea></textarea>
+				</div>
 			</div>
-			<div tabindex=0><span>b</span><textarea></textarea>
+			<div tabindex=0><span>B</span><textarea></textarea>
+				<div tabindex=0><span>d</span><textarea></textarea>
+				</div>
+				<div tabindex=0><span>e</span><textarea></textarea>
+				</div>
 			</div>
-			<div tabindex=0><span>c</span><textarea></textarea>
-			</div>
-		</div>
-		<div tabindex=0><span>B</span><textarea></textarea>
-			<div tabindex=0><span>d</span><textarea></textarea>
-			</div>
-			<div tabindex=0><span>e</span><textarea></textarea>
-			</div>
-		</div>
-		<div tabindex=0><span>C</span><textarea></textarea>
-			<div tabindex=0><span>This is a line of text</span><textarea></textarea>
-			</div>
-			<div tabindex=0><span>This is a set
-text lines</span><textarea></textarea>
+			<div tabindex=0><span>C</span><textarea></textarea>
+				<div tabindex=0><span>This is a line of text</span><textarea></textarea>
+				</div>
+				<div tabindex=0><span>This is a set
+	text lines</span><textarea></textarea>
+				</div>
 			</div>
 		</div>
 	</div>
+	<div class="toolbar">
+		<button onclick="editor.deindent()">&lt;</button>
+		<button onclick="editor.indent()">&gt;</button>
+		<button onclick="editor.Block('before').focus()">O</button>
+		<button onclick="editor.Block('after').focus()">o</button>
+		<button onclick="editor.remove()">&times;</button>
+	</div>
 </div>
 
 <hr>