better id generation...

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

experiments/outline-editor/editor.js

@@ -590,38 +590,92 @@ var tasks = {
 
 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -      
 
-// XXX needs lots more work...
+// XXX do a better default id...
 var toc = {
 	__proto__: plugin,
 
-	// XXX not sure on what to build the hierarchy...
+	__skip_local_root__: true,
-	// 		this could be:
+
-	// 			- heading level
-	// 			- topology
-	// 			- both
-	// 			- ...
 	update: function(editor, elem){
+		var that = this
 		var outline = editor.outline
+		var TOCs = [...outline.querySelectorAll('.TOC .view')]
 		var tocs = [...outline.querySelectorAll('.toc .view')]
-		if(tocs.length == 0){
+		if(TOCs.length + tocs.length == 0){
 			return }
-		var level = function(node){
+
+		var level = function(node, root=outline){
 			var depth = 0
 			var parent = node
-			while(parent !== outline 
+			while(parent !== root 
 					&& parent != null){
-				if(parent.classList.contains('block')){
+				if(parent.classList.contains('block')
+					&& parent.classList.contains('heading')){
 					depth++ }
 				parent = parent.parentElement }
 			return depth }
-		var headings = [...editor.outline.querySelectorAll('.block.heading>.view')]
+		// XXX revise...
-			.map(function(e){
+		var seen = new Set()
-				return `<li>${ e.innerText.split(/\n/)[0] }</li>`
+		var makeID = function(text){
-			})
+			var id = encodeURI(
-		var lst = document.createElement('ul')
+				text
-		lst.innerHTML = headings.join('\n')
+					.trim()
+					.replace(/[#?$%:;.,]/g, '')
+					.replace(/\s+/g, '-'))
+			if(seen.has(id)
+					|| document.getElementById(id)){
+				var i = 1
+				var candidate = id +'-'+ i
+				while(seen.has(candidate)
+						|| document.getElementById(candidate)){
+					candidate = id +'-'+ i++ }
+				id = id +'-'+ i }
+			seen.add(id)
+			return id }
+		var makeTOC = function(root=outline){
+			var index = 0
+			var lst = document.createElement('ul')
+			var list = lst
+			var depth = 1
+			for(var e of [...root.querySelectorAll('.block.heading>.view')]){
+				var block = editor.get(e)
+				// skip the root element???
+				if(!that.__skip_local_root__ 
+						&& block === root){
+					continue }
+				var d = level(e, root)
+				// down...
+				if(d > depth){
+					var sub = document.createElement('ul')
+					lst.append(sub)
+					lst = sub
+					depth++
+				// up...
+				} else while(d < depth && depth > 0){
+					lst = lst.parentElement ?? lst
+					depth-- }
+				var elem = document.createElement('li')
+				var id = block.id == '' ?
+					// XXX do a better default...
+					//'__'+ index++
+					makeID(e.innerText)
+					: block.id
+				block.id = id
+				elem.innerHTML = `<a href="#${id}">${e.innerHTML.trim()}</a>`
+				lst.append(elem) } 
+			return list }
+
+		// global tocs...
+		var list = makeTOC()
+		for(var toc of TOCs){
+			toc.innerHTML = ''
+			toc.append(list) } 
+		// local tocs...
 		for(var toc of tocs){
-			toc.append(lst) } },
+			toc.innerHTML = ''
+			toc.append(
+				makeTOC(
+					editor.get(toc, 'parent'))) } },
 
 	__setup__: function(editor){
 		return this.update(editor) },
@@ -630,8 +684,10 @@ var toc = {
 
 	__parse__: function(text, editor, elem){
 		return text
+			.replace(/^\s*toc\s*$/, 
+				this.style(editor, elem, 'toc', '')) 
 			.replace(/^\s*TOC\s*$/, 
-				this.style(editor, elem, 'toc', '')) },
+				this.style(editor, elem, 'TOC', '')) },
 }
 
 

experiments/outline-editor/index.html

@@ -141,6 +141,8 @@ var setup = function(){
         |text|text|text|
   -
 - ## ToDo:
+  - Q: should auto-headings be exported as normal/manual markdown headings???
+  - expand sub-tree on follow link...
   - Time to think about a standalone client -- at least to edit own notes as a test...
     - _also this would be a nice opportunity to start the move to a newer electron version_
   - Might be a good idea to think how to avoid the constant selections on focus...
@@ -258,6 +260,7 @@ 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...
+  - DONE \TOC global/local
   - DONE FEATURE dynamic headings -- level depends on number of headings above...
     - DONE Experimental syntax:
       ```
@@ -554,6 +557,18 @@ var setup = function(){
     - Symbols -- _should these be ligatures?_
       - (i), (c), /!\, ...
 	  - -- and ---
+    - Table of content
+      - Global
+        - TOC
+      - Local
+        - toc
+        - demo content
+          collapsed:: true
+          - @ Heading
+            - @ Heading
+            - @ Heading
+              - @ Heading
+          - @ Heading
     - Attributes:
 	  id:: attributes
 	  - collapsed