From 0525efc018c11c4e992853142c492621327f43e5 Mon Sep 17 00:00:00 2001
From: "Alex A. Naanou" <alex.nanou@gmail.com>
Date: Sun, 29 Oct 2023 15:31:23 +0300
Subject: [PATCH] cleanup + refactoring....

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
---
 experiments/outline-editor/editor.js  | 166 +++++++++++++++-----------
 experiments/outline-editor/index.html |  15 ++-
 2 files changed, 108 insertions(+), 73 deletions(-)

diff --git a/experiments/outline-editor/editor.js b/experiments/outline-editor/editor.js
index d62bc0e..c714651 100755
--- a/experiments/outline-editor/editor.js
+++ b/experiments/outline-editor/editor.js
@@ -768,16 +768,18 @@ var Outline = {
 
 
 	get header(){
-		return this.dom.querySelector('.header') },
+		return this.dom?.querySelector('.header') },
 	get outline(){
-		return this.dom.querySelector('.outline') },
+		return this.dom?.querySelector('.outline') },
 	get toolbar(){
-		return this.dom.querySelector('.toolbar') },
+		return this.dom?.querySelector('.toolbar') },
 
 	get code(){
-		return this.dom.querySelector('.code')?.value },
+		return this.dom?.querySelector('.code')?.value },
 	set code(value){
-		var c = this.dom.querySelector('.code')
+		if(value == null){
+			return }
+		var c = this.dom?.querySelector('.code')
 		if(c){
 			c.value = value } },
 
@@ -2138,93 +2140,113 @@ var Outline = {
 //---------------------------------------------------------------------
 // Custom element...
 
+
 window.customElements.define('outline-editor',
 window.OutlineEditor = 
-	Object.assign(
-		function(){
-			var obj = Reflect.construct(HTMLElement, [...arguments], OutlineEditor)
+Object.assign(
+	function(){
+		var obj = Reflect.construct(HTMLElement, [...arguments], OutlineEditor)
 
-			obj.editor = {
-				__proto__: Outline,
+		var shadow = obj.attachShadow({mode: 'open'})
 
-				get code(){
-					return obj.hasAttribute('value') ?
-							obj.getAttribute('value')
-						: (obj.children.length == 1 
-								&& obj.children[0].nodeName == 'TEXTAREA') ?
-							obj.children[0].value
-						: obj.innerHTML },
-				set code(value){
-					// XXX this can break in conjunction with .attributeChangedCallback(..)
-					if(obj.hasAttribute('value')){
-						obj.setAttribute('value', value)
-					} else if(obj.children.length == 1 
-							&& obj.children[0].nodeName == 'TEXTAREA'){
-						obj.children[0].value = value
-					} else {
-						obj.innerHTML = value } },
-			}
+		var style = document.createElement('link');
+		style.setAttribute('rel', 'stylesheet');
+		style.setAttribute('href', 'editor.css');
 
-			return obj }, 
-		{
-			// constructor stuff...
-			observedAttributes: [
-				'value',
-			],
+		// XXX it is not rational to have this...
+		var editor = obj.dom = document.createElement('div')
+		editor.classList.add('editor')
 
-			// instance stuff...
-			prototype: {
+		var header = document.createElement('div')
+		header.classList.add('header')
+
+		var outline = document.createElement('div')
+		outline.classList.add('outline')
+		outline.setAttribute('tabindex', '0')
+
+		//var toolbar = document.createElement('div')
+		//toolbar.classList.add('toolbar')
+
+		editor.append(
+			style,
+			header,
+			outline)
+		shadow.append(editor) 
+
+		obj.setup(editor)
+
+		return obj }, 
+	// constructor stuff...
+	{
+		observedAttributes: [
+			'value',
+		],
+
+		prototype: Object.assign(
+			{
 				__proto__: HTMLElement.prototype,
 
+				// XXX HACK these are copies from Outline, use 
+				// 		object.mixin(...) instead...
+				get header(){
+					return this.dom?.querySelector('.header') },
+				set header(val){},
+				get outline(){
+					return this.dom?.querySelector('.outline') },
+				set outline(val){},
+				get toolbar(){
+					return this.dom?.querySelector('.toolbar') },
+				set toolbar(val){},
+
+				// XXX these are generic...
+				encode: function(text){
+					var span = document.createElement('span')
+					span.innerText = text
+					return span.innerHTML },
+				decode: function(text){
+					var span = document.createElement('span')
+					span.innerHTML = text
+					return span.innerText },
+
+				get code(){
+					return this.hasAttribute('value') ?
+						this.getAttribute('value')
+						: this.decode(this.innerHTML) },
+				set code(value){
+					if(value == null){
+						return }
+					// XXX this can break in conjunction with .attributeChangedCallback(..)
+					if(this.hasAttribute('value')){
+						this.setAttribute('value', value)
+					} else {
+						this.innerHTML = this.encode(value) } },
+
+				// XXX do we need this???
+				// 		...rename .code -> .value ???
 				get value(){
-					return this.getAttribute('value') },
+					return this.code },
 				set value(value){
-					this.setAttribute('value', value) },
+					this.code = value },
 
 				connectedCallback: function(){
 					var that = this
-					var shadow = this.attachShadow({mode: 'open'})
-
-					var style = document.createElement('link');
-					style.setAttribute('rel', 'stylesheet');
-					style.setAttribute('href', 'editor.css');
-
-					// XXX it is not rational to have this...
-					var editor = document.createElement('div')
-					editor.classList.add('editor')
-
-					var header = document.createElement('div')
-					header.classList.add('header')
-
-					var outline = document.createElement('div')
-					outline.classList.add('outline')
-					outline.setAttribute('tabindex', '0')
-
-					//var toolbar = document.createElement('div')
-					//toolbar.classList.add('toolbar')
-
 					// load the data...
 					setTimeout(function(){
-						that.editor.setup(editor) }, 0)
+						that.load(that.code) }, 0) },
 
-					editor.append(
-						style,
-						header,
-						outline)
-					shadow.append(editor) },
-				disconnectedCallback: function(){
-				},
-				adoptedCallback: function(){
-				},
-				attributeChangedCallback: function(name, oldvalue, newvalue){
+				attributeChangedCallback(name, before, after){
 					if(name == 'value'){
-						console.log('---', newvalue)
-						//oldvalue != newvalue
-						//	&& this.editor.load(newvalue) 
+						if(before != after){
+							// XXX
+							console.log('---', before, '->', after)
+						}
 						return }
 				},
+
 			},
-		}))
+			// XXX this will fail due to all the getters/setters -- use object.mixin(..)...
+			Outline),
+	}))
 
 
 
diff --git a/experiments/outline-editor/index.html b/experiments/outline-editor/index.html
index 660894a..f4f76ab 100755
--- a/experiments/outline-editor/index.html
+++ b/experiments/outline-editor/index.html
@@ -56,6 +56,16 @@ var setup = function(){
       - side margins are a bit too large (account for toolbat to the right)
   -
 - ## ToDo:
+  - editor as a custom element / web component
+    - 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?
+    - events 
+    - test nesting...
+    - 
   - selection / multiple node selection (via shift+motion)
   - copy/paste nodes/trees
   - numbered lists: add counters to a depth of 6-7...
@@ -80,7 +90,6 @@ var setup = function(){
   - FF: figure out a way to draw expand/collapse bullets without the use of CSS' `:has(..)`
   - table inline editing a-la code editing -- click cell and edit directly...
   - a way to make a block monospace (???)
-  - editor as a custom element...
   - Nerd fonts (option???)
   - smooth scrolling
     - _...this is more complicated than adding `behavior: "smooth"` to `.scrollIntoView(..)` as scrolling animation will get interrupted by next user input..._
@@ -361,6 +370,9 @@ var setup = function(){
 <button onclick="editor.dom.classList.toggle('show-click-zones')">show/hide click zones</button>
 <button onclick="editor.dom.classList.toggle('block-offsets')">show/hide block offsets</button>
 
+
+
+
 <hr>
 
 <h1>Outline editor as web component</h1>
@@ -388,6 +400,7 @@ var setup = function(){
 
 
 
+
 </body>
 </html>
 <!-- vim:set ts=4 sw=4 : -->