lots of tweaks and changes...

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

experiments/outline-editor/editor.css

@@ -30,6 +30,7 @@
 	text-size-adjust: 180%;
 }
 
+:host,
 .editor {
 	--item-padding: calc(1em * var(--item-padding-ratio));
 }
@@ -38,6 +39,7 @@
 
 /*********************************************************************/
 
+:host,
 .editor {
 	display: block;
 	position: relative;
@@ -155,7 +157,7 @@
 				overflow: hidden;
 				resize: none;
 				/* show/hide node's view/code... */
-				/*.editor .outline .block>.code:focus+.view,*/
+				/*&:focus+.view,*/
 				&:not(:focus) {
 					opacity: 0;
 				}
@@ -326,6 +328,7 @@
 
 /*------------------------------------------------------ Headings ---*/
 
+:host .outline,
 .editor .outline {
 	.heading-1,
 	.heading-2,
@@ -368,6 +371,7 @@
 
 /*--------------------------------------------------------- Quote ---*/
 
+:host .outline .quote>.text,
 .editor .outline .quote>.text {
 	--indent: 1rem;
 	--v-margin: 0.7rem;
@@ -388,6 +392,7 @@
 
 /*---------------------------------------------------------- List ---*/
 
+:host .outline,
 .editor .outline {
 	.list-item>.view:before,
 	.list>.children {
@@ -425,6 +430,7 @@
 
 /*------------------------------------------------ Numbered lists ---*/
 
+:host .outline .numbered-list>.children,
 .editor .outline .numbered-list>.children {
 	counter-reset: numbered-list;
 
@@ -456,6 +462,7 @@
 
 /*------------------------------------------------------ hr block ---*/
 
+:host .outline,
 .editor .outline {
 	.list>.children>.block.hr>.view:before {
 		content: "";
@@ -468,6 +475,7 @@
 
 /*--------------------------------------------------------- Notes ---*/
 
+:host .outline .NOTE,
 .editor .outline .NOTE {
 	--margin: 1rem;
 	--padding-h: 2rem;
@@ -502,6 +510,7 @@
 
 /*-------------------------------------------------------- Status ---*/
 
+:host .outline .block,
 .editor .outline .block {
 	&.DONE>.view {
 		text-decoration: line-through;
@@ -515,6 +524,7 @@
 
 /*--------------------------------------------------- Highlightes ---*/
 
+:host .outline,
 .editor .outline {
 	.highlight {
 		font-weight: bold;
@@ -528,9 +538,11 @@
 
 /*------------------------------------------------------ Comments ---*/
 
+:host.hide-comments .outline .comment,
 .editor.hide-comments .outline .comment {
 	display: none;
 }
+:host .outline .comment>.view,
 .editor .outline .comment>.view {
 	color: silver;
 }
@@ -538,6 +550,7 @@
 
 /*---------------------------------------------------- Checkboxes ---*/
 
+:host .outline .block,
 .editor .outline .block {
 	&.todo>.view {
 		width: calc(
@@ -591,6 +604,7 @@
 
 /*---------------------------------------------------------- Code ---*/
 
+:host .outline .block>.view,
 .editor .outline .block>.view {
 	/* XXX for some reason if we omit & where not needed, colors will not apply... */
 	& pre,
@@ -613,6 +627,7 @@
 
 /*-------------------------------------------------------- Tables ---*/
 
+:host .outline .block>.view>table,
 .editor .outline .block>.view>table {
 	width: 100%;
 	border-collapse: collapse;
@@ -636,6 +651,7 @@
 
 /********************************************************* Testing ***/
 
+:host.show-click-zones .outline .block,
 .editor.show-click-zones .outline .block {
 	&>.view {
 		&:before,

experiments/outline-editor/editor.js

@@ -766,6 +766,9 @@ var Outline = {
 	change_interval: 1000,
 	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,
 
 
 	// Plugins...
@@ -1077,7 +1080,12 @@ var Outline = {
 			if(this.__code2html__){
 				// NOTE: we are ignoring the .collapsed attr here 
 				parsed = this.__code2html__(data.text, {...data})
-				html.innerHTML = parsed.text
+				html.innerHTML = 
+					parsed.text.length == 0 ?
+						parsed.text
+						// NOTE: adding a space here is done to prevent the browser 
+						// 		from hiding the last newline...
+						: parsed.text + ' '
 				// heading...
 				this.__styles != null
 					&& node.classList.remove(...this.__styles)
@@ -1085,7 +1093,12 @@ var Outline = {
 					&& node.classList.add(...parsed.style)
 				delete parsed.style
 			} else {
-				html.innerHTML = data.text }
+				html.innerHTML = 
+					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
 			// XXX this does not seem to work until we click in the textarea...
 			text.autoUpdateSize() }
@@ -2021,7 +2034,6 @@ var Outline = {
 						elem.selectionStart = elem.value.length
 						elem.selectionEnd = elem.value.length 
 					} else {
-						console.log('---', c)
 						var m = getMarkdownOffset(elem.value, view.innerText, c)
 						elem.focus()
 						elem.selectionStart = c + m
@@ -2240,6 +2252,10 @@ Object.assign(
 		//var toolbar = document.createElement('div')
 		//toolbar.classList.add('toolbar')
 
+		// XXX can't yet get rid of the editor element here... 
+		// 		- handling autofocus of host vs. shadow???
+		// 		- CSS not working correctly yet...
+		// 		...is this feasible???
 		editor.append(
 			style,
 			header,
@@ -2275,11 +2291,23 @@ Object.assign(
 					return this.dom?.querySelector('.toolbar') },
 				set toolbar(val){},
 
+				// NOTE: this is here to break recursion of trying to set 
+				// 		html's value both in .code that is called both when
+				// 		setting .value and from .attributeChangedCallback(..)
+				get __code(){
+					return this.code },
+				set __code(value){
+					if(value == null){
+						return }
+					// XXX is this the right way to do this???
+					this.__sessionStorage
+						&& (sessionStorage[this.__sessionStorage] = value)
+					this.__localStorage
+						&& (localStorage[this.__localStorage] = value) },
 				get code(){
 					return this.hasAttribute('value') ?
 						this.getAttribute('value')
 						: HTMLElement.decode(this.innerHTML) },
-				// XXX
 				set code(value){
 					if(value == null){
 						return }
@@ -2288,11 +2316,7 @@ Object.assign(
 						this.setAttribute('value', value)
 					} else {
 						this.innerHTML = HTMLElement.encode(value) } 
-					// XXX is this the right way to do this???
+					this.__code = value },
-					this.__sessionStorage
-						&& (sessionStorage[this.__sessionStorage] = value)
-					this.__localStorage
-						&& (localStorage[this.__localStorage] = value) },
 
 				// XXX do we need this???
 				// 		...rename .code -> .value ???
@@ -2309,20 +2333,21 @@ Object.assign(
 
 				// XXX do we need to before == after ???
 				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(..)
-						this.code = localStorage[after] ?? '' }
+						value = this.code = localStorage[after] ?? '' }
 
-					if(name == 'session-storage'){
+					if(value && name == 'session-storage'){
 						this.__sessionStorage = after
-						this.code = sessionStorage[after] ?? '' }
+						value = this.code = sessionStorage[after] ?? '' }
-
-					if(name == 'value'){
-						console.log('---', before, '->', after) }
 
+					if(!value && name == 'value'){
+						// see notes for .__code
+						value = this.__code = after }
 				},
 
 			},

experiments/outline-editor/generic.js

@@ -41,7 +41,7 @@ HTMLElement.decode = function(str){
 	var span = document.createElement('span')
 	// XXX
 	return str
-		.replace(/%lt;/g, '<')
+		.replace(/&lt;/g, '<')
 		.replace(/&gt;/g, '>') 
 		.replace(/&amp;/g, '&') }
 	/*/

experiments/outline-editor/index.html

@@ -48,8 +48,7 @@ var setup = function(){
   - 
 - ## Bugs:
   focused:: true
-  - BUG: html decode/encode broken...
+  - BUG: `.trim_block_text` should not affect editing...
-    - `HTMLElement.decode(HTMLElement.encode('a\nb\nc')) -> 'abc'` and not `'a\nb\nc'`!!!
   - BUG: mobile browsers behave quite chaotically ignoring parts of the styling...
     - FF:
       - zooming on edited field
@@ -59,31 +58,42 @@ var setup = function(){
   -
 - ## ToDo:
   - trailing whitespace is ignored in `.view`... (BUG?)
-    - this node has a second empty line
+    - demos:
-      
+      -
-    - there are several ways to deal with this:#
+        leading whitespace...
-      - remove trailing whitespace completely on refocus (a-la logseq)
+      - 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 
-      - keep current behavior
+      - REJECT remove trailing whitespace completely on refocus (a-la logseq)
-    -
+      - REJECT keep current behavior
-      _BTW: leading whitespace is shown..._
+    - I do not believe in keeping whitespace in edit and hiding it in view (POLS)
-  - add options to save to `.sessionStorage` / `.localStorage`
-  - Q: should we select text without first focusing??
-    - _...logseq does not do this either_
   - custom element / web component
+    - 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 
     - DONE data interface:
 	  collapsed:: true
       - the "natural" way to pass data is to use the same mechanism as `<textarea>` the problem is that we can't extend `HTMLTextAreaElement` as it can not have shadow dom (reject?)
       - adding an explicit textarea element is an odd requirement (reject?)
       - seems that the least bad way to go is to use the `value` attribute
     - DONE API: directly mixin Outline?
-    - `.value` / `.code` should be both updated internally and also load new content when updated externally -- not yet sure how...
+    - DONE `.value` / `.code` should be both updated internally and also load new content when updated externally -- not yet sure how...
     - events 
     - test nesting...
     - 
   - selection
     - multiple node selection (via shift+motion)
     - touch/mouse (???)
+  - Q: should we select text (mouse/touch) without first focusing??
+    - _...logseq does not do this either_
+    - now this is possible by dragging from a click zone...
   - copy/paste nodes/trees
   - numbered lists: add counters to a depth of 6-7...
     - _or find a way to make them repeat..._
@@ -137,6 +147,7 @@ var setup = function(){
   - empty item height is a bit off...
   - search?
     - _...not sure if search should be internal or external yet..._
+  - 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
     - <- place cursor here and press enter
@@ -223,6 +234,7 @@ var setup = function(){
     - DONE split out
     - DONE define api (see: `<editor>.__code2text__(..) / <editor>.__text2code__(..)`)
   - CSS
+    - DONE nested rules (experiment)
     - separate out settings
     - separate out theming
   - Actions -- move user actions (code in `.keyboard`) into methods
@@ -422,7 +434,11 @@ var setup = function(){
 
 <hr>
 
-<outline-editor session-storage="outline-editor-test"></outline-editor>
+<outline-editor 
+	session-storage="outline-editor-test" 
+	value="- ## Session storage
+	- default value, edit to change
+	- this should survive reloads"></outline-editor>
 
 
 </body>