experiments/outline-editor/editor.css

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

experiments/outline-editor/editor.js

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

experiments/outline-editor/index.html

@@ -21,39 +21,30 @@ var setup = function(){
 </head>
 <body onload="setup()">
 <div class="editor">
-	<div class="outline">
+	<div tabindex=0>
-		<div tabindex=0>
+		<span><i>root</i></span><textarea></textarea>
-			<span><i>root</i></span><textarea></textarea>
+		<div tabindex=0 collapsed>
-			<div tabindex=0 collapsed>
+			<span>A</span><textarea></textarea>
-				<span>A</span><textarea></textarea>
+			<div tabindex=0><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 tabindex=0><span>c</span><textarea></textarea>
-				<div tabindex=0><span>This is a line of text</span><textarea></textarea>
+			</div>
-				</div>
+		</div>
-				<div tabindex=0><span>This is a set
+		<div tabindex=0><span>B</span><textarea></textarea>
-	text lines</span><textarea></textarea>
+			<div tabindex=0><span>d</span><textarea></textarea>
-				</div>
+			</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>
 		</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>