experiments/outline-editor/index.html

@@ -7,42 +7,12 @@
 	font-size: 5mm;
 }
 
-.editor [tabindex] {
+.editor div div {
-	position: relative;
-}
-.editor div [tabindex] {
 	margin-left: 2em;
 }
-.editor [tabindex]>span,
+.editor div span {
-.editor [tabindex]>textarea {
-	--padding: 0.2em;
-
 	display: block;
-	width: 100%;
+	padding: 0.2em;
-	padding: var(--padding);
-	margin: 0;
-
-	font-family: sans-serif;
-	font-size: 5mm;
-	white-space: pre;
-
-	outline: none;
-	border: none;
-}
-.editor [tabindex]>textarea {
-	height: calc(2 * var(--padding) + 1em);
-	overflow: hidden;
-	resize: none;
-}
-
-/* show/hide node's view/code... */
-.editor [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 {
-	position: absolute;
-	opacity: 0;
-	top: 0;
 }
 
 .editor div[collapsed] {
@@ -56,29 +26,21 @@
 	/*outline: solid 0.2em silver;*/
 	outline: none;
 }
-.editor div:focus>span,
+.editor div:focus>span {
-.editor div:focus>textarea {
 	background: silver;
 }
 
 </style>
 <script>
-var updateTextareaSize = function(elem){
-	elem.style.height = ''
-	elem.style.height = elem.scrollHeight + 'px'
-	return elem }
 
-var getFocused = function(offset=0, selector='[tabindex]'){
+var getFocused = function(offset=0){
-	var focused = document.querySelector(`.editor ${selector}:focus`)
+	var focused = document.querySelector('.editor :focus')
-		|| (selector != 'textarea' ? 
-			getEditable()?.parentElement
-			: null)
 	if(offset == 0){
 		return focused }
 
 	if(offset == 'parent'){
 		if(!focused){
-			return document.querySelector(`.editor ${selector}`) }
+			return document.querySelector('.editor [tabindex]') }
 		var elem = focused.parentElement
 		return elem.classList.contains('editor') ?
 			undefined
@@ -86,7 +48,7 @@ var getFocused = function(offset=0, selector='[tabindex]'){
 
 	if(offset == 'child'){
 		if(!focused){
-			return document.querySelector(`.editor ${selector}`) }
+			return document.querySelector('.editor [tabindex]') }
 		return focused.querySelector('div') }
 
 	if(offset == 'children'){
@@ -103,7 +65,7 @@ var getFocused = function(offset=0, selector='[tabindex]'){
 			.filter(function(elem){ 
 				return elem.getAttribute('tabindex') }) }
 
-	var focusable = [...document.querySelectorAll(`.editor ${selector}`)]
+	var focusable = [...document.querySelectorAll('.editor [tabindex]')]
 		.filter(function(e){
 			return e.offsetParent != null })
 	if(offset == 'all'){
@@ -121,11 +83,6 @@ var getFocused = function(offset=0, selector='[tabindex]'){
 	} else {
 		return focusable[offset > 0 ? 0 : focusable.length-1] } }
 
-// XXX would also be nice to make the move only if at first/last line/char
-// XXX would be nice to keep the cursor at roughly the same left offset...
-var getEditable = function(offset){
-	return getFocused(offset, 'textarea') }
-
 var indentNode = function(indent=true){
 	var cur = getFocused()
 	if(!cur){
@@ -151,94 +108,35 @@ var toggleCollapse = function(node, state='next'){
 		return getFocused('all')
 			.map(function(node){
 				return toggleCollapse(node, state) }) }
-	// toggleCollapse(<state>)
+
+	// state passed directly...
 	if(!(node instanceof HTMLElement) && node != null){
 		state = node
 		node = null }
 	node ??= getFocused()
-	if(!node 
+	if(!node){
-			// only nodes with children can be collapsed...
-			|| !node.querySelector('[tabindex]')){
 		return }
 	state = state == 'next' ?
 		!node.getAttribute('collapsed')
 		: state
-	if(state){
+	state ?
 		node.setAttribute('collapsed', '')
-	} else {
+		: node.removeAttribute('collapsed')
-		node.removeAttribute('collapsed')
-		for(var elem of [...node.querySelectorAll('textarea')]){
-			updateTextareaSize(elem) }
-	}
 	return node }
 
-// XXX add reference node...
-var createBlock = function(place=none){
-	var block = document.createElement('div')
-	block.setAttribute('tabindex', '0')
-	block.innerHTML = `<span></span><textarea></textarea>`
-	var cur = getFocused()
-		|| getEditable()?.parentElement
-	place && cur
-		&& cur[place](block)
-	return block }
-
-
-// XXX do a caret api...
-
-// XXX this works only on the current text node...
-// XXX only for text areas...
-var atLine = function(index){
-	// XXX add support for range...
-	var elem = getEditable()
-	var text = elem.value
-	var lines = text.split(/\n/g).length
-	var offset = elem.selectionStart
-	var line = text.slice(0, offset).split(/\n/g).length
-
-	//console.log('---', line, 'of', lines, '---', offset, sel)
-
-	// XXX STUB index handling...
-	if(index == -1 && line == lines){
-		return true
-	} else if(index == 0 && line == 1){
-		return true
-	}
-	return false
-}
 
 var LEFT_COLLAPSE = false
 var RIGHT_EXPAND = true
 
-// XXX add scrollIntoView(..) to nav...
 var keyboard = {
 	// vertical navigation...
-	ArrowUp: function(evt){
-		var action = getFocused
-		var edited = document.querySelector('.editor textarea:focus')
-		if(edited){
-			if(!atLine(0)){
-				return }
-			action = getEditable }
-		evt.preventDefault() 
-		action(-1)?.focus() },
 	ArrowDown: function(evt, offset=1){
-		var action = getFocused
+		getFocused(1)?.focus() },
-		var edited = document.querySelector('.editor textarea:focus')
+	ArrowUp: function(evt){
-		if(edited){
+		getFocused(-1)?.focus() },
-			if(!atLine(-1)){
-				return }
-			//window.getSelection()
-			action = getEditable }
-		evt.preventDefault() 
-		action(1)?.focus() },
 
 	// horizontal navigation / collapse...
-	// XXX if at start/end of element move to prev/next...
 	ArrowLeft: function(evt){
-		if(document.querySelector('.editor textarea:focus')){
-			// XXX if at end of element move to next...
-			return }
 		if(LEFT_COLLAPSE){
 				toggleCollapse(true)
 				getFocused('parent')?.focus()
@@ -247,9 +145,6 @@ var keyboard = {
 				toggleCollapse(true)
 				: getFocused('parent')?.focus() } },
 	ArrowRight: function(evt){
-		if(document.querySelector('.editor textarea:focus')){
-			// XXX if at end of element move to next...
-			return }
 		if(RIGHT_EXPAND){
 			toggleCollapse(false) 
 			var child = getFocused('child')
@@ -264,88 +159,34 @@ var keyboard = {
 	// indent...
 	Tab: function(evt){
 		evt.preventDefault()
-		var editable = getEditable()
+		indentNode(!evt.shiftKey)?.focus() },
-		var node = indentNode(!evt.shiftKey)
-		;(editable ?
-			editable
-			: node)?.focus() },
 
 	// edit mode...
-	O: function(evt){
-		if(evt.target.nodeName != 'TEXTAREA'){
-			evt.preventDefault()
-			createBlock('before')?.querySelector('textarea')?.focus() } },
-	o: function(evt){
-		if(evt.target.nodeName != 'TEXTAREA'){
-			evt.preventDefault()
-			createBlock('after')?.querySelector('textarea')?.focus() } },
 	Enter: function(evt){
-		/*if(evt.target.isContentEditable){
+		console.log('---', evt)
-			// XXX create new node...
+	},
-			return }
-		//*/
-		if(evt.ctrlKey
-				|| evt.shiftKey){
-			return }
-		evt.preventDefault()
-		evt.target.nodeName == 'TEXTAREA' ?
-			createBlock('after')?.querySelector('textarea')?.focus()
-			: getFocused()?.querySelector('textarea')?.focus() },
 	Escape: function(evt){
-		document.querySelector('textarea:focus')?.parentElement?.focus() },
+		console.log('---', evt)
-	Delete: function(evt){
+	},
-		if(evt.target.isContentEditable){
-			return }
-		var next = getFocused(1)
-		getFocused()?.remove() 
-		next?.focus() },
 }
 document.addEventListener('keydown', 
 	function(evt){
 		evt.key in keyboard 
 			&& keyboard[evt.key](evt) })
 
-document.addEventListener('input', 
-	function(evt){
-		updateTextareaSize(evt.target) })
-
-// XXX add support for markup handlers...
-document.addEventListener('focusin', 
-	function(evt){
-		var node = evt.target
-		if(node.nodeName == 'TEXTAREA' 
-				&& node?.previousElementSibling?.nodeName == 'SPAN'){
-			node.value = node.previousElementSibling.innerHTML 
-			updateTextareaSize(node) } })
-document.addEventListener('focusout', 
-	function(evt){
-		var node = evt.target
-		if(node.nodeName == 'TEXTAREA' 
-				&& node?.previousElementSibling?.nodeName == 'SPAN'){
-			node.previousElementSibling.innerHTML = node.value } })
-
-var setup = function(){
-	for(var elem of [...document.querySelectorAll('.editor textarea')]){
-		updateTextareaSize(elem) } }
 
 </script>
 </head>
-<body onload="setup()">
+<body>
 <pre>
 TODO:
 - <s>navigation</s>
 - <s>expand/collapse subtree</s>
 - <s>shift subtree up/down</s>
-- <s>create node</s>
+- edit node
-- <s>edit node</s>
+- create node
-- undo delete node
-- copy/paste nodes/trees
-- shifting nodes up/down
-- multiple node selection
 - mouse controls
 - touch controls
-- serialize/deserialize
-- add optional styling to nodes
 
 Controls:
 	up         - focus node above
@@ -356,36 +197,24 @@ Controls:
 	s-tab      - deindent node
 	s-left     - collapse node
 	s-right    - expand node
-	enter      - normal mode: edit node
-	           - edit mode: create node below
-	esc        - exit edit mode 
 </pre>
 
 <hr>
 
 <div class="editor">
-	<div tabindex=0>
+	<div tabindex=0><span>root</span>
-		<span><i>root</i></span><textarea></textarea>
+		<div tabindex=0 collapsed><span>A</span>
-		<div tabindex=0 collapsed>
+			<div tabindex=0><span>a</span>
-			<span>A</span><textarea></textarea>
-			<div tabindex=0><span>a</span><textarea></textarea>
 			</div>
-			<div tabindex=0><span>b</span><textarea></textarea>
+			<div tabindex=0><span>b</span>
 			</div>
-			<div tabindex=0><span>c</span><textarea></textarea>
+			<div tabindex=0><span>c</span>
 			</div>
 		</div>
-		<div tabindex=0><span>B</span><textarea></textarea>
+		<div tabindex=0><span>B</span>
-			<div tabindex=0><span>d</span><textarea></textarea>
+			<div tabindex=0><span>d</span>
 			</div>
-			<div tabindex=0><span>e</span><textarea></textarea>
+			<div tabindex=0><span>e</span>
-			</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>