custom element and html encoding issues....

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

experiments/outline-editor/editor.js

@@ -2246,6 +2246,7 @@ Object.assign(
 			outline)
 		shadow.append(editor) 
 
+		console.log('SETUP')
 		obj.setup(editor)
 
 		return obj }, 
@@ -2253,6 +2254,9 @@ Object.assign(
 	{
 		observedAttributes: [
 			'value',
+
+			'session-storage',
+			'local-storage',
 		],
 
 		prototype: Object.assign(
@@ -2275,6 +2279,7 @@ Object.assign(
 					return this.hasAttribute('value') ?
 						this.getAttribute('value')
 						: HTMLElement.decode(this.innerHTML) },
+				// XXX
 				set code(value){
 					if(value == null){
 						return }
@@ -2282,7 +2287,12 @@ Object.assign(
 					if(this.hasAttribute('value')){
 						this.setAttribute('value', value)
 					} else {
-						this.innerHTML = HTMLElement.encode(value) } },
+						this.innerHTML = HTMLElement.encode(value) } 
+					// XXX is this the right way to do this???
+					this.__sessionStorage
+						&& (sessionStorage[this.__sessionStorage] = value)
+					this.__localStorage
+						&& (localStorage[this.__localStorage] = value) },
 
 				// XXX do we need this???
 				// 		...rename .code -> .value ???
@@ -2297,13 +2307,19 @@ Object.assign(
 					setTimeout(function(){
 						that.load(that.code) }, 0) },
 
+				// XXX do we need to before == after ???
 				attributeChangedCallback(name, before, after){
+					if(name == 'local-storage'){
+						this.__localStorage = after
+						this.code = localStorage[after] ?? '' }
+
+					if(name == 'session-storage'){
+						this.__sessionStorage = after
+						this.code = sessionStorage[after] ?? '' }
+
 					if(name == 'value'){
-						if(before != after){
-							// XXX
-							console.log('---', before, '->', after)
-						}
-						return }
+						console.log('---', before, '->', after) }
+
 				},
 
 			},

experiments/outline-editor/generic.js

@@ -27,12 +27,27 @@ Element.prototype.visibleInViewport = function(partial=false){
 // XXX should these be here???
 HTMLElement.encode = function(str){
 	var span = document.createElement('span')
+	// XXX
+	return str
+		.replace(/&/g, '&') 
+		.replace(/</g, '&lt;')
+		.replace(/>/g, '&gt;') }
+	/*/
 	span.innerText = str
 	return span.innerHTML }
+	//*/
+// XXX this does not convert <br> back to \n...
 HTMLElement.decode = function(str){
 	var span = document.createElement('span')
+	// XXX
+	return str
+		.replace(/%lt;/g, '<')
+		.replace(/&gt;/g, '>') 
+		.replace(/&amp;/g, '&') }
+	/*/
 	span.innerHTML = str
 	return span.innerText }
+	//*/
 
 
 

experiments/outline-editor/index.html

@@ -48,6 +48,8 @@ var setup = function(){
   - 
 - ## Bugs:
   focused:: true
+  - BUG: html decode/encode broken...
+    - `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
@@ -418,7 +420,9 @@ var setup = function(){
 	- the children are not protected
 	- any html <elements> are going to be parsed by the browser</outline-editor>
 
+<hr>
 
+<outline-editor session-storage="outline-editor-test"></outline-editor>
 
 
 </body>