experiments/outline-editor/editor.js

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

experiments/outline-editor/index.html

@@ -48,8 +48,7 @@ var setup = function(){
   - 
 - ## Bugs:
   focused:: true
-  - BUG: if changing style expands the block vertically it will not update size...
+  - BUG: `.trim_block_text` should not affect editing...
-    - # 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
@@ -58,8 +57,24 @@ 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 
@@ -85,8 +100,6 @@ 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..._
@@ -134,24 +147,6 @@ 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
@@ -425,7 +420,6 @@ var setup = function(){
 
 <hr>
 
-<!-- XXX this is broken... -->
 <outline-editor>
 <textarea>- ## code enclosed in `<textarea>` element
 	- code is treated as-is