bugfix + minor refactoring...

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);
 

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
@@ -110,7 +109,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)..._