diff --git a/experiments/outline-editor/editor.css b/experiments/outline-editor/editor.css index 4eaf4f8..dea33dc 100755 --- a/experiments/outline-editor/editor.css +++ b/experiments/outline-editor/editor.css @@ -44,9 +44,11 @@ display: block; position: relative; + /* XXX do we need this??? .code { display: none; } + */ /* header */ .header { @@ -152,7 +154,8 @@ &>.code { position: absolute; top: 0; - height: calc(2 * var(--item-padding) + 1em); + height: 100%; + /*height: calc(2 * var(--item-padding) + 1em);*/ overflow: hidden; resize: none; opacity: 0; diff --git a/experiments/outline-editor/editor.js b/experiments/outline-editor/editor.js index 464b9c3..b558b05 100755 --- a/experiments/outline-editor/editor.js +++ b/experiments/outline-editor/editor.js @@ -1487,13 +1487,17 @@ var Outline = { focused: 'cls', }, + // XXX UPDATE_CODE_SIZE this is a no-op at this point -- do we need this... _updateCodeSize: function(code, view){ + // XXX UPDATE_CODE_SIZE + return this code.style.height = getComputedStyle( view ?? code.nextSibling) .height return this }, + /* XXX not used... _updateViewSize: function(view, code){ view.style.height = getComputedStyle( @@ -1512,6 +1516,7 @@ var Outline = { 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... diff --git a/experiments/outline-editor/generic.js b/experiments/outline-editor/generic.js index 7cb4435..b874d7d 100755 --- a/experiments/outline-editor/generic.js +++ b/experiments/outline-editor/generic.js @@ -54,7 +54,9 @@ HTMLElement.decode = function(str){ //--------------------------------------------------------------------- HTMLTextAreaElement.prototype.updateSize = function(){ - this.style.height = '' + // NOTE: this is set to 0px to negate the effects of external/inherited + // height settings... + this.style.height = '0px' this.style.height = this.scrollHeight + 'px' return this } HTMLTextAreaElement.prototype.autoUpdateSize = function(){ diff --git a/experiments/outline-editor/index.html b/experiments/outline-editor/index.html index 1925701..bfc33d8 100755 --- a/experiments/outline-editor/index.html +++ b/experiments/outline-editor/index.html @@ -54,20 +54,20 @@ var setup = function(){ - blank lines above and below -- the trailing blank is not initially shown + - _not sure about this yet..._ - ``` code block -- resized on block edit (`keydown` in edit mode) ``` - - the problem\: - - we need to keep both the `.view` and `.code` elements' height in sync - - Q: should the sizes be equal? which is the master size? + - _this seems to be because of a stray `\n` after re-render + `white-space: ...` in the `.view` element..._ - ways to fix: - - active (current): - - _need to rework the logic..._ + - semi-active (current): + - active mode currently disabled (see: `UPDATE_CODE_SIZE`) + - TEST - passive (preferred): - - try `display:flex` on `.block` and position one elem over the other... - - _...not sure how to deal with `.children` yet_ - - another way to go is to wrap `.text` stuff in a div and style that... - - not sure if this is possible -- things like tables/graphs/... will break things (still investigating) + - REJECT try `display:flex` on `.block` and position one elem over the other... + - REJECT another way to go is to wrap `.text` stuff in a div and style that... + - active: + - ... - blank line at end of block is initially not shown - this block contains two lines (empty below) @@ -103,7 +103,8 @@ 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: can't move down out of a code block (_directly connected to the above_) + - DONE BUG: can't move down out of a code block (_directly connected to the above_) + collapsed:: true - edit this line, then move down - ``` code