notes + css cleanup + tweaks...

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

experiments/outline-editor/editor.css

@@ -80,6 +80,8 @@
 	margin-left: var(--item-indent);
 }
 .editor .outline .block>.text {
+	--v-margin: 0;
+
 	display: block;
 	width: 100%;
 	/* XXX this is a tiny bit off and using .code's height here is off too... */
@@ -88,7 +90,7 @@
 	padding-bottom: var(--item-padding);
 	padding-left: 0;
 	padding-right: 0;
-	margin: 0;
+	margin: var(--v-margin) 0;
 	box-sizing: border-box;
 
 	font-family: sans-serif;
@@ -113,6 +115,8 @@
 .editor .outline .block>.code:focus+.view:before,
 .editor .outline .block>.code:focus+.view:after {
 	visibility: visible;
+	margin-top: calc(-1 * var(--v-margin));
+	margin-bottom: calc(-1 * var(--v-margin));
 }
 /* click through the .view text to the .code */
 .editor .outline .block>.view {
@@ -201,6 +205,7 @@ editor .outline .block:focus {
 
 	background: transparent;
 }
+
 /* left indicator */
 .editor .outline .block>.view:before {
 	justify-content: right;
@@ -294,15 +299,12 @@ editor .outline .block:focus {
 
 .editor .outline .quote>.text {
 	--indent: 1rem;
-	--margin: 0.7rem;
+	--v-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);
 
@@ -316,28 +318,37 @@ editor .outline .block:focus {
 /*---------------------------------------------------------- List ---*/
 
 .editor .outline .list-item>.view:before,
-.editor .outline .list>.children>.block>.view:not(:empty):before {
+.editor .outline .list>.children>.block>.view:before {
 	content: "◼";
 	color: gray;
 }
 .editor .outline 
 		.list>.children
-		>.list>.children>.block>.view:not(:empty):before {
+		>.list>.children>.block>.view:before {
 	content: "●";
 }
 .editor .outline 
 		.list>.children
 		>.list>.children
-		>.list>.children>.block>.view:not(:empty):before {
+		>.list>.children>.block>.view:before {
 	content: "○";
 }
 .editor .outline 
 		.list>.children
 		>.list>.children
 		>.list>.children
-		>.list>.children>.block>.view:not(:empty):before {
+		>.list>.children>.block>.view:before {
 	content: "▪";
 }
+/* hide bullets on empty nodes unless they are edited... */
+.editor .outline .list>.children>.block>.code:not(:focus)+.view:empty:before {
+	content: "";
+}
+/* hide bullets on empty nodes... *//*
+.editor .outline .list>.children>.block>.view:empty:before {
+	content: "";
+}
+*/
 
 
 /*------------------------------------------------ Numbered lists ---*/

experiments/outline-editor/editor.js

@@ -44,11 +44,13 @@ function clickPoint(x,y){
 // box corresponds the to desired coordinates. This accounts for nested 
 // elements.
 //
+// XXX might be a good idea to tweak this just a bit (1/2 letter) to the left...
 // XXX HACK -- is there a better way to do this???
 var getCharOffset = function(elem, x, y, c){
 	c = c ?? 0
 	var r = document.createRange()
 	for(var e of [...elem.childNodes]){
+		// text node...
 		if(e instanceof Text){
 			for(var i=0; i < e.length; i++){
 				r.setStart(e, i)
@@ -60,12 +62,13 @@ var getCharOffset = function(elem, x, y, c){
 						&& b.bottom >= y){
 					return c + i } }
 			c += i
-
+		// html node...
 		} else {
 			var res = getCharOffset(e, x, y, c)
 			if(!(res instanceof Array)){
 				return res } 
 			;[c, res] = res } }
+	// no result was found...
 	return arguments.length > 3 ?
 		[c, null]
 		: null }

experiments/outline-editor/index.html

@@ -46,12 +46,11 @@ var setup = function(){
 - ## Bugs:
   - BUG: editor: FF seems to update the style every other key press -- should be live...
   - BUG: last node seems to get trash tags added to it's end...
-  - BUG: quote block bullet is off in edit mode:
-    - > quoted text
   -
 - ## ToDo:
   - ASAP: scroll into view is bad...
   - ASAP: mobile browsers behave quite chaotically ignoring parts of the styling...
+  - ASAP: tweak the getCharOffset(..) by about 1/2 a letter to the left...
   - FEATURE: read-only mode
   - export html
     - embed css
@@ -69,7 +68,6 @@ var setup = function(){
       code
       ```
     - _bullet should be either in the middle of the block or at the first line of code (preferred)..._
-  - show list bullet if node is empty but edited... (???)
   - editor as a custom element...
   - Nerd fonts (option???)
   - multiple node selection
@@ -80,6 +78,7 @@ var setup = function(){
     - indent/deindent
     - edit node
   - auto-shift done blocks to the end of siblings... (option?)
+    - ...or should this be `sort:: done` -- i.e. sort children by done status??
   - FEATURE? block templates...
     collapsed:: true
 	- something like: `TPL: [_] <editable/> -- <editable/>`
@@ -101,6 +100,9 @@ var setup = function(){
            block text
     - NOTE: this is only a problem if making list-items manually -- disable???
   - empty item height is a bit off...
+  - DONE show list bullet if node is empty but edited...
+    collapsed:: true
+    - _...not sure which is best, so both options are available, see: `editor.css`_
   - DONE Q: can we get the caret line in a textarea???
     collapsed:: true
     - _...this will fix a lot of issues with moving between blocks in edit mode..._
@@ -110,7 +112,6 @@ var setup = function(){
       - #### Click in this line and see where the cursor goes
     - _not sure how..._
   - DONE click to select/edit node must retain click position in text...
-    - _...need a bit of tuning -- where in the char a click is made and where the cursor is placed..._
   - DONE checkbox navigation via `alt-<arrow>`
 	collapsed:: true
     - _might be a good idea to include also TODO/DONE navigation -- not yet sure how to mark undone blocks (i.e. the ones marked with TODO in Logseg)..._
@@ -141,19 +142,18 @@ var setup = function(){
 	- plugin handler sequencing (see: `<editor>.setup(..)`)
 	- DONE plugin handler canceling (see: `<editor>.runPlugins(..)`)
   - DONE Item parser (`.__code2html__(..)`)
+    collapsed:: true
     - DONE split out
     - DONE define a way to extend/stack parsers
-  - Format parser/generator
+  - DONE Format parser/generator
-    - split out
+    collapsed:: true
-    - define api
+    - DONE split out
-    - experiment with clean _markdown_ as format
+	- DONE define api (see: `<editor>.__code2text__(..) / <editor>.__text2code__(..)`)
   - CSS
-    - separate out theming
     - separate out settings
+    - separate out theming
   - Actions -- move user actions (code in `.keyboard`) into methods
   - Move to `keyboard.js`
-  - Plugin architecture
-    - Q: do we need `features.js` and/or `actions.js`
   - Q: do we need a concatenative API??
 	- `<block>.get() -> <block>`
   - Docs
@@ -219,7 +219,6 @@ var setup = function(){
             - z
           - c
 	  - > quote
-        - ASAP edit mode bullet is off...
       - Notes
 		  - NOTE: a note text
           - NOTE:
@@ -228,7 +227,7 @@ var setup = function(){
 	  - // C-style comment
 	  - ; ASM-style comment
 	  - XXX Highlight
-      - DONE Done
+      - DONE Done (toggled via: `ctrl-d`)
     - Basic inline *bold*, _italic_ and ~striked~
     - Marking ==text==
     - Code:
@@ -250,6 +249,7 @@ var setup = function(){
             _(clicking the checkbox updates the item)_
 	      - [X] done item
 	      - [_] we can also add inline [x] checkboxes and states: [%]
+        - navigating checkboxes in view mode can be done via `ctrl-left` / `ctrl-right` and toggling is done via `space`
 	- links
       - [example](about:blank)
       - https://example.com