experiments/outline-editor/editor.css

@@ -28,6 +28,8 @@
 
 	/*text-size-adjust: none;*/
 	text-size-adjust: 150%;
+
+
 }
 
 .editor {
@@ -142,18 +144,11 @@ 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);
 }
 
-/* collapsed block... */
+.editor .outline div[collapsed] {
-.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,
@@ -205,6 +200,11 @@ 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,9 +233,7 @@ editor .outline .block:focus {
 
 /********************************************************** Styles ***/
 
-
+/* Headings... */
-/*------------------------------------------------------ Headings ---*/
-
 .editor .outline .heading-1,
 .editor .outline .heading-2,
 .editor .outline .heading-3,
@@ -278,8 +276,7 @@ editor .outline .block:focus {
 }
 
 
-/*--------------------------------------------------------- Quote ---*/
+/* Quote... */
-
 .editor .outline .quote>.text {
 	--indent: 1rem;
 	--margin: 0.7rem;
@@ -301,8 +298,8 @@ editor .outline .block:focus {
 }
 
 
-/*---------------------------------------------------------- List ---*/
+/* List... */
-
+/* XXX needs to be in the middle of the first .view but with universal size... */
 .editor .outline .list-item>.view:before,
 .editor .outline .list>.children>.block>.view:not(:empty):before {
 	content: "◼";
@@ -328,15 +325,16 @@ editor .outline .block:focus {
 }
 
 
-/*------------------------------------------------ Numbered lists ---*/
+/* List... */
-
+/* XXX nested lists are broken -- seems that I need a container for the children... */
+.editor .outline .numbered-list>.children {
+	counter-reset: numbered-list;
+}
 .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 {
@@ -363,8 +361,7 @@ editor .outline .block:focus {
 }
 
 
-/*--------------------------------------------------------- Notes ---*/
+/* Notes... */
-
 .editor .outline .NOTE {
 	--margin: 1rem;
 	--padding-h: 2rem;
@@ -379,11 +376,9 @@ editor .outline .block:focus {
 .editor .outline .NOTE>.view:empty {
 	display: none;
 }
-.editor .outline .NOTE:focus>.view:empty {
+.editor .outline .NOTE>.view:empty ~ .block {
-	display: block;
+	/* XXX calculate this... */
-}
+	margin-left: 1em;
-.editor .outline .NOTE>.view:empty ~ .children {
-	margin-left: -1rem;
 }
 .editor .outline .NOTE>.view:before {
 	content: "" !important;
@@ -396,8 +391,7 @@ editor .outline .block:focus {
 }
 
 
-/*--------------------------------------------------- Highlightes ---*/
+/* Highlightes... */
-
 .editor .outline .highlight {
 	font-weight: bold;
 	background: yellow;
@@ -407,8 +401,7 @@ editor .outline .block:focus {
 }
 
 
-/*------------------------------------------------------ Comments ---*/
+/* Comments... */
-
 .editor.hide-comments .outline .comment {
 	display: none;
 }
@@ -417,8 +410,7 @@ editor .outline .block:focus {
 }
 
 
-/*---------------------------------------------------- Checkboxes ---*/
+/* Checkboxes... */
-
 .editor .outline .block.todo>.view {
 	width: calc(
 		100% 
@@ -455,25 +447,16 @@ editor .outline .block:focus {
 }
 
 
-/*---------------------------------------------------------- Code ---*/
+/* code... */
-
+.editor .outline .block>.view 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,8 +316,6 @@ var Outline = {
 		if(code.trim() == ''){
 			elem.text = ''
 			return elem }
-
-		// helpers...
 		var style = function(style, code=undefined){
 			style = [style].flat()
 			that.__styles = [...new Set([
@@ -329,29 +327,16 @@ 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){
@@ -403,9 +388,7 @@ var Outline = {
 			.replace(/(?<!\\)\*(?=[^\s*])(([^*]|\\\*)*[^\s*])(?<!\\)\*/gm, '<b>$1</b>')
 			.replace(/(?<!\\)~(?=[^\s~])(([^~]|\\~)*[^\s~])(?<!\\)~/gm, '<s>$1</s>')
 			.replace(/(?<!\\)_(?=[^\s_])(([^_]|\\_)*[^\s_])(?<!\\)_/gm, '<i>$1</i>') 
-		    // code/quoting...
+			.replace(/(?<!\\)`(?=[^\s])(([^`]|\\`)*[^\s])(?<!\\)`/gm, '<code>$1</code>') 
-			.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...
@@ -588,9 +571,7 @@ 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 
@@ -825,11 +806,7 @@ 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,10 +2,7 @@
 <html>
 <head>
 <meta charset="UTF-8">
-<link rel="stylesheet" href="css/default.css">
+<link href="editor.css" rel="stylesheet"/>
-
-<link rel="stylesheet" href="editor.css"/>
-
 <style>
 
 .add-row {
@@ -13,9 +10,6 @@
 }
 
 </style>
-
-<script src="lib/highlight.min.js"></script>
-
 <script src="generic.js"></script>
 <script src="editor.js"></script>
 <script>
@@ -26,11 +20,7 @@ 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>
@@ -45,22 +35,17 @@ var setup = function(){
 	- Tomboy
 	- Bonsai
   - 
-- ## 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
-    - to reproduce\:
-      - here is the line to jump from, for example from here
-        an we'll not get here...
-  -
 - ## ToDo:
+  - 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;
   - 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
@@ -69,7 +54,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 bullet:
+    - A) justified to bulet:
          * list item
          * list item
          block text
@@ -78,8 +63,6 @@ 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~
@@ -97,6 +80,10 @@ 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~
   - 
@@ -138,7 +125,7 @@ var setup = function(){
             - y
             - z
           - c
-	  - > quote
+	  - &gt; quoted text
       - Notes
 		  - NOTE: a note text
           - NOTE:
@@ -149,37 +136,33 @@ 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 
-    - Basic task management
+    - Inline [X] checkboxes [_]
-      - Inline [X] checkboxes [_]
+	- To do items/blocks
-	  - To do items/blocks
+	  - [_] undone item
-	    - [_] undone item
+        _(clicking the checkbox updates the item)_
-          _(clicking the checkbox updates the item)_
+	  - [X] done item
-	    - [X] done item
+	  - [_] we can also add inline [x] checkboxes
-	    - [_] we can also add inline [x] checkboxes
+	- link 
-	- 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