added notes + more tweaks and cleanup...

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

experiments/outline-editor/editor.css

@@ -1,5 +1,8 @@
-
+/**********************************************************************
-/*********************************************************************/
+* 
+*
+*
+**********************************************************************/
 
 :root {
 	--font-size: 5mm;
@@ -10,6 +13,7 @@
 	--item-padding-ratio: 0.2;
 
 	--checkbox-size: 1.5rem;
+	--checkbox-margin: 0.5em;
 
 	--button-size: 2em;
 
@@ -89,7 +93,6 @@
 .editor .outline [tabindex]>textarea:not(:focus) {
 	position: absolute;
 	opacity: 0;
-	top: 0;
 }
 /* click through the span text to the textarea */
 .editor .outline [tabindex]>span {
@@ -217,8 +220,8 @@ editor .outline [tabindex]:focus {
 }
 
 
-/*-------------------------------------------------------------------*/
+
-/* Styles */
+/********************************************************** Styles ***/
 
 /* Headings... */
 .editor .outline .heading-1>span,
@@ -307,9 +310,37 @@ editor .outline [tabindex]:focus {
 	content: "▪";
 }
 
+/* Notes... */
+.editor .outline .NOTE {
+	--margin: 1rem;
+	--padding-h: 2rem;
+	--padding-v: 1.2em;
+
+	margin: var(--margin) 0;
+	padding: var(--padding-v) var(--padding-h);
+	border: solid 2px silver;
+	background: rgba(0,0,0,0.05);
+}
+/* XXX this prevents it from being accesible via click/tap... */
+.editor .outline .NOTE>span:empty {
+	display: none;
+}
+.editor .outline .NOTE>span:empty ~ [tabindex] {
+	/* XXX calculate this... */
+	margin-left: 1em;
+}
+.editor .outline .NOTE>span:before {
+	content: "" !important;
+}
+/* correct the right click zone... */
+.editor .outline [tabindex].NOTE>span:after,
+.editor .outline [tabindex].NOTE [tabindex]>span:after {
+	margin-right: calc(-1 * var(--padding-h));
+}
+
 
 /* Highlightes... */
-.editor .outline .ASAP {
+.editor .outline .highlight {
 	font-weight: bold;
 	background: yellow;
 }
@@ -328,21 +359,14 @@ editor .outline [tabindex]:focus {
 
 
 /* Checkboxes... */
-:root {
-	/* NOTE: this must have a unit... */
-	/* XXX move this to the config when fixed... */
-	/* XXX setting this to >0em will add margins to both sides of 
-	* 	the inline checkbox even if it is the first thing in the 
-	* 	element -- can's seem to figure out a way to avoid this */
-	--checkbox-margin: 0em;
-}
 .editor .outline [tabindex].todo>span {
-	width: calc(100% - var(--checkbox-size));
+	width: calc(
-	/* align todo checkboxes to indnt (otherwise they are on the indent) */
+		100% 
-	margin-left: var(--checkbox-size);
+		- var(--checkbox-size)
-	padding-left: calc(
+		- var(--checkbox-margin));
-		var(--item-padding)
+	margin-left: calc(
-		+ var(--checkbox-margin) * 2);
+		var(--checkbox-size)
+		+ var(--checkbox-margin));
 }
 .editor .outline [tabindex].check>span>input[type=checkbox],
 .editor .outline [tabindex].todo>span>input[type=checkbox] {
@@ -360,22 +384,17 @@ editor .outline [tabindex]:focus {
 }
 .editor .outline [tabindex].todo>span>input[type=checkbox]:first-child {
 	margin-left: calc(
-		var(--checkbox-size) * -1
+		-1 * var(--checkbox-size)
-		- var(--item-padding)
+		- var(--checkbox-margin));
-		- var(--checkbox-margin) * 2);
-	margin-right: calc(
-		var(--item-padding)
-		+ var(--checkbox-margin));
 }
 /* correct the left click zone... */
 .editor .outline [tabindex].todo>span:before {
-	margin-left: calc(-1 * var(--checkbox-size));
+	margin-left: calc(
-}
+		-1 * var(--checkbox-size)
-/* XXX need to remove left margin from strictly the first itme in block... */
+		- var(--checkbox-margin));
-.editor .outline [tabindex].check>span>input[type=checkbox] {
-	/*margin-left: 0;*/
 }
 
+
 /* code... */
 .editor .outline [tabindex]>span code {
 	padding: 0.1em 0.3em;
@@ -385,7 +404,8 @@ editor .outline [tabindex]:focus {
 }
 
 
-/*********************************************************************/
+
+/********************************************************* Testing ***/
 
 .editor.show-click-zones .outline [tabindex]>span:before,
 .editor.show-click-zones .outline [tabindex]>span:after {
@@ -398,3 +418,5 @@ editor .outline [tabindex]:focus {
 }
 
 
+
+/*********************************************************************/

experiments/outline-editor/editor.js

@@ -38,6 +38,7 @@ var Outline = {
 	right_key_expands: true,
 	code_update_interval: 5000,
 	tab_size: 4,
+	carot_jump_edge_then_block: false,
 
 
 	get code(){
@@ -322,23 +323,27 @@ var Outline = {
 			//.replace(/^(?<!\\)[-\*]\s+(.*)$/m, style('list-item'))
 			.replace(/^\s*(.*)(?<!\\):\s*$/m, style('list'))
 			// style: misc...
-			.replace(/^(?<!\\)>\s+(.*)$/m, style('quote'))
+			.replace(/^\s*(?<!\\)>\s+(.*)$/m, style('quote'))
-			.replace(/^(?<!\\)((\/\/|;)\s+.*)$/m, style('comment'))
+			.replace(/^\s*(?<!\\)((\/\/|;)\s+.*)$/m, style('comment'))
-			.replace(/^(?<!\\)XXX\s+(.*)$/m, style('XXX'))
+			.replace(/^\s*(?<!\\)NOTE:?\s*(.*)$/m, style('NOTE'))
+			.replace(/^\s*(?<!\\)XXX\s+(.*)$/m, style('XXX'))
 			.replace(/^(.*)\s*(?<!\\)XXX$/m, style('XXX'))
-			.replace(/(\s*)(?<!\\)ASAP(\s*)/m, '$1<span class="ASAP">ASAP</span>$2')
+			.replace(/(\s*)(?<!\\)(ASAP|BUG|FIX|HACK|STUB|WARNING|CAUTION)(\s*)/m, 
+				'$1<span class="highlight $2">$2</span>$3')
 			// elements...
 			.replace(/(\n|^)(?<!\\)---*\h*(\n|$)/m, '$1<hr>')
 			// ToDo...
-			.replace(/^(?<!\\)TODO\s+/m, 
+			// NOTE: these are separate as we need to align block text 
+			// 		to leading chekbox...
+			.replace(/^\s*(?<!\\)\[[_ ]\]\s*/m, 
 				style('todo', '<input type="checkbox">'))
-			.replace(/^(?<!\\)DONE\s+/m, 
+			.replace(/^\s*(?<!\\)\[[Xx]\]\s*/m, 
 				style('todo', '<input type="checkbox" checked>'))
-			// checkboxes...
+			// inline checkboxes...
-			.replace(/(?<!\\)\[_\]/gm, 
+			.replace(/\s*(?<!\\)\[[_ ]\]\s*/gm, 
-				style('check', '<input class="check" type="checkbox">'))
+				style('check', '<input type="checkbox">'))
-			.replace(/(?<!\\)\[[X]\]/gm, 
+			.replace(/\s*(?<!\\)\[[Xx]\]\s*/gm, 
-				style('check', '<input class="check" type="checkbox" checked>'))
+				style('check', '<input type="checkbox" checked>'))
 			// basic styling...
 			.replace(/(?<!\\)\*(?=[^\s*])(([^*]|\\\*)*[^\s*])(?<!\\)\*/gm, '<b>$1</b>')
 			.replace(/(?<!\\)~(?=[^\s~])(([^~]|\\~)*[^\s~])(?<!\\)~/gm, '<s>$1</s>')
@@ -415,7 +420,7 @@ var Outline = {
 		var tab = ' '.repeat(this.tab_size || 8)
 		var level = function(lst, prev_sep=undefined, parent=[]){
 			while(lst.length > 0){
-				sep = lst[0].replace(/\t/g, tab)
+				sep = lst[0].replace(/\t/gm, tab)
 				// deindent...
 				if(prev_sep != null 
 						&& sep.length < prev_sep.length){
@@ -505,27 +510,43 @@ var Outline = {
 	// XXX add scrollIntoView(..) to nav...
 	keyboard: {
 		// vertical navigation...
-		// XXX wrapped line navigation is broken...
+		// XXX this is a bit hacky but it works -- the caret blinks at 
+		// 		start/end of block before switching to next, would be 
+		// 		nice po prevent this...
 		ArrowUp: function(evt){
-			var state = 'focused'
+			var that = this
 			var edited = this.get('edited')
 			if(edited){
-				if(!atLine(edited, 0)){
+				var c = edited.selectionStart
-					return }
+				var jump = function(){
-				/*/
+					if(edited.selectionStart == 0){
-				//*/
+						// needed to remember the position...
-				state = 'edited' }
+						edited.selectionStart = c
-			evt.preventDefault() 
+						edited.selectionEnd = c
-			this.get(state, -1)?.focus() },
+						that.get('edited', -1)?.focus() } }
-		ArrowDown: function(evt, offset=1){
+				this.carot_jump_edge_then_block ?
-			var state = 'focused'
+					jump()
+					: setTimeout(jump, 0)
+			} else {
+				evt.preventDefault() 
+				this.get('focused', -1)?.focus() } },
+		ArrowDown: function(evt){
+			var that = this
 			var edited = this.get('edited')
 			if(edited){
-				if(!atLine(edited, -1)){
+				var c = edited.selectionStart
-					return }
+				var jump = function(){
-				state = 'edited' }
+					if(edited.selectionStart == edited.value.length){
-			evt.preventDefault() 
+						// needed to remember the position...
-			this.get(state, 1)?.focus() },
+						edited.selectionStart = c
+						edited.selectionEnd = c
+						that.get('edited', 1)?.focus() } }
+				this.carot_jump_edge_then_block ?
+					jump()
+					: setTimeout(jump, 0)
+			} else {
+				evt.preventDefault() 
+				this.get('focused', 1)?.focus() } },
 
 		// horizontal navigation / collapse...
 		ArrowLeft: function(evt){
@@ -657,24 +678,20 @@ var Outline = {
 					// click inside element...
 					} else {
 						// XXX 
-					}
+					} }
 
-				// todo: toggle checkbox...
+				// edit of focus...
-				} else if(elem.type == 'checkbox'
+				// NOTE: this is usefull if element text is hidden but the 
-						&& elem.parentElement.parentElement.classList.contains('todo')){
+				// 		frame is still visible...
+				if(elem.getAttribute('tabindex')){
+					elem.querySelector('textarea').focus() }
+
+				// toggle checkbox...
+				if(elem.type == 'checkbox'){
 					var node = elem.parentElement.parentElement
 					var text = node.querySelector('textarea')
-					text.value = 
+					// get the checkbox order...
-						elem.checked ?
+					var i = [...node.querySelectorAll('input[type=checkbox]')].indexOf(elem)
-							text.value.replace(/^\s*TODO(\s*)/, 'DONE$1')
-							: text.value.replace(/^\s*DONE(\s*)/, 'TODO$1') 
-
-				// check: toggle checkbox...
-				} else if(elem.type == 'checkbox'
-						&& 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]'
 						: '[_]'
@@ -682,7 +699,7 @@ var Outline = {
 						return i-- == 0 ?
 							to
 							: m }
-					text.value = text.value.replace(/\[[X_]\]/g, toggle) } })
+					text.value = text.value.replace(/\[[Xx_]\]/g, toggle) } })
 		// heboard handling...
 		outline.addEventListener('keydown', 
 			function(evt){

experiments/outline-editor/index.html

@@ -36,14 +36,15 @@ var setup = function(){
 	- Bonsai
   - 
 - ## ToDo
+  - BUG? pressing down from a longer line will jump over a shorter line
+    - here is the line to jump from, for example from here
+      an we'll not get here...
   - ASAP: editor: bksapce/del at start/end of a block should join it with prev/next
   - ASAP: editor: pressing enter in text edit mode should split text into two blocks
   - ASAP: editor: shifting nodes up/down
   - ASAP: editor: `-` at start of line is interpreted as block marker...
-  - editor: caret
+  - ASAP: use \\t for indent...
-    - ~go to next/prev element's start/end when moving off last/first char~
+  - on item click, place the cursor where it was clicked before the code expanded...
-    - handle up/down on wrapped blocks
-      _...can't seem to get caret line in a non-hacky way_
   - ~editor: semi-live update styles~
   - need to reach checkboxes via keyboard
   - persistent empty first/last node (a button to create a new node)
@@ -96,6 +97,11 @@ var setup = function(){
         - b
         - c
 	  - > quoted text
+      - Notes
+		  - NOTE: a note text
+          - NOTE:
+            - a root note can also be empty
+            - click on the outer border to edit root
 	  - // C-style comment
 	  - ; ASM-style comment
 	  - XXX Highlight
@@ -104,12 +110,12 @@ var setup = function(){
 	- Markers
 	  - Basic "as soon as posible" (ASAP)
     - Basic inline *bold*, _italic_ and ~striked~
-	- To do items
-	  - TODO undone item
-        _(clicking the checkbox updates the item)_
-	  - DONE done item
-	  - [_] a different way to draw a checkbox
     - Inline [X] checkboxes [_]
+	- To do items/blocks
+	  - [_] undone item
+        _(clicking the checkbox updates the item)_
+	  - [X] done item
+	  - [_] we can also add inline [x] checkboxes
 	- link <a href="about:blank">example</a>
 	- markdown:
       - code blocks