experiments/outline-editor/editor.css

@@ -183,7 +183,6 @@
 			&>.view {
 				position: relative;
 				pointer-events: none;
-				user-select: none;
 
 				/* clickable things in view */
 				& a,
@@ -618,29 +617,22 @@
 	& pre,
 	&>code,
 	& :not(pre)>code {
+		padding: 0.1em 0.3em;
 		font-family: monospace;
 		background: rgba(0,0,0,0.07);
 		border-radius: 0.2em;
 		outline: none;
 	}
-	& :not(pre)>code {
-		padding: 0.1em 0.3em;
-	}
 	& pre>code {
-		--padding: 0.6em;
-
 		display: block;
-		min-width: calc(100% - var(--padding) * 2);
 		width: fit-content;
-		padding: var(--padding) var(--padding);
+		padding: 0.6em 0.6em;
-		padding-bottom: calc(var(--padding) + 0.2em);
+		padding-bottom: 0.8em;
 		outline: none;
 	}
 
 	/* scrollbar... */
 	& pre {
-		margin: 0.8em 0em;
-
 		overflow-x: visible;
 		overflow-y: auto;
 

experiments/outline-editor/editor.js

@@ -66,12 +66,6 @@ var getCharOffset = function(elem, x, y, c){
 		: null }
 
 
-var getTextAreaOffset = function(elem, x, y){
-	return elem.getTextGeometry(function(res, elem){
-		// XXX this will not work as it needs correct placement of elem under the cursor...
-		return getCharOffset(elem, x, y) }) }
-
-
 // Get offset in markdown relative to the resulting text...
 //                     
 //					    v <----- position
@@ -191,7 +185,7 @@ var quoted = {
 	quote: function(_, code){
 		return `<code>${ this.encode(code) }</code>` },
 
-	pre_pattern: /(?<!\\)```(.*\s*\n)((\n|.)*?)\h*(?<!\\)```(?:[ \t]*$|[ \t]*\n)/g,
+	pre_pattern: /(?<!\\)```(.*\s*\n)((\n|.)*?)\h*(?<!\\)```/g,
 	pre: function(_, language, code){
 		language = language.trim()
 		language = language ?
@@ -2023,50 +2017,24 @@ var Outline = {
 		// click...
 		// XXX revise...
 		// XXX tap support...
-		// XXX support selection from first click... (see: mousemove handler)
-		var selecting, start
 		outline.addEventListener('mousedown', 
 			function(evt){
 				var elem = evt.target
 				// place the cursor where the user clicked in code/text...
 				if(elem.classList.contains('code') 
 						&& document.activeElement !== elem){
-					var view = that.get(elem).querySelector('.view')
-					var initial = elem.selectionStart
-					var c = getCharOffset(view, evt.clientX, evt.clientY)
-					var m = getMarkdownOffset(elem.value, view.innerText, c)
-					// selecting an element with text offset by markup...
-					if(m != 0){
 					evt.preventDefault()
-						selecting = elem }
+					var view = that.get(elem).querySelector('.view')
-					start = c == null ?
+					var c = getCharOffset(view, evt.clientX, evt.clientY)
-						elem.value.length
+					if(c == null){
-						: c + m
-					// NOTE: this is done on next frame to allow the 
-					// 		browser to place the caret before we correct 
-					// 		its position... (if .preventDefault() was not called)
-					setTimeout(function(){
 						elem.focus()
-						elem.selectionStart = 
+						elem.selectionStart = elem.value.length
-							elem.selectionEnd = 
+						elem.selectionEnd = elem.value.length 
-								start }, 0) } })
-		outline.addEventListener('mousemove', 
-			function(evt){
-				// handle selection in element with text offset by markup...
-				// XXX should there be a timeout???
-				if(selecting != null){
-					// XXX need to get offset under cursor...
-					var c = getTextAreaOffset(selecting, evt.clientX, evt.clientY)
-					return
-					if(c > start){
-						selecting.selectionStart = start
-						selecting.selectionEnd = c
 					} else {
-						selecting.selectionStart = c
+						var m = getMarkdownOffset(elem.value, view.innerText, c)
-						selecting.selectionEnd = start } } })
+						elem.focus()
-		outline.addEventListener('mouseup', 
+						elem.selectionStart = c + m
-			function(evt){
+						elem.selectionEnd = c + m } } })
-				selecting = undefined })
 		outline.addEventListener('click', 
 			function(evt){
 				var elem = evt.target

experiments/outline-editor/generic.js

@@ -63,7 +63,7 @@ HTMLTextAreaElement.prototype.autoUpdateSize = function(){
 		function(evt){
 			that.updateSize() }) 
 	return this }
-HTMLTextAreaElement.prototype.getTextGeometry = function(func){
+HTMLTextAreaElement.prototype.getTextGeometry = function(){
 	var offset = this.selectionStart
 	var text = this.value
 
@@ -128,9 +128,6 @@ HTMLTextAreaElement.prototype.getTextGeometry = function(func){
 		offsetTop: carret.offsetTop,
 	}
 
-	if(typeof(func) == 'function'){
-		res = func(res, span) }
-
 	span.remove()
 
 	return res }

experiments/outline-editor/index.html

@@ -59,6 +59,9 @@ var setup = function(){
   - custom element / web component
     - BUG: selecting by _click-n-drag_ or _double/triple click_ for some reason does not work...
     - BUG/race: the non-value versions of custom elem seem to sometimes get loaded as empty...
+    - Q: can we get rid of the editor block??:
+      - CSS breaks if we do...
+      - need to figure out a way to handle autofocus for host/editor uniformly 
     - DONE data interface:
 	  collapsed:: true
       - the "natural" way to pass data is to use the same mechanism as `<textarea>` the problem is that we can't extend `HTMLTextAreaElement` as it can not have shadow dom (reject?)
@@ -68,14 +71,9 @@ var setup = function(){
     - DONE `.value` / `.code` should be both updated internally and also load new content when updated externally -- not yet sure how...
     - events 
     - test nesting...
-    - Q: can we get rid of the editor block??:
-      - CSS breaks if we do...
-      - need to figure out a way to handle autofocus for host/editor uniformly 
     - 
   - selection
-    - DONE multiple node selection (via shift+motion)
+    - multiple node selection (via shift+motion)
-      - fixed state -- while `shift` pressed select or deselect only depending on first action (a-la FAR)
-    - DONE double/triple click working...
     - touch/mouse (???)
   - Q: should we select text (mouse/touch) without first focusing??
     - _...logseq does not do this either_
@@ -84,8 +82,10 @@ var setup = function(){
   - numbered lists: add counters to a depth of 6-7...
     - _or find a way to make them repeat..._
   - FEATURE: read-only mode
-  - FEATURE: auto-shift done blocks to the end of siblings... (option?)
+  - auto-shift done blocks to the end of siblings... (option?)
     - ...or should this be `sort:: done` -- i.e. sort children by done status??
+  - `backspace`/`delete` in block contract the field with a delay...
+    - _...looks like we are updating size on keyup..._
   - codeblock as a block
     _...if only whitespace before/after clear it and style whole block..._
     _...might be a good idea to do this with codeblock at start/end of block..._
@@ -99,21 +99,15 @@ var setup = function(){
     - cleanup html
     - generate ideomatic html (???)
   - style attrs (see: [attrs](#attributes))
+  - FEATURE: `collapse-children:: true` block option -- when loading collapse all immediate children
   - FF: figure out a way to draw expand/collapse bullets without the use of CSS' `:has(..)`
   - table inline editing a-la code editing -- click cell and edit directly...
+  - a way to make a block monospace (???)
+  - Nerd fonts (option???)
   - smooth scrolling
     - _...this is more complicated than adding `behavior: "smooth"` to `.scrollIntoView(..)` as scrolling animation will get interrupted by next user input..._
     - need to cancel animation if things are moving too fast...
     - make this generic (???)
-  - JSON API
-  - cli
-  - Q: do we use \\t for indent? (option???)
-  - Q: persistent empty first/last node (a button to create a new node)?
-  - Q: search?
-    - _seems that search should be external to the editor_
-  - empty item height is a bit off...
-  - Nerd fonts (option???)
-  - FEATURE: `collapse-children:: true` block option -- when loading collapse all immediate children
   - FEATURE? block templates...
     collapsed:: true
     - something like: `TPL: [_] <editable/> -- <editable/>`
@@ -121,26 +115,25 @@ 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 `backspace`/`delete` in block contract the field with a delay...
+  - JSON API
-    collapsed:: true
+  - cli
-    - _...looks like we are updating size on keyup..._
+  - Q: do we use \\t for indent? (option???)
-  - DONE Q: should list bullets be on the same level as nodes or offset??
+  - Q: persistent empty first/last node (a button to create a new node)?
+  - Q: should list bullets be on the same level as nodes or offset??
     collapsed:: true
     - A) justified to bullet:
-      ```
          * list item
          * list item
          block text
-      ```
-      _This is impossible to create in the current implementation_
     - B) justified to text _(current)_:
-      ```
          * list item
          * list item
            block text
-      ```
+    - NOTE: this is only a problem if making list-items manually -- disable???
+  - empty item height is a bit off...
+  - search?
+    - _...not sure if search should be internal or external yet..._
   - DONE add horizontal scroll to code blocks...
-    collapsed:: true
     - ```html
       <outline-editor session-storage="outline-text" value="initial text"></outline-editor>
       ```
@@ -173,7 +166,6 @@ var setup = function(){
   - DONE undo 
   - DONE crop: make path clickable
   - DONE Q: crop: should we control crop via "crop-in"/"crop-out" instead of crop/uncrop??
-    collapsed:: true
     - _crop-in/crop-out seems more natural..._
   - DONE crop: show crop path (and depth)
   - DONE over-travel pause -- when going fast over start/end stop...