tweaks, notes, and fixes...

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

experiments/outline-editor/editor.js

@@ -767,7 +767,6 @@ var Outline = {
 	tab_size: 4,
 	carot_jump_edge_then_block: false,
 	// XXX not sure what should the default be...
-	// XXX this should not affect editing...
 	trim_block_text: false,
 
 
@@ -1081,7 +1080,7 @@ var Outline = {
 				// NOTE: we are ignoring the .collapsed attr here 
 				parsed = this.__code2html__(data.text, {...data})
 				html.innerHTML = 
-					parsed.text.length == 0 ?
+					parsed.text == '' ?
 						parsed.text
 						// NOTE: adding a space here is done to prevent the browser 
 						// 		from hiding the last newline...
@@ -1094,14 +1093,13 @@ var Outline = {
 				delete parsed.style
 			} else {
 				html.innerHTML = 
-					data.text.length == 0 ?
+					data.text == '' ?
 						data.text
 						// NOTE: adding a space here is done to prevent the browser 
 						// 		from hiding the last newline...
 						: data.text + ' ' }
 			text.value = data.text 
-			// XXX this does not seem to work until we click in the textarea...
+			text.updateSize() }
-			text.autoUpdateSize() }
 
 		for(var [attr, value] of Object.entries({...data, ...parsed})){
 			if(attr == 'children' || attr == 'text'){
@@ -1362,7 +1360,7 @@ var Outline = {
 
 		// only whitespace -> keep element blank...
 		if(code.trim() == ''){
-			elem.text = ''
+			elem.text = code
 			return elem }
 
 		// helpers...
@@ -1412,8 +1410,11 @@ var Outline = {
 		return code 
 			.replace(/(\n\s*)-/g, '$1\\-') },
 	__text2code__: function(text){
-		return text 
+		text = text 
-			.replace(/(\n\s*)\\-/g, '$1-') },
+			.replace(/(\n\s*)\\-/g, '$1-') 
+		return this.trim_block_text ?
+			text.trim()
+			: text },
 
 	// serialization...
 	data: function(elem, deep=true){
@@ -1588,7 +1589,10 @@ var Outline = {
 		var children = document.createElement('div')
 		children.classList.add('children')
 		children.setAttribute('tabindex', '-1')
-		block.append(code, html, children)
+		block.append(
+			code, 
+			html, 
+			children)
 
 		this.update(block, data)
 
@@ -1855,6 +1859,11 @@ var Outline = {
 			if(edited){
 				if(evt.ctrlKey
 						|| evt.shiftKey){
+					var that = this
+					// NOTE: setTimeout(..) because we need the input of 
+					// 		the key...
+					setTimeout(function(){
+						that.update(edited) }, 0)
 					return }
 				// split text...
 				evt.preventDefault()
@@ -2127,8 +2136,7 @@ var Outline = {
 					// NOTE: for some reason setting the timeout here to 0
 					// 		makes FF sometimes not see the updated text...
 					setTimeout(function(){
-						that.update(elem.parentElement)
+						that.update(elem.parentElement) }, 0) }
-						elem.updateSize() }, 0) }
 				that.runPlugins('__keyup__', evt, that, elem) })
 
 		// toggle view/code of nodes...
@@ -2159,7 +2167,10 @@ var Outline = {
 				if(elem.classList.contains('code')){
 					var block = that.get(elem)
 					// clean out attrs...
-					elem.value = that.parseBlockAttrs(elem.value).text
+					elem.value = 
+						that.trim_block_text ?
+							that.parseBlockAttrs(elem.value).text.trim()
+							: that.parseBlockAttrs(elem.value).text
 					that.update(block) 
 					// undo...
 					if(elem.value != elem.dataset.original){
@@ -2331,23 +2342,26 @@ Object.assign(
 					setTimeout(function(){
 						that.load(that.code) }, 0) },
 
-				// XXX do we need to before == after ???
+				// XXX do we need to before == after check???
 				attributeChangedCallback(name, before, after){
-					var value
 					if(name == 'local-storage'){
 						this.__localStorage = after
-						// XXX setting code here because we will load at .setup(..)
+						// NOTE: we setting .code here because we will 
-						// 		...the problem is that if we change the attr 
+						// 		.load(..) at .setup(..)
-						// 		we need to call .load(..)
+						sessionStorage[after]
-						value = this.code = localStorage[after] ?? '' }
+							&& (this.code = sessionStorage[after]) }
 
-					if(value && name == 'session-storage'){
+					if(name == 'session-storage'){
 						this.__sessionStorage = after
-						value = this.code = sessionStorage[after] ?? '' }
+						sessionStorage[after]
+							&& (this.code = sessionStorage[after]) }
 
-					if(!value && name == 'value'){
+					// NOTE: if other sources are active but unset this 
+					// 		should provide the default, otherwise it will 
+					// 		get overwritten by the value in .code by .load(..)
+					if(name == 'value'){
 						// see notes for .__code
-						value = this.__code = after }
+						this.__code = after }
 				},
 
 			},

experiments/outline-editor/index.html

@@ -48,7 +48,8 @@ var setup = function(){
   - 
 - ## Bugs:
   focused:: true
-  - BUG: `.trim_block_text` should not affect editing...
+  - BUG: if changing style expands the block vertically it will not update size...
+    - # when edited, the text here will get re-wrapped but will not get resized
   - BUG: mobile browsers behave quite chaotically ignoring parts of the styling...
     - FF:
       - zooming on edited field
@@ -57,24 +58,8 @@ var setup = function(){
       - side margins are a bit too large (account for toolbat to the right)
   -
 - ## ToDo:
-  - trailing whitespace is ignored in `.view`... (BUG?)
-    - demos:
-      -
-        leading whitespace...
-      - trailing whitespace...
-        
-      - empty block is not correctly shown\:
-        - 
-          
-          
-    - _it seams that HTML ignores the last newline if it is not followed by anything_
-    - there are four ways to deal with this:#
-      - trim whitespace on refocus
-      - show whitespace in both modes 
-      - REJECT remove trailing whitespace completely on refocus (a-la logseq)
-      - REJECT keep current behavior
-    - I do not believe in keeping whitespace in edit and hiding it in view (POLS)
   - custom element / web component
+    - BUG/race: the non-value versions of custom elem seem to sometimes get loaded as empty...
     - Q: can we get rid of the editor block??:
       - CSS breaks if we do...
       - need to figure out a way to handle autofocus for host/editor uniformly 
@@ -100,6 +85,8 @@ var setup = function(){
   - FEATURE: read-only mode
   - auto-shift done blocks to the end of siblings... (option?)
     - ...or should this be `sort:: done` -- i.e. sort children by done status??
+  - `backspace`/`delete` in block contract the field with a delay...
+    - _...looks like we are updating size on keyup..._
   - codeblock as a block
     _...if only whitespace before/after clear it and style whole block..._
     _...might be a good idea to do this with codeblock at start/end of block..._
@@ -147,6 +134,24 @@ var setup = function(){
   - empty item height is a bit off...
   - search?
     - _...not sure if search should be internal or external yet..._
+  - DONE trailing whitespace is ignored in `.view`...
+    collapsed:: true
+    - demos:
+      -
+        leading whitespace...
+      - trailing whitespace...
+        
+      - empty block\:
+        - 
+          
+          
+    - _it seams that HTML ignores the last newline if it is not followed by anything_
+    - there are four ways to deal with this:#
+      - trim whitespace on refocus (option)
+      - show whitespace in both modes (option)
+      - REJECT remove trailing whitespace completely on refocus (a-la logseq)
+      - REJECT keep current behavior
+    - I do not believe in keeping whitespace in edit and hiding it in view (POLS)
   - DONE add options to save to `.sessionStorage` / `.localStorage`
   - DONE might be a good idea to focus the prev (empty) node if pressing `Enter` at 0 position
     collapsed:: true
@@ -420,6 +425,7 @@ var setup = function(){
 
 <hr>
 
+<!-- XXX this is broken... -->
 <outline-editor>
 <textarea>- ## code enclosed in `<textarea>` element
 	- code is treated as-is