flynx/pWiki
1
1
Fork 0
mirror of https://github.com/flynx/pWiki.git synced 2025-10-30 18:40:08 +00:00
Code Issues Packages Projects Releases Wiki Activity
pWiki/experiments/outline-editor/editor.js
Alex A. Naanou 845483f4f4 bugfix... 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
2024-01-24 23:24:18 +03:00

2946 lines
82 KiB
JavaScript
Executable File
Raw Blame History

/**********************************************************************
*
*
*
**********************************************************************/
//---------------------------------------------------------------------
// Helpers...
/*
function clickPoint(x,y){
document
.elementFromPoint(x, y)
.dispatchEvent(
new MouseEvent( 'click', {
view: window,
bubbles: true,
cancelable: true,
screenX: x,
screenY: y,
} )) }
//*/
// Get the character offset at coordinates...
//
// This is done by moving a range down the element until its bounding
// box corresponds the to desired coordinates. This accounts for nested
// elements.
//
// XXX do a binary search??
var getCharOffset = function(elem, x, y, data){
data = data ?? {}
var r = document.createRange()
var elem_rect = data.elem_rect =
data.elem_rect
?? elem.getBoundingClientRect()
for(var e of [...elem.childNodes]){
var prev
var c = data.c =
data.c
?? 0
// text node...
if(e instanceof Text){
var rect, cursor_line, line_start, offset
for(var i=0; i < e.length; i++){
r.setStart(e, i)
r.setEnd(e, i)
prev = rect
?? data.prev
rect = r.getBoundingClientRect()
// line change...
// NOTE: this is almost identical to .getTextOffsetAt(..) see
// that for more docs...
line_start = prev
&& prev.y != rect.y
if(line_start){
if(cursor_line){
return offset
?? c + i - 2 }
offset = undefined }
cursor_line =
rect.y <= y
&& rect.bottom >= y
if(offset == null
&& rect.x >= x){
// get closest edge of element under cursor...
var dp = Math.abs(
((!prev || line_start) ?
elem_rect
: prev).x
- x)
var dx = Math.abs(rect.x - x)
offset = dx <= dp ?
c + i
: c + i - 1
if(cursor_line){
return offset } } }
data.c += i
data.last = e.data[i-1]
// html node...
} else {
prev = data.prev =
prev
?? data.prev
// special case: line break between cursor line and next element...
if(prev
// cursor line...
&& prev.y <= y
&& prev.bottom >= y
// line break...
&& prev.y < e.getBoundingClientRect().y
// no whitespace at end, no compensation needed... (XXX test)
&& ' \t\n'.includes(data.last)){
return data.c - 1 }
// handle the node...
data = getCharOffset(e, x, y, data)
if(typeof(data) != 'object'){
return data } } }
return arguments.length > 3 ?
data
// root call...
: data.c }
// Get offset in markdown relative to the resulting text...
//
// v <----- position
// text: 'Hea|ding'
// |
// +-+ <--- offset in markdown
// |
// markdown: '# Hea|ding'
//
// XXX should this be replaced with offsetAt(..)???
var getMarkdownOffset = function(markdown, text, i){
i = i ?? text.length
var m = 0
// walk both strings skipping/counting non-matching stuff...
for(var t=0; t <= i; t++, m++){
var c = text[t]
var p = m
// walk to next match...
while(c != markdown[m] && m < markdown.length){
m++ }
// reached something unrepresentable directly in markdown (html
// entity, symbol, ...)
if(m >= markdown.length){
m = p } }
return m - t }
var offsetAt = function(A, B, i){
i ??= A.length-1
var o = 0
var p = 0
for(var n=0; n <= i; n++){
while(A[n] != B[n+o]){
if(n+o >= B.length){
o = p
break }
o++ }
p = o }
return o }
// Get element text content...
//
// NOTE: this is the same as .innerText but will not add extra "\n" after
// each block element...
var getTexts = function(elem, res=[]){
for(var n of elem.childNodes){
n.nodeType == n.TEXT_NODE ?
res.push(n.textContent)
: getTexts(n, res) }
return res }
var getText = function(elem){
return getTexts(elem).join('') }
//---------------------------------------------------------------------
// Plugins...
// general helpers and utils...
var plugin = {
encode: function(text){
return text
.replace(/(?<!\\)&/g, '&amp;')
.replace(/(?<!\\)</g, '&lt;')
.replace(/(?<!\\)>/g, '&gt;')
.replace(/\\(?!`)/g, '\\\\') },
// XXX make this more generic...
style: function(editor, elem, style, code=undefined){
style = [style].flat()
editor.__styles = [...new Set([
...(editor.__styles ?? []),
...style,
])]
return function(_, text){
elem.style ??= []
elem.style.push(...style)
// handler...
if(typeof(code) == 'function'){
return code(...arguments) }
// explicit code...
if(code != null){
return code }
// get first non-empty group...
var groups = [...arguments].slice(1, -2)
while(groups.length > 0
&& groups[0] == null){
groups.shift() }
return groups[0]
?? '' } },
}
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
// Process attributes in code and update the attributes in element data...
//
// This does:
// - parse attributes
// - update element data (JSON)
// - filter attributes out (optionally)
//
var attributes = {
__proto__: plugin,
// XXX should attr settings be set here or in the Outline???
// ...this includes .__block_attrs__ and .__system_attrs__
//
// Parse attrs...
// .parseBlockAttrs(<text>[, <elem>])
// -> [<elem>, <attrs>, <sys-attrs>]
//
parseBlockAttrs: function(editor, text, elem={}){
var system = editor.__block_attrs__
var attrs = ''
var sysattrs = ''
elem.text = 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){
match = match
.trim()
.split(/(?:[\t ]*::[\t ]*|[\t ]*\n[\t ]*)/g)
while(match.length > 0){
var [name, val] = match.splice(0, 2)
// ignore non-settable attrs...
if(editor.__system_attrs__.includes(name)){
continue }
elem[name] =
val == 'true' ?
true
: val == 'false' ?
false
: val }
return ws })
// build the attr strings...
// NOTE: we are not doing this in the loop above to include all
// the attributes that are in the elem but not explicitly
// given in code...
for(var name in elem){
// ignore non-settable attrs...
if(editor.__system_attrs__.includes(name)){
continue }
var val = elem[name]
if(!(name in system)){
attrs += `\n${name}::${val}`
} else {
sysattrs += `\n${name}::${val}` } }
return [
elem,
attrs,
sysattrs,
] },
// generate code...
//
// this is controlled by the value of editor.__code_attrs__:
// false / undefined - strip attrs
// true - add attrs to code if available
// 'all' - add attrs, including system attrs to
// code if available,
__parse_code__: function(code, editor, elem){
var [elem, attrs, system] = this.parseBlockAttrs(editor, code, elem)
return !editor.__code_attrs__ ?
elem.text
: editor.__code_attrs__ == 'all' ?
elem.text
+ (attrs.length > 0 ?
'\n'+ attrs
: '')
+ (system.length > 0 ?
'\n'+ system
: '')
: attrs.length > 0 ?
elem.text +'\n'+ attrs
: elem.text },
// generate view...
//
// this is controlled by the value of editor.__view_attrs__:
// false / undefined - strip attrs
// true - call the handler XXX
__pre_parse__: function(text, editor, elem){
// NOTE: we are intentionally neglecting system attrs here...
var [elem, attrs, system] = this.parseBlockAttrs(editor, text, elem)
if(editor.__view_attrs__
&& attrs.length > 0){
attrs = editor.threadPlugins('__parse_attrs__', attrs, editor, elem)
if(attrs && attrs.length > 0){
return text +'\n'+ attrs } }
return elem.text },
// XXX
//__parse_attrs__: function(attrs, editor, elem){
// return attrs }
}
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
// XXX revise headings...
var blocks = {
__proto__: plugin,
__pre_parse__: function(text, editor, elem){
return text
// markdown...
// style: headings...
/* XXX chose either this or auto headings -- move docs...
.replace(/^(?<!\\)######\s+([^]*)$/, this.style(editor, elem, ['heading', 'heading-6']))
.replace(/^(?<!\\)#####\s+([^]*)$/, this.style(editor, elem, ['heading', 'heading-5']))
.replace(/^(?<!\\)####\s+([^]*)$/, this.style(editor, elem, ['heading', 'heading-4']))
.replace(/^(?<!\\)###\s+([^]*)$/, this.style(editor, elem, ['heading', 'heading-3']))
.replace(/^(?<!\\)##\s+([^]*)$/, this.style(editor, elem, ['heading', 'heading-2']))
.replace(/^(?<!\\)#\s+([^]*)$/, this.style(editor, elem, ['heading', 'heading-1']))
// XXX EXPERIMENTAL
.replace(/^(?<!\\)@+\s+([^]*)$/, this.style(editor, elem, ['heading', 'auto']))
/*/
// XXX EXPERIMENTAL
// NOTE: '[^]' is the same as [\s\S] but is unique to JS...
.replace(/^(?<!\\)#+\s+([^]*)$/, this.style(editor, elem, ['heading']))
.replace(/^(?<!\\)@+\s+([^]*)$/, this.style(editor, elem, ['heading', 'no-toc']))
//*/
// style: list...
//.replace(/^(?<!\\)[-\*]\s+([^]*)$/m, style('list-item'))
.replace(/^\s*([^]*)(?<!\\):\s*$/, this.style(editor, elem, 'list'))
.replace(/^\s*([^]*)(?<!\\)#\s*$/, this.style(editor, elem, 'numbered-list'))
// style: misc...
.replace(/^\s*(?<!\\)>\s+([^]*)$/, this.style(editor, elem, 'quote'))
.replace(/^\s*(?<!\\)((\/\/|;)\s+[^]*)$/, this.style(editor, elem, 'comment'))
.replace(/^\s*(?<!\\)NOTE:?\s*([^]*)$/, this.style(editor, elem, 'NOTE'))
.replace(/^\s*(?<!\\)XXX\s+([^]*)$/, this.style(editor, elem, 'XXX'))
.replace(/^([^]*)\s*(?<!\\)XXX\s*$/, this.style(editor, elem, 'XXX'))
.replace(/^\s*---\+\s*$/, this.style(editor, elem, 'hr', '<hr>')) } ,
}
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
// XXX add actions...
var quoted = {
__proto__: plugin,
// can be used in:
// <string>.replace(quoted.pattern, quoted.handler)
quote_pattern: /(?<!\\)`(?=[^\s])(([^`]|\\`)*[^\s])(?<!\\)`/gm,
quote: function(_, code){
return `<code>${ this.encode(code) }</code>` },
pre_pattern: /(?<!\\)```(.*\s*\n)((\n|.)*?)\h*(?<!\\)```[ \t]*(?:$|\n)/gm,
preEncode: function(text){
return this.encode(text)
.replace(/`/, '\\`') },
pre: function(_, language, code){
language = language.trim()
language = language ?
'language-'+language
: language
return `<pre>`
+`<code contenteditable="true" class="${language}">${
this.preEncode(code)
}</code>`
+`</pre>` },
map: function(text, func){
return text.replace(this.pre_pattern, func) },
replace: function(text, index, updated){
return this.map(text,
function(match, language, code){
return index-- != 0 ?
match
: ('```'+language
+ (typeof(updated) == 'function' ?
updated(code)
: updated)
+'```') }) },
toHTML: function(text){
return this.map(text, this.handler) },
__pre_parse__: function(text, editor, elem){
return text
.replace(this.pre_pattern, this.pre.bind(this))
.replace(this.quote_pattern, this.quote.bind(this)) },
// XXX is this a good strategy???
__state: undefined,
__keydown__: function(evt, editor, elem){
// code editing...
if(elem.nodeName == 'CODE'
&& elem.getAttribute('contenteditable') == 'true'){
// XXX can keydown and keyup be triggered from different elements???
this.__state = elem.innerText
// XXX move this to keyboard.js...
if(evt.key == 'Escape'){
editor.focus(elem) }
// XXX not sure if the is needed with keyboard.js...
return false } },
// defined <plugin>.__editedview__(..) handler
__keyup__: function(evt, editor, elem){
var elem = evt.target
if(elem.nodeName == 'CODE'
&& elem.getAttribute('contenteditable') == 'true'){
// trigger if state actually changed..
this.__state != elem.innerText
&& editor.runPlugins('__editedview__', evt, editor, elem) } },
__focusout__: function(){
this.__state = undefined },
__editedview__: function(evt, editor, elem){
// editable code...
var block = editor.get(elem)
var code = block.querySelector('.code')
var update = elem.innerText
var i = [...block
.querySelectorAll('.view code[contenteditable=true]')]
.indexOf(elem)
// update element content...
code.value = quoted.replace(code.value, i, update)
return this },
}
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
var tasks = {
__proto__: plugin,
status: [
'DONE',
'REJECT',
//'TODO',
],
// format:
// [
// <status>: <pattern>,
// ...
// ]
__status_patterns: undefined,
__status_pattern_tpl: `^(?:\\s*(?<!\\\\)$STATUS:?\\s+(.*)$|(.*)\\s+(?<!\\\\)$STATUS\\s*)$`,
get status_patterns(){
var that = this
return (this.__status_patterns
??= this.status
.reduce(function(res, status){
res[status] = new RegExp(
that.__status_pattern_tpl
.replace(/\$STATUS/g, status), 'm')
return res }, {})) },
// State...
updateStatus: function(editor, node){
node = editor.get(node)
if(node == null){
return this }
var state = node
.querySelector('.view')
.querySelector('.completion')
if(state){
var c =
((node.querySelectorAll('input[type=checkbox]:checked').length
/ node.querySelectorAll('input[type=checkbox]').length)
* 100)
.toFixed(0)
!isNaN(c)
&& state.setAttribute('completion', c +'%') }
return this },
updateBranchStatus: function(editor, node){
if(!node){
return this }
var outline = editor.outline
var p = node
while(p !== outline){
this.updateStatus(editor, p)
p = editor.get(p, 'parent') }
return this },
updateAllStatus: function(editor){
for(var e of [...editor.outline.querySelectorAll('.block>.view .completion')]){
this.updateStatus(editor, e) }
return this },
// Checkboxes...
getCheckbox: function(editor, elem, offset=0){
elem = elem
?? editor.get()
if(elem == null
|| (offset == 0
&& elem.type == 'checkbox')){
return elem }
var node = editor.get(elem)
var view = node.querySelector('.view')
var cur = view.querySelector('input[type=checkbox].selected')
?? view.querySelector('input[type=checkbox]')
if(offset == 0 && cur == null){
return}
var checkboxes = [...editor.outline.querySelectorAll('.view input[type=checkbox]')]
if(checkboxes.length == 0){
return }
// no checkbox in node -> get closest to cur in offset direction...
if(cur == null){
var nodes = [...editor.outline.querySelectorAll('.block')]
var checkbox_nodes = checkboxes
.map(function(e){
return editor.get(e) })
var i = nodes.indexOf(node)
var p, n
for(var c of checkbox_nodes){
p = n
var j = nodes.indexOf(c)
if(j >= i){
n = j
break } }
cur = offset < 0 ?
nodes[p]
: nodes[n] }
var elem = cur == null ?
checkboxes.at(
offset > 0 ?
offset -1
: offset)
: checkboxes.at(
(checkboxes.indexOf(cur) + offset) % checkboxes.length)
return elem },
updateCheckboxes: function(editor, elem){
elem = this.getCheckbox(editor, elem)
var node = editor.get(elem, false)
var data = editor.data(node)
var text = node.querySelector('.code')
// get the checkbox order...
var i = [...node.querySelectorAll('input[type=checkbox]')].indexOf(elem)
var to = elem.checked ?
'[X]'
: '[_]'
var toggle = function(m){
return i-- == 0 ?
to
: m }
text.value = text.value.replace(/\[[Xx_]\]/g, toggle)
// NOTE: status is updated via a timeout set in .__parse__(..)...
editor.setUndo(
editor.path(node),
'update',
[editor.path(node),
data])
return elem },
toggleCheckbox: function(editor, checkbox, offset){
checkbox = this.getCheckbox(editor, checkbox, offset)
if(checkbox){
checkbox.checked = !checkbox.checked
this.updateCheckboxes(editor, checkbox)
this.updateBranchStatus(editor, checkbox) }
return checkbox },
selectCheckbox: function(editor, checkbox, offset){
checkbox = this.getCheckbox(editor, checkbox, offset)
if(checkbox == null){
return }
var checkboxes = editor.get(checkbox)
.querySelector('.view')
.querySelectorAll('input[type=checkbox]')
if(checkboxes.length == 0){
return }
for(var c of checkboxes){
c.classList.remove('selected') }
checkbox.classList.add('selected')
editor.show(checkbox)
return checkbox },
nextCheckbox: function(editor, node='focused', offset=1){
node = this.selectCheckbox(editor, node, offset)
editor.focus(node)
return node },
prevCheckbox: function(editor, node='focused', offset=-1){
return this.nextCheckbox(editor, node, offset) },
// Status...
toggleStatus: function(editor, elem, status='next', patterns=this.status_patterns){
var node = editor.get(elem)
if(node == null){
return }
var data = editor.data(elem, false)
var text = node.querySelector('.code')
var value = text.value
var s = text.selectionStart
var e = text.selectionEnd
var l = text.value.length
var p = Object.entries(patterns)
for(var i=0; i<p.length; i++){
var [name, pattern] = p[i]
if(pattern.test(value)){
value = value.replace(pattern, '$1')
if(status != 'off'){
break } } }
if(status != 'off'){
// toggle specific status...
if(status != 'next'){
if(i == p.length
|| name != status){
value = status +' '+ value }
// next...
} else if(i != p.length-1){
// set next...
if(i+1 in p){
value = p[i+1][0] +' '+ value
// set first...
} else {
value = p[0][0] +' '+ value } } }
text.value = value
text.selectionStart = s + (value.length - l)
text.selectionEnd = e + (value.length - l)
editor.update(node)
editor.setUndo(
editor.path(node),
'update',
[editor.path(node),
data])
return node },
toggleDone: function(editor, elem){
return this.toggleStatus(editor, elem, 'DONE') },
toggleReject: function(editor, elem){
return this.toggleStatus(editor, elem, 'REJECT') },
__setup__: function(editor){
return this.updateAllStatus(editor) },
__pre_parse__: function(text, editor, elem){
// handle done..
var done = this.style(editor, elem, 'DONE')
var reject = this.style(editor, elem, 'REJECT')
for(var [n, p] of Object.entries(this.status_patterns)){
text = text
.replace(p,
n == 'DONE' ?
done
: reject) }
return text },
__update_checkboxes_timeout: undefined,
__parse__: function(text, editor, elem){
var res = text
// block checkboxes...
// NOTE: these are separate as we need to align block text
// to leading chekbox...
.replace(/^\s*(?<!\\)\[[_ ]\]\s*/m,
this.style(editor, elem, 'todo', '<input type="checkbox">'))
.replace(/^\s*(?<!\\)\[[Xx]\]\s*/m,
this.style(editor, elem, 'todo', '<input type="checkbox" checked>'))
// inline checkboxes...
.replace(/\s*(?<!\\)\[[_ ]\]\s*/gm,
this.style(editor, elem, 'check', '<input type="checkbox">'))
.replace(/\s*(?<!\\)\[[Xx]\]\s*/gm,
this.style(editor, elem, 'check', '<input type="checkbox" checked>'))
// completion...
// XXX add support for being like a todo checkbox...
.replace(/(?<!\\)\[[%]\]/gm, '<span class="completion"></span>')
// need to update status...
// XXX not sure if this is a good way to do this...
if(res != text && this.__update_checkboxes_timeout == null){
var that = this
this.__update_checkboxes_timeout = setTimeout(function(){
that.__update_checkboxes_timeout = undefined
that.updateAllStatus(editor) }, 200) }
return res },
__focusin__: function(evt, editor, elem){
elem.classList.contains('block')
&& this.selectCheckbox(editor, elem) },
__editedcode__: function(evt, editor, elem){
this.updateBranchStatus(editor, elem)
this.selectCheckbox(editor, elem) },
__click__: function(evt, editor, elem){
// toggle checkbox...
if(elem.type == 'checkbox'){
var node = editor.get(elem)
this.updateCheckboxes(editor, elem)
this.updateBranchStatus(editor, node)
this.selectCheckbox(editor, elem)
node.focus() }
return this },
}
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
// XXX do a better default id...
// XXX make this persistent -- add to code...
var toc = {
__proto__: plugin,
__skip_local_root__: true,
update: function(editor, elem){
var that = this
var outline = editor.outline
var TOCs = [...outline.querySelectorAll('.TOC .view')]
var tocs = [...outline.querySelectorAll('.toc .view')]
if(TOCs.length + tocs.length == 0){
return }
var level = function(node, root=outline){
var depth = 0
var parent = node
while(parent !== root
&& parent != null){
if(parent.classList.contains('block')
&& parent.classList.contains('heading')){
depth++ }
parent = parent.parentElement }
return depth }
// XXX revise...
var seen = new Set()
var makeID = function(text){
var id = encodeURI(
text
.trim()
.replace(/[#?$%:;.,]/g, '')
.replace(/\s+/g, '-'))
if(seen.has(id)
|| document.getElementById(id)){
var i = 1
var candidate = id +'-'+ i
while(seen.has(candidate)
|| document.getElementById(candidate)){
candidate = id +'-'+ i++ }
id = id +'-'+ i }
seen.add(id)
return id }
var makeTOC = function(root=outline){
var index = 0
var lst = document.createElement('ul')
var list = lst
var depth = 1
for(var e of [...root.querySelectorAll('.block.heading>.view')]){
var block = editor.get(e)
// skip the root element???
if(block.classList.contains('no-toc')
|| (!that.__skip_local_root__
&& block === root)){
continue }
var d = level(e, root)
// down...
if(d > depth){
var sub = document.createElement('ul')
lst.append(sub)
lst = sub
depth++
// up...
} else while(d < depth && depth > 0){
lst = lst.parentElement ?? lst
depth-- }
var elem = document.createElement('li')
var id = block.id == '' ?
// XXX do a better default...
//'__'+ index++
makeID(e.innerText)
: block.id
block.id = id
elem.innerHTML = `<a href="#${id}">${e.innerHTML.trim()}</a>`
lst.append(elem) }
return list }
// global tocs...
var list = makeTOC()
for(var toc of TOCs){
toc.innerHTML = ''
toc.append(list.cloneNode(true)) }
// local tocs...
for(var toc of tocs){
toc.innerHTML = ''
toc.append(
makeTOC(
editor.get(toc, 'parent'))) } },
__setup__: function(editor){
return this.update(editor) },
__editedcode__: function(evt, editor, elem){
return this.update(editor, elem) },
__parse__: function(text, editor, elem){
return text
.replace(/^\s*toc\s*$/,
this.style(editor, elem, 'toc', ''))
.replace(/^\s*TOC\s*$/,
this.style(editor, elem, 'TOC', '')) },
}
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
// XXX Hackish...
var syntax = {
__proto__: plugin,
update: function(){
window.hljs
&& hljs.highlightAll()
return this },
__setup__: function(editor){
return this.update() },
// XXX make a local update...
__editedcode__: function(evt, editor, elem){
return this.update(elem) },
__editedview__: function(evt, editor, elem){
// XXX should we also clear the syntax???
delete elem.dataset.highlighted
return this },
// XXX this removes highlighting, can we make it update live???
__focusin__: function(evt, editor, elem){
if(elem.nodeName == 'CODE'
&& elem.getAttribute('contenteditable') == 'true'){
elem.classList.remove('hljs') } },
__focusout__: function(evt, editor, elem){
if(elem.nodeName == 'CODE'
&& elem.getAttribute('contenteditable') == 'true'){
this.update(elem) }
return this },
}
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
var tables = {
__proto__: plugin,
// XXX EXPERIMENTAL
__pre_parse__: function(text, editor, elem){
return text
.replace(/^(--table--)$/m, this.style(editor, elem, 'table-2')) },
__parse__: function(text, editor, elem){
return text
.replace(/^\s*(?<!\\)\|\s*((.|\n)*)\s*\|\s*$/,
this.style(editor, elem,
'table',
function(_, body){
return `<table><tr><td>${
body
.trim()
.replace(/\s*\|\s*\n\s*\|\s*/gm, '</td></tr>\n<tr><td>')
.replace(/\s*\|\s*/gm, '</td><td>')
}</td></td></table>` })) },
}
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
var styling = {
__proto__: plugin,
__parse__: function(text, editor, elem){
return text
// markers...
.replace(/(\s*)(?<!\\)(FEATURE[:?]|Q:|Question:|Note:)(\s*)/gm,
'$1<b class="$2">$2</b>$3')
.replace(/(\s*)(?<!\\)(ASAP|TEST|BUG|FIX|HACK|STUB|WARNING|CAUTION)(\s*)/gm,
'$1<span class="highlight $2">$2</span>$3')
// elements...
.replace(/(\n|^)(?<!\\)---+[\t ]*(\n|$)/gm, '$1<hr>')
// basic styling...
.replace(/(?<!\\)\*(?=[^\s*])(([^*]|\\\*)*[^\s*])(?<!\\)\*/gm, '<b>$1</b>')
.replace(/(?<!\\)~(?=[^\s~])(([^~]|\\~)*[^\s~])(?<!\\)~/gm, '<s>$1</s>')
// XXX this can clash with '[_] .. [_]' checkboxes...
.replace(/(?<!\\)_(?=[^\s_])(([^_]|\\_)*[^\s_])(?<!\\)_/gm, '<i>$1</i>')
// code/quoting...
//.replace(/(?<!\\)`(?=[^\s])(([^`]|\\`)*[^\s])(?<!\\)`/gm, quote)
// XXX support "\==" in mark...
.replace(/(?<!\\)==(?=[^\s])(.*[^\s])(?<!\\)==/gm, '<mark>$1</mark>')
// links...
.replace(/(?<!\\)\[([^\]]*)\]\(([^)]*)\)/g, '<a href="$2">$1</a>')
.replace(/((?:https?:|ftps?:)[^\s]*)(\s*)/g, '<a href="$1">$1</a>$2') },
}
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
// XXX use ligatures for these???
var symbols = {
__proto__: plugin,
// XXX use a single regex with handler func to do these...
symbols: {
// XXX think these are better handled by ligatures...
//'>>': '»',
//'<<': '«',
//'->': '→',
//'<-': '←',
//'=>': '⇒',
//'<=': '⇐',
'(i)': '🛈',
'(c)': '©',
'/!\\': '⚠',
},
get symbols_pattern(){
return (this.symbols != null
&& Object.keys(this.symbols).length > 0) ?
new RegExp(`(?<!\\\\)(${
Object.keys(this.symbols)
.join('|')
.replace(/([\(\)\\\/])/g, '\\$1') })`, 'g')
: undefined },
__parse__: function(text, editor, elem){
var that = this
var p = this.symbols_pattern
text = p ?
text.replace(p,
function(m){
return that.symbols[m] })
: text
return text
.replace(/(?<!\\)---(?!-)/gm, '&mdash;')
.replace(/(?<!\\)--(?!-)/gm, '&ndash;') },
}
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
var escaping = {
__proto__: plugin,
__post_parse__: function(text, editor, elem){
return text
// quoting...
// NOTE: this must be last...
.replace(/(?<!\\)\\(.)/gm, '$1') },
}
//---------------------------------------------------------------------
var JSONOutline = {
__code_attrs__: false,
__view_attrs__: false,
__system_attrs__: [
'text',
'children',
],
__block_attrs__: {
id: 'attr',
collapsed: 'attr',
focused: 'cls',
},
// Plugins...
//
// The order of plugins can be significant in the following cases:
// - parsing
// - event dropping
//
// NOTE: this is split into three to make recomposition simpler for
// inheritance...
// XXX do we need this structure???
//
// XXX split out DOM-specific plugins into Outline.plugins...
pre_plugins: [
attributes,
blocks,
quoted,
],
norm_plugins: [
// NOTE: this needs to be before styling to prevent it from
// treating '[_] ... [_]' as italic...
tasks,
toc,
styling,
// XXX
tables,
symbols,
//syntax,
],
post_plugins: [
// keep this last...
// XXX revise -- should this be external???
escaping,
],
__plugins: undefined,
get plugins(){
return this.__plugins
?? (this.__plugins = [
...this.pre_plugins,
...this.norm_plugins,
...this.post_plugins,
]) },
// NOTE: if a handler returns false it will break plugin execution...
// XXX is this the right way to go???
runPlugins: function(method, ...args){
for(var plugin of this.plugins){
if(method in plugin){
if(plugin[method](...args) === false){
return false } } }
return true },
threadPlugins: function(method, value, ...args){
for(var plugin of this.plugins){
method in plugin
&& (value = plugin[method](value, ...args)) }
return value },
// format:
// {
// <id>: <node>,
// ...
// }
__id_index: undefined,
// format:
// Map([
// [<node>, <parent>],
// ...
// ])
__nodes: undefined,
__path: undefined,
current: undefined,
__iter: function*(node, path, mode){
if(typeof(path) == 'string'){
mode = path
path = null }
path ??= []
yield [path, node]
if(mode == 'visible'
&& node.collapsed){
return }
var i = 0
for(var e of node.children ?? []){
yield* this.__iter(e, [...path, i++], mode) } },
// XXX revise...
nodes: function*(node, mode){
var i = 0
// all nodes..
if(node == null || node == 'all' || node == 'visible'){
for(var e of this.json()){
yield* this.__iter(e, [i++], node) }
// single node...
} else {
var args = [...arguments]
// XXX revise...
if(['all', 'visible'].includes(args.at(-1))){
mode = args.pop() }
yield* this.__iter(
this.get(...args),
mode) } },
[Symbol.iterator]: function*(mode='all'){
for(var node of this.json()){
for(var [_, n] of this.__iter(node, mode)){
yield n } } },
iter: function*(node, mode){
for(var [_, n] of this.nodes(...arguments)){
yield n } },
// XXX
path: function(){},
get: function(node, offset){
},
focus: function(node, offset){
return this.get(
this.__path = this.path(...arguments)) },
index: function(){},
at: function(index){},
indent: function(){},
shift: function(){},
show: function(){},
toggleCollapse: function(){},
remove: function(){},
clear: function(){},
crop: function(){},
uncrop: function(){},
// NOTE: this is auto-populated by plugin.style(..)...
__styles: undefined,
// block render...
//
// This will call plugins':
// .__pre_parse__(..)
// .__parse__(..)
// .__post_parse__(..)
//
// XXX PRE_POST_NEWLINE can we avoid explicitly patching for empty lines after pre???
__code2html__: function(code, elem={}){
var that = this
// only whitespace -> keep element blank...
elem.text = code
if(code.trim() == ''){
return elem }
// helpers...
var run = function(stage, text){
var meth = {
pre: '__pre_parse__',
main: '__parse__',
post: '__post_parse__',
}[stage]
return that.threadPlugins(meth, text, that, elem) }
// stage: pre...
var text = run('pre',
// pre-sanitize...
code.replace(/\x00/g, ''))
// split text into parsable and non-parsable sections...
var sections = text
// split format:
// [ text <match> <type> <body>, ... ]
.split(/(<(pre|code)(?:|\s[^>]*)>((?:\n|.)*)<\/\2>)/g)
// sort out the sections...
var parsable = []
var quoted = []
while(sections.length > 0){
var [section, match] = sections.splice(0, 4)
parsable.push(section)
quoted.push(match) }
// stage: main...
text = run('main',
// parse only the parsable sections...
parsable.join('\x00'))
.split(/\x00/g)
// merge the quoted sections back in...
.map(function(section){
return [section, quoted.shift() ?? ''] })
.flat()
.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 },
// output format...
__code2text__: function(code){
return code
.replace(/(\n\s*)-/g, '$1\\-') },
__text2code__: function(text){
text = text
.replace(/(\n\s*)\\-/g, '$1-')
return this.trim_block_text ?
text.trim()
: text },
parse: function(text){
var that = this
text = text
.replace(/^[ \t]*\n/, '')
text = ('\n' + text)
.split(/\n([ \t]*)(?:- |-\s*$)/gm)
.slice(1)
var tab = ' '.repeat(this.tab_size || 8)
var level = function(lst, prev_sep=undefined, parent=[]){
while(lst.length > 0){
sep = lst[0].replace(/\t/gm, tab)
// deindent...
if(prev_sep != null
&& sep.length < prev_sep.length){
break }
prev_sep ??= sep
// same level...
if(sep.length == prev_sep.length){
var [_, block] = lst.splice(0, 2)
var attrs = {}
attrs.text = that.__text2code__(
that.threadPlugins('__parse_code__', block, that, attrs)
// normalize indent...
.split(new RegExp('\n'+sep+' ', 'g'))
.join('\n'))
parent.push({
collapsed: false,
focused: false,
...attrs,
children: [],
})
// indent...
} else {
parent.at(-1).children = level(lst, sep) } }
return parent }
return level(text) },
data: function(){},
load: function(){},
// Format:
// <json> ::= [
// {
// text: <text>,
// children: <json>,
// ...
// },
// ...
// ]
// XXX
json: function(){},
// XXX add plugin hooks...
// XXX add option to customize indent size...
text: function(node, indent, level){
var that = this
// .text(<indent>, <level>)
if(typeof(node) == 'string'){
;[node, indent=' ', level=''] = [undefined, ...arguments] }
node ??= this.json(node)
indent ??= ' '
level ??= ''
var text = []
for(var elem of node){
text.push(
level +'- '
+ this.__code2text__(elem.text)
.replace(/\n/g, '\n'+ level +' ')
// attrs...
+ (Object.keys(elem)
.reduce(function(res, attr){
return that.__system_attrs__.includes(attr) ?
res
: res
+ (elem[attr] ?
'\n'+level+' ' + `${ attr }:: ${ elem[attr] }`
: '') }, '')),
(elem.children
&& elem.children.length > 0) ?
this.text(elem.children || [], indent, level+indent)
: [] ) }
return text
.flat()
.join('\n') },
// XXX add read-only option...
htmlBlock: function(data, options={}){
var that = this
var parsed = this.__code2html__(data.text, {...data})
var cls = parsed.style ?? []
delete parsed.style
var attrs = []
for(var [attr, value] of Object.entries({...data, ...parsed})){
if(this.__system_attrs__.includes(attr)){
continue }
var i
var type = this.__block_attrs__[attr]
if(type == 'cls'){
value ?
cls.push(attr)
: (i = cls.indexOf(attr)) >= 0 ?
cls.splice(i, 1)
: undefined
} else if(type == 'attr'
|| type == undefined){
// special case: dataset attrs...
if(type == undefined){
attr = 'data-'+ attr }
typeof(value) == 'boolean'?
(value ?
attrs.push(attr)
: (i = attrs.indexOf(attr)) >= 0 ?
attrs.splice(i, 1)
: undefined)
: value != null ?
attrs.push(`${attr}="${value}"`)
: (i = attrs.indexOf(attr)) >= 0 ?
attrs.splice(i, 1)
: undefined } }
var children = (data.children ?? [])
.map(function(data){
return that.htmlBlock(data) })
.join('')
// NOTE: the '\n' at the start of the textarea body below helps
// preserve whitespace when parsing HTML...
return (
`<div class="block ${ cls.join(' ') }" tabindex="0" ${ attrs.join(' ') }>\
<textarea class="code text" value="${ data.text }">\n${ data.text }</textarea>\
<span class="view text">${ parsed.text }</span>\
<div class="children">${ children }</div>\
</div>`) },
html: function(data, options=false){
var that = this
if(typeof(data) == 'boolean'){
options = data
data = undefined }
data = data == null ?
this.json()
: typeof(data) == 'string' ?
this.parse(data)
: data instanceof Array ?
data
: [data]
options =
typeof(options) == 'boolean' ?
{full: options}
: (options
?? {})
var nodes = data
.map(function(data){
return that.htmlBlock(data) })
.join('')
return !options.full ?
nodes
: (
`<div class="editor" autofocus>\
<div class="header"></div>\
<textarea class="code"></textarea>\
<div class="outline" tabindex="0">${ nodes }</div>\
</div>`) },
}
// XXX experiment with a concatinative model...
// .get(..) -> Outline (view)
var Outline = {
__proto__: JSONOutline,
dom: undefined,
// config...
//
left_key_collapses: true,
right_key_expands: true,
change_interval: 1000,
tab_size: 4,
carot_jump_edge_then_block: false,
// XXX not sure what should the default be...
trim_block_text: false,
pre_plugins: [
...JSONOutline.pre_plugins,
],
norm_plugins: [
...JSONOutline.norm_plugins,
],
post_plugins: [
...JSONOutline.post_plugins,
],
get header(){
return this.dom?.querySelector('.header') },
get outline(){
return this.dom?.querySelector('.outline') },
get toolbar(){
return this.dom?.querySelector('.toolbar') },
get code(){
return this.dom?.querySelector('.code')?.value },
set code(value){
if(value == null){
return }
var c = this.dom?.querySelector('.code')
if(c){
c.value = value } },
path: function(node='focused', mode='index'){
if(['index', 'text', 'node', 'data'].includes(node)){
mode = node
node = 'focused' }
var outline = this.outline
var path = []
var node = this.get(node)
while(node != outline){
path.unshift(
mode == 'index' ?
this.get(node, 'siblings').indexOf(node)
: mode == 'text' ?
node.querySelector('.view').innerText
: mode == 'data' ?
this.data(node)
: node)
node = this.get(node, 'parent') }
return path },
//
// .get(<index>)[, <offset>]
// .get(<path>[, <offset>])
// .get(<id>[, <offset>)
// -> <node>
//
// .get('focused'[, <offset>])
// -> <node>
//
// .get('edited'[, <offset>])
// -> <node>
//
// .get('siblings')
// .get('focused', 'siblings')
// -> <nodes>
//
// .get('children')
// .get('focused', 'children')
// -> <nodes>
//
// .get('next')
// .get('focused', 'next')
// -> <node>
//
// .get('prev')
// .get('focused', 'prev')
// -> <node>
//
// .get('all')
// .get('visible')
// .get('editable')
// .get('selected')
// .get('viewport')
// .get('top')
// -> <nodes>
//
// XXX add support for node ID...
// XXX need to be able to get the next elem on same level...
get: function(node='focused', offset){
var that = this
offset =
offset == 'next' ?
1
: offset == 'prev' ?
-1
: offset
var outline = this.outline
// id...
if(typeof(node) == 'string' && node[0] == '#'){
node = outline.querySelector(node) }
// root nodes...
if(node == 'top'){
return [...outline.children] }
// groups defaulting to .outline as base...
if(['all', 'visible', 'editable', 'selected', 'viewport'].includes(node)){
return this.get(outline, node) }
// groups defaulting to .focused as base...
if(['parent', 'next', 'prev', 'children', 'siblings'].includes(node)){
return this.get('focused', node) }
// helpers...
var parent = function(node){
return node === outline ?
outline
: node.parentElement === outline ?
outline
: node?.parentElement?.parentElement }
var children = function(node){
return node === outline ?
[...node.children]
: [...node?.lastChild?.children] }
// single base node...
var edited
;[node, edited] =
typeof(node) == 'number' ?
[this.get('visible').at(node),
edited]
: node instanceof Array ?
[node
.reduce(function(res, i){
return that.get(res, 'children')[i] }, outline),
edited]
: (node == 'outline' || node == 'root') ?
[outline, edited]
: node == 'focused' ?
[outline.querySelector(`.block:focus`)
|| outline.querySelector(`.code:focus`)
|| outline.querySelector('.block.focused'),
edited]
: node == 'edited' ?
[outline.querySelector(`.code:focus`),
outline.querySelector(`.code:focus`)]
: [node , edited]
// get the .block...
if(node instanceof HTMLElement){
while(node !== outline
&& !node.classList.contains('block')){
node = node.parentElement } }
// no reference node...
if(node == null
|| typeof(node) == 'string'){
return undefined }
// parent...
if(offset == 'parent'){
return edited ?
parent(node).querySelector('.code')
: parent(node) }
// node groups...
var nodes =
typeof(offset) == 'number' ?
this.get('visible')
: offset == 'all' ?
[...node.querySelectorAll('.block')]
: offset == 'visible' ?
[...node.querySelectorAll('.block')]
.filter(function(e){
//return e.querySelector('.view').offsetParent != null })
return e.offsetParent != null })
: offset == 'viewport' ?
[...node.querySelectorAll('.block')]
.filter(function(e){
//return e.querySelector('.view').offsetParent != null
// && e.querySelector('.code').visibleInViewport() })
return e.offsetParent != null
&& e.visibleInViewport() })
: offset == 'editable' ?
[...node.querySelectorAll('.block>.code')]
: offset == 'selected' ?
[...node.querySelectorAll('.block[selected]')]
.filter(function(e){
//return e.querySelector('.view').offsetParent != null })
return e.offsetParent != null })
: offset == 'children' ?
children(node)
: offset == 'siblings' ?
children(parent(node))
: undefined
// get node by offset...
if(typeof(offset) == 'number'){
node = nodes.at(nodes.indexOf(node) + offset)
?? nodes[0]
edited = edited ?
node.querySelector('.code')
: edited
nodes = undefined }
return nodes !== undefined ?
edited ?
nodes
.map(function(){
return node.querySelector('.code') })
: nodes
: (edited
?? node) },
at: function(index, nodes='visible'){
return this.get(nodes).at(index) },
focus: function(node='focused', offset){
var elem = this.get(...arguments)
?? this.get(0)
if(elem){
var cur = this.get()
var blocks = this.get('visible')
elem.focus({preventScroll: true})
;(elem.classList.contains('code') ?
elem
: elem.querySelector('.code'))
.scrollIntoView({
block: 'nearest',
// smooth for long jumps and instant for short jumps...
behavior: (cur == null
|| Math.abs(blocks.indexOf(cur) - blocks.indexOf(elem)) > 2) ?
'smooth'
: 'instant'
}) }
return elem },
edit: function(node='focused', offset){
var elem = this.get(...arguments)
if(!elem.classList.contains('code')){
elem = elem.querySelector('.code') }
elem?.focus()
return elem },
// This will prevent spamming the .sync() by limiting calls to one
// per .change_interval
//
// XXX should we call plugin's __change__ live or every second???
__change_timeout: undefined,
__change_requested: false,
__change__: function(options={}){
var that = this
// handle undo...
options.undo
&& this.setUndo(...options.undo)
// long changes...
this.__change_requested = true
if(this.__change_timeout){
return this }
// do the action...
if(this.__change_requested){
this.sync()
this.runPlugins('__change__', this)
this.__change_requested = false }
this.__change_timeout = setTimeout(
function(){
that.__change_timeout = undefined
that.__change_requested
&& that.__change__() },
that.change_interval || 1000)
return this },
/* 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
return this
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) },
//*/
// Update node from data...
//
// NOTE: this does not internally handle undo as it would be too
// granular...
// NOTE: to remove an attribute set it's value to null, undefined,
// 'null', or 'undefined'
update: function(node='focused', data){
var node = this.get(node)
data ??= this.data(node, false)
var parsed = {}
if('text' in data){
var code = node.querySelector('.code')
var html = node.querySelector('.view')
if(this.__code2html__){
// NOTE: we are ignoring the .collapsed attr here
parsed = this.__code2html__(data.text, {...data})
html.innerHTML = parsed.text
// heading...
this.__styles != null
&& node.classList.remove(...this.__styles)
parsed.style
&& node.classList.add(...parsed.style)
delete parsed.style
} else {
html.innerHTML = data.text }
code.value = data.text
code.updateSize() }
// NOTE: this will have no effect if the element is not attached...
//this._updateCodeSize(code) }
//this._syncTextSize(code, html) }
for(var [attr, value] of Object.entries({...data, ...parsed})){
if(this.__system_attrs__.includes(attr)){
continue }
// quoted value...
if(value && /^\s*([`'"])([^\1]*)\1\s*$/.test(value)){
value = value.replace(/^\s*([`'"])([^\1]*)\1\s*$/, '$2') }
var type = this.__block_attrs__[attr]
if(type == 'cls'){
value ?
node.classList.add(attr)
: node.classList.remove(attr)
} else if(type == 'attr'){
typeof(value) == 'boolean'?
(value ?
node.setAttribute(attr, '')
: node.removeAttribute(attr))
: value != null ?
node.setAttribute(attr, value)
: node.removeAttribute(attr)
// dataset...
} else {
// remove attr...
if(value == null
|| value == 'null'
|| value == 'undefined'){
delete node.dataset[attr]
} else {
node.dataset[attr] = value } } }
this.__change__()
return node },
// edit...
indent: function(node='focused', indent='in'){
// .indent(<indent>)
if(node === 'in' || node === 'out'){
indent = node
node = 'focused' }
var cur = this.get(node)
if(!cur){
return }
var prev = this.path(cur)
var siblings = this.get(node, 'siblings')
// deindent...
if(indent == 'out'){
var parent = this.get(node, 'parent')
if(parent != this.outline){
var children = siblings
.slice(siblings.indexOf(cur)+1)
parent.after(cur)
children.length > 0
&& cur.lastChild.append(...children)
this.__change__({undo: [
this.path(cur),
'indent',
['in'],
prev ]}) }
// indent...
} else {
var parent = siblings[siblings.indexOf(cur) - 1]
if(parent){
parent.lastChild.append(cur)
this.__change__({undo: [
this.path(cur),
'indent',
['out'],
prev ]})} }
return cur },
shift: function(node='focused', direction){
if(node == 'up' || node == 'down'){
direction = node
node = 'focused' }
if(direction == null
|| (direction !== 'up'
&& direction != 'down')){
return }
node = this.get(node)
var focused = node.classList.contains('focused')
var siblings = this.get(node, 'siblings')
var i = siblings.indexOf(node)
if(direction == 'up'
&& i > 0){
siblings[i-1].before(node)
} else if(direction == 'down'
&& i < siblings.length-1){
siblings[i+1].after(node) }
focused
&& this.focus()
this.__change__({undo: [
this.path(node),
'shift',
[direction == 'up' ?
'down'
: 'up'] ]})
return this },
// XXX make undo a bit more refined...
remove: function(node='focused'){
var elem = this.get(...arguments)
// XXX HACK...
var data = this.json()
var next
if(elem.classList.contains('focused')){
// XXX need to be able to get the next elem on same level...
this.toggleCollapse(elem, true)
next = elem === this.get(-1) ?
this.get(elem, 'prev')
: this.get(elem, 'next') }
elem?.remove()
next
&& this.focus(next)
this.__change__({undo: [
undefined,
'load',
// XXX HACK...
[data] ]})
return this },
clear: function(){
var data = this.json()
this.outline.innerText = ''
this.__change__({undo: [
undefined,
'load',
[data] ]})
return this },
// expand/collapse...
toggleCollapse: function(node='focused', state='next'){
var that = this
if(node == 'all'){
return this.get('all')
.map(function(node){
return that.toggleCollapse(node, state) }) }
// .toggleCollapse(<state>)
if(['next', true, false].includes(node)){
state = node
node = 'focused' }
node = this.get(node)
if(!node
// only nodes with children can be collapsed...
|| !node.querySelector('.block')){
return }
state = state == 'next' ?
node.getAttribute('collapsed') != ''
: state
state ?
node.setAttribute('collapsed', '')
: node.removeAttribute('collapsed')
this.__change__()
return node },
show: function(node='focused', offset){
var node = this.get(...arguments)
var outline = this.outline
var parent = node
var changes = false
do{
parent = parent.parentElement
changes = changes
|| parent.getAttribute('collapsed') == ''
parent.removeAttribute('collapsed')
} while(parent !== outline)
changes
&& this.__change__()
return node },
// crop...
// XXX the header links are not component-compatible...
crop: function(node='focused'){
this.dom.classList.add('crop')
for(var block of [...this.outline.querySelectorAll('[cropped]')]){
block.removeAttribute('cropped') }
this.get(...arguments).setAttribute('cropped', '')
// build header path...
this.header.innerHTML =
`<span class="path-item" onclick="editor.uncrop('all')">/</span> `
+ this.path(...arguments, 'text')
.slice(0, -1)
.map(function(s, i, {length}){
return `<span class="path-item" uncrop="${ length-i }">${
plugin.encode(s)
}</span> ` })
.join(' / ')
return this },
uncrop: function(count=1){
var outline = this.outline
var top = this.get(0)
for(var block of [...this.outline.querySelectorAll('[cropped]')]){
block.removeAttribute('cropped') }
// crop parent if available...
while(count != 'all'
&& count > 0
&& top !== outline){
top = this.get(top, 'parent')
count-- }
if(count == 'all' || top === outline){
this.dom.classList.remove('crop')
this.header.innerHTML = ''
} else {
this.crop(top) }
return this },
// undo...
// NOTE: calling .setUndo(..) will drop the redo stack, but this does
// not happen when calling a method via .undo(..)/.redo(..) as we
// are reassigning the stacks manually.
__undo_stack: undefined,
__redo_stack: undefined,
setUndo: function(path, action, args, next){
;(this.__undo_stack ??= []).push([path, action, args, next])
this.__redo_stack = undefined
return this },
mergeUndo: function(n, stack){
stack ??= this.__undo_stack
if(stack == null || stack.length == 0){
return this }
stack.push(
stack.splice(-n, n)
.map(function(e){
return typeof(e[1]) == 'string' ?
[e]
: e })
.flat())
return this },
clearUndo: function(){
this.__undo_stack = undefined
this.__redo_stack = undefined
return this },
__undo: function(from, to){
if(from == null
|| from.length == 0){
return [from, to] }
var actions = from.pop()
actions = typeof(actions[1]) == 'string' ?
[actions]
: actions
while(actions.length > 0){
var [path, action, args, next] = actions.pop()
var l = from.length
path != null
&& this.focus(path)
this[action](...args)
next != null ?
this.focus(next)
: this.focus() }
if(l < from.length){
to ??= []
to.push(
...from.splice(l, from.length)) }
if(from.length == 0){
from = undefined }
return [from, to] },
undo: function(){
;[this.__undo_stack, this.__redo_stack] =
this.__undo(this.__undo_stack, this.__redo_stack)
return this },
redo: function(){
;[this.__redo_stack] = this.__undo(this.__redo_stack)
return this },
// serialization...
data: function(elem, deep=true){
var that = this
elem =
// all elements...
(elem == 'all' || elem == 'root' || elem == '*') ?
[...this.outline.children]
: elem instanceof Array ?
elem
: this.get(elem)
// multiple nodes...
if(elem instanceof Array){
return elem
.map(function(elem){
return that.data(elem) }) }
// single node...
// XXX move these to config...
var attrs = this.__block_attrs__
var cls_attrs = ['focused']
return {
// NOTE: this is first to prevent it from overriding system attrs...
...elem.dataset,
text: elem.querySelector('.code').value,
...(Object.entries(attrs)
.reduce(function(res, [attr, type]){
if(type == 'attr'){
var val = elem.getAttribute(attr)
if(val != null){
res[attr] = val == '' ?
true
: val } }
if(type == 'cls'){
elem.classList.contains(attr)
&& (res[attr] = true) }
return res }, {})),
...(deep ?
{children: this.data([...elem.lastChild.children])}
: {}),
} },
// Same as .data(..) but by default returns the root nodes.
// NOTE: this always returns an array
json: function(node='all'){
return [this.data(...(
arguments.length == 0 ?
['all']
: arguments))]
.flat() },
// XXX should this handle children???
// XXX revise name...
Block: function(data={}, place=null){
var that = this
if(typeof(data) != 'object'){
place = data
data = {} }
// block...
var block = document.createElement('div')
block.classList.add('block')
block.setAttribute('tabindex', '0')
// XXX hack??
block.setAttribute('cropped', '')
// code...
var code = document.createElement('textarea')
.autoUpdateSize()
code.classList.add('code', 'text')
// view...
var html = document.createElement('span')
html.classList.add('view', 'text')
// children...
var children = document.createElement('div')
children.classList.add('children')
children.setAttribute('tabindex', '-1')
block.append(
code,
html,
children)
this.update(block, data)
// place...
var cur = this.get()
if(place && cur){
place = place == 'prev' ?
'before'
: place
// ... ...
// cur cur
// new new <- before the next after cur
// --- ---
// ... ...
;(place == 'next'
// has children (uncollapsed)...
&& (cur.querySelector('.block')?.offsetParent
// not last sibling...
|| cur !== this.get('siblings').at(-1))) ?
this.get(place).before(block)
// ...
// ---
// cur
// new <- next after cur
// ...
: (place == 'next'
// last sibling...
&& cur === this.get('siblings').at(-1)) ?
cur.after(block)
: (place == 'before' || place == 'after') ?
cur[place](block)
: undefined
//this._updateCodeSize(code)
//this._syncTextSize(code, view)
this.setUndo(this.path(cur), 'remove', [this.path(block)]) }
return block },
/*/ XXX
load: function(data){
var that = this
this.dom.classList.add('loading')
data = typeof(data) == 'string' ?
this.parse(data)
: data instanceof Array ?
data
: data == null ?
this.json()
: [data]
// generate dom...
var level = function(lst){
return lst
.map(function(data){
var elem = that.Block(data)
if((data.children || []).length > 0){
elem.lastChild
.append(...level(data.children)) }
return elem }) }
this
.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')
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 ?
data
: data == null ?
this.json()
: [data]
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')
return this },
//*/
sync: function(){
this.code = this.text()
return this },
// Actions...
prev: function(){},
next: function(){},
above: function(){},
below: function(){},
up: function(){},
down: function(){},
left: function(){},
right: function(){},
__overtravel_timeout: undefined,
__caret_x: undefined,
// XXX move the code here into methods/actions...
// XXX use keyboard.js...
keyboard: {
// XXX might be a good feature to add to keyboard.js...
// ...might even be fun to extend this and add key classes,
// like:
// Modifier
// Function
// Letter
// Number
// ...
// Unhandled
Any: function(evt, key){
if(this.__caret_x
&& this.get('edited')
&& key != 'ArrowUp'
&& key != 'ArrowDown'){
this.__caret_x = undefined } },
// vertical navigation...
// XXX this is a bit hacky but it works -- the caret blinks at
// start/end of block before switching to next, would be
// nice po prevent this...
ArrowUp: function(evt){
var that = this
// overtravel...
var overtravel =
this.__overtravel_timeout != null
&& this.get() === this.get(0)
this.__overtravel_timeout != null
&& clearTimeout(this.__overtravel_timeout)
this.__overtravel_timeout = setTimeout(function(){
that.__overtravel_timeout = undefined }, 100)
if(overtravel){
return }
var edited = this.get('edited')
if(edited){
var g = edited.getTextGeometry()
if(g.line == 0){
evt.preventDefault()
//var left = edited.getBoundingClientRect().x + g.offsetLeft
var left = this.__caret_x =
this.__caret_x
?? edited.getBoundingClientRect().x + g.offsetLeft
edited = that.edit('prev')
// keep caret horizontally constrained...
var bottom = edited.getBoundingClientRect().bottom
/*/ XXX CARET_V_MOVE this is not correct yet...
var view = this.get(edited).querySelector('.view')
var c = getCharOffset(view, left, bottom - 1)
var m = getMarkdownOffset(edited.value, view.innerText, c)
console.log('---', c, m)
edited.selectionStart =
edited.selectionEnd =
c - m }
/*/
edited.selectionStart =
edited.selectionEnd =
edited.getTextOffsetAt(left, bottom - 1) }
//*/
} else {
evt.preventDefault()
this.focus('focused', -1) } },
ArrowDown: function(evt){
var that = this
// overtravel...
var overtravel =
this.__overtravel_timeout != null
&& this.get() === this.get(-1)
this.__overtravel_timeout != null
&& clearTimeout(this.__overtravel_timeout)
this.__overtravel_timeout = setTimeout(function(){
that.__overtravel_timeout = undefined }, 100)
if(overtravel){
return }
var edited = this.get('edited')
if(edited){
var g = edited.getTextGeometry()
if(g.lines == 0 || g.line == g.lines - 1){
evt.preventDefault()
//var left = edited.getBoundingClientRect().x + g.offsetLeft
var left = this.__caret_x =
this.__caret_x
?? edited.getBoundingClientRect().x + g.offsetLeft
edited = that.edit('next')
// keep caret horizontally constrained...
var top = edited.getBoundingClientRect().y
/* XXX CARET_V_MOVE this needs fixing...
var view = this.get(edited).querySelector('.view')
var c = getCharOffset(view, left, top - 1)
var m = getMarkdownOffset(edited.value, view.innerText, c)
console.log('---', c, m)
edited.selectionStart =
edited.selectionEnd =
c - m }
/*/
edited.selectionStart =
edited.selectionEnd =
edited.getTextOffsetAt(left, top + 1) }
//*/
} else {
evt.preventDefault()
this.focus('focused', 1) } },
// horizontal navigation / collapse...
ArrowLeft: function(evt){
var edited = this.get('edited')
if(edited){
// move caret to prev element...
if(edited.selectionStart == edited.selectionEnd
&& edited.selectionStart == 0){
evt.preventDefault()
edited = this.focus('edited', 'prev')
edited.selectionStart =
edited.selectionEnd = edited.value.length + 1 }
return }
if(evt.ctrlKey){
evt.preventDefault()
tasks.prevCheckbox(this)
return }
;((this.left_key_collapses
|| evt.shiftKey)
&& this.get().getAttribute('collapsed') == null
&& this.get('children').length > 0) ?
this.toggleCollapse(true)
: this.focus('parent') },
ArrowRight: function(evt){
var that = this
// overtravel...
var overtravel =
this.__overtravel_timeout != null
&& this.get() === this.get(-1)
this.__overtravel_timeout != null
&& clearTimeout(this.__overtravel_timeout)
this.__overtravel_timeout = setTimeout(function(){
that.__overtravel_timeout = undefined }, 100)
if(overtravel){
return }
var edited = this.get('edited')
if(edited){
// move caret to next element...
if(edited.selectionStart == edited.selectionEnd
&& edited.selectionStart == edited.value.length){
evt.preventDefault()
edited = this.focus('edited', 'next')
edited.selectionStart =
edited.selectionEnd = 0 }
return }
if(evt.ctrlKey){
evt.preventDefault()
tasks.nextCheckbox(this)
return }
if(this.right_key_expands){
this.toggleCollapse(false)
this.focus('next')
} else {
evt.shiftKey ?
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 that = this
if(this.get('edited')){
return }
if(evt.shiftKey
|| evt.ctrlKey){
evt.preventDefault()
this.shift('up')
} else {
var viewport = that.get('viewport')
viewport[0] === that.get(0) ?
that.focus(0)
: that.focus(
viewport[0], 'prev') } },
PageDown: function(evt){
var that = this
if(this.get('edited')){
return }
if(evt.shiftKey
|| evt.ctrlKey){
evt.preventDefault()
this.shift('down')
} else {
var viewport = that.get('viewport')
viewport.at(-1) === that.get(-1) ?
that.focus(-1)
: that.focus(
that.get('viewport').at(-1), 'next') } },
// indent..
Tab: function(evt){
evt.preventDefault()
var edited = this.get('edited')
var node = this.show(
this.indent(evt.shiftKey ?
'out'
: 'in'))
// keep focus in node...
;(edited ?
edited
: node)?.focus() },
// edit mode...
O: function(evt){
if(!this.get('edited')){
evt.preventDefault()
this.edit(
this.Block('before')) } },
o: function(evt){
if(!this.get('edited')){
evt.preventDefault()
this.edit(
this.Block('next')) } },
Enter: function(evt){
var edited = this.get('edited')
if(edited){
if(evt.ctrlKey
|| evt.shiftKey){
var that = this
// NOTE: setTimeout(..) because we need the input of
// the key...
setTimeout(function(){
that.update(edited) }, 0)
return }
// split text...
evt.preventDefault()
var a = edited.selectionStart
var b = edited.selectionEnd
// position 0: focus empty node above...
if(a == 0
&& edited.value.trim() != ''){
this.Block('prev')
this.edit('prev')
// focus new node...
} else {
var prev = edited.value.slice(0, a)
var next = edited.value.slice(b)
edited.value = prev
this.Block({text: next}, 'next')
edited = this.edit('next')
edited.selectionStart = 0
edited.selectionEnd = 0
this.mergeUndo(2) }
return }
// view -> edit...
evt.preventDefault()
this.edit() },
Escape: function(evt){
if(this.get('edited')){
this.focus()
} else {
this.uncrop() } },
s_Escape: function(evt){
if(this.get('edited')){
this.focus()
} else {
this.uncrop('all') } },
c: function(evt){
if(!this.get('edited')){
this.crop() } },
c_z: function(evt){
if(!this.get('edited')){
evt.preventDefault()
this.undo() } },
c_s_z: function(evt){
if(!this.get('edited')){
evt.preventDefault()
this.redo() } },
U: function(evt){
if(!this.get('edited')){
this.redo() } },
u: function(evt){
if(!this.get('edited')){
this.undo() } },
Delete: function(evt){
var edited = this.get('edited')
if(edited){
if(edited.selectionStart == edited.value.length){
var next = this.get('edited', 'next')
// can't reclaim nested children...
if(this.get(next, 'children').length > 0){
return }
// do not delete past the top element...
if(this.get(0).querySelector('.code') === next){
return }
evt.preventDefault()
var i = edited.value.length
edited.value += next.value
edited.selectionStart = i
edited.selectionEnd = i
this.remove(next) }
return }
this.remove() },
Backspace: function(evt){
var edited = this.get('edited')
if(edited
&& edited.selectionEnd == 0
// can't reclaim nested children...
&& this.get(edited, 'children').length == 0){
var prev = this.get('edited', 'prev')
// do not delete past the bottom element...
if(this.get(-1).querySelector('.code') === prev){
return }
evt.preventDefault()
var i = prev.value.length
prev.value += edited.value
this.edit(prev)
prev.selectionStart = i
prev.selectionEnd = i
this.remove(edited)
return } },
a_s: function(evt){
// toggle done...
evt.preventDefault()
tasks.toggleStatus(this) },
a_x: function(evt){
// toggle done...
evt.preventDefault()
tasks.toggleDone(this) },
a_r: function(evt){
// toggle done...
evt.preventDefault()
tasks.toggleReject(this) },
// selection...
// XXX need more work...
// - should we select the .block or .text???
// - we should remember the first state and apply it (a-la FAR)
// and not simply toggle on/off per node...
Shift: function(evt){
if(this.get('edited')){
return }
// XXX set selection mode
// ...need to reset this when shift key is released...
// one way to do this is to save a press id and reset
// it each call -- if the id has changed since lass s-up
// is pressed then reset mode...
},
s_ArrowUp: function(evt){
if(this.get('edited')){
return }
var elem = this.get()
elem.hasAttribute('selected') ?
elem.removeAttribute('selected')
: elem.setAttribute('selected', '')
this.keyboard.ArrowUp.call(this, evt) },
s_ArrowDown: function(evt){
if(this.get('edited')){
return }
var elem = this.get()
elem.hasAttribute('selected') ?
elem.removeAttribute('selected')
: elem.setAttribute('selected', '')
this.keyboard.ArrowDown.call(this, evt) },
c_d: function(evt){
if(this.get('edited')){
return }
evt.preventDefault()
for(var e of this.get('selected')){
e.removeAttribute('selected') } },
c_a: function(evt){
if(this.get('edited')){
return }
evt.preventDefault()
for(var e of this.get('all')){
e.setAttribute('selected', '') } },
// toggle checkbox...
' ': function(evt){
if(this.get('edited') != null){
return }
evt.preventDefault()
tasks.toggleCheckbox(this) },
},
setup: function(dom){
var that = this
this.dom = dom
// outline...
var outline = this.outline
// update stuff already in DOM...
for(var elem of [...outline.querySelectorAll('textarea')]){
elem.autoUpdateSize() }
// click...
// XXX revise...
// XXX tap support...
// XXX support selection from first click... (see: mousemove handler)
var selecting, start
outline.addEventListener('mousedown',
function(evt){
var elem = evt.target
// prevent clicking through children to parent elements...
if(elem.classList.contains('children')){
evt.preventDefault()
outline.focus()
return }
// place the cursor where the user clicked in code/text...
if(elem.classList.contains('code')
&& document.activeElement !== elem){
that.__caret_x = undefined
var view = that.get(elem).querySelector('.view')
var initial = elem.selectionStart
var c = getCharOffset(view, evt.clientX, evt.clientY)
var m = getMarkdownOffset(elem.value, getText(view), c)
// selecting an element with text offset by markup...
if(m != 0){
evt.preventDefault()
selecting = elem }
start = c == null ?
elem.value.length
: c + m
// NOTE: this is done on next frame to allow the
// browser to place the caret before we correct
// its position... (if .preventDefault() was not called)
setTimeout(function(){
elem.focus()
elem.selectionStart =
elem.selectionEnd =
start }, 0) } })
outline.addEventListener('mousemove',
function(evt){
// handle selection in element with text offset by markup...
if(selecting != null){
var c = selecting.getTextOffsetAt(evt.clientX, evt.clientY)
if(c > start){
selecting.selectionStart = start
selecting.selectionEnd = c
} else {
selecting.selectionStart = c
selecting.selectionEnd = start } } })
outline.addEventListener('mouseup',
function(evt){
selecting = undefined })
outline.addEventListener('click',
function(evt){
var elem = evt.target
// prevent focusing parent by clicking between blocks...
if(elem.classList.contains('children')){
return }
// empty outline -> create new eleemnt...
if(elem.classList.contains('outline')
&& elem.children.length == 0){
// create new eleemnt and edit it...
var block = that.Block()
that.outline.append(block)
that.edit(block)
return }
// expand/collapse
if(elem.classList.contains('view')){
// click: left of elem (outside)
if(evt.offsetX < 0){
// XXX item menu?
// click: right of elem (outside)
} else if(elem.offsetWidth < evt.offsetX){
that.toggleCollapse(that.get(elem))
// click inside element...
} else {
// XXX
} }
// edit of focus...
// NOTE: this is useful if element text is hidden but the
// frame is still visible...
if(elem.classList.contains('block')){
elem.querySelector('.code').focus() }
// focus viewport...
// XXX this does not work because by this point there is
// no focused element...
if(elem === outline){
var cur = that.get()
var viewport = that.get('viewport')
if(!viewport.includes(cur)){
var visible = that.get('visible')
var i = visible.indexOf(cur)
var v = visible.indexOf(viewport[0])
i < v ?
that.focus(viewport[0])
: that.focus(viewport.at(-1)) } }
that.runPlugins('__click__', evt, that, elem) })
// keyboard handling...
outline.addEventListener('keydown',
function(evt){
var elem = evt.target
if(that.runPlugins('__keydown__', evt, that, evt.target) !== true){
return }
// handle keyboard...
// 'Any' key...
if('Any' in that.keyboard){
if(that.keyboard.Any.call(that, evt, evt.key) === false){
return } }
// keys/mods...
var keys = []
evt.ctrlKey
&& keys.push('c_' + evt.key)
evt.ctrlKey && evt.altKey
&& keys.push('c_a_' + evt.key)
evt.ctrlKey && evt.shiftKey
&& keys.push('c_s_' + evt.key)
evt.altKey && evt.ctrlKey && evt.shiftKey
&& keys.push('c_a_s_' + evt.key)
evt.altKey
&& keys.push('a_' + evt.key)
evt.altKey && evt.shiftKey
&& keys.push('a_s_' + evt.key)
evt.shiftKey
&& keys.push('s_' + evt.key)
keys.push(evt.key)
for(var k of keys){
if(k in that.keyboard){
that.keyboard[k].call(that, evt, k)
break } } })
// update code block...
outline.addEventListener('keyup',
function(evt){
var elem = evt.target
// update element state...
if(elem.classList.contains('code')){
// NOTE: for some reason setting the timeout here to 0
// makes FF sometimes not see the updated text...
setTimeout(function(){
that.update(elem.parentElement) }, 0) }
that.runPlugins('__keyup__', evt, that, elem) })
// toggle view/code of nodes...
outline.addEventListener('focusin',
function(evt){
var elem = evt.target
// ignore children container...
if(elem.classList.contains('children')){
return }
// handle focus...
if(elem !== that.outline){
for(var e of [...that.dom.querySelectorAll('.focused')]){
e.classList.remove('focused') }
that.get('focused')?.classList?.add('focused') }
// textarea...
if(elem.classList.contains('code')){
elem.dataset.original = elem.value
elem.updateSize() }
// XXX do we need this???
that.runPlugins('__focusin__', evt, that, elem) })
outline.addEventListener('focusout',
function(evt){
var elem = evt.target
// update code...
if(elem.classList.contains('code')){
var block = that.get(elem)
// clean out attrs...
elem.value =
that.trim_block_text ?
that.threadPlugins('__parse_code__', elem.value, that).trim()
: that.threadPlugins('__parse_code__', elem.value, that)
that.update(block)
// undo...
if(elem.value != elem.dataset.original){
that.setUndo(
that.path(elem),
'update',
[that.path(elem), {
...that.data(elem),
text: elem.dataset.original,
}])
delete elem.dataset.original }
// give the browser a chance to update the DOM...
// XXX revise...
setTimeout(function(){
that.runPlugins('__editedcode__', evt, that, elem)
// this will resize the text to fill the available area...
elem.style.removeProperty('height') }, 0) }
that.runPlugins('__focusout__', evt, that, elem) })
// update .code...
outline.addEventListener('change',
function(evt){
that.__change__() })
// header...
var header = this.header
header.addEventListener('click',
function(evt){
var elem = evt.target
if(elem.classList.contains('path-item')){
that.uncrop(elem.getAttribute('uncrop') ?? 'all') } })
// toolbar...
var toolbar = this.toolbar
if(toolbar){
// handle return of focus when clicking toolbar...
var focus_textarea
var cahceNodeType = function(){
// NOTE: for some reason .activeElement returns an element
// that is not in the DOM after the action is done...
focus_textarea = document.activeElement.nodeName == 'TEXTAREA' }
var refocusNode = function(){
focus_textarea ?
editor.get().querySelector('.code').focus()
: editor.focus()
focus_textarea = undefined }
// cache the focused node type before focus changes...
toolbar.addEventListener('mousedown', cahceNodeType)
// refocus the node after we are done...
toolbar.addEventListener('click', refocusNode) }
// code...
var code = this.code
if(code){
var t = Date.now()
this.load(code
.replace(/&lt;/g, '<')
.replace(/&gt;/g, '>'))
console.log(`Parse: ${Date.now() - t}ms`) }
this.clearUndo()
this.runPlugins('__setup__', this)
// autofocus...
if(this.dom.getAttribute('autofocus') != null){
/*
setTimeout(function(){
that.focus() }, 0) }
/*/
// XXX this for some reason takes lots of time at this point...
this.focus() }
//*/
return this },
}
//---------------------------------------------------------------------
// Custom element...
window.customElements.define('outline-editor',
window.OutlineEditor =
Object.assign(
function(){
var obj = Reflect.construct(HTMLElement, [...arguments], OutlineEditor)
var shadow = obj.attachShadow({mode: 'open'})
var style = document.createElement('link');
style.setAttribute('rel', 'stylesheet');
style.setAttribute('href', 'editor.css');
// XXX it is not rational to have this...
var editor = obj.dom = document.createElement('div')
editor.classList.add('editor')
var header = document.createElement('div')
header.classList.add('header')
var outline = document.createElement('div')
outline.classList.add('outline')
outline.setAttribute('tabindex', '0')
//var toolbar = document.createElement('div')
//toolbar.classList.add('toolbar')
// XXX can't yet get rid of the editor element here...
// - handling autofocus of host vs. shadow???
// - CSS not working correctly yet...
// ...is this feasible???
editor.append(
style,
header,
outline)
shadow.append(editor)
console.log('SETUP')
obj.setup(editor)
return obj },
// constructor stuff...
{
observedAttributes: [
'value',
'session-storage',
'local-storage',
],
prototype: Object.assign(
{
__proto__: HTMLElement.prototype,
// XXX HACK these are copies from Outline, use
// object.mixin(...) instead...
get header(){
return this.dom?.querySelector('.header') },
set header(val){},
get outline(){
return this.dom?.querySelector('.outline') },
set outline(val){},
get toolbar(){
return this.dom?.querySelector('.toolbar') },
set toolbar(val){},
// NOTE: this is here to break recursion of trying to set
// html's value both in .code that is called both when
// setting .value and from .attributeChangedCallback(..)
get __code(){
return this.code },
set __code(value){
if(value == null){
return }
// XXX is this the right way to do this???
this.__sessionStorage
&& (sessionStorage[this.__sessionStorage] = value)
this.__localStorage
&& (localStorage[this.__localStorage] = value) },
get code(){
return this.hasAttribute('value') ?
this.getAttribute('value')
: HTMLElement.decode(this.innerHTML) },
set code(value){
if(value == null){
return }
// XXX this can break in conjunction with .attributeChangedCallback(..)
if(this.hasAttribute('value')){
this.setAttribute('value', value)
} else {
this.innerHTML = HTMLElement.encode(value) }
this.__code = value },
// XXX do we need this???
// ...rename .code -> .value ???
get value(){
return this.code },
set value(value){
this.code = value },
connectedCallback: function(){
var that = this
// load the data...
setTimeout(function(){
that.load(that.code) }, 0) },
// XXX do we need to before == after check???
attributeChangedCallback(name, before, after){
if(name == 'local-storage'){
this.__localStorage = after
// NOTE: we setting .code here because we will
// .load(..) at .setup(..)
sessionStorage[after]
&& (this.code = sessionStorage[after]) }
if(name == 'session-storage'){
this.__sessionStorage = after
sessionStorage[after]
&& (this.code = sessionStorage[after]) }
// NOTE: if other sources are active but unset this
// should provide the default, otherwise it will
// get overwritten by the value in .code by .load(..)
if(name == 'value'){
// see notes for .__code
this.__code = after }
},
},
// XXX this will fail due to all the getters/setters -- use object.mixin(..)...
Outline),
}))
/**********************************************************************
* vim:set ts=4 sw=4 : */
Reference in New Issue View Git Blame Copy Permalink