experiments/outline-editor/editor.css

@@ -211,15 +211,6 @@ editor .outline .block:focus {
 	justify-content: right;
 	left: calc(-1 * var(--size));
 }
-/* left indicator bullet */
-/* XXX not sure about this yet... */
-.editor .outline .block>.view:before {
-	content: "●";
-	color: rgba(0,0,0,0.07);
-}
-.editor .outline .block>.view:empty:before {
-	content: "";
-}
 /* right indicator (collapse/expand) */
 .editor .outline .block>.view:after {
 	color: silver;

experiments/outline-editor/editor.js

@@ -804,6 +804,31 @@ var Outline = {
 		elem?.focus()
 		return elem },
 
+	update: function(node='focused', data){
+		var node = this.get(node)
+		data ??= this.data(node, false)
+		typeof(data.collapsed) == 'boolean'
+			&& (data.collapsed ?
+				node.setAttribute('collapsed', '')
+				: node.removeAttribute('collapsed'))
+		if(data.text != null){
+			var text = node.querySelector('textarea')
+			var html = node.querySelector('span')
+			if(this.__code2html__){
+				// NOTE: we are ignoring the .collapsed attr here 
+				var parsed = this.__code2html__(data.text)
+				html.innerHTML = parsed.text
+				// heading...
+				node.classList.remove(...this.__styles)
+				parsed.style
+					&& node.classList.add(...parsed.style)
+			} else {
+				html.innerHTML = data.text }
+			text.value = data.text
+			// XXX this does not see to work until we click in the textarea...
+			text.autoUpdateSize() }
+		return node },
+
 	// This will prevent spamming the .sync() by limiting calls to one 
 	// per .change_interval
 	//
@@ -830,55 +855,6 @@ var Outline = {
 			that.change_interval || 1000) 
 		return this },
 
-	__block_attrs__: {
-		id: 'attr',
-		collapsed: 'attr',
-		focused: 'cls',
-	},
-	update: function(node='focused', data){
-		var node = this.get(node)
-		data ??= this.data(node, false)
-		for(var [attr, value] of Object.entries(data)){
-			if(attr == 'children'){
-				continue }
-
-			if(attr == 'text'){
-				var text = node.querySelector('textarea')
-				var html = node.querySelector('span')
-				if(this.__code2html__){
-					// NOTE: we are ignoring the .collapsed attr here 
-					var parsed = this.__code2html__(data.text)
-					html.innerHTML = parsed.text
-					// heading...
-					node.classList.remove(...this.__styles)
-					parsed.style
-						&& node.classList.add(...parsed.style)
-				} else {
-					html.innerHTML = data.text }
-				text.value = data.text
-				// XXX this does not seem to work until we click in the textarea...
-				text.autoUpdateSize()
-				continue }
-
-			var type = this.__block_attrs__[attr]
-			if(type == 'cls'){
-				value ?
-					node.classList.add(attr)
-					: node.classList.remove(attr) 
-
-			} else if(type == 'attr' 
-					|| type == undefined){
-				typeof(value) == 'boolean'?
-						(value ?
-							node.setAttribute(attr, '')
-							: node.removeAttribute(attr))
-					: (attr in data 
-							&& value != null) ?
-						node.setAttribute(attr, value)
-					: node.removeAttribute(attr) } }
-		this.__change__()
-		return node },
-
 	// edit...
 	indent: function(node='focused', indent=true){
 		// .indent(<indent>)
@@ -1054,23 +1030,9 @@ var Outline = {
 	// serialization...
 	data: function(elem, deep=true){
 		elem = this.get(elem)	
-		// XXX move these to config...
-		var attrs = this.__block_attrs__
-		var cls_attrs = ['focused']
 		return {
 			text: elem.querySelector('textarea').value,
-			...(Object.entries(attrs)
+			collapsed: elem.getAttribute('collapsed') != null,
-				.reduce(function(res, [attr, type]){
-					if(type == 'attr'){
-						var val = elem.getAttribute(attr)
-						if(val != null){
-							res[attr] = val == '' ?
-								true
-								: val } }
-					if(type == 'cls'){
-						elem.classList.contains(attr)
-							&& (res[attr] = true) }
-					return res }, {})),
 			...(deep ? 
 				{children: this.json(elem)}
 				: {}),
@@ -1097,16 +1059,9 @@ var Outline = {
 				level +'- '
 					+ this.__code2text__(elem.text)
 						.replace(/\n/g, '\n'+ level +'  ') 
-					// attrs... 
+					+ (elem.collapsed ?
-					+ (Object.keys(elem)
+						'\n'+level+'  ' + 'collapsed:: true'
-						.reduce(function(res, attr){
+						: ''),
-							return (attr == 'text' 
-									|| attr == 'children') ?
-								res
-								: res 
-									+ (elem[attr] ?
-										'\n'+level+'  ' + `${ attr }:: ${ elem[attr] }`
-										: '') }, '')),
 				(elem.children 
 						&& elem.children.length > 0) ?
 					this.text(elem.children || [], indent, level+indent) 
@@ -1134,30 +1089,18 @@ var Outline = {
 				// same level...
 				if(sep.length == prev_sep.length){
 					var [_, block] = lst.splice(0, 2)
-					var attrs = {
+					var collapsed = false
-						collapsed: false,
-						focused: false,
-					}
 					block = block
-						// XXX generalize attr processing...
-						.replace(/\n\s*id::\s*(.*)\s*$/, 
-							function(_, value){
-								attrs.id = value
-								return '' })
-						.replace(/\n\s*focused::\s*(.*)\s*$/, 
-							function(_, value){
-								attrs.focused = value == 'true'
-								return '' })
 						.replace(/\n\s*collapsed::\s*(.*)\s*$/, 
 							function(_, value){
-								attrs.collapsed = value == 'true'
+								collapsed = value == 'true'
 								return '' })
 					parent.push({ 
 						text: that.__text2code__(block
 								// normalize indent...
 								.split(new RegExp('\n'+sep+'  ', 'g'))
 								.join('\n')),
-						...attrs,
+						collapsed,
 						children: [],
 					})
 				// indent...
@@ -1571,7 +1514,7 @@ var Outline = {
 		// update .code...
 		outline.addEventListener('change', 
 			function(evt){
-				that.__change__() })
+				this.__change__() })
 
 		// toolbar...
 		var toolbar = this.toolbar

experiments/outline-editor/index.html

@@ -47,12 +47,6 @@ var setup = function(){
   - BUG: editor: FF seems to update the style every other key press -- should be live...
   -
 - ## ToDo:
-  - ASAP: unify attr parsing
-    - _now duplicated in `.parse(..)` and `.__code2html__(..)`_
-	- might be a good idea to add a special text parse stage and use in on both branches...
-  - ASAP: attrs in editor are not parsed correctly (see: [attrs](#attributes))
-  - ASAP: multiple attrs are not handled correctly (see: [attrs](#attributes))
-  - ASAP: style attrs (see: [attrs](#attributes))
   - ASAP: scroll into view is bad...
   - ASAP: mobile browsers behave quite chaotically ignoring parts of the styling...
   - pgup/pgdown/home/end buttons
@@ -95,7 +89,6 @@ var setup = function(){
 	  - `<editable/>` -- field marker
       - each child node will copy the template and allow editing of only fields
       - not clear how to handle template changes...
-  - might be a good idea to split the editor into a generic and dom versions...
   - cli
   - Q: do we use \\t for indent? (option???)
   - Q: persistent empty first/last node (a button to create a new node)?
@@ -273,21 +266,6 @@ var setup = function(){
     - Symbols -- _should these be ligatures?_
       - (i), (c), /!\, ...
 	  - -- and ---
-    - Attributes:
-	  id:: attributes
-	  - collapsed
-	    collapsed:: true
-		- a
-		- b
-		- c
-      - id
-	    id:: node-with-id
-	  - combined
-        id:: combined-several-ids
-		collapsed:: true
-		- a
-		- b
-		- c
     - 
   - ---
   - ### Playground for testing