experiments/outline-editor/editor.css

@@ -89,21 +89,11 @@
 	border: none;
 }
 /* show/hide node's view/code... */
-/*.editor .outline [tabindex]>textarea:focus+span,*/
+.editor .outline [tabindex]>textarea:focus+span,
 .editor .outline [tabindex]>textarea:not(:focus) {
 	position: absolute;
 	opacity: 0;
 }
-/* hide span content but show before/after -- keep bulets and touch zones... */
-.editor .outline [tabindex]>textarea:focus+span {
-	position: absolute;
-	top: 0;
-	visibility: hidden;
-}
-.editor .outline [tabindex]>textarea:focus+span:before,
-.editor .outline [tabindex]>textarea:focus+span:after {
-	visibility: visible;
-}
 /* click through the span text to the textarea */
 .editor .outline [tabindex]>span {
 	position: relative;
@@ -234,14 +224,6 @@ editor .outline [tabindex]:focus {
 /********************************************************** Styles ***/
 
 /* Headings... */
-.editor .outline .heading-1,
-.editor .outline .heading-2,
-.editor .outline .heading-3,
-.editor .outline .heading-4,
-.editor .outline .heading-5,
-.editor .outline .heading-6 {
-	margin-top: 1rem;
-}
 .editor .outline .heading-1>span,
 .editor .outline .heading-1>textarea,
 .editor .outline .heading-2>span,
@@ -254,6 +236,7 @@ editor .outline [tabindex]:focus {
 .editor .outline .heading-5>textarea,
 .editor .outline .heading-6>span,
 .editor .outline .heading-6>textarea {
+	margin-top: 1rem;
 	font-weight: bold;
 }
 .editor .outline .heading-1>span,
@@ -314,7 +297,7 @@ editor .outline [tabindex]:focus {
 }
 
 
-/* List... */
+/* Lists... */
 /* XXX needs to be in the middle of the first span but with universal size... */
 .editor .outline .list-item>span:before,
 .editor .outline .list>[tabindex]>span:not(:empty):before {
@@ -331,19 +314,6 @@ editor .outline [tabindex]:focus {
 	content: "▪";
 }
 
-
-/* List... */
-/* XXX nested lists are broken -- seems that I need a container for the children... */
-.editor .outline .numbered-list {
-	counter-reset: numbered-list;
-}
-.editor .outline .numbered-list>[tabindex]>span:not(:empty):before {
-	counter-increment: numbered-list; 
-	content: counter(numbered-list) ".";
-	color: gray;
-}
-
-
 /* Notes... */
 .editor .outline .NOTE {
 	--margin: 1rem;
@@ -403,8 +373,8 @@ editor .outline [tabindex]:focus {
 		var(--checkbox-size)
 		+ var(--checkbox-margin));
 }
-.editor .outline [tabindex].check>span input[type=checkbox],
+.editor .outline [tabindex].check>span>input[type=checkbox],
-.editor .outline [tabindex].todo>span input[type=checkbox] {
+.editor .outline [tabindex].todo>span>input[type=checkbox] {
 	height: var(--checkbox-size);
 	width: var(--checkbox-size);
 
@@ -417,7 +387,7 @@ editor .outline [tabindex]:focus {
 	/* NOTE: this appears to be needed for the em sizes above to work correctly */
 	font-size: 1em;
 }
-.editor .outline [tabindex].todo>span input[type=checkbox]:first-child {
+.editor .outline [tabindex].todo>span>input[type=checkbox]:first-child {
 	margin-left: calc(
 		-1 * var(--checkbox-size)
 		- var(--checkbox-margin));
@@ -439,25 +409,6 @@ editor .outline [tabindex]:focus {
 }
 
 
-/* Tables... */
-.editor .outline [tabindex]>span>table {
-	width: 100%;
-	border-collapse: collapse;
-}
-.editor .outline [tabindex]>span>table tr:nth-child(odd) {
-	background: rgba(0,0,0,0.03);
-}
-.editor .outline [tabindex]>span>table tr:first-child {
-	font-weight: bold;
-	border-bottom: solid 0.1rem silver;
-	background: transparent;
-}
-.editor .outline [tabindex]>span>table td {
-	height: calc(1em + var(--item-padding) * 2);
-	padding: 0 1em;
-	/*text-align: center;*/
-}
-
 
 /********************************************************* Testing ***/
 

experiments/outline-editor/editor.js

@@ -93,13 +93,6 @@ var Outline = {
 
 		var outline = this.outline
 
-		// get parent node...
-		if(node instanceof HTMLElement){
-			while(!node.getAttribute('tabindex')){
-				node = node.parentElement 
-				if(node === this.outline){
-					return undefined } } }
-
 		// node lists...
 		var NO_NODES = {}
 		var nodes = 
@@ -311,12 +304,6 @@ var Outline = {
 				elem.style.push(...style)
 				return code 
 					?? text } }
-		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...
@@ -342,7 +329,6 @@ var Outline = {
 			// style: list...
 			//.replace(/^(?<!\\)[-\*]\s+(.*)$/m, style('list-item'))
 			.replace(/^\s*(.*)(?<!\\):\s*$/m, style('list'))
-			.replace(/^\s*(.*)(?<!\\)#\s*$/m, style('numbered-list'))
 			// style: misc...
 			.replace(/^\s*(?<!\\)>\s+(.*)$/m, style('quote'))
 			.replace(/^\s*(?<!\\)((\/\/|;)\s+.*)$/m, style('comment'))
@@ -365,8 +351,6 @@ var Outline = {
 				style('check', '<input type="checkbox">'))
 			.replace(/\s*(?<!\\)\[[Xx]\]\s*/gm, 
 				style('check', '<input type="checkbox" checked>'))
-			// tables...
-			.replace(/^\s*(?<!\\)\|\s*((.|\n)*)\s*\|\s*$/, table)
 			// basic styling...
 			// XXX revise...
 			.replace(/(?<!\\)\*(?=[^\s*])(([^*]|\\\*)*[^\s*])(?<!\\)\*/gm, '<b>$1</b>')
@@ -375,14 +359,8 @@ var Outline = {
 			.replace(/(?<!\\)`(?=[^\s])(([^`]|\\`)*[^\s])(?<!\\)`/gm, '<code>$1</code>') 
 			// XXX support "\==" in mark...
 			.replace(/(?<!\\)==(?=[^\s])(.*[^\s])(?<!\\)==/gm, '<mark>$1</mark>') 
-			// links...
-			.replace(/(?<!\\)\[([^\]]*)\]\(([^)]*)\)/g, '<a href="$2">$1</a>')
-			.replace(/((?:https?:|ftps?:)[^\s]*)(\s*)/g, '<a href="$1">$1</a>$2')
 			// characters...
 			// XXX use ligatures for these???
-			.replace(/(?<!\\)\(i\)/gm, '🛈') 
-			.replace(/(?<!\\)\(c\)/gm, '©') 
-			.replace(/(?<!\\)\/!\\/gm, '⚠') 
 			.replace(/(?<!\\)---(?!-)/gm, '&mdash;') 
 			.replace(/(?<!\\)--(?!-)/gm, '&ndash;') 
 			// quoting...
@@ -707,7 +685,7 @@ var Outline = {
 					
 					// click: right of elem (outside)
 					} else if(elem.offsetWidth < evt.offsetX){
-						that.toggleCollapse(that.get(elem))
+						that.toggleCollapse(elem.parentElement)
 
 					// click inside element...
 					} else {
@@ -722,7 +700,7 @@ var Outline = {
 
 				// toggle checkbox...
 				if(elem.type == 'checkbox'){
-					var node = that.get(elem)
+					var node = elem.parentElement.parentElement
 					var text = node.querySelector('textarea')
 					// get the checkbox order...
 					var i = [...node.querySelectorAll('input[type=checkbox]')].indexOf(elem)

experiments/outline-editor/index.html

@@ -40,8 +40,6 @@ var setup = function(){
   - 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+/ -> <tr><td>
   - 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
@@ -80,6 +78,14 @@ var setup = function(){
     - delete node
     - indent/deindent
     - edit node
+  - markdown: tables
+    collapsed:: true
+	- /^\s*(\|\s+.*\s+\|)\s*$/m -> <table><tr><td>$1</td></tr><table>
+	- /\n\s*\|\s+/ -> <tr><td>
+	- /\s+\|\s*\n/ -> </td></tr>
+	- /\s+\|\s+/ -> </td><td>
+  - ASAP: fix quotes
+	- Example: /\n\s*\|\s+/ -> <tr><td>
   - empty item height is a bit off...
   - ~handle links gracefully -- open/edit
     _just click in the empty space_~
@@ -98,18 +104,10 @@ var setup = function(){
       - ##### Heading 5
       - ###### Heading 6
       - Text
-      - Lists::
+      - List::
-        - bullet:
         - a
         - b
         - c
-        - numbered#
-          - a
-          - b#
-            - x
-            - y
-            - z
-          - c
 	  - > quoted text
       - Notes
 		  - NOTE: a note text
@@ -119,31 +117,21 @@ var setup = function(){
 	  - // C-style comment
 	  - ; ASM-style comment
 	  - XXX Highlight
-    - Basic inline *bold*, _italic_ and ~striked~
-    - Marking ==text==
 	- Line
 		- ---
 	- Markers: ASAP, BUG, FIX, HACK, STUB, WARNING, and CAUTION 
+    - Basic inline *bold*, _italic_ and ~striked~
+    - Marking ==text==
     - 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 
+	- link <a href="about:blank">example</a>
-      - [example](about:blank)
-      - https://example.com
-      - ./path/to/file /path/to -- not supported yet
-    - Tables
-      - | a | b | c |
-        | 1 | 2 | 3 |
-        | 11 | 22 | 33 |
-    - Symbols -- should these be ligatures?
-      - (i), (c), /!\, ...
-      - -- and ---
 	- markdown:
       - numbered lists
-      - ~tables~
+      - tables
       - code blocks
       - ~alerts~
       - footnotes??