experiments/outline-editor/editor.css

@@ -80,8 +80,6 @@
 	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... */
@@ -90,7 +88,7 @@
 	padding-bottom: var(--item-padding);
 	padding-left: 0;
 	padding-right: 0;
-	margin: var(--v-margin) 0;
+	margin: 0;
 	box-sizing: border-box;
 
 	font-family: sans-serif;
@@ -115,8 +113,6 @@
 .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 {
@@ -205,7 +201,6 @@ editor .outline .block:focus {
 
 	background: transparent;
 }
-
 /* left indicator */
 .editor .outline .block>.view:before {
 	justify-content: right;
@@ -299,12 +294,15 @@ editor .outline .block:focus {
 
 .editor .outline .quote>.text {
 	--indent: 1rem;
-	--v-margin: 0.7rem;
+	--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);
 
@@ -318,37 +316,28 @@ editor .outline .block:focus {
 /*---------------------------------------------------------- List ---*/
 
 .editor .outline .list-item>.view:before,
-.editor .outline .list>.children>.block>.view:before {
+.editor .outline .list>.children>.block>.view:not(:empty):before {
 	content: "◼";
 	color: gray;
 }
 .editor .outline 
 		.list>.children
-		>.list>.children>.block>.view:before {
+		>.list>.children>.block>.view:not(:empty):before {
 	content: "●";
 }
 .editor .outline 
 		.list>.children
 		>.list>.children
-		>.list>.children>.block>.view:before {
+		>.list>.children>.block>.view:not(:empty):before {
 	content: "○";
 }
 .editor .outline 
 		.list>.children
 		>.list>.children
 		>.list>.children
-		>.list>.children>.block>.view:before {
+		>.list>.children>.block>.view:not(:empty):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,13 +44,11 @@ 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)
@@ -62,13 +60,12 @@ 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,11 +46,12 @@ 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
@@ -68,6 +69,7 @@ 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
@@ -78,7 +80,6 @@ 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/>`
@@ -100,9 +101,6 @@ 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..._
@@ -112,6 +110,7 @@ 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)..._
@@ -142,18 +141,19 @@ 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
-  - DONE Format parser/generator
+  - Format parser/generator
-    collapsed:: true
+    - split out
-    - DONE split out
+    - define api
-	- DONE define api (see: `<editor>.__code2text__(..) / <editor>.__text2code__(..)`)
+    - experiment with clean _markdown_ as format
   - CSS
-    - separate out settings
     - separate out theming
+    - separate out settings
   - 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,6 +219,7 @@ var setup = function(){
             - z
           - c
 	  - > quote
+        - ASAP edit mode bullet is off...
       - Notes
 		  - NOTE: a note text
           - NOTE:
@@ -227,7 +228,7 @@ var setup = function(){
 	  - // C-style comment
 	  - ; ASM-style comment
 	  - XXX Highlight
-      - DONE Done (toggled via: `ctrl-d`)
+      - DONE Done
     - Basic inline *bold*, _italic_ and ~striked~
     - Marking ==text==
     - Code:
@@ -249,7 +250,6 @@ 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