added experimental syntax highlighting...

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

experiments/outline-editor/editor.css

@@ -28,8 +28,6 @@
 
 	/*text-size-adjust: none;*/
 	text-size-adjust: 150%;
-
-
 }
 
 .editor {
@@ -144,11 +142,18 @@ editor .outline .block:focus {
 }
 .editor .outline .block.focused:not(:focus)>.text {
 	background: rgba(0,0,0,0.01);
+	border-bottom: solid 2px rgba(0,0,0,0.03);
 }
 
-.editor .outline div[collapsed] {
+/* collapsed block... */
+.editor .outline .block[collapsed] {
 	border-bottom: solid 1px silver;
 }
+/* hide children... */
+.editor .outline .block[collapsed]>.children {
+	display: none;
+}
+
 
 /* click/tap zones for expand button... */
 .editor .outline .block>.view:before,
@@ -200,11 +205,6 @@ editor .outline .block:focus {
 	content: "●";
 }
 
-/* collapse -- hide children... */
-.editor .outline .block[collapsed] .block {
-	display: none;
-}
-
 /* XXX are we selecting subtrees or blocks??? */
 .editor .outline [selected] {
 	background: silver;
@@ -233,7 +233,9 @@ editor .outline .block:focus {
 
 /********************************************************** Styles ***/
 
-/* Headings... */
+
+/*------------------------------------------------------ Headings ---*/
+
 .editor .outline .heading-1,
 .editor .outline .heading-2,
 .editor .outline .heading-3,
@@ -276,7 +278,8 @@ editor .outline .block:focus {
 }
 
 
-/* Quote... */
+/*--------------------------------------------------------- Quote ---*/
+
 .editor .outline .quote>.text {
 	--indent: 1rem;
 	--margin: 0.7rem;
@@ -298,8 +301,8 @@ editor .outline .block:focus {
 }
 
 
-/* List... */
-/* XXX needs to be in the middle of the first .view but with universal size... */
+/*---------------------------------------------------------- List ---*/
+
 .editor .outline .list-item>.view:before,
 .editor .outline .list>.children>.block>.view:not(:empty):before {
 	content: "◼";
@@ -325,16 +328,15 @@ editor .outline .block:focus {
 }
 
 
-/* List... */
-/* XXX nested lists are broken -- seems that I need a container for the children... */
-.editor .outline .numbered-list>.children {
-	counter-reset: numbered-list;
-}
+/*------------------------------------------------ Numbered lists ---*/
+
 .editor .outline .numbered-list>.children>.block>.view:not(:empty):before {
 	counter-increment: numbered-list; 
 	content: counter(numbered-list) ".";
 	color: gray;
 }
+
+/* numbered lists... */
 .editor .outline 
 		.numbered-list>.children
 		>.numbered-list>.children>.block>.view:not(:empty):before {
@@ -361,7 +363,8 @@ editor .outline .block:focus {
 }
 
 
-/* Notes... */
+/*--------------------------------------------------------- Notes ---*/
+
 .editor .outline .NOTE {
 	--margin: 1rem;
 	--padding-h: 2rem;
@@ -376,9 +379,11 @@ editor .outline .block:focus {
 .editor .outline .NOTE>.view:empty {
 	display: none;
 }
-.editor .outline .NOTE>.view:empty ~ .block {
-	/* XXX calculate this... */
-	margin-left: 1em;
+.editor .outline .NOTE:focus>.view:empty {
+	display: block;
+}
+.editor .outline .NOTE>.view:empty ~ .children {
+	margin-left: -1rem;
 }
 .editor .outline .NOTE>.view:before {
 	content: "" !important;
@@ -391,7 +396,8 @@ editor .outline .block:focus {
 }
 
 
-/* Highlightes... */
+/*--------------------------------------------------- Highlightes ---*/
+
 .editor .outline .highlight {
 	font-weight: bold;
 	background: yellow;
@@ -401,7 +407,8 @@ editor .outline .block:focus {
 }
 
 
-/* Comments... */
+/*------------------------------------------------------ Comments ---*/
+
 .editor.hide-comments .outline .comment {
 	display: none;
 }
@@ -410,7 +417,8 @@ editor .outline .block:focus {
 }
 
 
-/* Checkboxes... */
+/*---------------------------------------------------- Checkboxes ---*/
+
 .editor .outline .block.todo>.view {
 	width: calc(
 		100% 
@@ -447,16 +455,25 @@ editor .outline .block:focus {
 }
 
 
-/* code... */
-.editor .outline .block>.view code {
+/*---------------------------------------------------------- Code ---*/
+
+.editor .outline .block>.view pre,
+.editor .outline .block>.view>code,
+.editor .outline .block>.view :not(pre)>code {
 	padding: 0.1em 0.3em;
 	font-family: monospace;
 	background: rgba(0,0,0,0.07);
 	border-radius: 0.2em;
 }
+.editor .outline .block>.view pre>code {
+	display: block;
+	padding: 0.6em 0.6em;
+	padding-bottom: 0.8em;
+}
 
 
-/* Tables... */
+/*-------------------------------------------------------- Tables ---*/
+
 .editor .outline .block>.view>table {
 	width: 100%;
 	border-collapse: collapse;

experiments/outline-editor/editor.js

@@ -316,6 +316,8 @@ var Outline = {
 		if(code.trim() == ''){
 			elem.text = ''
 			return elem }
+
+		// helpers...
 		var style = function(style, code=undefined){
 			style = [style].flat()
 			that.__styles = [...new Set([
@@ -327,16 +329,29 @@ var Outline = {
 				elem.style.push(...style)
 				return code 
 					?? text } }
+		var quoteText = function(text){
+			return text
+				.replace(/(?<!\\)&/g, '&amp;')
+				.replace(/(?<!\\)</g, '&lt;')
+				.replace(/(?<!\\)>/g, '&gt;')
+				.replace(/\\(?!`)/g, '\\\\') }
+		var quote = function(_, code){
+			return `<code>${quoteText(code)}</code>` }
+		var pre = function(_, language, code){
+			language = language ?
+				'language-'+language
+				: language
+			return `<pre><code class="${language}">${ quoteText(code) }</code></pre>` }
 		var table = function(_, body){
 			return `<table><tr><td>${
 				body
 					.replace(/\s*\|\s*\n\s*\|\s*/gm, '</td></tr>\n<tr><td>')
 					.replace(/\s*\|\s*/gm, '</td><td>')
 			}</td></td></table>` }
+
 		elem.text = code 
 			// hidden attributes...
 			// XXX make this generic...
-			// XXX should these be hidden from code too???
 			// collapsed...
 			.replace(/(\n|^)\s*collapsed::\s*(.*)\s*(\n|$)/, 
 				function(_, value){
@@ -388,7 +403,9 @@ var Outline = {
 			.replace(/(?<!\\)\*(?=[^\s*])(([^*]|\\\*)*[^\s*])(?<!\\)\*/gm, '<b>$1</b>')
 			.replace(/(?<!\\)~(?=[^\s~])(([^~]|\\~)*[^\s~])(?<!\\)~/gm, '<s>$1</s>')
 			.replace(/(?<!\\)_(?=[^\s_])(([^_]|\\_)*[^\s_])(?<!\\)_/gm, '<i>$1</i>') 
-			.replace(/(?<!\\)`(?=[^\s])(([^`]|\\`)*[^\s])(?<!\\)`/gm, '<code>$1</code>') 
+		    // code/quoting...
+			.replace(/(?<!\\)```(.*)\s*\n((\n|.)*)\h*(?<!\\)```\s*/g, pre) 
+			.replace(/(?<!\\)`(?=[^\s])(([^`]|\\`)*[^\s])(?<!\\)`/gm, quote) 
 			// XXX support "\==" in mark...
 			.replace(/(?<!\\)==(?=[^\s])(.*[^\s])(?<!\\)==/gm, '<mark>$1</mark>') 
 			// links...
@@ -571,7 +588,9 @@ var Outline = {
 			&& (code.innerHTML = this.text())
 		return this },
 
+	// XXX move the code here into methods/actions...
 	// XXX add scrollIntoView(..) to nav...
+	// XXX use keyboard.js...
 	keyboard: {
 		// vertical navigation...
 		// XXX this is a bit hacky but it works -- the caret blinks at 
@@ -806,7 +825,11 @@ var Outline = {
 				if(node.nodeName == 'TEXTAREA' 
 						&& node?.nextElementSibling?.nodeName == 'SPAN'){
 					var block = node.parentElement
-					that.update(block, { text: node.value }) } })
+					that.update(block, { text: node.value }) } 
+				
+				// XXX do a plugin...
+				window.hljs
+					&& hljs.highlightAll() })
 		// update .code...
 		var update_code_timeout
 		outline.addEventListener('change', 

experiments/outline-editor/index.html

@@ -2,7 +2,10 @@
 <html>
 <head>
 <meta charset="UTF-8">
-<link href="editor.css" rel="stylesheet"/>
+<link rel="stylesheet" href="css/default.css">
+
+<link rel="stylesheet" href="editor.css"/>
+
 <style>
 
 .add-row {
@@ -10,6 +13,9 @@
 }
 
 </style>
+
+<script src="lib/highlight.min.js"></script>
+
 <script src="generic.js"></script>
 <script src="editor.js"></script>
 <script>
@@ -20,7 +26,11 @@ var setup = function(){
 	window.editor = {
 		__proto__: Outline,
 	}.setup(
-		document.querySelector('.editor')) }
+		document.querySelector('.editor')) 
+
+	// XXX make this a plugin...
+	window.hljs
+		&& hljs.highlightAll() }
 
 </script>
 </head>
@@ -35,17 +45,22 @@ var setup = function(){
 	- Tomboy
 	- Bonsai
   - 
-- ## ToDo:
+- ## Bugs:
+  - BUG: ASAP: editor: `-` at start of line is interpreted as block marker...
+    - need to either:
+      - quote the `-` in .text() -- _preferreed_
+      - split the lines starting with `-` into nested nodes (a-la .load())
   - BUG? pressing down from a longer line will jump over a shorter line
-    - here is the line to jump from, for example from here
-      an we'll not get here...
-  - ASAP: fix quotes
-	- Example: /\n\s*\|\s+/ -&gt; &lt;tr&gt;&lt;td&gt;
+    - to reproduce\:
+      - here is the line to jump from, for example from here
+        an we'll not get here...
+  -
+- ## ToDo:
   - ASAP: editor: bksapce/del at start/end of a block should join it with prev/next
   - ASAP: editor: pressing enter in text edit mode should split text into two blocks
   - ASAP: editor: shifting nodes up/down
-  - ASAP: editor: `-` at start of line is interpreted as block marker...
   - ASAP: use \\t for indent...
+  - ASAP: scroll into view is bad...
   - on item click, place the cursor where it was clicked before the code expanded...
   - ~editor: semi-live update styles~
   - need to reach checkboxes via keyboard
@@ -54,7 +69,7 @@ var setup = function(){
     - _...use `[%]`, `%%`, or something similar..._
   - read-only mode
   - should bulets be on the same level as nodes or offset??
-    - A) justified to bulet:
+    - A) justified to bullet:
          * list item
          * list item
          block text
@@ -63,6 +78,8 @@ var setup = function(){
          * list item
            block text
     - NOTE: this is only a problem if making list-items manually -- disable???
+  - FF: figure out a way to draw expand/collapse bullets without the use of CSS' `:has(..)`
+  - Nerd fonts (options?)
   - ~do a better expand/collapse icons~
   - ~loading from DOM -- fill textarea~
   - ~focus management~
@@ -80,10 +97,6 @@ var setup = function(){
     - indent/deindent
     - edit node
   - empty item height is a bit off...
-  - ~handle links gracefully -- open/edit
-    _just click in the empty space_~
-	- ~<a href="about:blank">this takes the whole element</a>~
-    - this breaks if link is exactly line width -- should we ensure empty space?
   - ~serialize/deserialize~
   - ~add optional text styling to nodes~
   - 
@@ -125,7 +138,7 @@ var setup = function(){
             - y
             - z
           - c
-	  - &gt; quoted text
+	  - > quote
       - Notes
 		  - NOTE: a note text
           - NOTE:
@@ -136,33 +149,37 @@ var setup = function(){
 	  - XXX Highlight
     - Basic inline *bold*, _italic_ and ~striked~
     - Marking ==text==
+    - Code
+	  - Inline quoting `html <b>code</b>`
+      - code blocks
+        ```javascript
+        var text = 'Hello, world!'
+
+        console.log(text)
+        ```
 	- Line
 		- ---
 	- Markers: ASAP, BUG, FIX, HACK, STUB, WARNING, and CAUTION 
-    - Inline [X] checkboxes [_]
-	- To do items/blocks
-	  - [_] undone item
-        _(clicking the checkbox updates the item)_
-	  - [X] done item
-	  - [_] we can also add inline [x] checkboxes
-	- link 
+    - Basic task management
+      - Inline [X] checkboxes [_]
+	  - To do items/blocks
+	    - [_] undone item
+          _(clicking the checkbox updates the item)_
+	    - [X] done item
+	    - [_] we can also add inline [x] checkboxes
+	- links
       - [example](about:blank)
       - https://example.com
-      - ./path/to/file /path/to -- not supported yet
+      - ./path/to/file /path/to -- _not supported yet_
     - Tables
       - | a | b | c |
         | 1 | 2 | 3 |
         | 11 | 22 | 33 |
-    - Symbols -- should these be ligatures?
+    - Symbols -- _should these be ligatures?_
       - (i), (c), /!\, ...
       - -- and ---
-	- markdown:
-      - numbered lists
-      - ~tables~
-      - code blocks
-      - ~alerts~
-      - footnotes??
-	- 
+    - 
+  - ---
   - ### Playground for testing
     - A
       collapsed:: true