lots of fixes...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2023-11-27 00:31:56 +03:00
parent baeb64cde5
commit 0524c26c0c
3 changed files with 46 additions and 81 deletions

View File

@ -44,11 +44,10 @@
display: block; display: block;
position: relative; position: relative;
/* XXX do we need this??? /* hide the root editor code... */
.code { &>.code {
display: none; display: none;
} }
*/
/* header */ /* header */
.header { .header {

View File

@ -288,7 +288,7 @@ var quoted = {
quote: function(_, code){ quote: function(_, code){
return `<code>${ this.encode(code) }</code>` }, return `<code>${ this.encode(code) }</code>` },
pre_pattern: /(?<!\\)```(.*\s*\n)((\n|.)*?)\h*(?<!\\)```(?:[ \t]*$|[ \t]*\n)/g, pre_pattern: /(?<!\\)```(.*\s*\n)((\n|.)*?)\h*(?<!\\)```[ \t]*(?:$|\n)/g,
preEncode: function(text){ preEncode: function(text){
return this.encode(text) return this.encode(text)
.replace(/`/, '\\`') }, .replace(/`/, '\\`') },
@ -933,7 +933,19 @@ var JSONOutline = {
.flat() .flat()
.join('') .join('')
// stage: post... // stage: post...
elem.text = run('post', text) elem.text = run('post', text)
elem.text =
// XXX POST_PRE_WHITESPACE adding a </pre> exception here feels hacky...
// ...a space after pre will force a new line but not
// adding it will hide a single empty line after...
(elem.text == ''
|| elem.text.endsWith('</pre>')) ?
elem.text
// NOTE: adding a space here is done to prevent the browser
// from hiding the last newline...
: elem.text + ' '
return elem }, return elem },
@ -1487,17 +1499,15 @@ var Outline = {
focused: 'cls', focused: 'cls',
}, },
/* XXX not used -- do we need this??
// XXX UPDATE_CODE_SIZE this is a no-op at this point -- do we need this??? // XXX UPDATE_CODE_SIZE this is a no-op at this point -- do we need this???
_updateCodeSize: function(code, view){ _updateCodeSize: function(code, view){
// XXX UPDATE_CODE_SIZE
return this
code.style.height = code.style.height =
getComputedStyle( getComputedStyle(
view view
?? code.nextSibling) ?? code.nextSibling)
.height .height
return this }, return this },
/* XXX not used...
_updateViewSize: function(view, code){ _updateViewSize: function(view, code){
view.style.height = view.style.height =
getComputedStyle( getComputedStyle(
@ -1531,13 +1541,7 @@ var Outline = {
if(this.__code2html__){ if(this.__code2html__){
// NOTE: we are ignoring the .collapsed attr here // NOTE: we are ignoring the .collapsed attr here
parsed = this.__code2html__(data.text, {...data}) parsed = this.__code2html__(data.text, {...data})
html.innerHTML = html.innerHTML = parsed.text
//(parsed.text == '' || parsed.text.endsWith('</pre>')) ?
parsed.text == '' ?
parsed.text
// NOTE: adding a space here is done to prevent the browser
// from hiding the last newline...
: parsed.text + ' '
// heading... // heading...
this.__styles != null this.__styles != null
&& node.classList.remove(...this.__styles) && node.classList.remove(...this.__styles)
@ -1545,17 +1549,11 @@ var Outline = {
&& node.classList.add(...parsed.style) && node.classList.add(...parsed.style)
delete parsed.style delete parsed.style
} else { } else {
html.innerHTML = html.innerHTML = data.text }
//(data.text == '' || data.text.endsWith('</pre>')) ?
data.text == '' ?
data.text
// NOTE: adding a space here is done to prevent the browser
// from hiding the last newline...
: data.text + ' ' }
code.value = data.text code.value = data.text
code.updateSize() code.updateSize() }
// NOTE: this will have no effect if the element is not attached... // NOTE: this will have no effect if the element is not attached...
this._updateCodeSize(code) } //this._updateCodeSize(code) }
//this._syncTextSize(code, html) } //this._syncTextSize(code, html) }
for(var [attr, value] of Object.entries({...data, ...parsed})){ for(var [attr, value] of Object.entries({...data, ...parsed})){
@ -1904,7 +1902,7 @@ var Outline = {
cur[place](block) cur[place](block)
: undefined : undefined
this._updateCodeSize(code) //this._updateCodeSize(code)
//this._syncTextSize(code, view) //this._syncTextSize(code, view)
this.setUndo(this.path(cur), 'remove', [this.path(block)]) } this.setUndo(this.path(cur), 'remove', [this.path(block)]) }
@ -1956,18 +1954,18 @@ var Outline = {
this.outline.innerHTML = this.html(data) this.outline.innerHTML = this.html(data)
// update sizes of all the textareas (transparent)... //// update sizes of all the textareas (transparent)...
// NOTE: this is needed to make initial clicking into multi-line //// NOTE: this is needed to make initial clicking into multi-line
// blocks place the cursor into the clicked location. //// blocks place the cursor into the clicked location.
// ...this is done by expanding the textarea to the element //// ...this is done by expanding the textarea to the element
// size and enabling it to intercept clicks correctly... //// size and enabling it to intercept clicks correctly...
// XXX this is a hack -- need to style the thing in such away //// XXX this is a hack -- need to style the thing in such away
// so as to not require this step... //// so as to not require this step...
setTimeout(function(){ //setTimeout(function(){
var f = that._updateCodeSize.bind(that) // var f = that._updateCodeSize.bind(that)
//var f = that._syncTextSize.bind(that) // //var f = that._syncTextSize.bind(that)
for(var e of [...that.outline.querySelectorAll('textarea')]){ // for(var e of [...that.outline.querySelectorAll('textarea')]){
f(e) } }, 0) // f(e) } }, 0)
return this }, return this },
//*/ //*/

View File

@ -48,28 +48,22 @@ var setup = function(){
- -
- ## Bugs: - ## Bugs:
focused:: true focused:: true
- BUG leading/trailing blank lines mishandled: - BUG whitespace after trailing code block is not shown (see next bug for details)
- also see: `POST_PRE_WHITESPACE`
- DONE BUG horizontal whitespace after a block of code create an empty line after the `<pre>` tag...
collapsed:: true
- ```
code block -- resized on block edit (`keydown` in edit mode)
```
- this is due to `.update(..)` adding a `' '` to the text...
- DONE BUG leading/trailing blank lines mishandled:
collapsed:: true
- block sizing - block sizing
- issues: - issues:
- -
blank lines above and below -- the trailing blank is not initially shown blank lines above and below -- the trailing blank is not initially shown
- _not sure about this yet..._ - the main reason for this is that we are not adding a `" "` after each generated block as we do on `.update(..)` -- move this functionality up...
- ```
code block -- resized on block edit (`keydown` in edit mode)
```
- _this seems to be because of a stray `\n` after re-render + `white-space: ...` in the `.view` element..._
_...this is logical as we do not render code on load and to on after edit_
- narrowed the issue down to `.update(..)` and adding a ' ' to the text...
- ways to fix:
- semi-active (current):
- active mode currently disabled (see: `UPDATE_CODE_SIZE`)
- TEST
- passive (preferred):
- 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 - blank line at end of block is initially not shown
- this block contains two lines (empty below) - this block contains two lines (empty below)
@ -88,32 +82,6 @@ var setup = function(){
- -
this block contains three lines (empty above and below) this block contains three lines (empty above and below)
- DONE blank line at start of block is shown but removed on edit
collapsed:: true
-
this block also contains two lines (empty above)
- `editor.data(editor.get()).text` -- no `\n` at start...
- `editor.get().querySelector('.code').value` -- no `\n` at start...
- ```
d = document.createElement('div')
d.innerHTML = editor.htmlBlock({text: '\nabc\n'}) // -> '\n' exists...
d.querySelector('.code').value // -> no '\n' at start...
```
...seems that the `\n` is lost on html parse...
-
this block contains three lines (empty above and below)
- _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???_
- 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
```
- 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... - BUG: styling error...
- this _seems `to` work_ - this _seems `to` work_
- `while` _this `does` not_ - `while` _this `does` not_
@ -185,7 +153,7 @@ var setup = function(){
``` ```
- -
- ## ToDo: - ## ToDo:
- clicking left of the block can select one of parent blocks -- bug or a feature?? - clicking left of the block can select one of parent blocks -- bug or feature??
- `.json(..)`, `.data(..)`, ... should be signature compatible with `.get(..)` (???) - `.json(..)`, `.data(..)`, ... should be signature compatible with `.get(..)` (???)
- _current state causes constant confusion..._ - _current state causes constant confusion..._
- Time to think about a standalone client -- at least to edit own notes as a test... - Time to think about a standalone client -- at least to edit own notes as a test...