examples...

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

experiments/outline-editor/editor.js

@@ -311,11 +311,12 @@ var attributes = {
 
 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -      
 
-// XXX make this collapsed...
 // XXX handle cursor marker...
 var templates = {
 	__proto__: plugin,
 
+	__default_button_text__: 'New',
+
 	nodeFromTemplate: function(){
 	},
 
@@ -326,26 +327,76 @@ var templates = {
 		text = text
 			.replace(/^TEMPLATE/, '')
 		var [header, ...lines] = text.split(/\n/g)
+
+		// set direction...
+		if(header[0] == '^'){
+			header = header.slice(1) 
+			elem.create_new = 'above' 
+		} else {
+			elem.create_new = 'below' }
+		
+		// nested button...
+		var nested_button
+		header = header
+			.replace(/\[([^\]]*)\]/g, 
+				function(_, text){
+					nested_button = true
+					return `<button>${ text.trim() }</button>` })
+		// whole text is a button...
+		if(!nested_button){
 			header = 
 				`<button>${
 					header.trim() == '' ?
-					'new'
+						this.__default_button_text__
 						: header.trim()
-			}</button>`
+				}</button>` }
 
 		// body...
 		// XXX only do this if we have nested elements...
 		elem.collapsed = true
-		// XXX
 		
 		// button...
 		return header },
 	// XXX focus button...
 	__focusin__: function(evt, editor, elem){
+		//var node = editor.get(elem)
+		//node.querySelector('button').focus() 
 	},
-	// XXX handle button???
 	__click__: function(evt, editor, elem){
-	},
+		e = evt.target
+		// check if we are clicking a button...
+		while(e.tagName != 'BUTTON' 
+				&& e.parentElement != null){
+			e = e.parentElement }
+		if(e.tagName == 'BUTTON'){
+			// get template data...
+			var data = editor.data(elem)
+			// subtree...
+			if(data.children.length > 0){
+				// get the corresponding template...
+				var i = [...editor.get(elem).querySelectorAll('button')]
+					.indexOf(e)
+				data = data.children[i]
+			// text -> trim off the TEMPLATE header...
+			} else {
+				data.text = data.text
+					.split(/\n/)
+					.slice(1)
+					.join('\n') }
+
+			// XXX handle cursor placement / selection...
+			// XXX
+
+			var direction = 
+				editor.data(elem).create_new == 'above' ? 
+					'prev' 
+					: 'next'
+
+			editor.focus(elem)
+			editor.edit(
+				// XXX BUG? currently this only creates a single node, 
+				// 		should be recursive...
+				editor.Block(data, direction)) } },
 }
 
 

experiments/outline-editor/index.html

@@ -164,10 +164,18 @@ var setup = function(){
     - sub-tree 
       - TEMPLATE title
         - text [cursor]
+      - TEMPLATE title *boo*
+        - text [cursor]
+      - TEMPLATE title [new]
+        - text [cursor]
     - multi-template
+      - TEMPLATE [A] [B] [C]
+        - aaa
+        - bbb
+        - ccc
       - TEMPLATE title A
         text [cursor]
-      - TEMPLATE title B
+      - TEMPLATE^ title B
         - text [cursor]
     - renders as:
       - <button>title</button>
@@ -691,6 +699,22 @@ var setup = function(){
             - @ Heading
               - @ Heading
           - @ Heading
+    - Templating:
+      - Inline
+        - TEMPLATE
+          [ ] 
+        - [ ] example item
+      - Nested
+        - TEMPLATE creates [below]
+          - [ ] 
+        - [ ] example item
+        - TEMPLATE^ creates [above]
+          - [ ] 
+      - Multiple nested
+        - TEMPLATE [ToDo] [Note]
+          - [ ] 
+          - 
+        - [ ] example item
     - Attributes:
 	  id:: attributes
 	  - collapsed