flynx/pWiki
1
1
Fork 0
mirror of https://github.com/flynx/pWiki.git synced 2025-10-31 02:50:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

added basic serialization...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2023-09-27 14:08:30 +03:00
parent e01d5b54cb
commit 9e4f76a2e7
1 changed files with 56 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
experiments/outline-editor/index.html
View File

@ -183,6 +183,30 @@ var createBlock = function(place=none){
&& cur[place](block) && cur[place](block)
return block } return block }
var json = function(node){
node ??= document.querySelector('.editor')
return [...node.children]
.map(function(elem){
return elem.nodeName != 'DIV' ?
[]
: [{
text: elem.querySelector('span').innerHTML,
collapsed: elem.getAttribute('collapsed') != null,
children: json(elem)
}] })
.flat() }
var markdown = function(node, indent=''){
node ??= json(node)
var text = ''
for(var elem of node){
text +=
indent
+'- '
+ elem.text
.replace(/\n/g, '\n '+indent)
+'\n'
+ markdown(elem.children || [], indent+' ') }
return text }
// XXX do a caret api... // XXX do a caret api...
@ -331,38 +355,6 @@ var setup = function(){
</script> </script>
</head> </head>
<body onload="setup()"> <body onload="setup()">
<pre>
TODO:
- <s>navigation</s>
- <s>expand/collapse subtree</s>
- <s>shift subtree up/down</s>
- <s>create node</s>
- <s>edit node</s>
- undo delete node
- copy/paste nodes/trees
- shifting nodes up/down
- multiple node selection
- mouse controls
- touch controls
- serialize/deserialize
- add optional styling to nodes
Controls:
up - focus node above
down - focus node below
left - focus parent node
right - focus first child node
tab - indent node
s-tab - deindent node
s-left - collapse node
s-right - expand node
enter - normal mode: edit node
- edit mode: create node below
esc - exit edit mode
</pre>
<hr>
<div class="editor"> <div class="editor">
<div tabindex=0> <div tabindex=0>
<span><i>root</i></span><textarea></textarea> <span><i>root</i></span><textarea></textarea>
@ -391,6 +383,38 @@ text lines</span><textarea></textarea>
</div> </div>
</div> </div>
<hr>
<pre>
TODO:
- mouse controls
- touch controls
- <s>navigation</s>
- <s>expand/collapse subtree</s>
- <s>shift subtree up/down</s>
- <s>create node</s>
- <s>edit node</s>
- undo delete node
- copy/paste nodes/trees
- shifting nodes up/down
- multiple node selection
- <s>serialize</s>/deserialize
- add optional styling to nodes
Controls:
up - focus node above
down - focus node below
left - focus parent node
right - focus first child node
tab - indent node
s-tab - deindent node
s-left - collapse node
s-right - expand node
enter - normal mode: edit node
- edit mode: create node below
esc - exit edit mode
</pre>
</body> </body>
</html> </html>
<!-- vim:set ts=4 sw=4 : --> <!-- vim:set ts=4 sw=4 : -->