minor fix...

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,
@@ -274,12 +277,16 @@ editor .outline [tabindex]:focus {
 /* Quote... */
 .editor .outline .quote>span,
 .editor .outline .quote>textarea {
-	--item-padding-ratio: 0.7;
 	--indent: 1rem;
+	--margin: 0.7rem;
+	--item-padding-ratio: 0.7;
 
 	/* XXX for some reason if this is not set here it will not see the new --item-padding-ratio */
 	--item-padding: calc(1rem * var(--item-padding-ratio));
 
+	margin-top: var(--margin);
+	margin-bottom: var(--margin);
+
 	padding: var(--item-padding) 1.5rem;
 	color: rgba(0,0,0,0.8);
 
@@ -307,9 +314,38 @@ 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... */
+/* XXX need to account for nesting... (???) */
+.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 +364,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));
-	/* align todo checkboxes to indnt (otherwise they are on the indent) */
-	margin-left: var(--checkbox-size);
-	padding-left: calc(
-		var(--item-padding)
-		+ var(--checkbox-margin) * 2);
+	width: calc(
+		100% 
+		- var(--checkbox-size)
+		- var(--checkbox-margin));
+	margin-left: calc(
+		var(--checkbox-size)
+		+ var(--checkbox-margin));
 }
 .editor .outline [tabindex].check>span>input[type=checkbox],
 .editor .outline [tabindex].todo>span>input[type=checkbox] {
@@ -360,22 +389,17 @@ editor .outline [tabindex]:focus {
 }
 .editor .outline [tabindex].todo>span>input[type=checkbox]:first-child {
 	margin-left: calc(
-		var(--checkbox-size) * -1
-		- var(--item-padding)
-		- var(--checkbox-margin) * 2);
-	margin-right: calc(
-		var(--item-padding)
-		+ var(--checkbox-margin));
+		-1 * var(--checkbox-size)
+		- var(--checkbox-margin));
 }
 /* correct the left click zone... */
 .editor .outline [tabindex].todo>span:before {
-	margin-left: calc(-1 * var(--checkbox-size));
-}
-/* XXX need to remove left margin from strictly the first itme in block... */
-.editor .outline [tabindex].check>span>input[type=checkbox] {
-	/*margin-left: 0;*/
+	margin-left: calc(
+		-1 * var(--checkbox-size)
+		- var(--checkbox-margin));
 }
 
+
 /* code... */
 .editor .outline [tabindex]>span code {
 	padding: 0.1em 0.3em;
@@ -385,7 +409,8 @@ editor .outline [tabindex]:focus {
 }
 
 
-/*********************************************************************/
+
+/********************************************************* Testing ***/
 
 .editor.show-click-zones .outline [tabindex]>span:before,
 .editor.show-click-zones .outline [tabindex]>span:after {
@@ -398,3 +423,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(){
@@ -174,9 +175,16 @@ var Outline = {
 			|| node },
 	at: function(index, nodes='visible'){
 		return this.get(nodes).at(index) },
-
-	focus: function(node='focused', offset){},
-	edit: function(node='focused', offset){},
+	focus: function(node='focused', offset){
+		var elem = this.get(...arguments)
+		elem?.focus()
+		return elem },
+	edit: function(node='focused', offset){
+		var elem = this.get(...arguments)
+		if(elem.nodeName != 'TEXTAREA'){
+			elem = elem.querySelector('textarea') }
+		elem?.focus()
+		return elem },
 
 	update: function(node='focused', data){
 		var node = this.get(node)
@@ -322,29 +330,38 @@ var Outline = {
 			//.replace(/^(?<!\\)[-\*]\s+(.*)$/m, style('list-item'))
 			.replace(/^\s*(.*)(?<!\\):\s*$/m, style('list'))
 			// style: misc...
-			.replace(/^(?<!\\)>\s+(.*)$/m, style('quote'))
-			.replace(/^(?<!\\)((\/\/|;)\s+.*)$/m, style('comment'))
-			.replace(/^(?<!\\)XXX\s+(.*)$/m, style('XXX'))
+			.replace(/^\s*(?<!\\)>\s+(.*)$/m, style('quote'))
+			.replace(/^\s*(?<!\\)((\/\/|;)\s+.*)$/m, style('comment'))
+			.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*)/gm, 
+				'$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...
-			.replace(/(?<!\\)\[_\]/gm, 
-				style('check', '<input class="check" type="checkbox">'))
-			.replace(/(?<!\\)\[[X]\]/gm, 
-				style('check', '<input class="check" type="checkbox" checked>'))
+			// inline checkboxes...
+			.replace(/\s*(?<!\\)\[[_ ]\]\s*/gm, 
+				style('check', '<input type="checkbox">'))
+			.replace(/\s*(?<!\\)\[[Xx]\]\s*/gm, 
+				style('check', '<input type="checkbox" checked>'))
 			// basic styling...
 			.replace(/(?<!\\)\*(?=[^\s*])(([^*]|\\\*)*[^\s*])(?<!\\)\*/gm, '<b>$1</b>')
 			.replace(/(?<!\\)~(?=[^\s~])(([^~]|\\~)*[^\s~])(?<!\\)~/gm, '<s>$1</s>')
 			.replace(/(?<!\\)_(?=[^\s_])(([^_]|\\_)*[^\s_])(?<!\\)_/gm, '<i>$1</i>') 
 			.replace(/(?<!\\)`(?=[^\s_])(([^`]|\\`)*[^\s_])(?<!\\)`/gm, '<code>$1</code>') 
+			// characters...
+			// XXX use ligatures for these???
+			.replace(/(?<!\\)---(?!-)/gm, '&mdash;') 
+			.replace(/(?<!\\)--(?!-)/gm, '&ndash;') 
 			// quoting...
+			// NOTE: this must be last...
 			.replace(/(?<!\\)\\(.)/gm, '$1') 
 		return elem },
 	// XXX essentially here we need to remove service stuff like some 
@@ -415,7 +432,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 +522,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)){
-					return }
-				/*/
-				//*/
-				state = 'edited' }
-			evt.preventDefault() 
-			this.get(state, -1)?.focus() },
-		ArrowDown: function(evt, offset=1){
-			var state = 'focused'
+				var c = edited.selectionStart
+				var jump = function(){
+					if(edited.selectionStart == 0){
+						// needed to remember the position...
+						edited.selectionStart = c
+						edited.selectionEnd = c
+						that.focus('edited', -1) } }
+				this.carot_jump_edge_then_block ?
+					jump()
+					: setTimeout(jump, 0)
+			} else {
+				evt.preventDefault() 
+				this.focus('focused', -1) } },
+		ArrowDown: function(evt){
+			var that = this
 			var edited = this.get('edited')
 			if(edited){
-				if(!atLine(edited, -1)){
-					return }
-				state = 'edited' }
-			evt.preventDefault() 
-			this.get(state, 1)?.focus() },
+				var c = edited.selectionStart
+				var jump = function(){
+					if(edited.selectionStart == edited.value.length){
+						// needed to remember the position...
+						edited.selectionStart = c
+						edited.selectionEnd = c
+						that.focus('edited', 1) } }
+				this.carot_jump_edge_then_block ?
+					jump()
+					: setTimeout(jump, 0)
+			} else {
+				evt.preventDefault() 
+				this.focus('focused', 1) } },
 
 		// horizontal navigation / collapse...
 		ArrowLeft: function(evt){
@@ -535,8 +568,7 @@ var Outline = {
 				if(edited.selectionStart == edited.selectionEnd
 						&& edited.selectionStart == 0){
 					evt.preventDefault()
-					edited = this.get('edited', 'prev') 
-					edited.focus() 
+					edited = this.focus('edited', 'prev') 
 					edited.selectionStart = 
 						edited.selectionEnd = edited.value.length + 1 }
 				return }
@@ -545,7 +577,7 @@ var Outline = {
 					&& this.get().getAttribute('collapsed') == null
 					&& this.get('children').length > 0) ?
 				this.toggleCollapse(true)
-				: this.get('parent')?.focus() },
+				: this.focus('parent') },
 		ArrowRight: function(evt){
 			var edited = this.get('edited')
 			if(edited){
@@ -553,17 +585,15 @@ var Outline = {
 				if(edited.selectionStart == edited.selectionEnd
 						&& edited.selectionStart == edited.value.length){
 					evt.preventDefault()
-					edited = this.get('edited', 'next') 
-					edited.focus() 
+					edited = this.focus('edited', 'next') 
 					edited.selectionStart = 
 						edited.selectionEnd = 0 }
 				return }
 			if(this.right_key_expands){
 				this.toggleCollapse(false) 
-				var child = this.get('children')[0]
-				child?.focus()
+				var child = this.focus('children')[0]
 				if(!child){
-					this.get('next')?.focus() }
+					this.focus('next') }
 			} else {
 				evt.shiftKey ?
 					this.toggleCollapse(false)
@@ -657,24 +687,20 @@ var Outline = {
 					// click inside element...
 					} else {
 						// XXX 
-					}
+					} }
 
-				// todo: toggle checkbox...
-				} else if(elem.type == 'checkbox'
-						&& elem.parentElement.parentElement.classList.contains('todo')){
+				// edit of focus...
+				// NOTE: this is usefull if element text is hidden but the 
+				// 		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 = 
-						elem.checked ?
-							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)
+					// get the checkbox order...
+					var i = [...node.querySelectorAll('input[type=checkbox]')].indexOf(elem)
 					var to = elem.checked ?
 						'[X]'
 						: '[_]'
@@ -682,7 +708,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){
@@ -748,7 +774,7 @@ var Outline = {
 			var refocusNode = function(){
 				focus_textarea ?
 					editor.get().querySelector('textarea').focus() 
-					: editor.get().focus()
+					: editor.focus()
 				focus_textarea = undefined } 
 			// cache the focused node type before focus changes...
 			toolbar.addEventListener('mousedown', cahceNodeType)

experiments/outline-editor/index.html

@@ -35,20 +35,22 @@ var setup = function(){
 	- Tomboy
 	- Bonsai
   - 
-- ## ToDo
+- ## ToDo:
+  - BUG? odd/random focus jumps on refocusing page (can't reporduce yet)
+  - 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
-    - ~go to next/prev element's start/end when moving off last/first char~
-    - handle up/down on wrapped blocks
-      _...can't seem to get caret line in a non-hacky way_
+  - ASAP: use \\t for indent...
+  - on item click, place the cursor where it was clicked before the code expanded...
   - ~editor: semi-live update styles~
   - need to reach checkboxes via keyboard
   - persistent empty first/last node (a button to create a new node)
-  - add completion percentage to blocks with todo's nested:
-    - `[%]`, `%%`, or something similar...
+  - add completion percentage to blocks with todo's nested
+    - _...use `[%]`, `%%`, or something similar..._
   - read-only mode
   - should bulets be on the same level as nodes or offset??
     - A) justified to bulet:
@@ -96,26 +98,30 @@ 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
 	- Line
 		- ---
-	- Markers
-	  - Basic "as soon as posible" (ASAP)
+	- Markers: ASAP, BUG, FIX, HACK, STUB, WARNING, and CAUTION 
     - 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
       - numbered lists
-      - alerts
       - tables
+      - code blocks
+      - ~alerts~
       - footnotes??
 	- 
   - ### Playground for testing