reworked dom...

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

experiments/outline-editor/editor.css

@@ -1,9 +1,13 @@
 
 :root {
+	--font-size: 5mm;
 	--button-size: 2em;
 
 	font-family: sans-serif;
-	font-size: 5mm;
+	font-size: var(--font-size);
+
+	/*text-size-adjust: none;*/
+	text-size-adjust: 150%;
 }
 
 .editor {
@@ -36,7 +40,7 @@
 	margin: 0;
 
 	font-family: sans-serif;
-	font-size: 5mm;
+	font-size: var(--font-size);
 
 	outline: none;
 	border: none;
@@ -49,9 +53,14 @@
 
 /* show/hide node's view/code... */
 .editor .outline [tabindex]>span+textarea:not(:focus),
-/* XXX not sure how to do this without :has(..)... */
+.editor .outline [tabindex]:has(>span+textarea:focus)>span:first-child {
-.editor .outline [tabindex]:has(>span+textarea:focus)>span:has(+textarea),
+	position: absolute;
-.editor .outline [tabindex]:focus>span+textarea {
+	opacity: 0;
+	top: 0;
+}
+
+.editor .outline [tabindex]>textarea:focus+span,
+.editor .outline [tabindex]>textarea:not(:focus) {
 	position: absolute;
 	opacity: 0;
 	top: 0;

experiments/outline-editor/editor.js

@@ -87,9 +87,9 @@ var Outline = {
 		var block = document.createElement('div')
 		block.setAttribute('tabindex', '0')
 		block.append(
-			document.createElement('span'),
 			document.createElement('textarea')
-				.autoUpdateSize())
+				.autoUpdateSize(),
+			document.createElement('span'))
 		var cur = this.get()
 		place && cur
 			&& cur[place](block)
@@ -349,10 +349,18 @@ var Outline = {
 		// text...
 		if(typeof(data) == 'string'){
 			// XXX
+			data = data.split(/\n(\s*)- /g)
+			var level = function(lst){
+				while(lst.length > 0){
+				}
+			}
 		} 
 		// json...
 		// XXX
-	},
+
+		// generate dom...
+		// XXX
+		return this },
 
 	// XXX add scrollIntoView(..) to nav...
 	keyboard: {
@@ -480,18 +488,18 @@ var Outline = {
 				that.get('focused')?.classList?.add('focused')
 				// textarea...
 				if(node.nodeName == 'TEXTAREA' 
-						&& node?.previousElementSibling?.nodeName == 'SPAN'){
+						&& node?.nextElementSibling?.nodeName == 'SPAN'){
 					node.value = 
 						that.__html2code__ ?
-							that.__html2code__(node.previousElementSibling.innerHTML)
+							that.__html2code__(node.nextElementSibling.innerHTML)
-							: node.previousElementSibling.innerHTML 
+							: node.nextElementSibling.innerHTML 
 					node.updateSize() } })
 		outline.addEventListener('focusout', 
 			function(evt){
 				var node = evt.target
 				if(node.nodeName == 'TEXTAREA' 
-						&& node?.previousElementSibling?.nodeName == 'SPAN'){
+						&& node?.nextElementSibling?.nodeName == 'SPAN'){
-					node.previousElementSibling.innerHTML = 
+					node.nextElementSibling.innerHTML = 
 						that.__code2html__ ?
 							that.__code2html__(node.value)
 							: node.value } })

experiments/outline-editor/generic.js

@@ -19,6 +19,7 @@ Object.defineProperty(HTMLTextAreaElement.prototype, 'caretLine', {
 	enumerable: false,
 	get: function(){
 		var offset = this.selectionStart
+		console.log('---', this)
 		return offset != null ?
 			this.value
 				.slice(0, offset)

experiments/outline-editor/index.html

@@ -26,27 +26,29 @@ var setup = function(){
 <div class="editor">
 	<div class="outline">
 		<div tabindex=0>
-			<span><i>root</i></span><textarea></textarea>
+			<textarea></textarea><span><i>root</i></span>
 			<div tabindex=0 collapsed>
-				<span>A</span><textarea></textarea>
+				<textarea></textarea><span>A</span>
-				<div tabindex=0><span>a</span><textarea></textarea>
+				<div tabindex=0><textarea></textarea><span>a</span>
 				</div>
-				<div tabindex=0><span>b</span><textarea></textarea>
+				<div tabindex=0><textarea></textarea><span>b</span>
 				</div>
-				<div tabindex=0><span>c</span><textarea></textarea>
+				<div tabindex=0><textarea></textarea><span>c</span>
 				</div>
 			</div>
-			<div tabindex=0><span>B</span><textarea></textarea>
+			<div tabindex=0><textarea></textarea><span>B</span>
-				<div tabindex=0><span>d</span><textarea></textarea>
+				<div tabindex=0><textarea></textarea><span>d</span>
 				</div>
-				<div tabindex=0><span>e</span><textarea></textarea>
+				<div tabindex=0><textarea></textarea><span>e</span>
 				</div>
 			</div>
-			<div tabindex=0><span>C</span><textarea></textarea>
+			<div tabindex=0><textarea></textarea><span>C</span>
-				<div tabindex=0><span>This is a line of text</span><textarea></textarea>
+				<div tabindex=0><textarea></textarea><span>This is a line of text</span>
 				</div>
-				<div tabindex=0><span>This is a set<br>
+				<div tabindex=0><textarea></textarea><span>This is a set<br>
-					text lines</span><textarea></textarea>
+					text lines</span>
+				</div>
+				<div tabindex=0><textarea></textarea><span>Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text </span>
 				</div>
 			</div>
 		</div>
@@ -67,6 +69,8 @@ var setup = function(){
 
 <pre>
 TODO:
+- persistent empty first/last node (a button to create a new node)
+- loading from DOM -- fill textarea
 - Firefox compatibility -- remove ':has(..)'
 - <s>focus management</s>
 - <s>mouse/touch controls</s>