experiments/outline-editor/editor.css

@@ -102,7 +102,6 @@
 	border-left: solid 1px silver;
 }
 .editor .outline .block .block,
-.editor.crop .outline .block[cropped] .block,
 .editor.crop .outline .block[cropped] .block[cropped] {
 	margin-left: var(--item-indent);
 }
@@ -276,7 +275,6 @@ editor .outline .block:focus {
 .editor.crop .outline .block:not([cropped])>.text {
 	display: none;
 }
-.editor.crop .outline .block,
 .editor.crop .outline .block[cropped] {
 	margin-left: 0;
 }
@@ -285,7 +283,6 @@ editor .outline .block:focus {
 }
 
 
-/* toolbar... */
 .editor .toolbar {
 	display: inline-block;
 	position: absolute; 

experiments/outline-editor/editor.js

@@ -351,8 +351,7 @@ var tasks = {
 		return elem },
 	updateCheckboxes: function(editor, elem){
 		elem = this.getCheckbox(editor, elem)
-		var node = editor.get(elem, false)
-		var data = editor.data(node)
+		var node = editor.get(elem)
 		var text = node.querySelector('.code')
 		// get the checkbox order...
 		var i = [...node.querySelectorAll('input[type=checkbox]')].indexOf(elem)
@@ -364,12 +363,6 @@ var tasks = {
 				to
 				: m }
 		text.value = text.value.replace(/\[[Xx_]\]/g, toggle) 
-		// NOTE: status is updated via a timeout set in .__parse__(..)...
-		editor.setUndo(
-			editor.path(node),
-			'update',
-			[editor.path(node), 
-				data])
 		return elem },
 	toggleCheckbox: function(editor, checkbox, offset){
 		checkbox = this.getCheckbox(editor, checkbox, offset)
@@ -403,7 +396,6 @@ var tasks = {
 		var node = editor.get(elem)
 		if(node == null){
 			return }
-		var data = editor.data(elem, false)
 		var text = node.querySelector('.code')
 		var value = text.value
 		var s = text.selectionStart
@@ -421,11 +413,6 @@ var tasks = {
 		text.selectionStart = s + (value.length - l)
 		text.selectionEnd = e + (value.length - l)
 		editor.update(node)
-		editor.setUndo(
-			editor.path(node),
-			'update',
-			[editor.path(node), 
-				data])
 		return node },
 
 	__setup__: function(editor){
@@ -437,9 +424,8 @@ var tasks = {
 			text = text
 				.replace(p, handler) }
 		return text },
-	__update_checkboxes_timeout: undefined,
 	__parse__: function(text, editor, elem){
-		var res = text
+		return text
 			// block checkboxes...
 			// NOTE: these are separate as we need to align block text 
 			// 		to leading chekbox...
@@ -454,15 +440,7 @@ var tasks = {
 				this.style(editor, elem, 'check', '<input type="checkbox" checked>'))
 			// completion...
 			// XXX add support for being like a todo checkbox...
-			.replace(/(?<!\\)\[[%]\]/gm, '<span class="completion"></span>') 
-		// need to update status...
-		// XXX not sure if this is a good way to do this...
-		if(res != text && this.__update_checkboxes_timeout == null){
-			var that = this
-			this.__update_checkboxes_timeout = setTimeout(function(){
-				that.__update_checkboxes_timeout = undefined
-				that.updateAllStatus(editor) }, 200) }
-		return res },
+			.replace(/(?<!\\)\[[%]\]/gm, '<span class="completion"></span>') },
 	__focusin__: function(evt, editor, elem){
 		elem.classList.contains('block')
 			&& this.selectCheckbox(editor, elem) },
@@ -986,14 +964,8 @@ var Outline = {
 	// XXX should we call plugin's __change__ live or every second???
 	__change_timeout: undefined,
 	__change_requested: false,
-	__change__: function(options={}){
+	__change__: function(){
 		var that = this
-
-		// handle undo...
-		options.undo
-			&& this.setUndo(...options.undo)
-
-		// long changes...
 		this.__change_requested = true
 		if(this.__change_timeout){
 			return this }
@@ -1001,7 +973,7 @@ var Outline = {
 		// do the action...
 		if(this.__change_requested){
 			this.sync() 
-			this.runPlugins('__change__', this) 
+			this.runPlugins('__change__', that) 
 			this.__change_requested = false }
 
 		this.__change_timeout = setTimeout(
@@ -1017,8 +989,6 @@ var Outline = {
 		collapsed: 'attr',
 		focused: 'cls',
 	},
-	// NOTE: this does not internally handle undo as it would be too 
-	// 		granular...
 	update: function(node='focused', data){
 		var node = this.get(node)
 		data ??= this.data(node, false)
@@ -1084,21 +1054,23 @@ var Outline = {
 				parent.after(cur)
 				children.length > 0
 					&& cur.lastChild.append(...children) 
-				this.__change__({undo: [
+				this.setUndo(
 					this.path(cur), 
 					'indent', 
 					['in'],
-					prev ]}) }
+					prev)
+				this.__change__() }
 		// indent...
 		} else {
 			var parent = siblings[siblings.indexOf(cur) - 1]
 			if(parent){
 				parent.lastChild.append(cur) 
-				this.__change__({undo: [
+				this.setUndo(
 					this.path(cur), 
 					'indent', 
 					['out'],
-					prev ]})} } 
+					prev)
+				this.__change__()} } 
 		return cur },
 	shift: function(node='focused', direction){
 		if(node == 'up' || node == 'down'){
@@ -1120,12 +1092,13 @@ var Outline = {
 			siblings[i+1].after(node) }
 		focused 
 			&& this.focus()
-		this.__change__({undo: [
+		this.setUndo(
 			this.path(node), 
 			'shift', 
 			[direction == 'up' ? 
 				'down' 
-				: 'up'] ]})
+				: 'up'])
+		this.__change__()
 		return this },
 	// XXX make undo a bit more refined...
 	remove: function(node='focused'){
@@ -1142,19 +1115,20 @@ var Outline = {
 		elem?.remove()
 		next 
 			&& this.focus(next)
-		this.__change__({undo: [
+		// XXX HACK...
+		this.setUndo(
 			undefined, 
 			'load', 
-			// XXX HACK...
-			[data] ]})
+			[data])
+		this.__change__()
 		return this },
 	clear: function(){
-		var data = this.json()
-		this.outline.innerText = ''
-		this.__change__({undo: [
+		this.setUndo(
 			undefined, 
 			'load', 
-			[data] ]})
+			[this.json()])
+		this.outline.innerText = ''
+		this.__change__()
 		return this },
 
 	// expand/collapse...
@@ -1341,7 +1315,7 @@ var Outline = {
 		var attrs = this.__block_attrs__
 		var cls_attrs = ['focused']
 		return {
-			text: elem.querySelector('.code').value,
+			text: elem.querySelector('textarea').value,
 			...(Object.entries(attrs)
 				.reduce(function(res, [attr, type]){
 					if(type == 'attr'){

experiments/outline-editor/index.html

@@ -48,9 +48,16 @@ var setup = function(){
   - 
 - ## Bugs:
   focused:: true
+  - BUG: crop root indent is off...
+    - a
+      - b
+        - c
+          - crop this
   - BUG: mobile browsers behave quite chaotically ignoring parts of the styling...
   -
 - ## ToDo:
+  - undo: checkboxes and DONE??
+    _...this should be triggered by text change -- move current implementation to .__editedcode__()??..._
   - copy/paste nodes/trees
   - FEATURE: read-only mode
   - auto-shift done blocks to the end of siblings... (option?)
@@ -104,9 +111,6 @@ var setup = function(){
   - empty item height is a bit off...
   - search?
     - _...not sure if search should be internal or external yet..._
-  - DONE: undo: checkboxes and DONE??
-    collapsed:: true
-    _...this should be triggered by text change -- move current implementation to .__editedcode__()??..._
   - DONE undo 
   - DONE crop: make path clickable
   - DONE Q: crop: should we control crop via "crop-in"/"crop-out" instead of crop/uncrop??