mirror of
https://github.com/flynx/pWiki.git
synced 2025-12-25 12:21:58 +00:00
Compare commits
No commits in common. "042c42f86b5189322d14c12db766e1c80ad7e407" and "7fbc5e863eb2c65f1982457f52a3a607692c2bb5" have entirely different histories.
042c42f86b
...
7fbc5e863e
@ -44,37 +44,11 @@
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
|
||||
/* loading indicator */
|
||||
&.loading {
|
||||
.outline {
|
||||
pointer-events: none;
|
||||
}
|
||||
.outline>.block {
|
||||
opacity: 0.2;
|
||||
}
|
||||
/* XXX STUB... */
|
||||
.outline:before {
|
||||
content: "Loading...";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 1em;
|
||||
}
|
||||
.outline:empty:before {
|
||||
position: relative;
|
||||
top: 0;
|
||||
}
|
||||
/* override empty indicator */
|
||||
.outline:after {
|
||||
content: "" !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* editor code */
|
||||
&>.code {
|
||||
/* XXX do we need this???
|
||||
.code {
|
||||
display: none;
|
||||
}
|
||||
*/
|
||||
|
||||
/* header */
|
||||
.header {
|
||||
|
||||
@ -288,7 +288,7 @@ var quoted = {
|
||||
quote: function(_, code){
|
||||
return `<code>${ this.encode(code) }</code>` },
|
||||
|
||||
pre_pattern: /(?<!\\)```(.*\s*\n)((\n|.)*?)\h*(?<!\\)```[ \t]*(?:$|\n)/gm,
|
||||
pre_pattern: /(?<!\\)```(.*\s*\n)((\n|.)*?)\h*(?<!\\)```(?:[ \t]*$|[ \t]*\n)/g,
|
||||
preEncode: function(text){
|
||||
return this.encode(text)
|
||||
.replace(/`/, '\\`') },
|
||||
@ -886,7 +886,6 @@ var JSONOutline = {
|
||||
__styles: undefined,
|
||||
|
||||
// block render...
|
||||
// XXX PRE_POST_NEWLINE can we avoid explicitly patching for empty lines after pre???
|
||||
__code2html__: function(code, elem={}){
|
||||
var that = this
|
||||
|
||||
@ -913,7 +912,7 @@ var JSONOutline = {
|
||||
code.replace(/\x00/g, ''))
|
||||
// split text into parsable and non-parsable sections...
|
||||
var sections = text
|
||||
// split format:
|
||||
// split fomat:
|
||||
// [ text <match> <type> <body>, ... ]
|
||||
.split(/(<(pre|code)(?:|\s[^>]*)>((?:\n|.)*)<\/\2>)/g)
|
||||
// sort out the sections...
|
||||
@ -935,18 +934,6 @@ var JSONOutline = {
|
||||
.join('')
|
||||
// stage: post...
|
||||
elem.text = run('post', text)
|
||||
// patch for showing trailing empty lines in dom...
|
||||
elem.text =
|
||||
(elem.text == ''
|
||||
// XXX PRE_POST_NEWLINE can we avoid this??
|
||||
// ...simply .replace(/\n$/, '\n ') does not solve
|
||||
// this -- doubles the single trailing empty line after pre...
|
||||
// ...this will require a test for all block elements eventually (???)
|
||||
|| elem.text.trim().endsWith('</pre>')) ?
|
||||
elem.text
|
||||
// NOTE: adding a space here is done to prevent the browser
|
||||
// from hiding the last newline...
|
||||
: elem.text + ' '
|
||||
|
||||
return elem },
|
||||
|
||||
@ -1500,15 +1487,17 @@ var Outline = {
|
||||
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???
|
||||
_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(
|
||||
@ -1542,7 +1531,12 @@ var Outline = {
|
||||
if(this.__code2html__){
|
||||
// NOTE: we are ignoring the .collapsed attr here
|
||||
parsed = this.__code2html__(data.text, {...data})
|
||||
html.innerHTML = parsed.text
|
||||
html.innerHTML =
|
||||
parsed.text == '' ?
|
||||
parsed.text
|
||||
// NOTE: adding a space here is done to prevent the browser
|
||||
// from hiding the last newline...
|
||||
: parsed.text + ' '
|
||||
// heading...
|
||||
this.__styles != null
|
||||
&& node.classList.remove(...this.__styles)
|
||||
@ -1550,11 +1544,16 @@ var Outline = {
|
||||
&& node.classList.add(...parsed.style)
|
||||
delete parsed.style
|
||||
} else {
|
||||
html.innerHTML = data.text }
|
||||
html.innerHTML =
|
||||
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.updateSize() }
|
||||
code.updateSize()
|
||||
// NOTE: this will have no effect if the element is not attached...
|
||||
//this._updateCodeSize(code) }
|
||||
this._updateCodeSize(code) }
|
||||
//this._syncTextSize(code, html) }
|
||||
|
||||
for(var [attr, value] of Object.entries({...data, ...parsed})){
|
||||
@ -1903,7 +1902,7 @@ var Outline = {
|
||||
cur[place](block)
|
||||
: undefined
|
||||
|
||||
//this._updateCodeSize(code)
|
||||
this._updateCodeSize(code)
|
||||
//this._syncTextSize(code, view)
|
||||
|
||||
this.setUndo(this.path(cur), 'remove', [this.path(block)]) }
|
||||
@ -1911,7 +1910,6 @@ var Outline = {
|
||||
/*/ XXX
|
||||
load: function(data){
|
||||
var that = this
|
||||
this.dom.classList.add('loading')
|
||||
data = typeof(data) == 'string' ?
|
||||
this.parse(data)
|
||||
: data instanceof Array ?
|
||||
@ -1932,22 +1930,20 @@ var Outline = {
|
||||
.clear()
|
||||
.outline
|
||||
.append(...level(data))
|
||||
//// update sizes of all the textareas (transparent)...
|
||||
//// NOTE: this is needed to make initial clicking into multi-line
|
||||
//// 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...
|
||||
//setTimeout(function(){
|
||||
// var f = that._updateCodeSize
|
||||
// //var f = that._syncTextSize.bind(that)
|
||||
// for(var e of [...that.outline.querySelectorAll('textarea')]){
|
||||
// f(e) } }, 0)
|
||||
this.dom.classList.remove('loading')
|
||||
// update sizes of all the textareas (transparent)...
|
||||
// NOTE: this is needed to make initial clicking into multi-line
|
||||
// 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...
|
||||
setTimeout(function(){
|
||||
var f = that._updateCodeSize
|
||||
//var f = that._syncTextSize.bind(that)
|
||||
for(var e of [...that.outline.querySelectorAll('textarea')]){
|
||||
f(e) } }, 0)
|
||||
return this },
|
||||
/*/ // XXX JSON version...
|
||||
load: function(data){
|
||||
var that = this
|
||||
this.dom.classList.add('loading')
|
||||
data = typeof(data) == 'string' ?
|
||||
this.parse(data)
|
||||
: data instanceof Array ?
|
||||
@ -1958,19 +1954,18 @@ var Outline = {
|
||||
|
||||
this.outline.innerHTML = this.html(data)
|
||||
|
||||
//// update sizes of all the textareas (transparent)...
|
||||
//// NOTE: this is needed to make initial clicking into multi-line
|
||||
//// 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._updateCodeSize.bind(that)
|
||||
// //var f = that._syncTextSize.bind(that)
|
||||
// for(var e of [...that.outline.querySelectorAll('textarea')]){
|
||||
// f(e) } }, 0)
|
||||
this.dom.classList.remove('loading')
|
||||
// update sizes of all the textareas (transparent)...
|
||||
// NOTE: this is needed to make initial clicking into multi-line
|
||||
// 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._updateCodeSize.bind(that)
|
||||
//var f = that._syncTextSize.bind(that)
|
||||
for(var e of [...that.outline.querySelectorAll('textarea')]){
|
||||
f(e) } }, 0)
|
||||
return this },
|
||||
//*/
|
||||
|
||||
|
||||
@ -48,6 +48,71 @@ var setup = function(){
|
||||
-
|
||||
- ## Bugs:
|
||||
focused:: true
|
||||
- BUG leading/trailing blank lines mishandled:
|
||||
- block sizing
|
||||
- issues:
|
||||
-
|
||||
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)
|
||||
```
|
||||
- _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_
|
||||
- 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
|
||||
- this block contains two lines (empty below)
|
||||
|
||||
- ```
|
||||
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)
|
||||
-
|
||||
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...
|
||||
- this _seems `to` work_
|
||||
- `while` _this `does` not_
|
||||
@ -108,13 +173,18 @@ var setup = function(){
|
||||
- side margins are a bit too large
|
||||
- still need to account for toolbar to the right
|
||||
- left side does not need to be as wide
|
||||
- DONE TEST BUG: parser: code blocks do not ignore single back-quotes...
|
||||
collapsed:: true
|
||||
- ```
|
||||
x = `moo`
|
||||
```
|
||||
- _this also leads to double quoting of html..._
|
||||
```
|
||||
x = `<i>moo</i>`
|
||||
```
|
||||
-
|
||||
- ## ToDo:
|
||||
- add loading spinner -- `.loading` class set on `.load(..)` and unset when done...
|
||||
- DONE set/unset class
|
||||
- add animation
|
||||
- clicking left of the block can select one of parent blocks -- bug or feature??
|
||||
- _can we extend the left click zone all the way to the left edge???_
|
||||
- clicking left of the block can select one of parent blocks -- bug or a feature??
|
||||
- `.json(..)`, `.data(..)`, ... should be signature compatible with `.get(..)` (???)
|
||||
- _current state causes constant confusion..._
|
||||
- Time to think about a standalone client -- at least to edit own notes as a test...
|
||||
@ -124,6 +194,7 @@ var setup = function(){
|
||||
- Q: When moving up/down between nodes do we want to place the caret relative to markdown (current) or to view? (see: `CARET_V_MOVE`)
|
||||
- Q: Should we use `HTMLTextAreaElement.autoUpdateSize(..)` or handle it globally in setup???
|
||||
- _...I'm leaning towards the later..._
|
||||
- Q: Can we place a cursor in a table correctly???
|
||||
- Q: Should tables be text-based markdown or higher-level?
|
||||
collapsed:: true
|
||||
- for reference a normal table
|
||||
@ -187,8 +258,9 @@ var setup = function(){
|
||||
- delete
|
||||
- copy/cut/past (???)
|
||||
- touch/mouse (???)
|
||||
- Q: should we select text through multiple nodes??
|
||||
- _...should this turn into node selection as soon as node boundary is crossed???_
|
||||
- Q: should we select text (mouse/touch) without first focusing??
|
||||
- _...logseq does not do this either_
|
||||
- now this is possible by dragging from a click zone...
|
||||
- copy/paste nodes/trees
|
||||
- numbered lists: add counters to a depth of 6-7...
|
||||
- _or find a way to make them repeat..._
|
||||
@ -520,18 +592,6 @@ var setup = function(){
|
||||
-
|
||||
- ---
|
||||
- ### Playground for testing
|
||||
- Empty line tests::
|
||||
-
|
||||
leading
|
||||
- trailing
|
||||
|
||||
-
|
||||
both
|
||||
|
||||
- ```
|
||||
block with trailing empty line
|
||||
```
|
||||
|
||||
- A
|
||||
collapsed:: true
|
||||
- a
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user