mirror of
https://github.com/flynx/pWiki.git
synced 2025-12-25 12:21:58 +00:00
Compare commits
No commits in common. "6c484194ae80e71485fc46af0aa502169bbcfdd8" and "9489220ec3934be81e09db06844f4c44938cb390" have entirely different histories.
6c484194ae
...
9489220ec3
@ -138,25 +138,23 @@ var plugin = {
|
||||
|
||||
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
|
||||
// XXX style attributes...
|
||||
var attributes = {
|
||||
__proto__: plugin,
|
||||
|
||||
__parse__: function(text, editor, elem){
|
||||
var skip = new Set([
|
||||
'text',
|
||||
'focused',
|
||||
'collapsed',
|
||||
'id',
|
||||
'children',
|
||||
'style',
|
||||
])
|
||||
__pre_parse__: function(text, editor, elem){
|
||||
return text
|
||||
+ Object.entries(elem)
|
||||
.reduce(function(res, [key, value]){
|
||||
return skip.has(key) ?
|
||||
res
|
||||
: res + `<br>${key}: ${value}` }, '') },
|
||||
// hidden attributes...
|
||||
// XXX make this generic...
|
||||
// collapsed...
|
||||
.replace(/(\n|^)\s*collapsed::\s*(.*)\s*(\n|$)/,
|
||||
function(_, value){
|
||||
elem.collapsed = value.trim() == 'true'
|
||||
return '' })
|
||||
// id...
|
||||
.replace(/(\n|^)\s*id::\s*(.*)\s*(\n|$)/,
|
||||
function(_, value){
|
||||
elem.id = value.trim()
|
||||
return '' }) },
|
||||
}
|
||||
|
||||
|
||||
@ -616,6 +614,7 @@ var Outline = {
|
||||
// - parsing
|
||||
// - event dropping
|
||||
plugins: [
|
||||
attributes,
|
||||
blocks,
|
||||
quoted,
|
||||
|
||||
@ -623,8 +622,6 @@ var Outline = {
|
||||
// treating '[_] ... [_]' as italic...
|
||||
tasks,
|
||||
styling,
|
||||
// XXX
|
||||
//attributes,
|
||||
tables,
|
||||
symbols,
|
||||
//syntax,
|
||||
@ -841,28 +838,26 @@ var Outline = {
|
||||
update: function(node='focused', data){
|
||||
var node = this.get(node)
|
||||
data ??= this.data(node, false)
|
||||
for(var [attr, value] of Object.entries(data)){
|
||||
if(attr == 'children'){
|
||||
continue }
|
||||
|
||||
var parsed = {}
|
||||
if('text' in data){
|
||||
var text = node.querySelector('textarea')
|
||||
var html = node.querySelector('span')
|
||||
if(this.__code2html__){
|
||||
// NOTE: we are ignoring the .collapsed attr here
|
||||
parsed = this.__code2html__(data.text, {...data})
|
||||
html.innerHTML = parsed.text
|
||||
// heading...
|
||||
node.classList.remove(...this.__styles)
|
||||
parsed.style
|
||||
&& node.classList.add(...parsed.style)
|
||||
delete parsed.style
|
||||
} else {
|
||||
html.innerHTML = data.text }
|
||||
text.value = data.text
|
||||
// XXX this does not seem to work until we click in the textarea...
|
||||
text.autoUpdateSize() }
|
||||
|
||||
for(var [attr, value] of Object.entries({...data, ...parsed})){
|
||||
if(attr == 'children' || attr == 'text'){
|
||||
if(attr == 'text'){
|
||||
var text = node.querySelector('textarea')
|
||||
var html = node.querySelector('span')
|
||||
if(this.__code2html__){
|
||||
// NOTE: we are ignoring the .collapsed attr here
|
||||
var parsed = this.__code2html__(data.text)
|
||||
html.innerHTML = parsed.text
|
||||
// heading...
|
||||
node.classList.remove(...this.__styles)
|
||||
parsed.style
|
||||
&& node.classList.add(...parsed.style)
|
||||
} else {
|
||||
html.innerHTML = data.text }
|
||||
text.value = data.text
|
||||
// XXX this does not seem to work until we click in the textarea...
|
||||
text.autoUpdateSize()
|
||||
continue }
|
||||
|
||||
var type = this.__block_attrs__[attr]
|
||||
@ -877,7 +872,8 @@ var Outline = {
|
||||
(value ?
|
||||
node.setAttribute(attr, '')
|
||||
: node.removeAttribute(attr))
|
||||
: value != null ?
|
||||
: (attr in data
|
||||
&& value != null) ?
|
||||
node.setAttribute(attr, value)
|
||||
: node.removeAttribute(attr) } }
|
||||
this.__change__()
|
||||
@ -992,13 +988,16 @@ var Outline = {
|
||||
this.__change__()
|
||||
return this },
|
||||
|
||||
// block render...
|
||||
// block serialization...
|
||||
// XXX need a way to filter input text...
|
||||
// use-case: hidden attributes...
|
||||
// NOTE: this is auto-populated by .__code2html__(..)
|
||||
__styles: undefined,
|
||||
__code2html__: function(code, elem={}){
|
||||
__code2html__: function(code){
|
||||
var that = this
|
||||
var elem = {
|
||||
collapsed: false,
|
||||
}
|
||||
|
||||
// only whitespace -> keep element blank...
|
||||
if(code.trim() == ''){
|
||||
@ -1014,9 +1013,6 @@ var Outline = {
|
||||
}[stage]
|
||||
return that.threadPlugins(meth, text, that, elem) }
|
||||
|
||||
elem = this.parseBlockAttrs(code, elem)
|
||||
code = elem.text
|
||||
|
||||
// stage: pre...
|
||||
var text = run('pre',
|
||||
// pre-sanitize...
|
||||
@ -1119,54 +1115,6 @@ var Outline = {
|
||||
.flat()
|
||||
.join('\n') },
|
||||
|
||||
//
|
||||
// Parse attrs...
|
||||
// .parseBlockAttrs(<text>[, <elem>])
|
||||
// -> <elem>
|
||||
//
|
||||
// Parse attrs keeping non-system attrs in .text...
|
||||
// .parseBlockAttrs(<text>, true[, <elem>])
|
||||
// -> <elem>
|
||||
//
|
||||
// Parse attrs keeping all attrs in .text...
|
||||
// .parseBlockAttrs(<text>, 'all'[, <elem>])
|
||||
// -> <elem>
|
||||
//
|
||||
parseBlockAttrs: function(text, keep=false, elem={}){
|
||||
if(typeof(keep) == 'object'){
|
||||
elem = keep
|
||||
keep = typeof(elem) == 'boolean' ?
|
||||
elem
|
||||
: false }
|
||||
var system = this.__block_attrs__
|
||||
var clean = text
|
||||
// XXX for some reason changing the first group into (?<= .. )
|
||||
// still eats up the whitespace...
|
||||
// ...putting the same pattern in a normal group and
|
||||
// returning it works fine...
|
||||
//.replace(/(?<=[\n\h]*)(?:(?:\n|^)\s*\w*\s*::\s*[^\n]*\s*)*$/,
|
||||
.replace(/([\n\t ]*)(?:(?:\n|^)[\t ]*\w*[\t ]*::[\t ]*[^\n]*[\t ]*)+$/,
|
||||
function(match, ws){
|
||||
var attrs = match
|
||||
.trim()
|
||||
.split(/(?:[\t ]*::[\t ]*|[\t ]*\n[\t ]*)/g)
|
||||
while(attrs.length > 0){
|
||||
var [name, val] = attrs.splice(0, 2)
|
||||
elem[name] =
|
||||
val == 'true' ?
|
||||
true
|
||||
: val == 'false' ?
|
||||
false
|
||||
: val
|
||||
// keep non-system attrs...
|
||||
if(keep
|
||||
&& !(name in system)){
|
||||
ws += `\n${name}::${val}` } }
|
||||
return ws })
|
||||
elem.text = keep == 'all' ?
|
||||
text
|
||||
: clean
|
||||
return elem },
|
||||
parse: function(text){
|
||||
var that = this
|
||||
text = text
|
||||
@ -1186,14 +1134,29 @@ var Outline = {
|
||||
// same level...
|
||||
if(sep.length == prev_sep.length){
|
||||
var [_, block] = lst.splice(0, 2)
|
||||
var attrs = that.parseBlockAttrs(block)
|
||||
attrs.text = that.__text2code__(attrs.text
|
||||
// normalize indent...
|
||||
.split(new RegExp('\n'+sep+' ', 'g'))
|
||||
.join('\n'))
|
||||
parent.push({
|
||||
var attrs = {
|
||||
collapsed: false,
|
||||
focused: false,
|
||||
}
|
||||
block = block
|
||||
// XXX generalize attr processing...
|
||||
.replace(/\n\s*id::\s*(.*)\s*$/,
|
||||
function(_, value){
|
||||
attrs.id = value
|
||||
return '' })
|
||||
.replace(/\n\s*focused::\s*(.*)\s*$/,
|
||||
function(_, value){
|
||||
attrs.focused = value == 'true'
|
||||
return '' })
|
||||
.replace(/\n\s*collapsed::\s*(.*)\s*$/,
|
||||
function(_, value){
|
||||
attrs.collapsed = value == 'true'
|
||||
return '' })
|
||||
parent.push({
|
||||
text: that.__text2code__(block
|
||||
// normalize indent...
|
||||
.split(new RegExp('\n'+sep+' ', 'g'))
|
||||
.join('\n')),
|
||||
...attrs,
|
||||
children: [],
|
||||
})
|
||||
@ -1227,7 +1190,6 @@ var Outline = {
|
||||
children.classList.add('children')
|
||||
children.setAttribute('tabindex', '-1')
|
||||
block.append(code, html, children)
|
||||
|
||||
this.update(block, data)
|
||||
|
||||
// place...
|
||||
@ -1364,18 +1326,6 @@ var Outline = {
|
||||
this.toggleCollapse(false)
|
||||
: this.focus('next') } },
|
||||
|
||||
Home: function(evt){
|
||||
if(this.get('edited')
|
||||
&& !evt.ctrlKey){
|
||||
return }
|
||||
evt.preventDefault()
|
||||
this.focus(0) },
|
||||
End: function(evt){
|
||||
if(this.get('edited')
|
||||
&& !evt.ctrlKey){
|
||||
return }
|
||||
evt.preventDefault()
|
||||
this.focus(-1) },
|
||||
PageUp: function(evt){
|
||||
var edited = this.get('edited')
|
||||
if(!edited
|
||||
@ -1391,7 +1341,7 @@ var Outline = {
|
||||
evt.preventDefault()
|
||||
this.shift('down') } },
|
||||
|
||||
// indent..
|
||||
// indent...
|
||||
Tab: function(evt){
|
||||
evt.preventDefault()
|
||||
var edited = this.get('edited')
|
||||
@ -1611,9 +1561,7 @@ var Outline = {
|
||||
var elem = evt.target
|
||||
if(elem.classList.contains('code')){
|
||||
var block = elem.parentElement
|
||||
// clean out attrs...
|
||||
elem.value = that.parseBlockAttrs(elem.value).text
|
||||
that.update(block)
|
||||
that.update(block, { text: elem.value })
|
||||
// give the browser a chance to update the DOM...
|
||||
// XXX revise...
|
||||
setTimeout(function(){
|
||||
|
||||
@ -38,18 +38,24 @@ var setup = function(){
|
||||
- An outline-based markdown editor experiment
|
||||
- ### Infuences::
|
||||
- Logseq
|
||||
- Conboy (Nokia N900's Tomboy clone)
|
||||
- Tomboy
|
||||
- Bonsai
|
||||
-
|
||||
- // Seems that I unintentionally implemented quite a chunk of the markdown spec ;)
|
||||
-
|
||||
- ## Bugs:
|
||||
- BUG: editor: FF seems to update the style every other key press -- should be live...
|
||||
- BUG: scrolling into view needs tuning...
|
||||
- BUG: mobile browsers behave quite chaotically ignoring parts of the styling...
|
||||
-
|
||||
- ## ToDo:
|
||||
- pgup/pgdown/~home/end~ buttons
|
||||
- ASAP: unify attr parsing
|
||||
- _now duplicated in `.parse(..)` and `.__code2html__(..)`_
|
||||
- might be a good idea to add a special text parse stage and use in on both branches...
|
||||
- ASAP: attrs in editor are not parsed correctly (see: [attrs](#attributes))
|
||||
- ASAP: multiple attrs are not handled correctly (see: [attrs](#attributes))
|
||||
- ASAP: style attrs (see: [attrs](#attributes))
|
||||
- ASAP: scroll into view is bad...
|
||||
- ASAP: mobile browsers behave quite chaotically ignoring parts of the styling...
|
||||
- pgup/pgdown/home/end buttons
|
||||
- identify a block (index, id, ...)
|
||||
- FEATURE: "crop" -- view block tree separately...
|
||||
- focus
|
||||
@ -75,7 +81,6 @@ var setup = function(){
|
||||
- embed css
|
||||
- cleanup html
|
||||
- generate ideomatic html (???)
|
||||
- style attrs (see: [attrs](#attributes))
|
||||
- FEATURE: `collapse-children:: true` block option -- when loading collapse all immediate children
|
||||
- FF: figure out a way to draw expand/collapse bullets without the use of CSS' `:has(..)`
|
||||
- table inline editing a-la code editing -- click cell and edit directly...
|
||||
@ -106,12 +111,6 @@ var setup = function(){
|
||||
block text
|
||||
- NOTE: this is only a problem if making list-items manually -- disable???
|
||||
- empty item height is a bit off...
|
||||
- DONE unify attr parsing
|
||||
collapsed:: true
|
||||
- _now duplicated in `.parse(..)` and `.__code2html__(..)`_
|
||||
- might be a good idea to add a special text parse stage and use in on both branches...
|
||||
- DONE attrs in editor are not parsed correctly (see: [attrs](#attributes))
|
||||
- DONE multiple attrs are not handled correctly (see: [attrs](#attributes))
|
||||
- DONE call `.sync()` on all changes...
|
||||
- DONE show list bullet if node is empty but edited...
|
||||
collapsed:: true
|
||||
@ -264,8 +263,7 @@ var setup = function(){
|
||||
- [_] we can also add inline [x] checkboxes and states: [%]
|
||||
- navigating checkboxes in view mode can be done via `ctrl-left` / `ctrl-right` and toggling is done via `space`
|
||||
- links
|
||||
- [link](about:blank)
|
||||
- [local links](#attributes)
|
||||
- [example](about:blank)
|
||||
- https://example.com
|
||||
- ./path/to/file /path/to -- _not supported yet_
|
||||
- Tables
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user