experimenting...

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

experiments/outline-editor/editor.js

@@ -1486,10 +1486,35 @@ var Outline = {
 		collapsed: 'attr',
 		focused: 'cls',
 	},
+
+	_updateCodeSize: function(code, view){
+		code.style.height = 
+			getComputedStyle(
+					view 
+						?? code.nextSibling)
+				.height 
+		return this },
+	_updateViewSize: function(view, code){
+		view.style.height = 
+			getComputedStyle(
+					code 
+						?? view.previousSibling)
+				.height 
+		return this },
+	// XXX not a good solution...
+	_syncTextSize: function(code, view){
+		code = code.classList.contains('block') ?
+			code.querySelector('.code')
+			: code
+		view = view 
+			?? code.nextSibling
+		code.updateSize()
+		return view.offsetHeight > code.offsetHeight ?
+			this._updateCodeSize(code, view)
+			: this._updateViewSize(view, code) },
+
 	// NOTE: this does not internally handle undo as it would be too 
 	// 		granular...
-	_updateTextareaSize: function(elem){
-		elem.style.height = getComputedStyle(elem.nextSibling).height },
 	update: function(node='focused', data){
 		var node = this.get(node)
 		data ??= this.data(node, false)
@@ -1523,7 +1548,8 @@ var Outline = {
 			code.value = data.text 
 			code.updateSize() 
 			// NOTE: this will have no effect if the element is not attached...
-			this._updateTextareaSize(code) }
+			this._updateCodeSize(code) }
+			//this._syncTextSize(code, html) }
 
 		for(var [attr, value] of Object.entries({...data, ...parsed})){
 			if(attr == 'children' || attr == 'text'){
@@ -1871,7 +1897,8 @@ var Outline = {
 				cur[place](block)
 			: undefined 
 
-			this._updateTextareaSize(code)
+			this._updateCodeSize(code)
+			//this._syncTextSize(code, view)
 
 			this.setUndo(this.path(cur), 'remove', [this.path(block)]) }
 		return block },
@@ -1904,7 +1931,8 @@ var Outline = {
 		// 		...this is done by expanding the textarea to the element 
 		// 		size and enabling it to intercept clicks correctly...
 		setTimeout(function(){
-			var f = that._updateTextareaSize
+			var f = that._updateCodeSize
+			//var f = that._syncTextSize.bind(that)
 			for(var e of [...that.outline.querySelectorAll('textarea')]){
 				f(e) } }, 0)
 		return this },
@@ -1926,8 +1954,11 @@ var Outline = {
 		// 		blocks place the cursor into the clicked location.
 		// 		...this is done by expanding the textarea to the element 
 		// 		size and enabling it to intercept clicks correctly...
+		// XXX this is a hack -- need to style the thing in such away 
+		// 		so as to not require this step...
 		setTimeout(function(){
-			var f = that._updateTextareaSize
+			var f = that._updateCodeSize.bind(that)
+			//var f = that._syncTextSize.bind(that)
 			for(var e of [...that.outline.querySelectorAll('textarea')]){
 				f(e) } }, 0)
 		return this },

experiments/outline-editor/index.html

@@ -52,8 +52,16 @@ var setup = function(){
     - blank line at end of block is initially not shown
       - this block contains two lines (empty below)
         
-        - `editor.Block(editor.data(editor.get())).querySelector('.view').innerHTML` -- '\n' present
+        - ```
-        - _...is this a resize issue???_
+          editor.Block(
+                  editor.data(
+                      editor.get()))
+              .querySelector('.view').innerHTML // formatting is OK...
+          ```
+        - _...this is a resize issue (???)_
+        - running `.updateSize() and then `._updateViewSize(..)` does not fix the issue...
+        - simply replacing `._updateCodeSize(..)` with `._syncTextSize(..)` fixes this but breaks lots more stuff...
+          _...need a better sync mechanism, preferably CSS_
       - 
         this block also contains two lines (empty above)
       - 
@@ -76,11 +84,7 @@ var setup = function(){
         
     - _this seams to be a problem only on the initial render -- edit/exit fixes the issue..._
     - _Q: are we using different code paths for initial render and element render???_
-  - BUG: styling error...
+  - BUG: can't move down out of a code block (_directly connected to the above_)
-    - this _seems `to` work_
-    - `while` _this `does` not_
-    - _seems to be connected with quoting..._
-  - BUG: can't move down out of a code block
     - edit this line, then move down
     - ```
       code
@@ -88,6 +92,10 @@ var setup = function(){
     - this node can't be reached.
     - _this appears to be due to how we are resizing the text..._ 
     - BUG resizing seems to be broken -- edit triggers a bad resize
+  - BUG: styling error...
+    - this _seems `to` work_
+    - `while` _this `does` not_
+    - _seems to be connected with quoting..._
   - BUG: caret positioning broken
     - *TODO*::
       - text text text