experiments/outline-editor/editor.css

@@ -1,7 +1,6 @@
 
 :root {
 	--font-size: 5mm;
-	--item-padding: 0.2em;
 	--button-size: 2em;
 
 	font-family: sans-serif;
@@ -37,16 +36,14 @@
 }
 .editor .outline [tabindex]>span,
 .editor .outline [tabindex]>textarea {
+	--padding: 0.2em;
+
 	display: block;
 	width: 100%;
 	/* XXX this is a tiny bit off and using textarea's height here is off too... */
 	min-height: 1em;
-	padding-top: var(--item-padding);
+	padding: var(--padding);
-	padding-bottom: var(--item-padding);
-	padding-left: 0;
-	padding-right: 0;
 	margin: 0;
-	box-sizing: border-box;
 
 	font-family: sans-serif;
 	font-size: var(--font-size);
@@ -56,7 +53,7 @@
 	border: none;
 }
 .editor .outline [tabindex]>textarea {
-	height: calc(2 * var(--item-padding) + 1em);
+	height: calc(2 * var(--padding) + 1em);
 	overflow: hidden;
 	resize: none;
 }
@@ -133,15 +130,6 @@
 .editor .outline .heading-6>textarea {
 	font-weight: bold;
 }
-.editor .outline .heading-1>span,
-.editor .outline .heading-1>textarea,
-.editor .outline .heading-2>span,
-.editor .outline .heading-2>textarea,
-.editor .outline .heading-3>span,
-.editor .outline .heading-3>textarea {
-	border-bottom: solid 1px rgba(0,0,0,0.05);
-}
-
 .editor .outline .heading-1>span,
 .editor .outline .heading-1>textarea {
 	font-size: 2.5em;
@@ -167,20 +155,16 @@
 	font-size: 1em;
 }
 
-/* XXX needs to be in the middle of the first span but with universal size... */
+/* XXX EXPERIMENTAL -- not sure about this... */
 .editor .outline .list-item:before,
-.editor .outline .list>[tabindex]>span:before {
+.editor .outline .list>[tabindex]:before {
-	--size: 0.5rem;
-
 	display: inline-block;
 	position: absolute;
 	content: "";
-	top: calc(0.6em + var(--item-padding));
+	top: 0.6em;
-	left: calc(var(--size) * -2);
+	left: -0.8em;
-	width: var(--size);
+	width: 0.5em;
-	height: var(--size);
+	height: 0.5em;
-	margin-top: calc(var(--size) / -2);
-
 	background: silver;
 }
 
@@ -188,31 +172,15 @@
 	background: yellow;
 }
 
-.editor.hide-comments .outline .comment {
-	display: none;
-}
 .editor .outline .comment>span {
 	color: silver;
 }
 
-.editor .outline [tabindex]>span>input[type=checkbox].check,
+.editor .outline [tabindex]>span>input[type=checkbox] {
-.editor .outline [tabindex]>span>input[type=checkbox].todo {
+	--width: 3em;
-	--size: 1.5rem;
-	--height: calc(var(--font-size) + 2 * var(--item-padding));
 
-	top: calc(0.6em + var(--item-padding));
+	height: 1em;
-	height: var(--size);
+	width: var(--width);
-	width: var(--size);
+	margin-left: calc(-1 * var(--width));
-	margin-top: calc(var(--size) / -2);
-
-	/* NOTE: this appears to be needed for the em sizes above to work correctly */
-	font-size: 1em;
-}
-.editor .outline [tabindex]>span>input[type=checkbox].todo {
-	position: absolute;
-	margin-left: calc(-1 * var(--size) - var(--item-padding) * 2);
-}
-.editor .outline [tabindex]>span>input[type=checkbox].check {
-	transform: translateY(calc(2 * var(--item-padding)));
 }
 

experiments/outline-editor/editor.js

@@ -27,8 +27,46 @@ var atLine = function(elem, index){
 
 //---------------------------------------------------------------------
 
-// XXX experiment with a concatinative model...
+var Node = {
-// 		.get(..) -> Outline (view)
+	dom: undefined,
+	document: undefined,
+
+	get: function(){},
+
+	get root(){},
+	get parent(){},
+	get children(){},
+	get next(){},
+	get prev(){},
+
+	focus: function(){},
+	edit: function(){},
+
+	indent: function(){ },
+	deindent: function(){ },
+	toggleCollapse: function(){ },
+
+	remove: function(){},
+
+	json: function(){},
+	text: function(){},
+
+	load: function(){},
+}
+
+var NodeGroup = {
+	__proto__: Node,
+}
+
+// XXX should this be Page or root??
+var Root = {
+	__proto__: NodeGroup,
+}
+
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
+
+// XXX might be a good idea to do a view-action model...
 var Outline = {
 	dom: undefined,
 
@@ -181,10 +219,9 @@ var Outline = {
 	// XXX should this handle children???
 	update: function(node='focused', data){
 		var node = this.get(node)
-		typeof(data.collapsed) == 'boolean'
+		data.collapsed ?
-			&& (data.collapsed ?
 			node.setAttribute('collapsed', '')
-				: node.removeAttribute('collapsed'))
+			: node.removeAttribute('collapsed')
 		if(data.text){
 			var text = node.querySelector('textarea')
 			var html = node.querySelector('span')
@@ -194,7 +231,7 @@ var Outline = {
 				html.innerHTML = parsed.text
 				// heading...
 				parsed.style ?
-					node.classList.add(...parsed.style)
+					node.classList.add(parsed.style)
 					: node.classList.remove(...this.__styles__)
 			} else {
 				html.innerHTML = data.text }
@@ -269,10 +306,9 @@ var Outline = {
 		return this },
 
 	// block serialization...
+	// XXX STUB...
 	// XXX shouild we support headings + other formatting per block???
-	// XXX split this up into a generic handler + plugins...
+	// XXX these should be symetrical -- now one returns text the other an object...
-	// XXX need a way to filter input text...
-	// 		use-case: hidden attributes...
 	__styles__: [
 		'heading-1',
 		'heading-2',
@@ -288,13 +324,11 @@ var Outline = {
 		}
 		var heading = function(level){
 			return function(_, text){
-				elem.style ??= []
+				elem.style = 'heading-'+level
-				elem.style.push('heading-'+level)
 				return text } }
 		var style = function(style){
 			return function(_, text){
-				elem.style ??= []
+				elem.style = style 
-				elem.style.push(style)
 				return text } }
 		elem.text = code 
 			// hidden attributes...
@@ -308,37 +342,33 @@ var Outline = {
 			// id...
 			.replace(/(\n|^)\s*id::\s*(.*)\s*(\n|$)/, 
 				function(_, value){
-					elem.id = value.trim()
+					elem.collapsed = value.trim() == 'true'
 					return '' })
 			// markdown...
-			// style: headings...
-			.replace(/^######\s*(.*)$/m, style('heading-6'))
-			.replace(/^#####\s*(.*)$/m, style('heading-5'))
-			.replace(/^####\s*(.*)$/m, style('heading-4'))
-			.replace(/^###\s*(.*)$/m, style('heading-3'))
-			.replace(/^##\s*(.*)$/m, style('heading-2'))
-			.replace(/^#\s*(.*)$/m, style('heading-1'))
-			// style: list...
-			.replace(/^[-\*]\s+(.*)$/m, style('list-item'))
-			.replace(/^\s*(.*):\s*$/m, style('list'))
-			// style: misc...
-			.replace(/^((\/\/|;)\s+.*)$/m, style('comment'))
-			.replace(/^XXX\s+(.*)$/m, style('XXX'))
-			.replace(/^(.*)\s*XXX$/m, style('XXX'))
-			// elements...
-			.replace(/(\n|^)---*\h*(\n|$)/m, '$1<hr>')
 			// ToDo...
-			.replace(/^TODO\s*(.*)$/m, '<input class="todo" type="checkbox">$1')
+			.replace(/^TODO\s*(.*)$/, '<input type="checkbox"> $1')
-			.replace(/^DONE\s*(.*)$/m, '<input class="todo" type="checkbox" checked>$1')
+			.replace(/^DONE\s*(.*)$/, '<input type="checkbox" checked> $1')
-			// checkboxes...
+			// style: headings...
-			// XXX these can not be clicked (yet)...
+			.replace(/^######\s*(.*)$/, style('heading-6'))
-			.replace(/\[_\]/gm, '<input class="check" type="checkbox">')
+			.replace(/^#####\s*(.*)$/, style('heading-5'))
-			.replace(/\[[X]\]/gm, '<input class="check" type="checkbox" checked>')
+			.replace(/^####\s*(.*)$/, style('heading-4'))
+			.replace(/^###\s*(.*)$/, style('heading-3'))
+			.replace(/^##\s*(.*)$/, style('heading-2'))
+			.replace(/^#\s*(.*)$/, style('heading-1'))
+			// style: list...
+			.replace(/^[-\*]\s+(.*)$/, style('list-item'))
+			.replace(/^\s*(.*):\s*$/, style('list'))
+			// style: misc...
+			.replace(/^((\/\/|;)\s+.*)$/, style('comment'))
+			.replace(/^XXX\s+(.*)$/, style('XXX'))
+			.replace(/^(.*)\s*XXX$/, style('XXX'))
 			// basic styling...
 			// XXX these are quite naive...
-			.replace(/\*(.*)\*/gm, '<b>$1</b>')
+			.replace(/\*(.*)\*/g, '<b>$1</b>')
-			.replace(/~([^~]*)~/gm, '<s>$1</s>')
+			.replace(/~([^~]*)~/g, '<s>$1</s>')
-			.replace(/_([^_]*)_/gm, '<i>$1</i>') 
+			.replace(/_([^_]*)_/g, '<i>$1</i>') 
+			// elements...
+			.replace(/(\n|^)---*\h*(\n|$)/, '$1<hr>')
 		return elem },
 
 	// serialization...
@@ -430,19 +460,9 @@ var Outline = {
 		var html = document.createElement('span')
 		block.append(text, html)
 		this.update(block, data)
-		// place...
 		var cur = this.get()
-		if(place && cur){
+		place && cur
-			place = place == 'prev' ?
+			&& cur[place](block)
-				'before'
-				: place
-			;(place == 'next' 
-					&& (cur.querySelector('[tabindex]') 
-						|| cur.nextElementSibling)) ?
-				this.get(place).before(block)
-			: (place == 'before' || place == 'after') ?
-				cur[place](block)
-			: undefined }
 		return block },
 	load: function(data){
 		var that = this
@@ -461,9 +481,6 @@ var Outline = {
 			.clear()
 			.outline
 				.append(...level(data))
-		// update sizes of all the textareas (transparent)...
-		for(var e of [...this.outline.querySelectorAll('textarea')]){
-			e.updateSize() }
 		return this },
 
 	sync: function(){
@@ -552,31 +569,25 @@ var Outline = {
 		O: function(evt){
 			if(evt.target.nodeName != 'TEXTAREA'){
 				evt.preventDefault()
-				this.Block('before')
+				this.Block('before')?.querySelector('textarea')?.focus() } },
-					?.querySelector('textarea')
-					?.focus() } },
 		o: function(evt){
 			if(evt.target.nodeName != 'TEXTAREA'){
 				evt.preventDefault()
-				this.Block('next')
+				this.Block('after')?.querySelector('textarea')?.focus() } },
-					?.querySelector('textarea')
-					?.focus() } },
 		Enter: function(evt){
+			/*if(evt.target.isContentEditable){
+				// XXX create new node...
+				return }
+			//*/
 			if(evt.ctrlKey
 					|| evt.shiftKey){
 				return }
 			evt.preventDefault()
 			evt.target.nodeName == 'TEXTAREA' ?
-				this.Block('next')
+				this.Block('after')?.querySelector('textarea')?.focus()
-					?.querySelector('textarea')
+				: this.get()?.querySelector('textarea')?.focus() },
-					?.focus()
-				: this.get()
-					?.querySelector('textarea')
-					?.focus() },
 		Escape: function(evt){
-			this.outline.querySelector('textarea:focus')
+			this.outline.querySelector('textarea:focus')?.parentElement?.focus() },
-				?.parentElement
-				?.focus() },
 		Delete: function(evt){
 			if(this.get('edited')){
 				return }
@@ -609,27 +620,14 @@ var Outline = {
 		outline.addEventListener('click', 
 			function(evt){
 				var elem = evt.target
-				// todo: toggle checkbox...
+				// toggle checkbox...
-				if(elem.classList.contains('todo')){
+				if(elem.nodeName == 'INPUT' && elem.type == 'checkbox'){
 					var node = elem.parentElement.parentElement
 					var text = node.querySelector('textarea')
 					text.value = 
 						elem.checked ?
 							text.value.replace(/^\s*TODO(\s*)/, 'DONE$1')
-							: text.value.replace(/^\s*DONE(\s*)/, 'TODO$1') } 
+							: text.value.replace(/^\s*DONE(\s*)/, 'TODO$1') } })
-				// check: toggle checkbox...
-				if(elem.classList.contains('check')){
-					var node = elem.parentElement.parentElement
-					var text = node.querySelector('textarea')
-					var i = [...node.querySelectorAll('.check')].indexOf(elem)
-					var to = elem.checked ?
-						'[X]'
-						: '[_]'
-					var toggle = function(m){
-						return i-- == 0 ?
-							to
-							: m }
-					text.value = text.value.replace(/\[[X_]\]/g, toggle) } })
 		// heboard handling...
 		outline.addEventListener('keydown', 
 			function(evt){

experiments/outline-editor/index.html

@@ -1,4 +1,3 @@
-<!DOCTYPE html>
 <html>
 <head>
 <link href="editor.css" rel="stylesheet"/>
@@ -28,7 +27,8 @@ var setup = function(){
 	<!-- code -->
 	<div class="code">
 - # Outline editor prototype
-- ## ToDo
+- ## TODO
+  - editor: enter on an expanded parent node should create child (currently next sibling)
   - editor: bksapce/del at start/end of a block should join it with prev/next
   - editor: pressing enter in text edit mode should split text into two blocks
   - editor: caret
@@ -51,7 +51,6 @@ var setup = function(){
     - indent/deindent
     - edit node
   - copy/paste nodes/trees
-  - markdown tables
   - ~serialize~/deserialize
   - ~add optional text styling to nodes~
   - 
@@ -72,14 +71,12 @@ var setup = function(){
 	  - // C-style comment
 	  - ; ASM-style comment
 	  - XXX Highlight
-	- Line
+	- line
 		- ---
-    - Basic inline *bold*, _italic_ and ~striked~
+    - basic inline *bold*, _italic_ and ~striked~
 	- To do items
 	  - TODO undone item
 	  - DONE done item
-        _(clicking the checkbox updates the item)_
-    - Inline [X] checkboxes [_]
   - A
     collapsed:: true
     - a