minor tweaks and changes...

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

experiments/outline-editor/editor.css

@@ -250,9 +250,10 @@
 	font-size: 1em;
 }
 
+/* Lists... */
 /* XXX needs to be in the middle of the first span but with universal size... */
 .editor .outline .list-item:before,
-.editor .outline .list>[tabindex]>span:before {
+.editor .outline .list>[tabindex]>span:not(:empty):before {
 	--size: 0.5rem;
 
 	display: inline-block;
@@ -267,10 +268,16 @@
 	background: silver;
 }
 
+/* Highlightes... */
+.editor .outline .ASAP {
+	font-weight: bold;
+	background: yellow;
+}
 .editor .outline .XXX>span {
 	background: yellow;
 }
 
+/* Comments... */
 .editor.hide-comments .outline .comment {
 	display: none;
 }
@@ -279,7 +286,7 @@
 }
 
 
-/* checkboxes... */
+/* Checkboxes... */
 :root {
 	/* NOTE: this must have a unit... */
 	/* XXX move this to the config when fixed... */

experiments/outline-editor/editor.js

@@ -281,6 +281,10 @@ var Outline = {
 		var elem = {
 			collapsed: false,
 		}
+		// only whitespace -> keep element blank...
+		if(code.trim() == ''){
+			elem.text = ''
+			return elem }
 		var style = function(style, code=undefined){
 			style = [style].flat()
 			that.__styles = [...new Set([
@@ -321,13 +325,13 @@ var Outline = {
 			.replace(/^((\/\/|;)\s+.*)$/m, style('comment'))
 			.replace(/^XXX\s+(.*)$/m, style('XXX'))
 			.replace(/^(.*)\s*XXX$/m, style('XXX'))
+			.replace(/(\s*)ASAP(\s*)/m, '$1<span class="ASAP">ASAP</span>$2')
 			// elements...
 			.replace(/(\n|^)---*\h*(\n|$)/m, '$1<hr>')
 			// ToDo...
 			.replace(/^TODO\s*/m, style('todo', '<input type="checkbox">'))
 			.replace(/^DONE\s*/m, style('todo', '<input type="checkbox" checked>'))
 			// checkboxes...
-			// XXX these can not be clicked (yet)...
 			.replace(/\[_\]/gm, style('check', '<input class="check" type="checkbox">'))
 			.replace(/\[[X]\]/gm, style('check', '<input class="check" type="checkbox" checked>'))
 			// basic styling...

experiments/outline-editor/index.html

@@ -65,7 +65,7 @@ var setup = function(){
   - ~add optional text styling to nodes~
   - 
 - ## TEST
-  - Formatting:
+  - ### Formatting:
     - Styles
       - # Heading 1
       - ## Heading 2
@@ -83,6 +83,8 @@ var setup = function(){
 	  - XXX Highlight
 	- Line
 		- ---
+	- Markers
+	  - Basic "as soon as posible" (ASAP)
     - Basic inline *bold*, _italic_ and ~striked~
 	- To do items
 	  - TODO undone item
@@ -90,19 +92,21 @@ var setup = function(){
 	  - DONE done item
 	  - [_] a different way to draw a checkbox
     - Inline [X] checkboxes [_]
-  - A
+	- 
-    collapsed:: true
+  - ### Playground for testing
-    - a
+    - A
-    - b
+      collapsed:: true
-    - c
+      - a
-  - B
+      - b
-    - d
+      - c
-    - e
+    - B
-  - C
+      - d
-    - This is a line of text
+      - e
-    - This is a set
+    - C
-      text lines
+      - This is a line 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 Lots of text </div>
+      - This is a set
+        text lines
+      - 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 </div>
 	<!-- outline -->
 	<div class="outline"></div>
 	<!-- toolbar (optional) -->