diff --git a/experiments/outline-editor/editor.js b/experiments/outline-editor/editor.js index 2d51ce2..464b9c3 100755 --- a/experiments/outline-editor/editor.js +++ b/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 }, diff --git a/experiments/outline-editor/index.html b/experiments/outline-editor/index.html index ae69058..0349fd7 100755 --- a/experiments/outline-editor/index.html +++ b/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... - - this _seems `to` work_ - - `while` _this `does` not_ - - _seems to be connected with quoting..._ - - BUG: can't move down out of a code block + - BUG: can't move down out of a code block (_directly connected to the above_) - 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