mirror of
https://github.com/flynx/pWiki.git
synced 2025-12-25 12:21:58 +00:00
Compare commits
6 Commits
7fbc5e863e
...
042c42f86b
| Author | SHA1 | Date | |
|---|---|---|---|
| 042c42f86b | |||
| c5c0ac4611 | |||
| 8699e47376 | |||
| 91ed572a32 | |||
| 0524c26c0c | |||
| baeb64cde5 |
@ -44,11 +44,37 @@
|
|||||||
display: block;
|
display: block;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
/* XXX do we need this???
|
|
||||||
.code {
|
/* 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 {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
*/
|
|
||||||
|
|
||||||
/* header */
|
/* header */
|
||||||
.header {
|
.header {
|
||||||
|
|||||||
@ -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)/gm,
|
||||||
preEncode: function(text){
|
preEncode: function(text){
|
||||||
return this.encode(text)
|
return this.encode(text)
|
||||||
.replace(/`/, '\\`') },
|
.replace(/`/, '\\`') },
|
||||||
@ -886,6 +886,7 @@ var JSONOutline = {
|
|||||||
__styles: undefined,
|
__styles: undefined,
|
||||||
|
|
||||||
// block render...
|
// block render...
|
||||||
|
// XXX PRE_POST_NEWLINE can we avoid explicitly patching for empty lines after pre???
|
||||||
__code2html__: function(code, elem={}){
|
__code2html__: function(code, elem={}){
|
||||||
var that = this
|
var that = this
|
||||||
|
|
||||||
@ -912,7 +913,7 @@ var JSONOutline = {
|
|||||||
code.replace(/\x00/g, ''))
|
code.replace(/\x00/g, ''))
|
||||||
// split text into parsable and non-parsable sections...
|
// split text into parsable and non-parsable sections...
|
||||||
var sections = text
|
var sections = text
|
||||||
// split fomat:
|
// split format:
|
||||||
// [ text <match> <type> <body>, ... ]
|
// [ text <match> <type> <body>, ... ]
|
||||||
.split(/(<(pre|code)(?:|\s[^>]*)>((?:\n|.)*)<\/\2>)/g)
|
.split(/(<(pre|code)(?:|\s[^>]*)>((?:\n|.)*)<\/\2>)/g)
|
||||||
// sort out the sections...
|
// sort out the sections...
|
||||||
@ -933,7 +934,19 @@ var JSONOutline = {
|
|||||||
.flat()
|
.flat()
|
||||||
.join('')
|
.join('')
|
||||||
// stage: post...
|
// stage: post...
|
||||||
elem.text = run('post', text)
|
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 },
|
return elem },
|
||||||
|
|
||||||
@ -1487,17 +1500,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,12 +1542,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
|
|
||||||
// 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)
|
||||||
@ -1544,16 +1550,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
|
|
||||||
// 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})){
|
||||||
@ -1902,7 +1903,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)]) }
|
||||||
@ -1910,6 +1911,7 @@ var Outline = {
|
|||||||
/*/ XXX
|
/*/ XXX
|
||||||
load: function(data){
|
load: function(data){
|
||||||
var that = this
|
var that = this
|
||||||
|
this.dom.classList.add('loading')
|
||||||
data = typeof(data) == 'string' ?
|
data = typeof(data) == 'string' ?
|
||||||
this.parse(data)
|
this.parse(data)
|
||||||
: data instanceof Array ?
|
: data instanceof Array ?
|
||||||
@ -1930,20 +1932,22 @@ var Outline = {
|
|||||||
.clear()
|
.clear()
|
||||||
.outline
|
.outline
|
||||||
.append(...level(data))
|
.append(...level(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...
|
||||||
setTimeout(function(){
|
//setTimeout(function(){
|
||||||
var f = that._updateCodeSize
|
// var f = that._updateCodeSize
|
||||||
//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)
|
||||||
|
this.dom.classList.remove('loading')
|
||||||
return this },
|
return this },
|
||||||
/*/ // XXX JSON version...
|
/*/ // XXX JSON version...
|
||||||
load: function(data){
|
load: function(data){
|
||||||
var that = this
|
var that = this
|
||||||
|
this.dom.classList.add('loading')
|
||||||
data = typeof(data) == 'string' ?
|
data = typeof(data) == 'string' ?
|
||||||
this.parse(data)
|
this.parse(data)
|
||||||
: data instanceof Array ?
|
: data instanceof Array ?
|
||||||
@ -1954,18 +1958,19 @@ 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)
|
||||||
|
this.dom.classList.remove('loading')
|
||||||
return this },
|
return this },
|
||||||
//*/
|
//*/
|
||||||
|
|
||||||
|
|||||||
@ -48,71 +48,6 @@ var setup = function(){
|
|||||||
-
|
-
|
||||||
- ## Bugs:
|
- ## Bugs:
|
||||||
focused:: true
|
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...
|
- BUG: styling error...
|
||||||
- this _seems `to` work_
|
- this _seems `to` work_
|
||||||
- `while` _this `does` not_
|
- `while` _this `does` not_
|
||||||
@ -173,18 +108,13 @@ var setup = function(){
|
|||||||
- side margins are a bit too large
|
- side margins are a bit too large
|
||||||
- still need to account for toolbar to the right
|
- still need to account for toolbar to the right
|
||||||
- left side does not need to be as wide
|
- 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:
|
- ## ToDo:
|
||||||
- clicking left of the block can select one of parent blocks -- bug or a feature??
|
- 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???_
|
||||||
- `.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...
|
||||||
@ -194,7 +124,6 @@ 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: 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???
|
- Q: Should we use `HTMLTextAreaElement.autoUpdateSize(..)` or handle it globally in setup???
|
||||||
- _...I'm leaning towards the later..._
|
- _...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?
|
- Q: Should tables be text-based markdown or higher-level?
|
||||||
collapsed:: true
|
collapsed:: true
|
||||||
- for reference a normal table
|
- for reference a normal table
|
||||||
@ -258,9 +187,8 @@ var setup = function(){
|
|||||||
- delete
|
- delete
|
||||||
- copy/cut/past (???)
|
- copy/cut/past (???)
|
||||||
- touch/mouse (???)
|
- touch/mouse (???)
|
||||||
- Q: should we select text (mouse/touch) without first focusing??
|
- Q: should we select text through multiple nodes??
|
||||||
- _...logseq does not do this either_
|
- _...should this turn into node selection as soon as node boundary is crossed???_
|
||||||
- now this is possible by dragging from a click zone...
|
|
||||||
- copy/paste nodes/trees
|
- copy/paste nodes/trees
|
||||||
- numbered lists: add counters to a depth of 6-7...
|
- numbered lists: add counters to a depth of 6-7...
|
||||||
- _or find a way to make them repeat..._
|
- _or find a way to make them repeat..._
|
||||||
@ -592,6 +520,18 @@ var setup = function(){
|
|||||||
-
|
-
|
||||||
- ---
|
- ---
|
||||||
- ### Playground for testing
|
- ### Playground for testing
|
||||||
|
- Empty line tests::
|
||||||
|
-
|
||||||
|
leading
|
||||||
|
- trailing
|
||||||
|
|
||||||
|
-
|
||||||
|
both
|
||||||
|
|
||||||
|
- ```
|
||||||
|
block with trailing empty line
|
||||||
|
```
|
||||||
|
|
||||||
- A
|
- A
|
||||||
collapsed:: true
|
collapsed:: true
|
||||||
- a
|
- a
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user