tweaks, notes, and fixes...

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

experiments/outline-editor/editor.js

@@ -1099,8 +1099,7 @@ var Outline = {
 						// 		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.autoUpdateSize() }
+			text.updateSize() }
 
 		for(var [attr, value] of Object.entries({...data, ...parsed})){
 			if(attr == 'children' || attr == 'text'){
@@ -1590,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)
 
@@ -1857,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()
@@ -2129,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)
-						elem.updateSize() }, 0) }
+						that.update(elem.parentElement) }, 0) }
 				that.runPlugins('__keyup__', evt, that, elem) })
 
 		// toggle view/code of nodes...
@@ -2336,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(..)
-						// 		...the problem is that if we change the attr 
-						// 		we need to call .load(..)
-						value = this.code = localStorage[after] ?? '' }
+						// NOTE: we setting .code here because we will 
+						// 		.load(..) at .setup(..)
+						sessionStorage[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,6 +48,8 @@ var setup = function(){
   - 
 - ## Bugs:
   focused:: true
+  - 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,6 +59,7 @@ var setup = function(){
   -
 - ## ToDo:
   - 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 
@@ -82,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..._
@@ -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